UNPKG

quasar

Version:

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

quasar.dev

quasarframework/quasar

153 lines (125 loc) • 3.3 kB
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
.q-slider position relative width 100% height 40px color $primary color var(--q-color-primary) outline 0 &__track-container top 50% width 100% height 2px background rgba(0, 0, 0, .26) &__track will-change width, left background currentColor top 0 bottom 0 &__track-markers color black background-image repeating-linear-gradient(to right, currentColor, currentColor 2px, transparent 0, transparent) &:after content '' position absolute right 0 top 0 bottom 0 height 2px width 2px background currentColor &__thumb-container top 11px width 21px transform translate3d(-10px, 0, 0) /* rtl:ignore */ will-change left outline 0 &__thumb top 0 left 0 transform scale3d(.571, .571, .571) transition transform .18s ease-out, fill .18s ease-out, stroke .18s ease-out stroke-width 3.5 stroke currentColor circle stroke currentColor fill currentColor &__focus-ring width 21px height 21px transition transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out border-radius 50% opacity 0 transition-delay .14s &__pin top 0 width 26px height 26px margin-top -2px margin-left -2px background currentColor transform rotate(-45deg) scale3d(0, 0, 0) translate3d(0, 0, 0) transition transform 100ms ease-out will-change left border-radius 50% 50% 50% 0% z-index 1 &__pin-value-marker transform rotate(45deg) &-text position relative color white font-size 12px white-space nowrap &-bg position absolute min-width 27px width 130% height 27px left 50% top 50% transform translate3d(-50%, -50%, 0) background-color currentColor border-radius $generic-border-radius &--editable cursor grab &--no-value .q-slider__thumb, .q-slider__track visibility hidden &--focus .q-slider__thumb transform scale3d(.571, .571, .571) &--focus, body.desktop &.q-slider--editable:hover .q-slider__focus-ring background currentColor transform scale3d(1.55, 1.55, 1.55) opacity .25 .q-slider__thumb, .q-slider__track visibility visible &--inactive .q-slider__thumb-container transition left .28s, right .28s .q-slider__track transition width .28s, left .28s, right .28s &--active cursor grabbing .q-slider__thumb transform scale3d(1, 1, 1) .q-slider__focus-ring, &.q-slider--label .q-slider__thumb transform scale3d(0, 0, 0) !important body.desktop &.q-slider--editable:hover .q-slider__pin transform rotate(-45deg) scale3d(1, 1, 1) translate3d(19px, -20px, 0) &--label &.q-slider--active, .q-slider--focus, &.q-slider--label-always .q-slider__pin transform rotate(-45deg) scale3d(1, 1, 1) translate3d(19px, -20px, 0) &--dark .q-slider__track-container background alpha(#fff, .3) .q-slider__track-markers color white &--dense height 20px .q-slider__thumb-container top 0 &--reversed .q-slider__thumb-container transform translate3d(10px, 0, 0) /* rtl:ignore */