beercss 3.12.0 → 3.12.1

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 +9 -9
  2. package/dist/cdn/beer.css +39 -18
  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 +39 -18
  7. package/dist/cdn/beer.scoped.min.css +1 -1
  8. package/dist/cdn/wavy.svg +23 -0
  9. package/package.json +1 -1
  10. package/src/cdn/customElement.js +2 -2
  11. package/src/cdn/elements/progress.css +39 -14
  12. package/src/cdn/settings/fonts.css +4 -4
  13. package/src/cdn/shapes/wavy.svg +23 -0
package/src/cdn/elements/progress.css CHANGED
@@ -1,9 +1,10 @@
1
1
  progress {
2
+ --_size: 0.25rem;
2
3
  position: relative;
3
4
  inline-size: 100%;
4
- block-size: 0.5rem;
5
+ block-size: var(--_size);
5
6
  color: var(--primary);
6
- background: var(--primary-container);
7
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4AWJiYGAQBgAAAP//ZyYa+wAAAAZJREFUAwAAIgAWeX9MsQAAAABJRU5ErkJggg==);
7
8
  border-radius: 1rem;
8
9
  flex: none;
9
10
  border: none;
@@ -13,16 +14,20 @@ progress {
13
14
  -webkit-appearance: none;
14
15
  }
15
16
 
17
+ .dark progress {
18
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4AWL6//+/FAAAAP//qSv5QwAAAAZJREFUAwAJIAMaJWjIvQAAAABJRU5ErkJggg==);
19
+ }
20
+
16
21
  progress.small {
17
- inline-size: 4rem;
22
+ --_size: 0.25rem;
18
23
  }
19
24
 
20
25
  progress.medium {
21
- inline-size: 8rem;
26
+ --_size: 0.35rem;
22
27
  }
23
28
 
24
29
  progress.large {
25
- inline-size: 12rem;
30
+ --_size: 0.45rem;
26
31
  }
27
32
 
28
33
  progress:not(.circle, [value])::after {
@@ -33,15 +38,15 @@ progress:not(.circle, [value])::after {
33
38
  block-size: 100%;
34
39
  clip-path: none;
35
40
  background: currentcolor;
36
- animation: 1.6s to-linear ease infinite;
41
+ animation: 3.2s to-linear ease infinite;
37
42
  }
38
43
 
39
44
  progress:not(.circle, [value])::-moz-progress-bar {
40
- animation: 1.6s to-linear ease infinite;
45
+ animation: 3.2s to-linear ease infinite;
41
46
  }
42
47
 
43
48
  progress:not(.circle, [value])::-webkit-progress-value {
44
- animation: 1.6s to-linear ease infinite;
49
+ animation: 3.2s to-linear ease infinite;
45
50
  }
46
51
 
47
52
  progress::-webkit-progress-bar {
@@ -49,11 +54,34 @@ progress::-webkit-progress-bar {
49
54
  }
50
55
 
51
56
  progress::-webkit-progress-value {
52
- background: currentcolor;
57
+ background: currentColor;
53
58
  }
54
59
 
55
60
  progress::-moz-progress-bar {
56
- background: currentcolor;
61
+ background: currentColor;
62
+ }
63
+
64
+ progress.wavy {
65
+ block-size: calc(var(--_size) * 2);
66
+ background-repeat: repeat-x;
67
+ background-position: 0 50%;
68
+ background-size: auto calc(var(--_size) / 2);
69
+ }
70
+
71
+ progress.wavy::-webkit-progress-value,
72
+ progress.wavy:not(.circle, [value])::after {
73
+ mask-image: url(../shapes/wavy.svg);
74
+ mask-position: 0 50%;
75
+ mask-repeat: repeat-x;
76
+ mask-size: auto 100%;
77
+
78
+ }
79
+
80
+ progress.wavy::-moz-progress-bar {
81
+ mask-image: url(../shapes/wavy.svg);
82
+ mask-position: 0 50%;
83
+ mask-repeat: repeat-x;
84
+ mask-size: auto 100%;
57
85
  }
58
86
 
59
87
  progress.circle {
@@ -136,18 +164,15 @@ progress.max + * {
136
164
 
137
165
  @keyframes to-linear {
138
166
  0% {
139
- margin-inline-start: 0%;
140
- inline-size: 0%;
167
+ margin-inline-start: -100%;
141
168
  }
142
169
 
143
170
  50% {
144
171
  margin-inline-start: 0%;
145
- inline-size: 100%;
146
172
  }
147
173
 
148
174
  100% {
149
175
  margin-inline-start: 100%;
150
- inline-size: 0%;
151
176
  }
152
177
  }
153
178
 
package/src/cdn/settings/fonts.css CHANGED
@@ -4,7 +4,7 @@
4
4
  font-style: normal;
5
5
  font-weight: 400;
6
6
  font-display: block;
7
- src: url(../fonts/material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.12.0/dist/cdn/material-symbols-outlined.woff2) format("woff2");
7
+ src: url(../fonts/material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.12.1/dist/cdn/material-symbols-outlined.woff2) format("woff2");
8
8
  }
9
9
 
10
10
  /* rounded icons */
@@ -13,7 +13,7 @@
13
13
  font-style: normal;
14
14
  font-weight: 400;
15
15
  font-display: block;
16
- src: url(../fonts/material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.12.0/dist/cdn/material-symbols-rounded.woff2) format("woff2");
16
+ src: url(../fonts/material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.12.1/dist/cdn/material-symbols-rounded.woff2) format("woff2");
17
17
  }
18
18
 
19
19
  /* sharp icons */
@@ -22,7 +22,7 @@
22
22
  font-style: normal;
23
23
  font-weight: 400;
24
24
  font-display: block;
25
- src: url(../fonts/material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.12.0/dist/cdn/material-symbols-sharp.woff2) format("woff2");
25
+ src: url(../fonts/material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.12.1/dist/cdn/material-symbols-sharp.woff2) format("woff2");
26
26
  }
27
27
 
28
28
  /* subset of only required icons */
@@ -31,5 +31,5 @@
31
31
  font-style: normal;
32
32
  font-weight: 400;
33
33
  font-display: block;
34
- src: url(../fonts/material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.12.0/dist/cdn/material-symbols-subset.woff2) format("woff2");
34
+ src: url(../fonts/material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.12.1/dist/cdn/material-symbols-subset.woff2) format("woff2");
35
35
  }
package/src/cdn/shapes/wavy.svg ADDED
@@ -0,0 +1,23 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="610 1101 1220 75">
2
+ <path fill="#D0BCFF" d="M1870.425,1173.746c-29.448,0-58.665-7.477-84.493-21.622c-0.03-0.016-0.061-0.032-0.09-0.049
3
+ c-43.555-23.82-95.546-23.809-139.091,0.039c-0.037,0.021-0.075,0.042-0.113,0.062c-25.803,14.109-54.984,21.567-84.394,21.568
4
+ c-29.449,0-58.667-7.478-84.495-21.623c-43.554-23.852-95.539-23.865-139.089-0.052c-0.03,0.018-0.062,0.034-0.092,0.051
5
+ c-25.83,14.146-55.048,21.623-84.497,21.623c-29.423,0-58.613-7.463-84.425-21.584c-0.025-0.014-0.052-0.028-0.077-0.042
6
+ c-43.572-23.863-95.596-23.862-139.164-0.001c-0.028,0.016-0.057,0.031-0.085,0.046c-25.809,14.117-55.001,21.581-84.418,21.581
7
+ c-0.002,0,0,0-0.001,0c-29.45-0.001-58.669-7.479-84.498-21.625c-43.534-23.845-95.513-23.863-139.063-0.058
8
+ c-0.036,0.021-0.072,0.04-0.108,0.06c-25.829,14.146-55.047,21.623-84.496,21.623c-29.398,0-58.566-7.451-84.362-21.551
9
+ c-0.048-0.024-0.095-0.05-0.142-0.075c-43.568-23.863-95.593-23.863-139.163,0c-0.027,0.015-0.054,0.028-0.081,0.043
10
+ c-25.811,14.12-55.001,21.583-84.421,21.583c-29.45,0-58.668-7.478-84.497-21.624c-7.521-4.118-10.278-13.554-6.159-21.074
11
+ s13.554-10.277,21.074-6.158c43.57,23.862,95.593,23.864,139.163,0c0.033-0.018,0.065-0.035,0.098-0.053
12
+ c25.807-14.114,54.991-21.573,84.406-21.573c29.398,0,58.567,7.451,84.364,21.55c0.047,0.025,0.093,0.051,0.14,0.076
13
+ c43.534,23.843,95.508,23.864,139.056,0.059c0.038-0.021,0.075-0.042,0.113-0.063c25.828-14.145,55.049-21.622,84.496-21.622
14
+ c0.002,0,0,0,0.002,0c29.449,0,58.668,7.478,84.497,21.625c43.57,23.863,95.595,23.862,139.165,0.001
15
+ c0.021-0.013,0.043-0.024,0.065-0.036c25.813-14.124,55.011-21.591,84.438-21.591c29.42,0,58.61,7.463,84.421,21.582
16
+ c0.027,0.015,0.055,0.03,0.082,0.045c43.539,23.847,95.521,23.862,139.074,0.049c0.032-0.018,0.064-0.035,0.096-0.053
17
+ c25.829-14.146,55.047-21.623,84.496-21.623s58.667,7.477,84.496,21.623c43.58,23.867,95.604,23.866,139.172,0.005
18
+ c0.039-0.021,0.079-0.043,0.118-0.064c25.803-14.108,54.98-21.564,84.389-21.564c29.448-0.001,58.666,7.476,84.494,21.62
19
+ c0.038,0.021,0.076,0.042,0.114,0.063c43.549,23.807,95.528,23.791,139.063-0.051c7.52-4.121,16.955-1.361,21.073,6.159
20
+ c4.119,7.521,1.361,16.955-6.159,21.073C1929.089,1166.27,1899.872,1173.746,1870.425,1173.746z">
21
+ <animateTransform attributeName="transform" type="translate" from="0 0" to="312.5 0" dur="1s" calcMode="linear" repeatCount="indefinite" />
22
+ </path>
23
+ </svg>