beercss 3.11.13 → 3.11.14
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 +40 -40
- 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 +40 -40
- 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/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.14" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@3.11.14" 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.14/dist/cdn/beer.min.css" rel="stylesheet" />
|
|
135
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.14/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.14/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
|
|
154
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.14/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.14/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.14/dist/cdn/beer.min.css" rel="stylesheet">
|
|
199
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.14/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.14/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.14/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.14/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.14/dist/cdn/material-symbols-subset.woff2) format("woff2");
|
|
127
127
|
}
|
|
128
128
|
* {
|
|
129
129
|
-webkit-tap-highlight-color: transparent;
|
|
@@ -3841,112 +3841,112 @@ progress.max + * {
|
|
|
3841
3841
|
border: none;
|
|
3842
3842
|
}
|
|
3843
3843
|
.shape.arch {
|
|
3844
|
-
mask-image: url(arch.svg)
|
|
3844
|
+
mask-image: url(arch.svg);
|
|
3845
3845
|
}
|
|
3846
3846
|
.shape.arrow {
|
|
3847
|
-
mask-image: url(arrow.svg)
|
|
3847
|
+
mask-image: url(arrow.svg);
|
|
3848
3848
|
}
|
|
3849
3849
|
.shape.boom {
|
|
3850
|
-
mask-image: url(boom.svg)
|
|
3850
|
+
mask-image: url(boom.svg);
|
|
3851
3851
|
}
|
|
3852
3852
|
.shape.bun {
|
|
3853
|
-
mask-image: url(bun.svg)
|
|
3853
|
+
mask-image: url(bun.svg);
|
|
3854
3854
|
}
|
|
3855
3855
|
.shape.burst {
|
|
3856
|
-
mask-image: url(burst.svg)
|
|
3856
|
+
mask-image: url(burst.svg);
|
|
3857
3857
|
}
|
|
3858
3858
|
.shape.circle {
|
|
3859
|
-
mask-image: url(circle.svg)
|
|
3859
|
+
mask-image: url(circle.svg);
|
|
3860
3860
|
}
|
|
3861
3861
|
.shape.clamshell {
|
|
3862
|
-
mask-image: url(clamshell.svg)
|
|
3862
|
+
mask-image: url(clamshell.svg);
|
|
3863
3863
|
}
|
|
3864
3864
|
.shape.diamond {
|
|
3865
|
-
mask-image: url(diamond.svg)
|
|
3865
|
+
mask-image: url(diamond.svg);
|
|
3866
3866
|
}
|
|
3867
3867
|
.shape.fan {
|
|
3868
|
-
mask-image: url(fan.svg)
|
|
3868
|
+
mask-image: url(fan.svg);
|
|
3869
3869
|
}
|
|
3870
3870
|
.shape.flower {
|
|
3871
|
-
mask-image: url(flower.svg)
|
|
3871
|
+
mask-image: url(flower.svg);
|
|
3872
3872
|
}
|
|
3873
3873
|
.shape.gem {
|
|
3874
|
-
mask-image: url(gem.svg)
|
|
3874
|
+
mask-image: url(gem.svg);
|
|
3875
3875
|
}
|
|
3876
3876
|
.shape.ghost-ish {
|
|
3877
|
-
mask-image: url(ghost-ish.svg)
|
|
3877
|
+
mask-image: url(ghost-ish.svg);
|
|
3878
3878
|
}
|
|
3879
3879
|
.shape.heart {
|
|
3880
|
-
mask-image: url(heart.svg)
|
|
3880
|
+
mask-image: url(heart.svg);
|
|
3881
3881
|
}
|
|
3882
3882
|
.shape.leaf-clover4 {
|
|
3883
|
-
mask-image: url(leaf-clover4.svg)
|
|
3883
|
+
mask-image: url(leaf-clover4.svg);
|
|
3884
3884
|
}
|
|
3885
3885
|
.shape.leaft-clover8 {
|
|
3886
|
-
mask-image: url(leaf-clover8.svg)
|
|
3886
|
+
mask-image: url(leaf-clover8.svg);
|
|
3887
3887
|
}
|
|
3888
3888
|
.shape.loading-indicator {
|
|
3889
|
-
mask-image: url(loading-indicator.svg)
|
|
3889
|
+
mask-image: url(loading-indicator.svg);
|
|
3890
3890
|
}
|
|
3891
3891
|
.shape.oval {
|
|
3892
|
-
mask-image: url(oval.svg)
|
|
3892
|
+
mask-image: url(oval.svg);
|
|
3893
3893
|
}
|
|
3894
3894
|
.shape.pentagon {
|
|
3895
|
-
mask-image: url(pentagon.svg)
|
|
3895
|
+
mask-image: url(pentagon.svg);
|
|
3896
3896
|
}
|
|
3897
3897
|
.shape.pill {
|
|
3898
|
-
mask-image: url(pill.svg)
|
|
3898
|
+
mask-image: url(pill.svg);
|
|
3899
3899
|
}
|
|
3900
3900
|
.shape.pixel-circle {
|
|
3901
|
-
mask-image: url(pixel-circle.svg)
|
|
3901
|
+
mask-image: url(pixel-circle.svg);
|
|
3902
3902
|
}
|
|
3903
3903
|
.shape.pixel-triangle {
|
|
3904
|
-
mask-image: url(pixel-triangle.svg)
|
|
3904
|
+
mask-image: url(pixel-triangle.svg);
|
|
3905
3905
|
}
|
|
3906
3906
|
.shape.puffy {
|
|
3907
|
-
mask-image: url(puffy.svg)
|
|
3907
|
+
mask-image: url(puffy.svg);
|
|
3908
3908
|
}
|
|
3909
3909
|
.shape.puffy-diamond {
|
|
3910
|
-
mask-image: url(puffy-diamond.svg)
|
|
3910
|
+
mask-image: url(puffy-diamond.svg);
|
|
3911
3911
|
}
|
|
3912
3912
|
.shape.semicircle {
|
|
3913
|
-
mask-image: url(semicircle.svg)
|
|
3913
|
+
mask-image: url(semicircle.svg);
|
|
3914
3914
|
}
|
|
3915
3915
|
.shape.sided-cookie4 {
|
|
3916
|
-
mask-image: url(sided-cookie4.svg)
|
|
3916
|
+
mask-image: url(sided-cookie4.svg);
|
|
3917
3917
|
}
|
|
3918
3918
|
.shape.sided-cookie6 {
|
|
3919
|
-
mask-image: url(sided-cookie6.svg)
|
|
3919
|
+
mask-image: url(sided-cookie6.svg);
|
|
3920
3920
|
}
|
|
3921
3921
|
.shape.sided-cookie7 {
|
|
3922
|
-
mask-image: url(sided-cookie7.svg)
|
|
3922
|
+
mask-image: url(sided-cookie7.svg);
|
|
3923
3923
|
}
|
|
3924
3924
|
.shape.sided-cookie9 {
|
|
3925
|
-
mask-image: url(sided-cookie9.svg)
|
|
3925
|
+
mask-image: url(sided-cookie9.svg);
|
|
3926
3926
|
}
|
|
3927
3927
|
.shape.sided-cookie12 {
|
|
3928
|
-
mask-image: url(sided-cookie12.svg)
|
|
3928
|
+
mask-image: url(sided-cookie12.svg);
|
|
3929
3929
|
}
|
|
3930
3930
|
.shape.slanted {
|
|
3931
|
-
mask-image: url(slanted.svg)
|
|
3931
|
+
mask-image: url(slanted.svg);
|
|
3932
3932
|
}
|
|
3933
3933
|
.shape.soft-boom {
|
|
3934
|
-
mask-image: url(soft-boom.svg)
|
|
3934
|
+
mask-image: url(soft-boom.svg);
|
|
3935
3935
|
}
|
|
3936
3936
|
.shape.soft-burst {
|
|
3937
|
-
mask-image: url(soft-burst.svg)
|
|
3937
|
+
mask-image: url(soft-burst.svg);
|
|
3938
3938
|
}
|
|
3939
3939
|
.shape.square {
|
|
3940
|
-
mask-image: url(square.svg)
|
|
3940
|
+
mask-image: url(square.svg);
|
|
3941
3941
|
}
|
|
3942
3942
|
.shape.sunny {
|
|
3943
|
-
mask-image: url(sunny.svg)
|
|
3943
|
+
mask-image: url(sunny.svg);
|
|
3944
3944
|
}
|
|
3945
3945
|
.shape.triangle {
|
|
3946
|
-
mask-image: url(triangle.svg)
|
|
3946
|
+
mask-image: url(triangle.svg);
|
|
3947
3947
|
}
|
|
3948
3948
|
.shape.very-sunny {
|
|
3949
|
-
mask-image: url(very-sunny.svg)
|
|
3949
|
+
mask-image: url(very-sunny.svg);
|
|
3950
3950
|
}
|
|
3951
3951
|
@keyframes to-shape-rotate {
|
|
3952
3952
|
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.14/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.14/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.14/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.14/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;
|