beercss 3.10.7 → 3.11.1
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 +196 -81
- package/dist/cdn/beer.custom-element.js +4 -4
- package/dist/cdn/beer.custom-element.min.js +1 -1
- package/dist/cdn/beer.js +1 -1
- package/dist/cdn/beer.min.css +1 -1
- package/dist/cdn/beer.min.js +1 -1
- package/dist/cdn/beer.scoped.css +196 -81
- package/dist/cdn/beer.scoped.min.css +1 -1
- package/package.json +1 -1
- package/src/cdn/beer.css +2 -2
- package/src/cdn/customElement.js +4 -4
- package/src/cdn/elements/buttons.css +24 -3
- package/src/cdn/elements/chips.css +0 -5
- package/src/cdn/elements/mainLayouts.css +6 -6
- package/src/cdn/elements/media.css +3 -11
- package/src/cdn/elements/menus.css +15 -3
- package/src/cdn/elements/navigations.css +88 -13
- package/src/cdn/helpers/forms.css +5 -1
- package/src/cdn/helpers/reset.css +4 -0
- package/src/cdn/helpers/theme.css +36 -0
- package/src/cdn/helpers/waves.css +3 -3
- package/src/cdn/settings/fonts.css +4 -4
- package/src/cdn/utils.ts +1 -1
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.
|
|
7
|
+
<a href="https://bundlephobia.com/package/beercss@3.11.1" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@3.11.1" 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>
|
|
@@ -130,8 +130,8 @@ This project was guided by the **"Germany Beer Purity Law"** or **"Reinheitsgebo
|
|
|
130
130
|
### DEFAULT VERSION
|
|
131
131
|
|
|
132
132
|
```html
|
|
133
|
-
<link href="https://cdn.jsdelivr.net/npm/beercss@3.
|
|
134
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.
|
|
133
|
+
<link href="https://cdn.jsdelivr.net/npm/beercss@3.11.1/dist/cdn/beer.min.css" rel="stylesheet" />
|
|
134
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.1/dist/cdn/beer.min.js"></script>
|
|
135
135
|
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
|
|
136
136
|
```
|
|
137
137
|
|
|
@@ -149,8 +149,8 @@ import "material-dynamic-colors";
|
|
|
149
149
|
Applied on child elements of `<* class="beer">...</*>`.
|
|
150
150
|
|
|
151
151
|
```html
|
|
152
|
-
<link href="https://cdn.jsdelivr.net/npm/beercss@3.
|
|
153
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.
|
|
152
|
+
<link href="https://cdn.jsdelivr.net/npm/beercss@3.11.1/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
|
|
153
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.1/dist/cdn/beer.min.js"></script>
|
|
154
154
|
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
|
|
155
155
|
```
|
|
156
156
|
|
|
@@ -168,7 +168,7 @@ import "material-dynamic-colors";
|
|
|
168
168
|
Applied on child elements of `<beer-css>...</beer-css>`.
|
|
169
169
|
|
|
170
170
|
```html
|
|
171
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.
|
|
171
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.1/dist/cdn/beer.custom-element.min.js"></script>
|
|
172
172
|
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
|
|
173
173
|
```
|
|
174
174
|
|
|
@@ -194,8 +194,8 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
|
|
|
194
194
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
195
195
|
<meta name="google" content="notranslate">
|
|
196
196
|
<title>Hello world</title>
|
|
197
|
-
<link href="https://cdn.jsdelivr.net/npm/beercss@3.
|
|
198
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.
|
|
197
|
+
<link href="https://cdn.jsdelivr.net/npm/beercss@3.11.1/dist/cdn/beer.min.css" rel="stylesheet">
|
|
198
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.1/dist/cdn/beer.min.js"></script>
|
|
199
199
|
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
|
|
200
200
|
</head>
|
|
201
201
|
<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.
|
|
104
|
+
url("https://cdn.jsdelivr.net/npm/beercss@3.11.1/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.
|
|
114
|
+
url("https://cdn.jsdelivr.net/npm/beercss@3.11.1/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.
|
|
124
|
+
url("https://cdn.jsdelivr.net/npm/beercss@3.11.1/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.
|
|
134
|
+
url("https://cdn.jsdelivr.net/npm/beercss@3.11.1/dist/cdn/material-symbols-subset.woff2") format("woff2");
|
|
135
135
|
}
|
|
136
136
|
* {
|
|
137
137
|
-webkit-tap-highlight-color: transparent;
|
|
@@ -198,6 +198,9 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
|
|
|
198
198
|
outline: 0.125rem solid var(--primary);
|
|
199
199
|
outline-offset: 0.25rem;
|
|
200
200
|
}
|
|
201
|
+
:is(nav, .row, li).group > :focus-visible {
|
|
202
|
+
outline-offset: 0;
|
|
203
|
+
}
|
|
201
204
|
.transparent {
|
|
202
205
|
background-color: transparent !important;
|
|
203
206
|
box-shadow: none !important;
|
|
@@ -344,6 +347,36 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
|
|
|
344
347
|
background-color: var(--surface-variant) !important;
|
|
345
348
|
color: var(--on-surface-variant) !important;
|
|
346
349
|
}
|
|
350
|
+
.primary-container > .active,
|
|
351
|
+
.primary-container.active {
|
|
352
|
+
background-color: var(--primary) !important;
|
|
353
|
+
color: var(--on-primary) !important;
|
|
354
|
+
}
|
|
355
|
+
.secondary-container > .active,
|
|
356
|
+
.secondary-container.active {
|
|
357
|
+
background-color: var(--secondary) !important;
|
|
358
|
+
color: var(--on-secondary) !important;
|
|
359
|
+
}
|
|
360
|
+
.tertiary-container > .active,
|
|
361
|
+
.tertiary-container.active {
|
|
362
|
+
background-color: var(--tertiary) !important;
|
|
363
|
+
color: var(--on-tertiary) !important;
|
|
364
|
+
}
|
|
365
|
+
.primary > .active,
|
|
366
|
+
.primary.active {
|
|
367
|
+
background-color: var(--primary-container) !important;
|
|
368
|
+
color: var(--on-primary-container) !important;
|
|
369
|
+
}
|
|
370
|
+
.secondary > .active,
|
|
371
|
+
.secondary.active {
|
|
372
|
+
background-color: var(--secondary-container) !important;
|
|
373
|
+
color: var(--on-secondary-container) !important;
|
|
374
|
+
}
|
|
375
|
+
.tertiary > .active,
|
|
376
|
+
.tertiary.active {
|
|
377
|
+
background-color: var(--tertiary-container) !important;
|
|
378
|
+
color: var(--on-tertiary-container) !important;
|
|
379
|
+
}
|
|
347
380
|
.middle-align {
|
|
348
381
|
display: flex;
|
|
349
382
|
align-items: center !important;
|
|
@@ -368,6 +401,24 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
|
|
|
368
401
|
text-align: center;
|
|
369
402
|
justify-content: center !important;
|
|
370
403
|
}
|
|
404
|
+
[class*=blur],
|
|
405
|
+
[class*=blur].light {
|
|
406
|
+
--_blur: 1rem;
|
|
407
|
+
-webkit-backdrop-filter: blur(var(--_blur));
|
|
408
|
+
backdrop-filter: blur(var(--_blur));
|
|
409
|
+
color: var(--on-surface);
|
|
410
|
+
background-color: rgb(255 255 255 / 0.5) !important;
|
|
411
|
+
}
|
|
412
|
+
.dark [class*=blur],
|
|
413
|
+
[class*=blur].dark {
|
|
414
|
+
background-color: rgb(0 0 0 / 0.5) !important;
|
|
415
|
+
}
|
|
416
|
+
.small-blur {
|
|
417
|
+
--_blur: 0.5rem;
|
|
418
|
+
}
|
|
419
|
+
.large-blur {
|
|
420
|
+
--_blur: 1.5rem;
|
|
421
|
+
}
|
|
371
422
|
.red,
|
|
372
423
|
.red6 {
|
|
373
424
|
background-color: #F44336 !important;
|
|
@@ -1124,7 +1175,7 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
|
|
|
1124
1175
|
.bottom-round,
|
|
1125
1176
|
.left-round,
|
|
1126
1177
|
.right-round {
|
|
1127
|
-
border-radius: 0 !important;
|
|
1178
|
+
border-radius: 0.5rem !important;
|
|
1128
1179
|
}
|
|
1129
1180
|
.top-round {
|
|
1130
1181
|
border-start-start-radius: var(--_round) !important;
|
|
@@ -1165,6 +1216,9 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
|
|
|
1165
1216
|
.no-border {
|
|
1166
1217
|
border-color: transparent !important;
|
|
1167
1218
|
}
|
|
1219
|
+
.border:not(.extend, .circle, .square, .badge) {
|
|
1220
|
+
box-sizing: content-box;
|
|
1221
|
+
}
|
|
1168
1222
|
[class*=margin]:not(.left-margin, .right-margin, .top-margin, .bottom-margin, .horizontal-margin, .vertical-margin) {
|
|
1169
1223
|
margin: var(--_margin) !important;
|
|
1170
1224
|
}
|
|
@@ -1321,6 +1375,24 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
|
|
|
1321
1375
|
.no-scroll {
|
|
1322
1376
|
overflow: hidden;
|
|
1323
1377
|
}
|
|
1378
|
+
.shadow {
|
|
1379
|
+
background-color: #00000050;
|
|
1380
|
+
}
|
|
1381
|
+
:is(.left-shadow, .right-shadow, .top-shadow, .bottom-shadow) {
|
|
1382
|
+
background-color: transparent !important;
|
|
1383
|
+
}
|
|
1384
|
+
.left-shadow {
|
|
1385
|
+
background-image: linear-gradient(to right, black, transparent) !important;
|
|
1386
|
+
}
|
|
1387
|
+
.right-shadow {
|
|
1388
|
+
background-image: linear-gradient(to left, black, transparent) !important;
|
|
1389
|
+
}
|
|
1390
|
+
.bottom-shadow {
|
|
1391
|
+
background-image: linear-gradient(to top, black, transparent) !important;
|
|
1392
|
+
}
|
|
1393
|
+
.top-shadow {
|
|
1394
|
+
background-image: linear-gradient(to bottom, black, transparent) !important;
|
|
1395
|
+
}
|
|
1324
1396
|
[class*=width] {
|
|
1325
1397
|
max-inline-size: 100%;
|
|
1326
1398
|
}
|
|
@@ -1564,7 +1636,7 @@ pre:has(> code){
|
|
|
1564
1636
|
direction: ltr;
|
|
1565
1637
|
text-align: start;
|
|
1566
1638
|
}
|
|
1567
|
-
:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):not(.slow-ripple, .ripple, .fast-ripple)::after {
|
|
1639
|
+
:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, .toolbar > a):not(.slow-ripple, .ripple, .fast-ripple)::after {
|
|
1568
1640
|
content: "";
|
|
1569
1641
|
position: absolute;
|
|
1570
1642
|
inset: 0;
|
|
@@ -1577,12 +1649,12 @@ pre:has(> code){
|
|
|
1577
1649
|
opacity: 0;
|
|
1578
1650
|
transition: none;
|
|
1579
1651
|
}
|
|
1580
|
-
:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):not(.slow-ripple, .ripple, .fast-ripple):is(:focus-visible, :hover)::after {
|
|
1652
|
+
:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, .toolbar > a):not(.slow-ripple, .ripple, .fast-ripple):is(:focus-visible, :hover)::after {
|
|
1581
1653
|
background-size: 15000%;
|
|
1582
1654
|
opacity: 0.1;
|
|
1583
1655
|
transition: background-size var(--speed2) linear;
|
|
1584
1656
|
}
|
|
1585
|
-
:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):not(.slow-ripple, .ripple, .fast-ripple):active::after {
|
|
1657
|
+
:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, .toolbar > a):not(.slow-ripple, .ripple, .fast-ripple):active::after {
|
|
1586
1658
|
background-size: 5000%;
|
|
1587
1659
|
opacity: 0;
|
|
1588
1660
|
transition: none;
|
|
@@ -1591,42 +1663,6 @@ pre:has(> code){
|
|
|
1591
1663
|
.no-wave:is(:hover, :active)::after {
|
|
1592
1664
|
display: none;
|
|
1593
1665
|
}
|
|
1594
|
-
[class*=blur],
|
|
1595
|
-
[class*=blur].light {
|
|
1596
|
-
--_blur: 1rem;
|
|
1597
|
-
-webkit-backdrop-filter: blur(var(--_blur));
|
|
1598
|
-
backdrop-filter: blur(var(--_blur));
|
|
1599
|
-
color: var(--on-surface);
|
|
1600
|
-
background-color: rgb(255 255 255 / 0.5) !important;
|
|
1601
|
-
}
|
|
1602
|
-
.dark [class*=blur],
|
|
1603
|
-
[class*=blur].dark {
|
|
1604
|
-
background-color: rgb(0 0 0 / 0.5) !important;
|
|
1605
|
-
}
|
|
1606
|
-
.small-blur {
|
|
1607
|
-
--_blur: 0.5rem;
|
|
1608
|
-
}
|
|
1609
|
-
.large-blur {
|
|
1610
|
-
--_blur: 1.5rem;
|
|
1611
|
-
}
|
|
1612
|
-
.shadow {
|
|
1613
|
-
background-color: #00000050;
|
|
1614
|
-
}
|
|
1615
|
-
:is(.left-shadow, .right-shadow, .top-shadow, .bottom-shadow) {
|
|
1616
|
-
background-color: transparent !important;
|
|
1617
|
-
}
|
|
1618
|
-
.left-shadow {
|
|
1619
|
-
background-image: linear-gradient(to right, black, transparent) !important;
|
|
1620
|
-
}
|
|
1621
|
-
.right-shadow {
|
|
1622
|
-
background-image: linear-gradient(to left, black, transparent) !important;
|
|
1623
|
-
}
|
|
1624
|
-
.bottom-shadow {
|
|
1625
|
-
background-image: linear-gradient(to top, black, transparent) !important;
|
|
1626
|
-
}
|
|
1627
|
-
.top-shadow {
|
|
1628
|
-
background-image: linear-gradient(to bottom, black, transparent) !important;
|
|
1629
|
-
}
|
|
1630
1666
|
.badge {
|
|
1631
1667
|
--_x: 0;
|
|
1632
1668
|
--_y: -100%;
|
|
@@ -1787,11 +1823,11 @@ button {
|
|
|
1787
1823
|
font-size: 0.875rem;
|
|
1788
1824
|
font-weight: 500;
|
|
1789
1825
|
color: var(--on-primary);
|
|
1790
|
-
padding: 0
|
|
1826
|
+
padding: 0 1rem;
|
|
1791
1827
|
background-color: var(--primary);
|
|
1792
1828
|
margin: 0 0.5rem;
|
|
1793
1829
|
border-radius: var(--_size);
|
|
1794
|
-
transition: transform var(--speed3), border-radius var(--
|
|
1830
|
+
transition: transform var(--speed3), border-radius var(--speed2), padding var(--speed3);
|
|
1795
1831
|
user-select: none;
|
|
1796
1832
|
gap: 1rem;
|
|
1797
1833
|
line-height: normal;
|
|
@@ -1839,10 +1875,27 @@ button {
|
|
|
1839
1875
|
:is(.button, button)[disabled]::after {
|
|
1840
1876
|
display: none;
|
|
1841
1877
|
}
|
|
1842
|
-
:is(.button, button).fill {
|
|
1878
|
+
:is(.button, button):not(.chip).fill {
|
|
1843
1879
|
background-color: var(--secondary-container) !important;
|
|
1844
1880
|
color: var(--on-secondary-container) !important;
|
|
1845
1881
|
}
|
|
1882
|
+
:is(.button, button):not(.chip).active {
|
|
1883
|
+
background-color: var(--primary-container);
|
|
1884
|
+
color: var(--on-primary-container);
|
|
1885
|
+
}
|
|
1886
|
+
:is(.button, button):not(.chip).fill.active {
|
|
1887
|
+
background-color: var(--secondary) !important;
|
|
1888
|
+
color: var(--on-secondary) !important;
|
|
1889
|
+
}
|
|
1890
|
+
:is(.button, button):not(.chip).border.active {
|
|
1891
|
+
background-color: var(--inverse-surface) !important;
|
|
1892
|
+
color: var(--inverse-on-surface) !important;
|
|
1893
|
+
border-color: var(--inverse-surface) !important;
|
|
1894
|
+
}
|
|
1895
|
+
:is(.button, button):not(.chip):active,
|
|
1896
|
+
:is(.button, button):not(.chip).active {
|
|
1897
|
+
border-radius: 0.5rem !important;
|
|
1898
|
+
}
|
|
1846
1899
|
article {
|
|
1847
1900
|
--_padding: 1rem;
|
|
1848
1901
|
box-shadow: var(--elevate1);
|
|
@@ -1885,9 +1938,6 @@ article.large {
|
|
|
1885
1938
|
line-height: normal;
|
|
1886
1939
|
letter-spacing: normal;
|
|
1887
1940
|
}
|
|
1888
|
-
.chip.fill:hover {
|
|
1889
|
-
box-shadow: var(--elevate1);
|
|
1890
|
-
}
|
|
1891
1941
|
.chip.medium {
|
|
1892
1942
|
--_size: 2.5rem;
|
|
1893
1943
|
}
|
|
@@ -1895,7 +1945,6 @@ article.large {
|
|
|
1895
1945
|
--_size: 3rem;
|
|
1896
1946
|
}
|
|
1897
1947
|
.chip.fill {
|
|
1898
|
-
background-color: var(--secondary-container) !important;
|
|
1899
1948
|
border: none;
|
|
1900
1949
|
}
|
|
1901
1950
|
.chip.round.small {
|
|
@@ -2768,22 +2817,22 @@ main {
|
|
|
2768
2817
|
margin-block: calc(var(--top) + var(--_top)) calc(var(--bottom) + var(--_bottom));
|
|
2769
2818
|
margin-inline: calc(var(--left) + var(--_left)) calc(var(--right) + var(--_right));
|
|
2770
2819
|
}
|
|
2771
|
-
:has(> nav.top:not(.s, .
|
|
2820
|
+
:has(> nav.top:not(.s, .m, .l)) {
|
|
2772
2821
|
--_top: 5rem;
|
|
2773
2822
|
}
|
|
2774
|
-
:has(> nav.bottom:not(.s, .
|
|
2823
|
+
:has(> nav.bottom:not(.s, .m, .l)) {
|
|
2775
2824
|
--_bottom: 5rem;
|
|
2776
2825
|
}
|
|
2777
|
-
:has(> nav.left:not(.s, .
|
|
2826
|
+
:has(> nav.left:not(.s, .m, .l)) {
|
|
2778
2827
|
--_left: 5rem;
|
|
2779
2828
|
}
|
|
2780
|
-
:has(> nav.right:not(.s, .
|
|
2829
|
+
:has(> nav.right:not(.s, .m, .l)) {
|
|
2781
2830
|
--_right: 5rem;
|
|
2782
2831
|
}
|
|
2783
|
-
:has(> nav.drawer.left:not(.s, .
|
|
2832
|
+
:has(> nav.drawer.left:not(.s, .m, .l)) {
|
|
2784
2833
|
--_left: 20rem;
|
|
2785
2834
|
}
|
|
2786
|
-
:has(> nav.drawer.right:not(.s, .
|
|
2835
|
+
:has(> nav.drawer.right:not(.s, .m, .l)) {
|
|
2787
2836
|
--_right: 20rem;
|
|
2788
2837
|
}
|
|
2789
2838
|
:not(main):has(> aside) {
|
|
@@ -2943,17 +2992,11 @@ svg {
|
|
|
2943
2992
|
:is(button, .button, .chip) > :is(i, img, svg) {
|
|
2944
2993
|
margin: 0 -0.5rem;
|
|
2945
2994
|
}
|
|
2946
|
-
:is(button, .button) > .responsive:first-child {
|
|
2947
|
-
margin-inline-start: -1.5rem;
|
|
2948
|
-
}
|
|
2949
|
-
:is(button, .button) > .responsive:not(:first-child) {
|
|
2950
|
-
margin-inline-end: -1.5rem;
|
|
2951
|
-
}
|
|
2952
|
-
.chip > .responsive:first-child {
|
|
2995
|
+
:is(button, .button, .chip) > .responsive:first-child {
|
|
2953
2996
|
margin-inline-start: -1rem;
|
|
2954
2997
|
}
|
|
2955
|
-
.chip > .responsive:not(:first-child) {
|
|
2956
|
-
margin-inline-end: -
|
|
2998
|
+
:is(button, .button, .chip) > .responsive:not(:first-child) {
|
|
2999
|
+
margin-inline-end: -1em;
|
|
2957
3000
|
}
|
|
2958
3001
|
:is(.circle, .square, .extend) > .responsive {
|
|
2959
3002
|
--_size: inherit;
|
|
@@ -2994,6 +3037,7 @@ menu {
|
|
|
2994
3037
|
border-radius: 0.25rem;
|
|
2995
3038
|
transform: scale(0.8) translateY(120%);
|
|
2996
3039
|
transition: all var(--speed2), 0s background-color;
|
|
3040
|
+
justify-content: flex-start;
|
|
2997
3041
|
}
|
|
2998
3042
|
[dir=rtl] menu {
|
|
2999
3043
|
inset: auto 0 0 auto;
|
|
@@ -3003,7 +3047,6 @@ menu.no-wrap {
|
|
|
3003
3047
|
white-space: nowrap !important;
|
|
3004
3048
|
}
|
|
3005
3049
|
menu.active,
|
|
3006
|
-
menu:not([data-ui]):active,
|
|
3007
3050
|
:not(menu, [data-ui]):focus-within > menu,
|
|
3008
3051
|
menu > li:hover > menu,
|
|
3009
3052
|
menu > li > menu:hover {
|
|
@@ -3029,7 +3072,7 @@ menu > li > a:only-child {
|
|
|
3029
3072
|
align-items: center;
|
|
3030
3073
|
align-self: normal;
|
|
3031
3074
|
text-align: start;
|
|
3032
|
-
justify-content:
|
|
3075
|
+
justify-content: inherit;
|
|
3033
3076
|
white-space: nowrap;
|
|
3034
3077
|
gap: 1rem;
|
|
3035
3078
|
padding: 0.5rem 1rem;
|
|
@@ -3061,7 +3104,8 @@ menu.top.left {
|
|
|
3061
3104
|
}
|
|
3062
3105
|
[dir=rtl] menu.min.left,
|
|
3063
3106
|
menu.min.right,
|
|
3064
|
-
menu.top
|
|
3107
|
+
menu.top,
|
|
3108
|
+
menu.top.right {
|
|
3065
3109
|
inset: 0 auto auto 0;
|
|
3066
3110
|
}
|
|
3067
3111
|
menu.max {
|
|
@@ -3136,6 +3180,15 @@ menu.border > li:not(:last-child)::before {
|
|
|
3136
3180
|
block-size: 0.0625rem;
|
|
3137
3181
|
inline-size: auto;
|
|
3138
3182
|
}
|
|
3183
|
+
menu.transparent {
|
|
3184
|
+
margin: 0 -1rem !important;
|
|
3185
|
+
padding: 0.5rem;
|
|
3186
|
+
}
|
|
3187
|
+
menu.transparent > li {
|
|
3188
|
+
background-color: inherit;
|
|
3189
|
+
box-shadow: none;
|
|
3190
|
+
padding: 0;
|
|
3191
|
+
}
|
|
3139
3192
|
menu > li:nth-last-child(2) {
|
|
3140
3193
|
--_child: 2;
|
|
3141
3194
|
}
|
|
@@ -3228,19 +3281,19 @@ nav > :is(ol, ul) > li > :only-child {
|
|
|
3228
3281
|
white-space: normal;
|
|
3229
3282
|
flex: none;
|
|
3230
3283
|
}
|
|
3231
|
-
:is(nav, .row).
|
|
3232
|
-
|
|
3284
|
+
:is(nav, .row).min {
|
|
3285
|
+
display: inline-flex;
|
|
3233
3286
|
}
|
|
3234
|
-
:is(nav, .row).no-space
|
|
3235
|
-
|
|
3287
|
+
:is(nav, .row, li).no-space {
|
|
3288
|
+
gap: 0;
|
|
3236
3289
|
}
|
|
3237
|
-
:is(nav, .row).
|
|
3238
|
-
|
|
3290
|
+
:is(nav, .row, li).tiny-space {
|
|
3291
|
+
gap: 0.5rem;
|
|
3239
3292
|
}
|
|
3240
|
-
:is(nav, .row).medium-space {
|
|
3293
|
+
:is(nav, .row, li).medium-space {
|
|
3241
3294
|
gap: 1.5rem;
|
|
3242
3295
|
}
|
|
3243
|
-
:is(nav, .row).large-space {
|
|
3296
|
+
:is(nav, .row, li).large-space {
|
|
3244
3297
|
gap: 2rem;
|
|
3245
3298
|
}
|
|
3246
3299
|
:is(nav, .row) > .max,
|
|
@@ -3256,9 +3309,6 @@ nav.drawer > :is(ol, ul) > li > :is(a, label) > .max {
|
|
|
3256
3309
|
:is(header, footer) > :is(nav, .row) {
|
|
3257
3310
|
min-block-size: inherit;
|
|
3258
3311
|
}
|
|
3259
|
-
:is(nav, .row) > .border.no-margin + .border.no-margin {
|
|
3260
|
-
border-inline-start: 0;
|
|
3261
|
-
}
|
|
3262
3312
|
nav:is(.left, .right, .top, .bottom) {
|
|
3263
3313
|
border: 0;
|
|
3264
3314
|
position: fixed;
|
|
@@ -3305,7 +3355,7 @@ nav.right,
|
|
|
3305
3355
|
padding-inline-start: calc(var(--right) + 1rem);
|
|
3306
3356
|
}
|
|
3307
3357
|
nav.bottom {
|
|
3308
|
-
block-size: calc(var(--bottom) + 5rem);
|
|
3358
|
+
min-block-size: calc(var(--bottom) + 5rem);
|
|
3309
3359
|
inset: auto 0 0 0;
|
|
3310
3360
|
padding-block-start: 0.5rem;
|
|
3311
3361
|
}
|
|
@@ -3436,6 +3486,71 @@ nav.tabbed > a {
|
|
|
3436
3486
|
nav.tabbed > a.active {
|
|
3437
3487
|
background-color: var(--primary-container);
|
|
3438
3488
|
}
|
|
3489
|
+
nav.toolbar {
|
|
3490
|
+
display: inline-flex;
|
|
3491
|
+
justify-content: space-around;
|
|
3492
|
+
border-radius: 2rem;
|
|
3493
|
+
background-color: var(--surface-container);
|
|
3494
|
+
color: var(--on-surface);
|
|
3495
|
+
padding: 0 1rem;
|
|
3496
|
+
gap: 0.5rem;
|
|
3497
|
+
min-block-size: 4rem;
|
|
3498
|
+
min-inline-size: 4rem;
|
|
3499
|
+
}
|
|
3500
|
+
nav.toolbar > a {
|
|
3501
|
+
display: inline-flex;
|
|
3502
|
+
gap: 0.5rem;
|
|
3503
|
+
min-inline-size: 2.5rem;
|
|
3504
|
+
min-block-size: 2.5rem;
|
|
3505
|
+
border-radius: 1.75rem;
|
|
3506
|
+
}
|
|
3507
|
+
nav.toolbar > a:has(> :not(i)) {
|
|
3508
|
+
padding: 0 1rem;
|
|
3509
|
+
}
|
|
3510
|
+
nav.toolbar > a.active {
|
|
3511
|
+
background-color: var(--secondary-container);
|
|
3512
|
+
color: var(--on-secondary-container);
|
|
3513
|
+
}
|
|
3514
|
+
nav.toolbar.fill {
|
|
3515
|
+
background-color: var(--primary-container) !important;
|
|
3516
|
+
color: var(--on-primary-container) !important;
|
|
3517
|
+
}
|
|
3518
|
+
nav.toolbar.fill > a.active {
|
|
3519
|
+
background-color: var(--surface-container) !important;
|
|
3520
|
+
color: var(--on-surface) !important;
|
|
3521
|
+
}
|
|
3522
|
+
nav.toolbar.vertical {
|
|
3523
|
+
flex-direction: column !important;
|
|
3524
|
+
min-inline-size: 4rem;
|
|
3525
|
+
padding: 1rem 0;
|
|
3526
|
+
align-self: center;
|
|
3527
|
+
align-items: center !important;
|
|
3528
|
+
}
|
|
3529
|
+
nav.toolbar.vertical > a {
|
|
3530
|
+
inline-size: 2.5rem;
|
|
3531
|
+
block-size: 2.5rem;
|
|
3532
|
+
}
|
|
3533
|
+
nav.toolbar.vertical > a > :is(div, span):not(.badge, .tooltip) {
|
|
3534
|
+
display: none;
|
|
3535
|
+
}
|
|
3536
|
+
nav.toolbar.max {
|
|
3537
|
+
border-radius: 0;
|
|
3538
|
+
display: flex;
|
|
3539
|
+
}
|
|
3540
|
+
nav.group {
|
|
3541
|
+
gap: 0.125rem;
|
|
3542
|
+
}
|
|
3543
|
+
nav.group > :is(.button, button):not(.chip, .fill, .border).active {
|
|
3544
|
+
background-color: var(--primary);
|
|
3545
|
+
color: var(--on-primary);
|
|
3546
|
+
}
|
|
3547
|
+
nav.group > :is(.button, button):not(.chip, .fill, .border) {
|
|
3548
|
+
background-color: var(--surface-container);
|
|
3549
|
+
color: var(--on-surface-container);
|
|
3550
|
+
}
|
|
3551
|
+
nav.group > :is(.button, button):not(.chip).active {
|
|
3552
|
+
border-radius: 2rem !important;
|
|
3553
|
+
}
|
|
3439
3554
|
:not(nav) > :is(ul, ol) {
|
|
3440
3555
|
all: revert;
|
|
3441
3556
|
}
|
|
@@ -12,18 +12,18 @@ 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.
|
|
15
|
+
return await import("https://cdn.jsdelivr.net/npm/beercss@3.11.1/dist/cdn/beer.min.js");
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
async addCss() {
|
|
19
19
|
if (BeerCssCustomElement.isCssLoaded) return;
|
|
20
20
|
BeerCssCustomElement.isCssLoaded = true;
|
|
21
|
-
const isScoped = !!getComputedStyle(document.documentElement).getPropertyValue(
|
|
21
|
+
const isScoped = !!getComputedStyle(document.documentElement).getPropertyValue("--scoped");
|
|
22
22
|
if (isScoped) return;
|
|
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.
|
|
26
|
+
element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@3.11.1/dist/cdn/beer.scoped.min.css");
|
|
27
27
|
element.setAttribute("rel", "stylesheet");
|
|
28
28
|
head.appendChild(element);
|
|
29
29
|
}
|
|
@@ -35,5 +35,5 @@ class BeerCssCustomElement extends HTMLElement {
|
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
customElements.define(
|
|
38
|
+
customElements.define("beer-css", BeerCssCustomElement);
|
|
39
39
|
export default BeerCssCustomElement;
|
|
@@ -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.
|
|
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/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.1/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
|
@@ -92,7 +92,7 @@ function updateAllClickable(element) {
|
|
|
92
92
|
if (!hasClass(container, "tabs") && !hasClass(container, "tabbed") && !hasTag(container, "nav")) return;
|
|
93
93
|
const as = queryAll("a", container);
|
|
94
94
|
for (let i = 0; i < as.length; i++) removeClass(as[i], "active");
|
|
95
|
-
addClass(element, "active");
|
|
95
|
+
if (!hasTag(element, "button") && !hasClass(element, "button") && !hasClass(element, "chip")) addClass(element, "active");
|
|
96
96
|
}
|
|
97
97
|
function updatePlaceholder(element) {
|
|
98
98
|
if (!element.placeholder) element.placeholder = " ";
|