Diff: STRATO-apps/wordpress_03/app/wp-content/themes/blocksy/static/sass/backend/options/slider.scss
Keine Baseline-Datei – Diff nur gegen leer.
1
-
1
+
$handle-size: 14px;
2
+
3
+
.ct-slider {
4
+
position: relative;
5
+
user-select: none;
6
+
height: 18px;
7
+
cursor: pointer;
8
+
border-radius: 2px;
9
+
margin-inline-end: $handle-size;
10
+
11
+
&:before {
12
+
position: absolute;
13
+
content: '';
14
+
top: calc(50% - 1px);
15
+
inset-inline-start: 0;
16
+
width: calc(100% + #{$handle-size});
17
+
height: 2px;
18
+
border-radius: inherit;
19
+
background: var(--backgroundColor, #ced1d4);
20
+
}
21
+
22
+
span {
23
+
position: absolute;
24
+
inset-block: 0;
25
+
inset-inline-start: var(--position);
26
+
margin: auto 0;
27
+
width: $handle-size;
28
+
height: $handle-size;
29
+
border-radius: 100%;
30
+
background: var(--ui-accent-color);
31
+
transition: box-shadow 0.1s ease, background 0.1s ease;
32
+
outline: none;
33
+
34
+
&:hover,
35
+
&:focus,
36
+
&:active {
37
+
box-shadow: 0px 0px 0px 2px var(--ui-accent-color),
38
+
0px 8px 15px 0px rgba(0, 0, 0, 0.25);
39
+
}
40
+
41
+
&:active {
42
+
background: #fff;
43
+
}
44
+
}
45
+
46
+
div {
47
+
position: absolute;
48
+
top: calc(50% - 1px);
49
+
inset-inline-start: 0;
50
+
height: 2px;
51
+
padding-inline-end: #{calc($handle-size / 2)};
52
+
background: var(--ui-accent-color);
53
+
border-radius: inherit;
54
+
}
55
+
}
56
+
57
+
.ct-option-slider {
58
+
display: grid;
59
+
grid-template-columns: 1fr 75px;
60
+
align-items: center;
61
+
grid-column-gap: 12px;
62
+
63
+
// sides
64
+
[class*='placement'] {
65
+
flex: 0 0 15px;
66
+
display: flex;
67
+
margin-inline-end: 5%;
68
+
69
+
.shape {
70
+
opacity: 0.15;
71
+
fill: #000000;
72
+
}
73
+
74
+
.shape-active {
75
+
fill: #0073aa;
76
+
}
77
+
}
78
+
79
+
.placement-right svg {
80
+
transform: rotate(90deg);
81
+
}
82
+
83
+
.placement-bottom svg {
84
+
transform: rotate(180deg);
85
+
}
86
+
87
+
.placement-left svg {
88
+
transform: rotate(270deg);
89
+
}
90
+
}
91
+
92
+
93
+
// slider steps
94
+
.ct-slider[data-steps] {
95
+
div {
96
+
display: none;
97
+
}
98
+
99
+
section {
100
+
display: flex;
101
+
align-items: center;
102
+
justify-content: space-between;
103
+
position: absolute;
104
+
inset-inline-start: 0;
105
+
bottom: -7px;
106
+
height: 5px;
107
+
opacity: 0.5;
108
+
pointer-events: none;
109
+
width: calc(100% + #{$handle-size});
110
+
111
+
i {
112
+
display: flex;
113
+
align-items: center;
114
+
justify-content: center;
115
+
position: relative;
116
+
width: 5px;
117
+
height: 5px;
118
+
font-style: normal;
119
+
120
+
&:before {
121
+
position: absolute;
122
+
content: '';
123
+
width: inherit;
124
+
height: 1px;
125
+
background: currentColor;
126
+
}
127
+
128
+
&.zero:before {
129
+
transform: rotate(90deg);
130
+
}
131
+
132
+
&.plus:after {
133
+
position: absolute;
134
+
content: '';
135
+
width: 1px;
136
+
height: inherit;
137
+
background: currentColor;
138
+
}
139
+
}
140
+
141
+
// positive
142
+
&.positive {
143
+
.minus {
144
+
display: none;
145
+
}
146
+
147
+
.zero:before {
148
+
inset-inline-end: -2px;
149
+
}
150
+
}
151
+
}
152
+
}
153
+