beercss 3.11.6 → 3.11.8
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 +29 -22
- package/dist/cdn/beer.custom-element.js +2 -2
- package/dist/cdn/beer.custom-element.min.js +1 -1
- package/dist/cdn/beer.js +4 -1
- package/dist/cdn/beer.min.css +1 -1
- package/dist/cdn/beer.min.js +1 -1
- package/dist/cdn/beer.scoped.css +29 -22
- package/dist/cdn/beer.scoped.min.css +1 -1
- package/package.json +1 -1
- package/src/cdn/beer.ts +4 -1
- package/src/cdn/customElement.js +2 -2
- package/src/cdn/elements/navigations.css +26 -17
- package/src/cdn/helpers/reset.css +1 -1
- 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.8" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@3.11.8" 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.8/dist/cdn/beer.min.css" rel="stylesheet" />
|
|
135
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.8/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.8/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
|
|
154
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.8/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.8/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.8/dist/cdn/beer.min.css" rel="stylesheet">
|
|
199
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.8/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
|
@@ -101,7 +101,7 @@ body.dark {
|
|
|
101
101
|
font-display: block;
|
|
102
102
|
src:
|
|
103
103
|
url("material-symbols-outlined.woff2") format("woff2"),
|
|
104
|
-
url("https://cdn.jsdelivr.net/npm/beercss@3.11.
|
|
104
|
+
url("https://cdn.jsdelivr.net/npm/beercss@3.11.8/dist/cdn/material-symbols-outlined.woff2") format("woff2");
|
|
105
105
|
}
|
|
106
106
|
/* rounded icons */
|
|
107
107
|
@font-face {
|
|
@@ -111,7 +111,7 @@ body.dark {
|
|
|
111
111
|
font-display: block;
|
|
112
112
|
src:
|
|
113
113
|
url("material-symbols-rounded.woff2") format("woff2"),
|
|
114
|
-
url("https://cdn.jsdelivr.net/npm/beercss@3.11.
|
|
114
|
+
url("https://cdn.jsdelivr.net/npm/beercss@3.11.8/dist/cdn/material-symbols-rounded.woff2") format("woff2");
|
|
115
115
|
}
|
|
116
116
|
/* sharp icons */
|
|
117
117
|
@font-face {
|
|
@@ -121,7 +121,7 @@ body.dark {
|
|
|
121
121
|
font-display: block;
|
|
122
122
|
src:
|
|
123
123
|
url("material-symbols-sharp.woff2") format("woff2"),
|
|
124
|
-
url("https://cdn.jsdelivr.net/npm/beercss@3.11.
|
|
124
|
+
url("https://cdn.jsdelivr.net/npm/beercss@3.11.8/dist/cdn/material-symbols-sharp.woff2") format("woff2");
|
|
125
125
|
}
|
|
126
126
|
/* subset of only required icons */
|
|
127
127
|
@font-face {
|
|
@@ -131,7 +131,7 @@ body.dark {
|
|
|
131
131
|
font-display: block;
|
|
132
132
|
src:
|
|
133
133
|
url("material-symbols-subset.woff2") format("woff2"),
|
|
134
|
-
url("https://cdn.jsdelivr.net/npm/beercss@3.11.
|
|
134
|
+
url("https://cdn.jsdelivr.net/npm/beercss@3.11.8/dist/cdn/material-symbols-subset.woff2") format("woff2");
|
|
135
135
|
}
|
|
136
136
|
* {
|
|
137
137
|
-webkit-tap-highlight-color: transparent;
|
|
@@ -199,7 +199,7 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
|
|
|
199
199
|
outline-offset: 0.25rem;
|
|
200
200
|
}
|
|
201
201
|
:is(nav, .row, li).group > :focus-visible {
|
|
202
|
-
|
|
202
|
+
z-index: 1;
|
|
203
203
|
}
|
|
204
204
|
.transparent {
|
|
205
205
|
background-color: transparent !important;
|
|
@@ -3505,18 +3505,21 @@ nav.toolbar.max {
|
|
|
3505
3505
|
display: flex;
|
|
3506
3506
|
}
|
|
3507
3507
|
nav.group {
|
|
3508
|
-
gap: 0.125rem;
|
|
3509
3508
|
background: none !important;
|
|
3510
3509
|
}
|
|
3511
|
-
nav.group
|
|
3510
|
+
nav.group:is(.connected, .split) {
|
|
3511
|
+
gap: 0.125rem;
|
|
3512
|
+
}
|
|
3513
|
+
nav.group:not(.split) > :is(.button, button):not(.chip, .fill, .border).active {
|
|
3512
3514
|
background-color: var(--primary);
|
|
3513
3515
|
color: var(--on-primary);
|
|
3514
3516
|
}
|
|
3515
|
-
nav.group > :is(.button, button):not(.chip, .fill, .border) {
|
|
3517
|
+
nav.group:not(.split) > :is(.button, button):not(.chip, .fill, .border) {
|
|
3516
3518
|
background-color: var(--surface-container);
|
|
3517
3519
|
color: var(--on-surface-container);
|
|
3518
3520
|
}
|
|
3519
|
-
nav.group > :is(.button, button):not(.chip).active
|
|
3521
|
+
nav.group:is(.connected, .split) > :is(.button, button):not(.chip).active,
|
|
3522
|
+
nav.split > :is(.button, button):active {
|
|
3520
3523
|
border-radius: 2rem !important;
|
|
3521
3524
|
}
|
|
3522
3525
|
:not(nav) > :is(ul, ol) {
|
|
@@ -3526,44 +3529,48 @@ nav.group > :is(.button, button):not(.chip).active {
|
|
|
3526
3529
|
outline: 0.125rem solid var(--primary);
|
|
3527
3530
|
outline-offset: -0.125rem;
|
|
3528
3531
|
}
|
|
3532
|
+
nav.split > :is(.button, button):not(.chip, .fill, .border) {
|
|
3533
|
+
background-color: var(--primary);
|
|
3534
|
+
color: var(--on-primary);
|
|
3535
|
+
}
|
|
3529
3536
|
nav.primary > :is(a, button, .button),
|
|
3530
|
-
nav.primary-container > a:is(:hover, :focus, .active) > i,
|
|
3531
|
-
nav.primary-container > :is(a, button, .button).active,
|
|
3537
|
+
nav:not(.split).primary-container > a:is(:hover, :focus, .active) > i,
|
|
3538
|
+
nav:not(.split).primary-container > :is(a, button, .button).active,
|
|
3532
3539
|
:is(a, button, .button):not(.extend).primary-container.active {
|
|
3533
3540
|
background-color: var(--primary) !important;
|
|
3534
3541
|
color: var(--on-primary) !important;
|
|
3535
3542
|
}
|
|
3536
3543
|
nav.primary-container > :is(a, button, .button),
|
|
3537
|
-
nav.primary > a:is(:hover, :focus, .active) > i,
|
|
3538
|
-
nav.primary > :is(a, button, .button).active,
|
|
3544
|
+
nav:not(.split).primary > a:is(:hover, :focus, .active) > i,
|
|
3545
|
+
nav:not(.split).primary > :is(a, button, .button).active,
|
|
3539
3546
|
:is(a, button, .button):not(.extend).primary.active {
|
|
3540
3547
|
background-color: var(--primary-container) !important;
|
|
3541
3548
|
color: var(--on-primary-container) !important;
|
|
3542
3549
|
}
|
|
3543
3550
|
nav.secondary > :is(a, button, .button),
|
|
3544
|
-
nav.secondary-container > a:is(:hover, :focus, .active) > i,
|
|
3545
|
-
nav.secondary-container > :is(a, button, .button).active,
|
|
3551
|
+
nav:not(.split).secondary-container > a:is(:hover, :focus, .active) > i,
|
|
3552
|
+
nav:not(.split).secondary-container > :is(a, button, .button).active,
|
|
3546
3553
|
:is(a, button, .button):not(.extend).secondary-container.active {
|
|
3547
3554
|
background-color: var(--secondary) !important;
|
|
3548
3555
|
color: var(--on-secondary) !important;
|
|
3549
3556
|
}
|
|
3550
3557
|
nav.secondary-container > :is(a, button, .button),
|
|
3551
|
-
nav.secondary > a:is(:hover, :focus, .active) > i,
|
|
3552
|
-
nav.secondary > :is(a, button, .button).active,
|
|
3558
|
+
nav:not(.split).secondary > a:is(:hover, :focus, .active) > i,
|
|
3559
|
+
nav:not(.split).secondary > :is(a, button, .button).active,
|
|
3553
3560
|
:is(a, button, .button):not(.extend).secondary.active {
|
|
3554
3561
|
background-color: var(--secondary-container) !important;
|
|
3555
3562
|
color: var(--on-secondary-container) !important;
|
|
3556
3563
|
}
|
|
3557
3564
|
nav.tertiary > :is(a, button, .button),
|
|
3558
|
-
nav.tertiary-container > a:is(:hover, :focus, .active) > i,
|
|
3559
|
-
nav.tertiary-container > :is(a, button, .button).active,
|
|
3565
|
+
nav:not(.split).tertiary-container > a:is(:hover, :focus, .active) > i,
|
|
3566
|
+
nav:not(.split).tertiary-container > :is(a, button, .button).active,
|
|
3560
3567
|
:is(a, button, .button):not(.extend).tertiary-container.active {
|
|
3561
3568
|
background-color: var(--tertiary) !important;
|
|
3562
3569
|
color: var(--on-tertiary) !important;
|
|
3563
3570
|
}
|
|
3564
|
-
nav.tertiary-container > :is(a, button, .button),
|
|
3565
|
-
nav.tertiary > a:is(:hover, :focus, .active) > i,
|
|
3566
|
-
nav.tertiary > :is(a, button, .button).active,
|
|
3571
|
+
nav:not(.split).tertiary-container > :is(a, button, .button),
|
|
3572
|
+
nav:not(.split).tertiary > a:is(:hover, :focus, .active) > i,
|
|
3573
|
+
nav:not(.split).tertiary > :is(a, button, .button).active,
|
|
3567
3574
|
:is(a, button, .button):not(.extend).tertiary.active {
|
|
3568
3575
|
background-color: var(--tertiary-container) !important;
|
|
3569
3576
|
color: var(--on-tertiary-container) !important;
|
|
@@ -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.8/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.8/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.8/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.8/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;
|
package/dist/cdn/beer.js
CHANGED
|
@@ -518,7 +518,10 @@ function onMutation() {
|
|
|
518
518
|
async function run(from, to, options, e) {
|
|
519
519
|
if (!to) {
|
|
520
520
|
to = query(from.getAttribute("data-ui"));
|
|
521
|
-
if (!to)
|
|
521
|
+
if (!to) {
|
|
522
|
+
from.classList.toggle("active");
|
|
523
|
+
return;
|
|
524
|
+
}
|
|
522
525
|
}
|
|
523
526
|
updateAllClickable(from);
|
|
524
527
|
if (hasTag(to, "dialog")) {
|