2
0
Fork 0
mirror of https://github.com/derf/travelynx synced 2024-12-13 22:42:37 +00:00
travelynx/sass/components/_timepicker.scss

183 lines
2.8 KiB
SCSS

/* Timepicker Containers */
.timepicker-modal {
max-width: 325px;
max-height: none;
}
.timepicker-container.modal-content {
display: flex;
flex-direction: column;
padding: 0;
}
.text-primary {
color: rgba(255, 255, 255, 1);
}
/* Clock Digital Display */
.timepicker-digital-display {
flex: 1 auto;
background-color: $secondary-color;
padding: 10px;
font-weight: 300;
}
.timepicker-text-container {
font-size: 4rem;
font-weight: bold;
text-align: center;
color: rgba(255, 255, 255, 0.6);
font-weight: 400;
position: relative;
user-select: none;
}
.timepicker-span-hours,
.timepicker-span-minutes,
.timepicker-span-am-pm div {
cursor: pointer;
}
.timepicker-span-hours {
margin-right: 3px;
}
.timepicker-span-minutes {
margin-left: 3px;
}
.timepicker-display-am-pm {
font-size: 1.3rem;
position: absolute;
right: 1rem;
bottom: 1rem;
font-weight: 400;
}
/* Analog Clock Display */
.timepicker-analog-display {
flex: 2.5 auto;
}
.timepicker-plate {
background-color: $timepicker-clock-plate-bg;
border-radius: 50%;
width: 270px;
height: 270px;
overflow: visible;
position: relative;
margin: auto;
margin-top: 25px;
margin-bottom: 5px;
user-select: none;
}
.timepicker-canvas,
.timepicker-dial {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.timepicker-minutes {
visibility: hidden;
}
.timepicker-tick {
border-radius: 50%;
color: $timepicker-clock-color;
line-height: 40px;
text-align: center;
width: 40px;
height: 40px;
position: absolute;
cursor: pointer;
font-size: 15px;
}
.timepicker-tick.active,
.timepicker-tick:hover {
background-color: transparentize($secondary-color, .75);
}
.timepicker-dial {
transition: transform 350ms, opacity 350ms;
}
.timepicker-dial-out {
&.timepicker-hours {
transform: scale(1.1, 1.1);
}
&.timepicker-minutes {
transform: scale(.8, .8);
}
opacity: 0;
}
.timepicker-canvas {
transition: opacity 175ms;
line {
stroke: $secondary-color;
stroke-width: 4;
stroke-linecap: round;
}
}
.timepicker-canvas-out {
opacity: 0.25;
}
.timepicker-canvas-bearing {
stroke: none;
fill: $secondary-color;
}
.timepicker-canvas-bg {
stroke: none;
fill: $secondary-color;
}
/* Footer */
.timepicker-footer {
margin: 0 auto;
padding: 5px 1rem;
display: flex;
justify-content: space-between;
}
.timepicker-clear {
color: $error-color;
}
.timepicker-close {
color: $secondary-color;
}
.timepicker-clear,
.timepicker-close {
padding: 0 20px;
}
/* Media Queries */
@media #{$medium-and-up} {
.timepicker-modal {
max-width: 600px;
}
.timepicker-container.modal-content {
flex-direction: row;
}
.timepicker-text-container {
top: 32%;
}
.timepicker-display-am-pm {
position: relative;
right: auto;
bottom: auto;
text-align: center;
margin-top: 1.2rem;
}
}