react-toolbox/components/time_picker/style.clock.scss

103 lines
2.1 KiB
SCSS

@import "../base";
@import "./config";
.root {
padding: $clock-padding;
}
.placeholder {
position: relative;
z-index: $z-index-high;
}
.wrapper {
position: absolute;
width: 100%;
background-color: $color-divider;
border-radius: 50%;
}
.face {
position: absolute;
top: 50%;
left: 50%;
z-index: $z-index-high;
cursor: pointer;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
}
.number {
position: relative;
width: $clock-number-size;
height: $clock-number-size;
margin-top: - $clock-number-size / 2;
margin-left: - $clock-number-size / 2;
text-align: center;
pointer-events: none;
user-select: none;
&.active {
color: $clock-primary-contrast-color;
}
}
.hand {
position: absolute;
bottom: 50%;
left: 50%;
display: block;
width: $clock-hand-width;
margin-left: - $clock-hand-width / 2;
background-color: $clock-primary-color;
transform-origin: 50% 100%;
&:before {
position: absolute;
bottom: 0;
left: 50%;
width: $clock-hand-dot-size;
height: $clock-hand-dot-size;
margin-bottom: - $clock-hand-dot-size / 2;
margin-left: - $clock-hand-dot-size / 2;
content: "";
background-color: $clock-primary-color;
border-radius: 50%;
}
&.small > .knob {
background-color: $clock-primary-hover-color;
&:after {
position: absolute;
top: 50%;
left: 50%;
width: $clock-knob-small-size;
height: $clock-knob-small-size;
margin-top: - $clock-knob-small-size / 2;
margin-left: - $clock-knob-small-size / 2;
content: "";
background: $clock-primary-color;
border-radius: 50%;
}
&:before {
position: absolute;
bottom: 0;
left: 50%;
width: $clock-hand-width;
height: $clock-knob-size - $clock-knob-small-size;
margin-left: - $clock-hand-width / 2;
content: "";
background: $clock-primary-color;
}
}
}
.knob {
position: absolute;
top: - $clock-knob-size;
left: 50%;
width: $clock-knob-size;
height: $clock-knob-size;
margin-left: - $clock-knob-size / 2;
cursor: pointer;
background-color: $clock-primary-color;
border-radius: 50%;
}