beercss 3.11.4 → 3.11.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +8 -8
  2. package/dist/cdn/beer.css +101 -50
  3. package/dist/cdn/beer.custom-element.js +2 -2
  4. package/dist/cdn/beer.custom-element.min.js +1 -1
  5. package/dist/cdn/beer.min.css +1 -1
  6. package/dist/cdn/beer.scoped.css +101 -50
  7. package/dist/cdn/beer.scoped.min.css +1 -1
  8. package/package.json +1 -1
  9. package/src/cdn/customElement.js +2 -2
  10. package/src/cdn/elements/navigations.css +54 -0
  11. package/src/cdn/elements/sliders.css +57 -16
  12. package/src/cdn/helpers/theme.css +0 -36
  13. package/src/cdn/settings/fonts.css +4 -4
package/src/cdn/elements/sliders.css CHANGED
@@ -3,13 +3,15 @@
3
3
  --_end: 0%;
4
4
  --_value1: "";
5
5
  --_value2: "";
6
+ --_track: 1rem;
7
+ --_thumb: max(2.5rem, calc(var(--_track) + 0.5rem));
6
8
  display: flex;
7
9
  align-items: center !important;
8
10
  inline-size: auto;
9
- block-size: 1.25rem;
10
- margin: 1.125rem;
11
+ block-size: var(--_thumb);
11
12
  flex: none;
12
13
  direction: ltr;
14
+ margin: 0 1.25rem;
13
15
  }
14
16
 
15
17
  [dir=rtl] .slider {
@@ -24,16 +26,24 @@
24
26
  inline-size: 100%;
25
27
  }
26
28
 
29
+ .slider.tiny {
30
+ --_track: 1rem;
31
+ }
32
+
27
33
  .slider.small {
28
- inline-size: 4rem;
34
+ --_track: 1.5rem;
29
35
  }
30
36
 
31
37
  .slider.medium {
32
- inline-size: 8rem;
38
+ --_track: 2.5rem;
33
39
  }
34
40
 
35
41
  .slider.large {
36
- inline-size: 12rem;
42
+ --_track: 3.5rem;
43
+ }
44
+
45
+ .slider.extra {
46
+ --_track: 6rem;
37
47
  }
38
48
 
39
49
  .slider > input {
@@ -43,7 +53,7 @@
43
53
  outline: none;
44
54
  pointer-events: none;
45
55
  inline-size: 100%;
46
- block-size: 1rem;
56
+ block-size: var(--_track);
47
57
  background: none;
48
58
  z-index: 1;
49
59
  padding: 0;
@@ -65,12 +75,13 @@
65
75
  border: none;
66
76
  outline: none;
67
77
  pointer-events: all;
68
- block-size: 2.75rem;
78
+ block-size: var(--_thumb);
69
79
  inline-size: 0.25rem;
70
80
  border-radius: 0.25rem;
71
81
  background: var(--primary);
72
82
  cursor: grab;
73
83
  margin: 0;
84
+ z-index: 1;
74
85
  }
75
86
 
76
87
  .slider > input::-webkit-slider-thumb:active {
@@ -109,26 +120,27 @@
109
120
  }
110
121
 
111
122
  .slider > input:disabled::-webkit-slider-thumb {
112
- background: #9E9E9E;
123
+ background: var(--outline);
113
124
  cursor: not-allowed;
114
125
  }
115
126
 
116
127
  .slider > input:disabled::-moz-range-thumb {
117
- background: #9E9E9E;
128
+ background: var(--outline);
118
129
  cursor: not-allowed;
119
130
  }
120
131
 
121
132
  .slider > input:disabled ~ span {
122
- background: #9E9E9E;
133
+ background: var(--outline);
123
134
  }
124
135
 
125
136
  .slider > span {
126
137
  position: absolute;
127
- block-size: 1rem;
138
+ block-size: var(--_track);
128
139
  border-radius: 1rem 0 0 1rem;
129
140
  background: var(--primary);
141
+ color: var(--on-primary);
130
142
  z-index: 0;
131
- inset: calc(50% - 0.5rem) var(--_end) auto var(--_start);
143
+ inset: calc(50% - (var(--_track) / 2)) var(--_end) auto var(--_start);
132
144
  clip-path: polygon(0 0, calc(100% - 0.5rem) 0, calc(100% - 0.5rem) 100%, 0 100%);
133
145
  }
134
146
 
@@ -145,14 +157,34 @@
145
157
  content: "";
146
158
  position: absolute;
147
159
  inline-size: 100%;
148
- block-size: 1rem;
160
+ block-size: var(--_track);
149
161
  border-radius: 1rem;
150
- background: var(--primary-container);
162
+ background: var(--secondary-container);
151
163
  clip-path: polygon(calc(var(--_start) - 0.5rem) 0, 0 0, 0 100%, calc(var(--_start) - 0.5rem) 100%, calc(var(--_start) - 0.5rem) 0, calc(100% - var(--_end) + 0.5rem) 0, 100% 0, 100% 100%, calc(100% - var(--_end) + 0.5rem) 100%, calc(100% - var(--_end) + 0.5rem) 0);
152
164
  }
153
165
 
