beercss 3.11.15 → 3.11.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 +26 -26
- 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 +26 -26
- 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/navigations.css +18 -18
- package/src/cdn/helpers/waves.css +4 -4
- 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.16" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@3.11.16" 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.16/dist/cdn/beer.min.css" rel="stylesheet" />
|
|
135
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.16/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.16/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
|
|
154
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.16/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.16/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.16/dist/cdn/beer.min.css" rel="stylesheet">
|
|
199
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.16/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.16/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.16/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.16/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.16/dist/cdn/material-symbols-subset.woff2) format("woff2");
|
|
127
127
|
}
|
|
128
128
|
* {
|
|
129
129
|
-webkit-tap-highlight-color: transparent;
|
|
@@ -1617,10 +1617,10 @@ nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a > i::after
|
|
|
1617
1617
|
transition: none;
|
|
1618
1618
|
}
|
|
1619
1619
|
:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, nav.toolbar > a):not(.slow-ripple, .ripple, .fast-ripple):is(:focus-visible, :hover)::after,
|
|
1620
|
-
nav:is(.left, .right, .bottom, .top).max > a:is(:focus-visible, :hover)::after,
|
|
1621
|
-
nav:is(.left, .right, .bottom, .top).max > :is(ol, ul) > li > a:is(:focus-visible, :hover)::after,
|
|
1622
|
-
nav:is(.left, .right, .bottom, .top):not(.max) > a:is(:focus-visible, :hover) > i::after,
|
|
1623
|
-
nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a:is(:focus-visible, :hover) > i::after {
|
|
1620
|
+
nav:is(.left, .right, .bottom, .top).max > a:not(.button, .chip):is(:focus-visible, :hover)::after,
|
|
1621
|
+
nav:is(.left, .right, .bottom, .top).max > :is(ol, ul) > li > a:not(.button, .chip):is(:focus-visible, :hover)::after,
|
|
1622
|
+
nav:is(.left, .right, .bottom, .top):not(.max) > a:not(.button, .chip):is(:focus-visible, :hover) > i::after,
|
|
1623
|
+
nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a:not(.button, .chip):is(:focus-visible, :hover) > i::after {
|
|
1624
1624
|
background-size: 15000%;
|
|
1625
1625
|
opacity: 0.1;
|
|
1626
1626
|
transition: background-size var(--speed2) linear;
|
|
@@ -3300,8 +3300,8 @@ nav.max:is(.top, .bottom) {
|
|
|
3300
3300
|
min-inline-size: auto;
|
|
3301
3301
|
max-inline-size: none;
|
|
3302
3302
|
}
|
|
3303
|
-
nav:is(.left, .right, .top, .bottom) > a,
|
|
3304
|
-
nav:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a {
|
|
3303
|
+
nav:is(.left, .right, .top, .bottom) > a:not(.button, .chip),
|
|
3304
|
+
nav:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip) {
|
|
3305
3305
|
display: flex;
|
|
3306
3306
|
flex-direction: column;
|
|
3307
3307
|
gap: 0.25rem;
|
|
@@ -3309,15 +3309,15 @@ nav:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a {
|
|
|
3309
3309
|
inline-size: 3.5rem;
|
|
3310
3310
|
font-size: 0.8rem;
|
|
3311
3311
|
}
|
|
3312
|
-
nav:not(.max):is(.left, .right, .top, .bottom) > a > i,
|
|
3313
|
-
nav:not(.max):is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a > i {
|
|
3312
|
+
nav:not(.max):is(.left, .right, .top, .bottom) > a:not(.button, .chip) > i,
|
|
3313
|
+
nav:not(.max):is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip) > i {
|
|
3314
3314
|
padding: 0.25rem 1rem;
|
|
3315
3315
|
border-radius: 2rem;
|
|
3316
3316
|
transition: padding var(--speed1) linear;
|
|
3317
3317
|
margin: 0 auto;
|
|
3318
3318
|
}
|
|
3319
|
-
nav.max:is(.left, .right, .top, .bottom) > a,
|
|
3320
|
-
nav.max:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a {
|
|
3319
|
+
nav.max:is(.left, .right, .top, .bottom) > a:not(.button, .chip),
|
|
3320
|
+
nav.max:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip) {
|
|
3321
3321
|
flex-direction: row;
|
|
3322
3322
|
gap: 0.5rem;
|
|
3323
3323
|
inline-size: auto;
|
|
@@ -3326,16 +3326,16 @@ nav.max:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a {
|
|
|
3326
3326
|
border-radius: 2rem;
|
|
3327
3327
|
font-size: inherit;
|
|
3328
3328
|
}
|
|
3329
|
-
nav.max:is(.top, .bottom) > a,
|
|
3330
|
-
nav.max:is(.top, .bottom) > :is(ol, ul) > li > a {
|
|
3329
|
+
nav.max:is(.top, .bottom) > a:not(.button, .chip),
|
|
3330
|
+
nav.max:is(.top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip) {
|
|
3331
3331
|
gap: 0.25rem;
|
|
3332
3332
|
block-size: 2.5rem;
|
|
3333
3333
|
font-size: 0.8rem;
|
|
3334
3334
|
}
|
|
3335
|
-
nav.max:is(.left, .right, .top, .bottom) > a.active,
|
|
3336
|
-
nav.max:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a.active,
|
|
3337
|
-
nav:is(.left, .right, .top, .bottom):not(.max) > a.active > i,
|
|
3338
|
-
nav:is(.left, .right, .top, .bottom):not(.max) > :is(ol, ul) > li > a.active > i {
|
|
3335
|
+
nav.max:is(.left, .right, .top, .bottom) > a.active:not(.button, .chip),
|
|
3336
|
+
nav.max:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a.active:not(.button, .chip),
|
|
3337
|
+
nav:is(.left, .right, .top, .bottom):not(.max) > a.active:not(.button, .chip) > i,
|
|
3338
|
+
nav:is(.left, .right, .top, .bottom):not(.max) > :is(ol, ul) > li > a.active:not(.button, .chip) > i {
|
|
3339
3339
|
background-color: var(--secondary-container);
|
|
3340
3340
|
color: var(--on-secondary-container);
|
|
3341
3341
|
}
|
|
@@ -3481,37 +3481,37 @@ nav.split > :is(.button, button):not(.chip, .fill, .border) {
|
|
|
3481
3481
|
}
|
|
3482
3482
|
nav.group.primary-container > button,
|
|
3483
3483
|
nav:is(.max, .toolbar, .tabbed, .group).primary > :is(button, a).active,
|
|
3484
|
-
nav:not(.max, .toolbar, .tabbed, .group).primary > a.active > i {
|
|
3484
|
+
nav:not(.max, .toolbar, .tabbed, .group).primary > a.active:not(.button, .chip) > i {
|
|
3485
3485
|
background-color: var(--primary-container) !important;
|
|
3486
3486
|
color: var(--on-primary-container) !important;
|
|
3487
3487
|
}
|
|
3488
3488
|
nav.group.primary > button,
|
|
3489
3489
|
nav:is(.max, .toolbar, .tabbed, .group).primary-container > :is(button, a).active,
|
|
3490
|
-
nav:not(.max, .toolbar, .tabbed, .group).primary-container > a.active > i {
|
|
3490
|
+
nav:not(.max, .toolbar, .tabbed, .group).primary-container > a.active:not(.button, .chip) > i {
|
|
3491
3491
|
background-color: var(--primary) !important;
|
|
3492
3492
|
color: var(--on-primary) !important;
|
|
3493
3493
|
}
|
|
3494
3494
|
nav.group.secondary-container > button,
|
|
3495
3495
|
nav:is(.max, .toolbar, .tabbed, .group).secondary > :is(button, a).active,
|
|
3496
|
-
nav:not(.max, .toolbar, .tabbed, .group).secondary > a.active > i {
|
|
3496
|
+
nav:not(.max, .toolbar, .tabbed, .group).secondary > a.active:not(.button, .chip) > i {
|
|
3497
3497
|
background-color: var(--secondary-container) !important;
|
|
3498
3498
|
color: var(--on-secondary-container) !important;
|
|
3499
3499
|
}
|
|
3500
3500
|
nav.group.secondary > button,
|
|
3501
3501
|
nav:is(.max, .toolbar, .tabbed, .group).secondary-container > :is(button, a).active,
|
|
3502
|
-
nav:not(.max, .toolbar, .tabbed, .group).secondary-container > a.active > i {
|
|
3502
|
+
nav:not(.max, .toolbar, .tabbed, .group).secondary-container > a.active:not(.button, .chip) > i {
|
|
3503
3503
|
background-color: var(--secondary) !important;
|
|
3504
3504
|
color: var(--on-secondary) !important;
|
|
3505
3505
|
}
|
|
3506
3506
|
nav.group.tertiary-container > button,
|
|
3507
3507
|
nav:is(.max, .toolbar, .tabbed, .group).tertiary > :is(button, a).active,
|
|
3508
|
-
nav:not(.max, .toolbar, .tabbed, .group).tertiary > a.active > i {
|
|
3508
|
+
nav:not(.max, .toolbar, .tabbed, .group).tertiary > a.active:not(.button, .chip) > i {
|
|
3509
3509
|
background-color: var(--tertiary-container) !important;
|
|
3510
3510
|
color: var(--on-tertiary-container) !important;
|
|
3511
3511
|
}
|
|
3512
3512
|
nav.group.tertiary > button,
|
|
3513
3513
|
nav:is(.max, .toolbar, .tabbed, .group).tertiary-container > :is(button, a).active,
|
|
3514
|
-
nav:not(.max, .toolbar, .tabbed, .group).tertiary-container > a.active > i {
|
|
3514
|
+
nav:not(.max, .toolbar, .tabbed, .group).tertiary-container > a.active:not(.button, .chip) > i {
|
|
3515
3515
|
background-color: var(--tertiary) !important;
|
|
3516
3516
|
color: var(--on-tertiary) !important;
|
|
3517
3517
|
}
|
|
@@ -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.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@3.11.
|
|
26
|
+
element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@3.11.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@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.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@3.11.16/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;
|