beercss 4.0.8 → 4.0.10
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 +33 -28
- 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 +33 -28
- 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 +11 -6
- package/src/cdn/settings/fonts.css +4 -4
- package/src/cdn/settings/theme.css +18 -18
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.10/dist/cdn/beer.min.css" rel="stylesheet" />
|
|
88
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.10/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.10/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
|
|
107
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.10/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.10/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.10/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.10/dist/cdn/beer.min.css" rel="stylesheet">
|
|
163
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.10/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.10/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.10/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.10/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.10/dist/cdn/material-symbols-subset.woff2) format("woff2");
|
|
174
174
|
}
|
|
175
175
|
|
|
176
176
|
/* begin scoped */
|
|
@@ -2609,7 +2609,7 @@ menu {
|
|
|
2609
2609
|
}
|
|
2610
2610
|
|
|
2611
2611
|
menu.no-wrap {
|
|
2612
|
-
inline-size: max-content;
|
|
2612
|
+
inline-size: max-content !important;
|
|
2613
2613
|
white-space: nowrap !important;
|
|
2614
2614
|
}
|
|
2615
2615
|
|
|
@@ -2788,17 +2788,22 @@ menu.large-space > li {
|
|
|
2788
2788
|
min-block-size: 4rem;
|
|
2789
2789
|
}
|
|
2790
2790
|
|
|
2791
|
-
menu.
|
|
2791
|
+
menu.group {
|
|
2792
2792
|
padding: 0;
|
|
2793
|
+
inline-size: 100%;
|
|
2794
|
+
min-inline-size: auto;
|
|
2795
|
+
max-block-size: none;
|
|
2796
|
+
overflow: unset;
|
|
2797
|
+
background: none;
|
|
2798
|
+
box-shadow: none;
|
|
2793
2799
|
}
|
|
2794
2800
|
|
|
2795
|
-
menu.
|
|
2796
|
-
background-color: inherit;
|
|
2801
|
+
menu.group > li {
|
|
2797
2802
|
box-shadow: none;
|
|
2798
2803
|
padding: 0;
|
|
2799
2804
|
}
|
|
2800
2805
|
|
|
2801
|
-
menu.
|
|
2806
|
+
menu.group > li > menu {
|
|
2802
2807
|
opacity: 1;
|
|
2803
2808
|
visibility: visible;
|
|
2804
2809
|
position: relative;
|
|
@@ -2808,7 +2813,7 @@ menu.transparent > li > menu {
|
|
|
2808
2813
|
border-radius: 1rem 1rem 0.5rem 0.5rem;
|
|
2809
2814
|
}
|
|
2810
2815
|
|
|
2811
|
-
menu.
|
|
2816
|
+
menu.group > li:last-child > menu {
|
|
2812
2817
|
border-radius: 0.5rem 0.5rem 1rem 1rem;
|
|
2813
2818
|
}
|
|
2814
2819
|
|
|
@@ -4977,40 +4982,40 @@ menu:active ~ .tooltip,
|
|
|
4977
4982
|
color: var(--on-surface-variant) !important;
|
|
4978
4983
|
}
|
|
4979
4984
|
|
|
4980
|
-
nav.primary > button,
|
|
4985
|
+
nav.primary-container > button,
|
|
4981
4986
|
:is(nav, menu).primary > :is(button, a, li).active {
|
|
4982
|
-
background-color: var(--primary-container);
|
|
4983
|
-
color: var(--on-primary-container);
|
|
4987
|
+
background-color: var(--primary-container) !important;
|
|
4988
|
+
color: var(--on-primary-container) !important;
|
|
4984
4989
|
}
|
|
4985
4990
|
|
|
4986
|
-
nav.primary
|
|
4991
|
+
nav.primary > button,
|
|
4987
4992
|
:is(nav, menu).primary-container > :is(button, a, li).active {
|
|
4988
|
-
background-color: var(--primary);
|
|
4989
|
-
color: var(--on-primary);
|
|
4993
|
+
background-color: var(--primary) !important;
|
|
4994
|
+
color: var(--on-primary) !important;
|
|
4990
4995
|
}
|
|
4991
4996
|
|
|
4992
|
-
nav.secondary > button,
|
|
4997
|
+
nav.secondary-container > button,
|
|
4993
4998
|
:is(nav, menu).secondary > :is(button, a, li).active {
|
|
4994
|
-
background-color: var(--secondary-container);
|
|
4995
|
-
color: var(--on-secondary-container);
|
|
4999
|
+
background-color: var(--secondary-container) !important;
|
|
5000
|
+
color: var(--on-secondary-container) !important;
|
|
4996
5001
|
}
|
|
4997
5002
|
|
|
4998
|
-
nav.secondary
|
|
5003
|
+
nav.secondary > button,
|
|
4999
5004
|
:is(nav, menu).secondary-container > :is(button, a, li).active {
|
|
5000
|
-
background-color: var(--secondary);
|
|
5001
|
-
color: var(--on-secondary);
|
|
5005
|
+
background-color: var(--secondary) !important;
|
|
5006
|
+
color: var(--on-secondary) !important;
|
|
5002
5007
|
}
|
|
5003
5008
|
|
|
5004
|
-
nav.tertiary > button,
|
|
5009
|
+
nav.tertiary-container > button,
|
|
5005
5010
|
:is(nav, menu).tertiary > :is(button, a, li).active {
|
|
5006
|
-
background-color: var(--tertiary-container);
|
|
5007
|
-
color: var(--on-tertiary-container);
|
|
5011
|
+
background-color: var(--tertiary-container) !important;
|
|
5012
|
+
color: var(--on-tertiary-container) !important;
|
|
5008
5013
|
}
|
|
5009
5014
|
|
|
5010
|
-
nav.tertiary
|
|
5015
|
+
nav.tertiary > button,
|
|
5011
5016
|
:is(nav, menu).tertiary-container > :is(button, a, li).active {
|
|
5012
|
-
background-color: var(--tertiary);
|
|
5013
|
-
color: var(--on-tertiary);
|
|
5017
|
+
background-color: var(--tertiary) !important;
|
|
5018
|
+
color: var(--on-tertiary) !important;
|
|
5014
5019
|
}
|
|
5015
5020
|
|
|
5016
5021
|
.red,
|
|
@@ -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.10/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.10/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.10/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.10/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;
|