154
166
  .slider:has(> [disabled])::before {
155
- background: var(--active);
167
+ background: var(--outline-variant);
168
+ }
169
+
170
+ .slider:has([disabled]) {
171
+ opacity: 0.62;
172
+ }
173
+
174
+ .slider > span > i {
175
+ position: absolute;
176
+ block-size: auto;
177
+ inset: 0 auto 0 0.5rem;
178
+ color: currentColor;
179
+ z-index: 1;
180
+ }
181
+
182
+ .slider:not(.medium, .large, .extra) > span > i {
183
+ display: none;
184
+ }
185
+
186
+ .slider.vertical > i {
187
+ transform: rotate(90deg);
156
188
  }
157
189
 
158
190
  .slider > .tooltip {
@@ -193,7 +225,15 @@
193
225
  }
194
226
 
195
227
  .slider.vertical > .tooltip {
196
- display: none;
228
+ inset-block-start: auto !important;
229
+ margin-block-start: calc(-1 * var(--_thumb)) !important;
230
+ block-size: 2.5rem;
231
+ inline-size: 2.5rem;
232
+ transform: rotate(90deg) translate(-75%, 50%) !important;
233
+ }
234
+
235
+ .slider.vertical > .tooltip + .tooltip {
236
+ transform: rotate(90deg) translate(-75%, -50%) !important;
197
237
  }
198
238
 
199
239
  :is(nav, .row, .field) > .slider:not(.circle, .small, .medium, .large) {
@@ -245,6 +285,7 @@
245
285
  inset: 0 var(--_end) 0 var(--_start);
246
286
  clip-path: none;
247
287
  background: currentcolor;
288
+ color: inherit;
248
289
  border-radius: 0;
249
290
  }
250
291
 
package/src/cdn/helpers/theme.css CHANGED
@@ -184,39 +184,3 @@
184
184
  background-color: var(--surface-variant) !important;
185
185
  color: var(--on-surface-variant) !important;
186
186
  }
187
-
188
- .primary-container > .active,
189
- .primary-container.active {
190
- background-color: var(--primary) !important;
191
- color: var(--on-primary) !important;
192
- }
193
-
194
- .secondary-container > .active,
195
- .secondary-container.active {
196
- background-color: var(--secondary) !important;
197
- color: var(--on-secondary) !important;
198
- }
199
-
200
- .tertiary-container > .active,
201
- .tertiary-container.active {
202
- background-color: var(--tertiary) !important;
203
- color: var(--on-tertiary) !important;
204
- }
205
-
206
- .primary > .active,
207
- .primary.active {
208
- background-color: var(--primary-container) !important;
209
- color: var(--on-primary-container) !important;
210
- }
211
-
212
- .secondary > .active,
213
- .secondary.active {
214
- background-color: var(--secondary-container) !important;
215
- color: var(--on-secondary-container) !important;
216
- }
217
-
218
- .tertiary > .active,
219
- .tertiary.active {
220
- background-color: var(--tertiary-container) !important;
221
- color: var(--on-tertiary-container) !important;
222
- }
package/src/cdn/settings/fonts.css CHANGED
@@ -6,7 +6,7 @@
6
6
  font-display: block;
7
7
  src:
8
8
  url("../material-symbols-outlined.woff2") format("woff2"),
9
- url("https://cdn.jsdelivr.net/npm/beercss@3.11.4/dist/cdn/material-symbols-outlined.woff2") format("woff2");
9
+ url("https://cdn.jsdelivr.net/npm/beercss@3.11.6/dist/cdn/material-symbols-outlined.woff2") format("woff2");
10
10
  }
11
11
 
12
12
  /* rounded icons */
@@ -17,7 +17,7 @@
17
17
  font-display: block;
18
18
  src:
19
19
  url("../material-symbols-rounded.woff2") format("woff2"),
20
- url("https://cdn.jsdelivr.net/npm/beercss@3.11.4/dist/cdn/material-symbols-rounded.woff2") format("woff2");
20
+ url("https://cdn.jsdelivr.net/npm/beercss@3.11.6/dist/cdn/material-symbols-rounded.woff2") format("woff2");
21
21
  }
22
22
 
23
23
  /* sharp icons */
@@ -28,7 +28,7 @@
28
28
  font-display: block;
29
29
  src:
30
30
  url("../material-symbols-sharp.woff2") format("woff2"),
31
- url("https://cdn.jsdelivr.net/npm/beercss@3.11.4/dist/cdn/material-symbols-sharp.woff2") format("woff2");
31
+ url("https://cdn.jsdelivr.net/npm/beercss@3.11.6/dist/cdn/material-symbols-sharp.woff2") format("woff2");
32
32
  }
33
33
 
34
34
  /* subset of only required icons */
@@ -39,5 +39,5 @@
39
39
  font-display: block;
40
40
  src:
41
41
  url("../material-symbols-subset.woff2") format("woff2"),
42
- url("https://cdn.jsdelivr.net/npm/beercss@3.11.4/dist/cdn/material-symbols-subset.woff2") format("woff2");
42
+ url("https://cdn.jsdelivr.net/npm/beercss@3.11.6/dist/cdn/material-symbols-subset.woff2") format("woff2");
43
43
  }