beercss 3.11.13 → 3.11.15
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 +43 -44
- 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 +51 -52
- package/dist/cdn/beer.scoped.min.css +1 -1
- package/package.json +1 -1
- package/src/cdn/customElement.js +2 -2
- package/src/cdn/elements/bars.css +1 -2
- package/src/cdn/elements/fields.css +1 -0
- package/src/cdn/elements/mainLayouts.css +1 -2
- package/src/cdn/elements/shapes.css +36 -36
- package/src/cdn/settings/fonts.css +4 -4
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<p align="center">
|
|
5
5
|
<a href="https://github.com/beercss/beercss/blob/main/LICENSE"><img src="https://img.shields.io/github/license/beercss/beercss" alt="License"></a>
|
|
6
6
|
<a href="https://github.com/beercss/beercss"><img src="https://img.shields.io/jsdelivr/npm/hy/beercss" alt="Downloads"></a>
|
|
7
|
-
<a href="https://bundlephobia.com/package/beercss@3.11.
|
|
7
|
+
<a href="https://bundlephobia.com/package/beercss@3.11.15" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@3.11.15" alt="minzipped size"></a>
|
|
8
8
|
<a href="https://www.npmjs.com/package/beercss"><img src="https://img.shields.io/npm/v/beercss" alt="Version"></a>
|
|
9
9
|
<a href="https://github.com/beercss/beercss/pulls"><img src="https://img.shields.io/github/issues-pr/beercss/beercss" alt="Pull Request"></a>
|
|
10
10
|
<a href="https://github.com/beercss/beercss/issues"><img src="https://img.shields.io/github/issues/beercss/beercss" alt="Issues"></a>
|
|
@@ -131,8 +131,8 @@ This project was guided by the **"Germany Beer Purity Law"** or **"Reinheitsgebo
|
|
|
131
131
|
### DEFAULT VERSION
|
|
132
132
|
|
|
133
133
|
```html
|
|
134
|
-
<link href="https://cdn.jsdelivr.net/npm/beercss@3.11.
|
|
135
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.
|
|
134
|
+
<link href="https://cdn.jsdelivr.net/npm/beercss@3.11.15/dist/cdn/beer.min.css" rel="stylesheet" />
|
|
135
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.15/dist/cdn/beer.min.js"></script>
|
|
136
136
|
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
|
|
137
137
|
```
|
|
138
138
|
|
|
@@ -150,8 +150,8 @@ import "material-dynamic-colors";
|
|
|
150
150
|
Applied on child elements of `<* class="beer">...</*>`.
|
|
151
151
|
|
|
152
152
|
```html
|
|
153
|
-
<link href="https://cdn.jsdelivr.net/npm/beercss@3.11.
|
|
154
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.
|
|
153
|
+
<link href="https://cdn.jsdelivr.net/npm/beercss@3.11.15/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
|
|
154
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.15/dist/cdn/beer.min.js"></script>
|
|
155
155
|
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
|
|
156
156
|
```
|
|
157
157
|
|
|
@@ -169,7 +169,7 @@ import "material-dynamic-colors";
|
|
|
169
169
|
Applied on child elements of `<beer-css>...</beer-css>`.
|
|
170
170
|
|
|
171
171
|
```html
|
|
172
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.
|
|
172
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.15/dist/cdn/beer.custom-element.min.js"></script>
|
|
173
173
|
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
|
|
174
174
|
```
|
|
175
175
|
|
|
@@ -195,8 +195,8 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
|
|
|
195
195
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
196
196
|
<meta name="google" content="notranslate">
|
|
197
197
|
<title>Hello world</title>
|
|
198
|
-
<link href="https://cdn.jsdelivr.net/npm/beercss@3.11.
|
|
199
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.
|
|
198
|
+
<link href="https://cdn.jsdelivr.net/npm/beercss@3.11.15/dist/cdn/beer.min.css" rel="stylesheet">
|
|
199
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.15/dist/cdn/beer.min.js"></script>
|
|
200
200
|
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
|
|
201
201
|
</head>
|
|
202
202
|
<body class="dark">
|
package/dist/cdn/beer.css
CHANGED
|
@@ -99,7 +99,7 @@ body.dark {
|
|
|
99
99
|
font-style: normal;
|
|
100
100
|
font-weight: 400;
|
|
101
101
|
font-display: block;
|
|
102
|
-
src: url(material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.11.
|
|
102
|
+
src: url(material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.11.15/dist/cdn/material-symbols-outlined.woff2) format("woff2");
|
|
103
103
|
}
|
|
104
104
|
/* rounded icons */
|
|
105
105
|
@font-face {
|
|
@@ -107,7 +107,7 @@ body.dark {
|
|
|
107
107
|
font-style: normal;
|
|
108
108
|
font-weight: 400;
|
|
109
109
|
font-display: block;
|
|
110
|
-
src: url(material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.11.
|
|
110
|
+
src: url(material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.11.15/dist/cdn/material-symbols-rounded.woff2) format("woff2");
|
|
111
111
|
}
|
|
112
112
|
/* sharp icons */
|
|
113
113
|
@font-face {
|
|
@@ -115,7 +115,7 @@ body.dark {
|
|
|
115
115
|
font-style: normal;
|
|
116
116
|
font-weight: 400;
|
|
117
117
|
font-display: block;
|
|
118
|
-
src: url(material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.11.
|
|
118
|
+
src: url(material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.11.15/dist/cdn/material-symbols-sharp.woff2) format("woff2");
|
|
119
119
|
}
|
|
120
120
|
/* subset of only required icons */
|
|
121
121
|
@font-face {
|
|
@@ -123,7 +123,7 @@ body.dark {
|
|
|
123
123
|
font-style: normal;
|
|
124
124
|
font-weight: 400;
|
|
125
125
|
font-display: block;
|
|
126
|
-
src: url(material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.11.
|
|
126
|
+
src: url(material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.11.15/dist/cdn/material-symbols-subset.woff2) format("woff2");
|
|
127
127
|
}
|
|
128
128
|
* {
|
|
129
129
|
-webkit-tap-highlight-color: transparent;
|
|
@@ -1769,8 +1769,7 @@ dialog > :is(header, footer).fixed {
|
|
|
1769
1769
|
:is(main, header, footer, section).responsive.max {
|
|
1770
1770
|
max-inline-size: none;
|
|
1771
1771
|
}
|
|
1772
|
-
:has(> main) > :is(header, footer).fixed
|
|
1773
|
-
body:has(> main) > :is(header, footer).fixed {
|
|
1772
|
+
:has(> main) > :is(header, footer).fixed {
|
|
1774
1773
|
transform: none;
|
|
1775
1774
|
box-sizing: content-box;
|
|
1776
1775
|
position: sticky;
|
|
@@ -2331,6 +2330,7 @@ input[type=number] {
|
|
|
2331
2330
|
.field > textarea {
|
|
2332
2331
|
padding-block-start: var(--_start);
|
|
2333
2332
|
white-space: pre-wrap;
|
|
2333
|
+
overflow-wrap: break-word;
|
|
2334
2334
|
}
|
|
2335
2335
|
.field > textarea:focus {
|
|
2336
2336
|
padding-block-start: calc(var(--_start) - 0.06rem);
|
|
@@ -2778,8 +2778,7 @@ i[class*=fa-] {
|
|
|
2778
2778
|
.list.large-space > li > details > summary {
|
|
2779
2779
|
min-block-size: 5.5rem;
|
|
2780
2780
|
}
|
|
2781
|
-
:has(> main)
|
|
2782
|
-
body:has(> main) {
|
|
2781
|
+
:has(> main) {
|
|
2783
2782
|
display: grid;
|
|
2784
2783
|
grid-template-columns: auto 1fr auto;
|
|
2785
2784
|
grid-template-rows: auto auto 1fr auto auto;
|
|
@@ -3841,112 +3840,112 @@ progress.max + * {
|
|
|
3841
3840
|
border: none;
|
|
3842
3841
|
}
|
|
3843
3842
|
.shape.arch {
|
|
3844
|
-
mask-image: url(arch.svg)
|
|
3843
|
+
mask-image: url(arch.svg);
|
|
3845
3844
|
}
|
|
3846
3845
|
.shape.arrow {
|
|
3847
|
-
mask-image: url(arrow.svg)
|
|
3846
|
+
mask-image: url(arrow.svg);
|
|
3848
3847
|
}
|
|
3849
3848
|
.shape.boom {
|
|
3850
|
-
mask-image: url(boom.svg)
|
|
3849
|
+
mask-image: url(boom.svg);
|
|
3851
3850
|
}
|
|
3852
3851
|
.shape.bun {
|
|
3853
|
-
mask-image: url(bun.svg)
|
|
3852
|
+
mask-image: url(bun.svg);
|
|
3854
3853
|
}
|
|
3855
3854
|
.shape.burst {
|
|
3856
|
-
mask-image: url(burst.svg)
|
|
3855
|
+
mask-image: url(burst.svg);
|
|
3857
3856
|
}
|
|
3858
3857
|
.shape.circle {
|
|
3859
|
-
mask-image: url(circle.svg)
|
|
3858
|
+
mask-image: url(circle.svg);
|
|
3860
3859
|
}
|
|
3861
3860
|
.shape.clamshell {
|
|
3862
|
-
mask-image: url(clamshell.svg)
|
|
3861
|
+
mask-image: url(clamshell.svg);
|
|
3863
3862
|
}
|
|
3864
3863
|
.shape.diamond {
|
|
3865
|
-
mask-image: url(diamond.svg)
|
|
3864
|
+
mask-image: url(diamond.svg);
|
|
3866
3865
|
}
|
|
3867
3866
|
.shape.fan {
|
|
3868
|
-
mask-image: url(fan.svg)
|
|
3867
|
+
mask-image: url(fan.svg);
|
|
3869
3868
|
}
|
|
3870
3869
|
.shape.flower {
|
|
3871
|
-
mask-image: url(flower.svg)
|
|
3870
|
+
mask-image: url(flower.svg);
|
|
3872
3871
|
}
|
|
3873
3872
|
.shape.gem {
|
|
3874
|
-
mask-image: url(gem.svg)
|
|
3873
|
+
mask-image: url(gem.svg);
|
|
3875
3874
|
}
|
|
3876
3875
|
.shape.ghost-ish {
|
|
3877
|
-
mask-image: url(ghost-ish.svg)
|
|
3876
|
+
mask-image: url(ghost-ish.svg);
|
|
3878
3877
|
}
|
|
3879
3878
|
.shape.heart {
|
|
3880
|
-
mask-image: url(heart.svg)
|
|
3879
|
+
mask-image: url(heart.svg);
|
|
3881
3880
|
}
|
|
3882
3881
|
.shape.leaf-clover4 {
|
|
3883
|
-
mask-image: url(leaf-clover4.svg)
|
|
3882
|
+
mask-image: url(leaf-clover4.svg);
|
|
3884
3883
|
}
|
|
3885
3884
|
.shape.leaft-clover8 {
|
|
3886
|
-
mask-image: url(leaf-clover8.svg)
|
|
3885
|
+
mask-image: url(leaf-clover8.svg);
|
|
3887
3886
|
}
|
|
3888
3887
|
.shape.loading-indicator {
|
|
3889
|
-
mask-image: url(loading-indicator.svg)
|
|
3888
|
+
mask-image: url(loading-indicator.svg);
|
|
3890
3889
|
}
|
|
3891
3890
|
.shape.oval {
|
|
3892
|
-
mask-image: url(oval.svg)
|
|
3891
|
+
mask-image: url(oval.svg);
|
|
3893
3892
|
}
|
|
3894
3893
|
.shape.pentagon {
|
|
3895
|
-
mask-image: url(pentagon.svg)
|
|
3894
|
+
mask-image: url(pentagon.svg);
|
|
3896
3895
|
}
|
|
3897
3896
|
.shape.pill {
|
|
3898
|
-
mask-image: url(pill.svg)
|
|
3897
|
+
mask-image: url(pill.svg);
|
|
3899
3898
|
}
|
|
3900
3899
|
.shape.pixel-circle {
|
|
3901
|
-
mask-image: url(pixel-circle.svg)
|
|
3900
|
+
mask-image: url(pixel-circle.svg);
|
|
3902
3901
|
}
|
|
3903
3902
|
.shape.pixel-triangle {
|
|
3904
|
-
mask-image: url(pixel-triangle.svg)
|
|
3903
|
+
mask-image: url(pixel-triangle.svg);
|
|
3905
3904
|
}
|
|
3906
3905
|
.shape.puffy {
|
|
3907
|
-
mask-image: url(puffy.svg)
|
|
3906
|
+
mask-image: url(puffy.svg);
|
|
3908
3907
|
}
|
|
3909
3908
|
.shape.puffy-diamond {
|
|
3910
|
-
mask-image: url(puffy-diamond.svg)
|
|
3909
|
+
mask-image: url(puffy-diamond.svg);
|
|
3911
3910
|
}
|
|
3912
3911
|
.shape.semicircle {
|
|
3913
|
-
mask-image: url(semicircle.svg)
|
|
3912
|
+
mask-image: url(semicircle.svg);
|
|
3914
3913
|
}
|
|
3915
3914
|
.shape.sided-cookie4 {
|
|
3916
|
-
mask-image: url(sided-cookie4.svg)
|
|
3915
|
+
mask-image: url(sided-cookie4.svg);
|
|
3917
3916
|
}
|
|
3918
3917
|
.shape.sided-cookie6 {
|
|
3919
|
-
mask-image: url(sided-cookie6.svg)
|
|
3918
|
+
mask-image: url(sided-cookie6.svg);
|
|
3920
3919
|
}
|
|
3921
3920
|
.shape.sided-cookie7 {
|
|
3922
|
-
mask-image: url(sided-cookie7.svg)
|
|
3921
|
+
mask-image: url(sided-cookie7.svg);
|
|
3923
3922
|
}
|
|
3924
3923
|
.shape.sided-cookie9 {
|
|
3925
|
-
mask-image: url(sided-cookie9.svg)
|
|
3924
|
+
mask-image: url(sided-cookie9.svg);
|
|
3926
3925
|
}
|
|
3927
3926
|
.shape.sided-cookie12 {
|
|
3928
|
-
mask-image: url(sided-cookie12.svg)
|
|
3927
|
+
mask-image: url(sided-cookie12.svg);
|
|
3929
3928
|
}
|
|
3930
3929
|
.shape.slanted {
|
|
3931
|
-
mask-image: url(slanted.svg)
|
|
3930
|
+
mask-image: url(slanted.svg);
|
|
3932
3931
|
}
|
|
3933
3932
|
.shape.soft-boom {
|
|
3934
|
-
mask-image: url(soft-boom.svg)
|
|
3933
|
+
mask-image: url(soft-boom.svg);
|
|
3935
3934
|
}
|
|
3936
3935
|
.shape.soft-burst {
|
|
3937
|
-
mask-image: url(soft-burst.svg)
|
|
3936
|
+
mask-image: url(soft-burst.svg);
|
|
3938
3937
|
}
|
|
3939
3938
|
.shape.square {
|
|
3940
|
-
mask-image: url(square.svg)
|
|
3939
|
+
mask-image: url(square.svg);
|
|
3941
3940
|
}
|
|
3942
3941
|
.shape.sunny {
|
|
3943
|
-
mask-image: url(sunny.svg)
|
|
3942
|
+
mask-image: url(sunny.svg);
|
|
3944
3943
|
}
|
|
3945
3944
|
.shape.triangle {
|
|
3946
|
-
mask-image: url(triangle.svg)
|
|
3945
|
+
mask-image: url(triangle.svg);
|
|
3947
3946
|
}
|
|
3948
3947
|
.shape.very-sunny {
|
|
3949
|
-
mask-image: url(very-sunny.svg)
|
|
3948
|
+
mask-image: url(very-sunny.svg);
|
|
3950
3949
|
}
|
|
3951
3950
|
@keyframes to-shape-rotate {
|
|
3952
3951
|
0% {
|
|
@@ -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@3.11.
|
|
15
|
+
return await import("https://cdn.jsdelivr.net/npm/beercss@3.11.15/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@3.11.
|
|
26
|
+
element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@3.11.15/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@3.11.
|
|
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@3.11.15/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@3.11.15/dist/cdn/beer.scoped.min.css");element.setAttribute("rel", "stylesheet");head.appendChild(element);}async run() {this.classList.add("beer");await Promise.all([this.addJs(), this.addCss()]);ui();}}customElements.define("beer-css", BeerCssCustomElement);export default BeerCssCustomElement;
|