beercss 4.0.15 → 4.0.16
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.
- package/README.md +8 -8
- package/dist/cdn/beer.css +36 -23
- package/dist/cdn/beer.custom-element.js +2 -2
- package/dist/cdn/beer.custom-element.min.js +1 -1
- package/dist/cdn/beer.min.css +1 -1
- package/dist/cdn/beer.scoped.css +36 -23
- package/dist/cdn/beer.scoped.min.css +2 -2
- package/package.json +1 -1
- package/src/cdn/customElement.js +2 -2
- package/src/cdn/elements/menus.css +24 -13
- package/src/cdn/elements/sliders.css +8 -6
- package/src/cdn/settings/fonts.css +4 -4
package/README.md
CHANGED
|
@@ -84,8 +84,8 @@ This project was guided by the **"Germany Beer Purity Law"** or **"Reinheitsgebo
|
|
|
84
84
|
### DEFAULT VERSION
|
|
85
85
|
|
|
86
86
|
```html
|
|
87
|
-
<link href="https://cdn.jsdelivr.net/npm/beercss@4.0.
|
|
88
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.
|
|
87
|
+
<link href="https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.min.css" rel="stylesheet" />
|
|
88
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.min.js"></script>
|
|
89
89
|
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/material-dynamic-colors.min.js"></script>
|
|
90
90
|
```
|
|
91
91
|
|
|
@@ -103,8 +103,8 @@ import "material-dynamic-colors";
|
|
|
103
103
|
Applied on child elements of `<* class="beer">...</*>`.
|
|
104
104
|
|
|
105
105
|
```html
|
|
106
|
-
<link href="https://cdn.jsdelivr.net/npm/beercss@4.0.
|
|
107
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.
|
|
106
|
+
<link href="https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
|
|
107
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.min.js"></script>
|
|
108
108
|
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/material-dynamic-colors.min.js"></script>
|
|
109
109
|
```
|
|
110
110
|
|
|
@@ -122,7 +122,7 @@ import "material-dynamic-colors";
|
|
|
122
122
|
Applied on child elements of `<beer-css>...</beer-css>`.
|
|
123
123
|
|
|
124
124
|
```html
|
|
125
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.
|
|
125
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.custom-element.min.js"></script>
|
|
126
126
|
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/material-dynamic-colors.min.js"></script>
|
|
127
127
|
```
|
|
128
128
|
|
|
@@ -138,7 +138,7 @@ import "material-dynamic-colors";
|
|
|
138
138
|
|
|
139
139
|
### LOCAL CDN VERSION
|
|
140
140
|
|
|
141
|
-
Download all files from CDN https://cdn.jsdelivr.net/npm/beercss@4.0.
|
|
141
|
+
Download all files from CDN https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/ and https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/. Now put the files inside a new folder in your project (like `/beercss` for example):
|
|
142
142
|
|
|
143
143
|
```html
|
|
144
144
|
<link href="/beercss/beer.min.css" rel="stylesheet" />
|
|
@@ -159,8 +159,8 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
|
|
|
159
159
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
160
160
|
<meta name="google" content="notranslate">
|
|
161
161
|
<title>Hello world</title>
|
|
162
|
-
<link href="https://cdn.jsdelivr.net/npm/beercss@4.0.
|
|
163
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.
|
|
162
|
+
<link href="https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.min.css" rel="stylesheet">
|
|
163
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.min.js"></script>
|
|
164
164
|
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/material-dynamic-colors.min.js"></script>
|
|
165
165
|
</head>
|
|
166
166
|
<body class="dark">
|
package/dist/cdn/beer.css
CHANGED
|
@@ -140,7 +140,7 @@ body.dark {
|
|
|
140
140
|
font-style: normal;
|
|
141
141
|
font-weight: 400;
|
|
142
142
|
font-display: swap;
|
|
143
|
-
src: url(material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.
|
|
143
|
+
src: url(material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/material-symbols-outlined.woff2) format("woff2");
|
|
144
144
|
}
|
|
145
145
|
|
|
146
146
|
/* rounded icons */
|
|
@@ -150,7 +150,7 @@ body.dark {
|
|
|
150
150
|
font-style: normal;
|
|
151
151
|
font-weight: 400;
|
|
152
152
|
font-display: swap;
|
|
153
|
-
src: url(material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.
|
|
153
|
+
src: url(material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/material-symbols-rounded.woff2) format("woff2");
|
|
154
154
|
}
|
|
155
155
|
|
|
156
156
|
/* sharp icons */
|
|
@@ -160,7 +160,7 @@ body.dark {
|
|
|
160
160
|
font-style: normal;
|
|
161
161
|
font-weight: 400;
|
|
162
162
|
font-display: swap;
|
|
163
|
-
src: url(material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.
|
|
163
|
+
src: url(material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/material-symbols-sharp.woff2) format("woff2");
|
|
164
164
|
}
|
|
165
165
|
|
|
166
166
|
/* subset of only required icons */
|
|
@@ -170,7 +170,7 @@ body.dark {
|
|
|
170
170
|
font-style: normal;
|
|
171
171
|
font-weight: 400;
|
|
172
172
|
font-display: swap;
|
|
173
|
-
src: url(material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.
|
|
173
|
+
src: url(material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/material-symbols-subset.woff2) format("woff2");
|
|
174
174
|
}
|
|
175
175
|
|
|
176
176
|
/* begin scoped */
|
|
@@ -2604,6 +2604,26 @@ menu {
|
|
|
2604
2604
|
gap: 0.125rem;
|
|
2605
2605
|
}
|
|
2606
2606
|
|
|
2607
|
+
menu.no-space {
|
|
2608
|
+
gap: 0;
|
|
2609
|
+
}
|
|
2610
|
+
|
|
2611
|
+
menu.small-space {
|
|
2612
|
+
gap: 0.25rem;
|
|
2613
|
+
}
|
|
2614
|
+
|
|
2615
|
+
menu.medium-space {
|
|
2616
|
+
gap: 0.375rem;
|
|
2617
|
+
}
|
|
2618
|
+
|
|
2619
|
+
menu.large-space {
|
|
2620
|
+
gap: 0.5rem;
|
|
2621
|
+
}
|
|
2622
|
+
|
|
2623
|
+
menu.extra-space {
|
|
2624
|
+
gap: 0.625rem;
|
|
2625
|
+
}
|
|
2626
|
+
|
|
2607
2627
|
[dir=rtl] menu {
|
|
2608
2628
|
inset: auto 0 0 auto;
|
|
2609
2629
|
}
|
|
@@ -2776,20 +2796,8 @@ menu > li > menu.top.left {
|
|
|
2776
2796
|
inset: calc(3rem * (var(--_child, 0) - var(--_type, 0))) 100% auto auto;
|
|
2777
2797
|
}
|
|
2778
2798
|
|
|
2779
|
-
menu.no-space > li {
|
|
2780
|
-
min-block-size: 2.5rem;
|
|
2781
|
-
}
|
|
2782
|
-
|
|
2783
|
-
menu.medium-space > li {
|
|
2784
|
-
min-block-size: 3.5rem;
|
|
2785
|
-
}
|
|
2786
|
-
|
|
2787
|
-
menu.large-space > li {
|
|
2788
|
-
min-block-size: 4rem;
|
|
2789
|
-
}
|
|
2790
|
-
|
|
2791
2799
|
menu.group {
|
|
2792
|
-
padding: 0;
|
|
2800
|
+
padding: 0.5rem 0;
|
|
2793
2801
|
inline-size: 100%;
|
|
2794
2802
|
min-inline-size: auto;
|
|
2795
2803
|
max-block-size: none;
|
|
@@ -2801,6 +2809,7 @@ menu.group {
|
|
|
2801
2809
|
menu.group > li {
|
|
2802
2810
|
box-shadow: none;
|
|
2803
2811
|
padding: 0;
|
|
2812
|
+
min-block-size: auto;
|
|
2804
2813
|
}
|
|
2805
2814
|
|
|
2806
2815
|
menu.group > li:hover {
|
|
@@ -2817,6 +2826,8 @@ menu.group > li > menu:hover {
|
|
|
2817
2826
|
transform: none;
|
|
2818
2827
|
transition: none;
|
|
2819
2828
|
border-radius: 1rem 1rem 0.5rem 0.5rem;
|
|
2829
|
+
z-index: auto;
|
|
2830
|
+
flex: 1;
|
|
2820
2831
|
}
|
|
2821
2832
|
|
|
2822
2833
|
menu.group > li:last-child > menu {
|
|
@@ -4164,6 +4175,7 @@ progress.max + * {
|
|
|
4164
4175
|
flex: none;
|
|
4165
4176
|
direction: ltr;
|
|
4166
4177
|
margin: 0 1.25rem;
|
|
4178
|
+
color: var(--primary);
|
|
4167
4179
|
}
|
|
4168
4180
|
|
|
4169
4181
|
[dir=rtl] .slider {
|
|
@@ -4230,7 +4242,7 @@ progress.max + * {
|
|
|
4230
4242
|
block-size: var(--_thumb);
|
|
4231
4243
|
inline-size: 0.25rem;
|
|
4232
4244
|
border-radius: 0.25rem;
|
|
4233
|
-
background:
|
|
4245
|
+
background: currentColor;
|
|
4234
4246
|
cursor: grab;
|
|
4235
4247
|
margin: 0;
|
|
4236
4248
|
z-index: 1;
|
|
@@ -4289,14 +4301,15 @@ progress.max + * {
|
|
|
4289
4301
|
position: absolute;
|
|
4290
4302
|
block-size: var(--_track);
|
|
4291
4303
|
border-radius: 1rem 0 0 1rem;
|
|
4292
|
-
background:
|
|
4293
|
-
color:
|
|
4304
|
+
background: currentColor;
|
|
4305
|
+
color: currentColor;
|
|
4294
4306
|
z-index: 0;
|
|
4295
|
-
inset: calc(50% - (var(--_track, 0) / 2)) calc(var(--_end) + 0.5rem) auto
|
|
4307
|
+
inset: calc(50% - (var(--_track, 0) / 2)) calc(var(--_end) + 0.5rem) auto var(--_start);
|
|
4296
4308
|
}
|
|
4297
4309
|
|
|
4298
4310
|
.slider > input[type=range] + input[type=range] ~ span:not([class]) {
|
|
4299
4311
|
border-radius: 0;
|
|
4312
|
+
inset: calc(50% - (var(--_track, 0) / 2)) calc(var(--_end) + 0.5rem) auto calc(var(--_start) + 0.5rem);
|
|
4300
4313
|
}
|
|
4301
4314
|
|
|
4302
4315
|
.field > .slider {
|
|
@@ -4309,12 +4322,12 @@ progress.max + * {
|
|
|
4309
4322
|
inline-size: 100%;
|
|
4310
4323
|
block-size: var(--_track);
|
|
4311
4324
|
border-radius: 1rem;
|
|
4312
|
-
background: var(--
|
|
4325
|
+
background: var(--active);
|
|
4313
4326
|
clip-path: polygon(calc(var(--_start, 0) - 0.5rem) 0, 0 0, 0 100%, calc(var(--_start, 0) - 0.5rem) 100%, calc(var(--_start, 0) - 0.5rem) 0, calc(100% - var(--_end, 0) + 0.5rem) 0, 100% 0, 100% 100%, calc(100% - var(--_end, 0) + 0.5rem) 100%, calc(100% - var(--_end, 0) + 0.5rem) 0);
|
|
4314
4327
|
}
|
|
4315
4328
|
|
|
4316
4329
|
.slider:has(> [disabled])::before {
|
|
4317
|
-
background: var(--
|
|
4330
|
+
background: var(--active);
|
|
4318
4331
|
}
|
|
4319
4332
|
|
|
4320
4333
|
.slider:has([disabled]) {
|
|
@@ -12,7 +12,7 @@ class BeerCssCustomElement extends HTMLElement {
|
|
|
12
12
|
BeerCssCustomElement.isJsLoaded = true;
|
|
13
13
|
|
|
14
14
|
if (window.ui) return;
|
|
15
|
-
return await import("https://cdn.jsdelivr.net/npm/beercss@4.0.
|
|
15
|
+
return await import("https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.min.js");
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
async addCss() {
|
|
@@ -23,7 +23,7 @@ class BeerCssCustomElement extends HTMLElement {
|
|
|
23
23
|
|
|
24
24
|
const head = document.querySelector("head");
|
|
25
25
|
const element = document.createElement("link");
|
|
26
|
-
element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@4.0.
|
|
26
|
+
element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.scoped.min.css");
|
|
27
27
|
element.setAttribute("rel", "stylesheet");
|
|
28
28
|
head.appendChild(element);
|
|
29
29
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
class BeerCssCustomElement extends HTMLElement {static isCssLoaded = false;static isJsLoaded = false;constructor() {super();this.run();}async addJs() {if (BeerCssCustomElement.isJsLoaded) return;BeerCssCustomElement.isJsLoaded = true;if (window.ui) return;return await import("https://cdn.jsdelivr.net/npm/beercss@4.0.
|
|
1
|
+
class BeerCssCustomElement extends HTMLElement {static isCssLoaded = false;static isJsLoaded = false;constructor() {super();this.run();}async addJs() {if (BeerCssCustomElement.isJsLoaded) return;BeerCssCustomElement.isJsLoaded = true;if (window.ui) return;return await import("https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.min.js");}async addCss() {if (BeerCssCustomElement.isCssLoaded) return;BeerCssCustomElement.isCssLoaded = true;const isScoped = !!getComputedStyle(document.documentElement).getPropertyValue("--scoped");if (isScoped) return;const head = document.querySelector("head");const element = document.createElement("link");element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.scoped.min.css");element.setAttribute("rel", "stylesheet");head.appendChild(element);}async run() {await Promise.all([this.addJs(), this.addCss()]);ui();}}customElements.define("beer-css", BeerCssCustomElement);export default BeerCssCustomElement;
|