/
VTimePickerClock.sass
132 lines (112 loc) 路 3.26 KB
/
VTimePickerClock.sass
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
@use '../../styles/tools'
@use './variables' as *
@include tools.layer('components')
// Theme
.v-time-picker-clock
background: rgb(var(--v-theme-background))
color: rgb(var(--v-theme-on-background))
&:after
color: rgb(var(--v-theme-primary))
.v-time-picker-clock__item--active
background-color: rgb(var(--v-theme-surface-variant))
color: rgb(var(--v-theme-on-surface-variant))
.v-time-picker-clock
margin: 24px auto
background: rgb(var(--v-theme-surface-light))
border-radius: 50%
position: relative
transition: none
user-select: none
height: 256px
width: 256px
flex: 1 0 auto
&__container
display: flex
flex-direction: column
flex-basis: 290px
justify-content: center
padding: $time-picker-clock-padding
&__hand
background-color: currentColor
height: $time-picker-clock-hand-height
width: $time-picker-clock-hand-width
bottom: 50%
left: $time-picker-clock-hand-left
transform-origin: center bottom
position: absolute
will-change: transform
z-index: 1
&:before
background: transparent
border-width: $time-picker-clock-end-border-width
border-style: $time-picker-clock-end-border-style
border-color: $time-picker-clock-end-border-color
border-radius: 100%
width: $time-picker-clock-end-size
height: $time-picker-clock-end-size
content: ''
position: absolute
top: $time-picker-clock-end-top
left: 50%
transform: translate(-50%, -50%)
&:after
content: ''
position: absolute
height: $time-picker-clock-center-size
width: $time-picker-clock-center-size
top: 100%
left: 50%
border-radius: 100%
background-color: currentColor
transform: translate(-50%, -50%)
&--inner:after
height: $time-picker-clock-inner-hand-height
&--readonly
pointer-events: none
.v-time-picker-clock__item--disabled
opacity: var(--v-disabled-opacity)
.v-picker--full-width
.v-time-picker-clock__container
max-width: $time-picker-clock-max-width
.v-time-picker-clock__inner
position: absolute
bottom: $time-picker-clock-inner-offset
left: $time-picker-clock-inner-offset
right: $time-picker-clock-inner-offset
top: $time-picker-clock-inner-offset
.v-time-picker-clock__item
align-items: center
border-radius: 100%
cursor: default
display: flex
font-size: $time-picker-number-font-size
justify-content: center
height: $time-picker-indicator-size
position: absolute
text-align: center
width: $time-picker-indicator-size
user-select: none
transform: translate(-50%, -50%)
> span
z-index: 1
&:before, &:after
content: ''
border-radius: 100%
position: absolute
top: 50%
left: 50%
height: 14px
width: 14px
transform: translate(-50%, -50%)
&:after, &:before
height: $time-picker-indicator-size
width: $time-picker-indicator-size
&--active
cursor: default
z-index: 2
&--disabled
pointer-events: none
.v-picker--landscape
.v-time-picker-clock
&__container
flex-direction: row