beercss 3.10.8 → 3.11.2
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 +214 -97
- 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 +214 -97
- 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 +38 -9
- package/src/cdn/elements/cards.css +5 -0
- package/src/cdn/elements/chips.css +5 -19
- package/src/cdn/elements/media.css +4 -16
- package/src/cdn/elements/menus.css +15 -3
- package/src/cdn/elements/navigations.css +88 -13
- package/src/cdn/helpers/forms.css +6 -2
- 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.2" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@3.11.2" 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.2/dist/cdn/beer.min.css" rel="stylesheet" />
|
|
134
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.2/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.2/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
|
|
153
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.2/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.2/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.2/dist/cdn/beer.min.css" rel="stylesheet">
|
|
198
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.2/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.2/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.2/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.2/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.2/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;
|
|
@@ -1156,7 +1207,7 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
|
|
|
1156
1207
|
:is(.circle, .square).round {
|
|
1157
1208
|
border-radius: 1rem !important;
|
|
1158
1209
|
}
|
|
1159
|
-
.border:not(table, .field, .list, menu) {
|
|
1210
|
+
.border:not(table, .field, .list, menu, article) {
|
|
1160
1211
|
box-sizing: border-box;
|
|
1161
1212
|
border: 0.0625rem solid var(--outline);
|
|
1162
1213
|
background-color: transparent;
|
|
@@ -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%;
|
|
@@ -1777,37 +1813,43 @@ dialog > nav.drawer > header + * {
|
|
|
1777
1813
|
}
|
|
1778
1814
|
.button,
|
|
1779
1815
|
button {
|
|
1816
|
+
--_padding: 1rem;
|
|
1780
1817
|
--_size: 2.5rem;
|
|
1781
1818
|
box-sizing: content-box;
|
|
1782
1819
|
display: inline-flex;
|
|
1783
1820
|
align-items: center;
|
|
1784
1821
|
justify-content: center;
|
|
1785
1822
|
block-size: var(--_size);
|
|
1786
|
-
min-inline-size: var(--_size);
|
|
1787
1823
|
font-size: 0.875rem;
|
|
1788
1824
|
font-weight: 500;
|
|
1789
1825
|
color: var(--on-primary);
|
|
1790
|
-
padding: 0
|
|
1826
|
+
padding: 0 var(--_padding);
|
|
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
|
-
gap:
|
|
1832
|
+
gap: 0.5rem;
|
|
1797
1833
|
line-height: normal;
|
|
1798
1834
|
}
|
|
1799
1835
|
:is(button, .button).small {
|
|
1800
1836
|
--_size: 2rem;
|
|
1837
|
+
--_padding: 0.75rem;
|
|
1801
1838
|
}
|
|
1802
1839
|
:is(button, .button).large {
|
|
1803
1840
|
--_size: 3rem;
|
|
1841
|
+
--_padding: 1.25rem;
|
|
1804
1842
|
}
|
|
1805
1843
|
:is(.button, button):is(.extra, .extend) {
|
|
1806
1844
|
--_size: 3.5rem;
|
|
1807
1845
|
font-size: 1rem;
|
|
1846
|
+
--_padding: 1.5rem;
|
|
1847
|
+
}
|
|
1848
|
+
:is(button, .button):is(.square, .circle) {
|
|
1849
|
+
--_padding: 0;
|
|
1808
1850
|
}
|
|
1809
1851
|
:is(button, .button).border {
|
|
1810
|
-
border-color: var(--outline);
|
|
1852
|
+
border-color: var(--outline-variant);
|
|
1811
1853
|
color: var(--primary);
|
|
1812
1854
|
}
|
|
1813
1855
|
:is(button, .button):not(.border, .chip):hover {
|
|
@@ -1818,15 +1860,16 @@ button {
|
|
|
1818
1860
|
}
|
|
1819
1861
|
.extend:is(:hover, .active) {
|
|
1820
1862
|
inline-size: auto;
|
|
1821
|
-
|
|
1863
|
+
--_padding: 1.5rem;
|
|
1864
|
+
padding: 0 var(--_padding);
|
|
1822
1865
|
}
|
|
1823
1866
|
.extend:is(:hover, .active) > i + span {
|
|
1824
1867
|
display: inherit;
|
|
1825
|
-
margin-inline-start:
|
|
1868
|
+
margin-inline-start: var(--_padding);
|
|
1826
1869
|
}
|
|
1827
1870
|
.extend:is(:hover, .active) > :is(img, svg) + span {
|
|
1828
1871
|
display: inherit;
|
|
1829
|
-
margin-inline-start:
|
|
1872
|
+
margin-inline-start: calc(1rem + var(--_padding));
|
|
1830
1873
|
}
|
|
1831
1874
|
:is(.button, button)[disabled] {
|
|
1832
1875
|
opacity: 0.5;
|
|
@@ -1839,10 +1882,27 @@ button {
|
|
|
1839
1882
|
:is(.button, button)[disabled]::after {
|
|
1840
1883
|
display: none;
|
|
1841
1884
|
}
|
|
1842
|
-
:is(.button, button).fill {
|
|
1885
|
+
:is(.button, button):not(.chip, .extend).fill {
|
|
1843
1886
|
background-color: var(--secondary-container) !important;
|
|
1844
1887
|
color: var(--on-secondary-container) !important;
|
|
1845
1888
|
}
|
|
1889
|
+
:is(.button, button):not(.chip, .extend).active {
|
|
1890
|
+
background-color: var(--primary-container);
|
|
1891
|
+
color: var(--on-primary-container);
|
|
1892
|
+
}
|
|
1893
|
+
:is(.button, button):not(.chip, .extend).fill.active {
|
|
1894
|
+
background-color: var(--secondary) !important;
|
|
1895
|
+
color: var(--on-secondary) !important;
|
|
1896
|
+
}
|
|
1897
|
+
:is(.button, button):not(.chip, .extend).border.active {
|
|
1898
|
+
background-color: var(--inverse-surface) !important;
|
|
1899
|
+
color: var(--inverse-on-surface) !important;
|
|
1900
|
+
border-color: var(--inverse-surface) !important;
|
|
1901
|
+
}
|
|
1902
|
+
:is(.button, button):not(.chip):active,
|
|
1903
|
+
:is(.button, button):not(.chip).active {
|
|
1904
|
+
border-radius: 0.5rem !important;
|
|
1905
|
+
}
|
|
1846
1906
|
article {
|
|
1847
1907
|
--_padding: 1rem;
|
|
1848
1908
|
box-shadow: var(--elevate1);
|
|
@@ -1862,7 +1922,12 @@ article.medium {
|
|
|
1862
1922
|
article.large {
|
|
1863
1923
|
block-size: 32rem;
|
|
1864
1924
|
}
|
|
1925
|
+
article.border {
|
|
1926
|
+
box-shadow: none;
|
|
1927
|
+
border: 0.0625rem solid var(--outline-variant);
|
|
1928
|
+
}
|
|
1865
1929
|
.chip {
|
|
1930
|
+
--_padding: 0.75rem;
|
|
1866
1931
|
--_size: 2rem;
|
|
1867
1932
|
box-sizing: border-box;
|
|
1868
1933
|
display: inline-flex;
|
|
@@ -1875,38 +1940,27 @@ article.large {
|
|
|
1875
1940
|
background-color: transparent;
|
|
1876
1941
|
border: 0.0625rem solid var(--outline-variant);
|
|
1877
1942
|
color: var(--on-surface-variant);
|
|
1878
|
-
padding: 0
|
|
1943
|
+
padding: 0 var(--_padding);
|
|
1879
1944
|
margin: 0 0.5rem;
|
|
1880
1945
|
text-transform: none;
|
|
1881
1946
|
border-radius: 0.5rem;
|
|
1882
1947
|
transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
|
|
1883
1948
|
user-select: none;
|
|
1884
|
-
gap:
|
|
1949
|
+
gap: 0.5rem;
|
|
1885
1950
|
line-height: normal;
|
|
1886
1951
|
letter-spacing: normal;
|
|
1887
1952
|
}
|
|
1888
|
-
.chip.fill:hover {
|
|
1889
|
-
box-shadow: var(--elevate1);
|
|
1890
|
-
}
|
|
1891
1953
|
.chip.medium {
|
|
1892
1954
|
--_size: 2.5rem;
|
|
1955
|
+
--_padding: 1rem;
|
|
1893
1956
|
}
|
|
1894
1957
|
.chip.large {
|
|
1958
|
+
--_padding: 1.25rem;
|
|
1895
1959
|
--_size: 3rem;
|
|
1896
1960
|
}
|
|
1897
1961
|
.chip.fill {
|
|
1898
|
-
background-color: var(--secondary-container) !important;
|
|
1899
1962
|
border: none;
|
|
1900
1963
|
}
|
|
1901
|
-
.chip.round.small {
|
|
1902
|
-
border-radius: 1rem;
|
|
1903
|
-
}
|
|
1904
|
-
.chip.round {
|
|
1905
|
-
border-radius: 1.25rem;
|
|
1906
|
-
}
|
|
1907
|
-
.chip.round.large {
|
|
1908
|
-
border-radius: 1.5rem;
|
|
1909
|
-
}
|
|
1910
1964
|
dialog {
|
|
1911
1965
|
--_padding: 1.5rem;
|
|
1912
1966
|
display: block;
|
|
@@ -2940,20 +2994,11 @@ svg {
|
|
|
2940
2994
|
min-block-size: 1.5rem;
|
|
2941
2995
|
max-block-size: 1.5rem;
|
|
2942
2996
|
}
|
|
2943
|
-
:is(button, .button, .chip) > :
|
|
2944
|
-
margin:
|
|
2945
|
-
}
|
|
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 {
|
|
2953
|
-
margin-inline-start: -1rem;
|
|
2997
|
+
:is(button, .button, .chip) > .responsive:first-child {
|
|
2998
|
+
margin-inline-start: calc(-1 * var(--_padding));
|
|
2954
2999
|
}
|
|
2955
|
-
.chip > .responsive:not(:first-child) {
|
|
2956
|
-
margin-inline-end: -
|
|
3000
|
+
:is(button, .button, .chip) > .responsive:not(:first-child) {
|
|
3001
|
+
margin-inline-end: calc(-1 * var(--_padding));
|
|
2957
3002
|
}
|
|
2958
3003
|
:is(.circle, .square, .extend) > .responsive {
|
|
2959
3004
|
--_size: inherit;
|
|
@@ -2994,6 +3039,7 @@ menu {
|
|
|
2994
3039
|
border-radius: 0.25rem;
|
|
2995
3040
|
transform: scale(0.8) translateY(120%);
|
|
2996
3041
|
transition: all var(--speed2), 0s background-color;
|
|
3042
|
+
justify-content: flex-start;
|
|
2997
3043
|
}
|
|
2998
3044
|
[dir=rtl] menu {
|
|
2999
3045
|
inset: auto 0 0 auto;
|
|
@@ -3003,7 +3049,6 @@ menu.no-wrap {
|
|
|
3003
3049
|
white-space: nowrap !important;
|
|
3004
3050
|
}
|
|
3005
3051
|
menu.active,
|
|
3006
|
-
menu:not([data-ui]):active,
|
|
3007
3052
|
:not(menu, [data-ui]):focus-within > menu,
|
|
3008
3053
|
menu > li:hover > menu,
|
|
3009
3054
|
menu > li > menu:hover {
|
|
@@ -3029,7 +3074,7 @@ menu > li > a:only-child {
|
|
|
3029
3074
|
align-items: center;
|
|
3030
3075
|
align-self: normal;
|
|
3031
3076
|
text-align: start;
|
|
3032
|
-
justify-content:
|
|
3077
|
+
justify-content: inherit;
|
|
3033
3078
|
white-space: nowrap;
|
|
3034
3079
|
gap: 1rem;
|
|
3035
3080
|
padding: 0.5rem 1rem;
|
|
@@ -3061,7 +3106,8 @@ menu.top.left {
|
|
|
3061
3106
|
}
|
|
3062
3107
|
[dir=rtl] menu.min.left,
|
|
3063
3108
|
menu.min.right,
|
|
3064
|
-
menu.top
|
|
3109
|
+
menu.top,
|
|
3110
|
+
menu.top.right {
|
|
3065
3111
|
inset: 0 auto auto 0;
|
|
3066
3112
|
}
|
|
3067
3113
|
menu.max {
|
|
@@ -3136,6 +3182,15 @@ menu.border > li:not(:last-child)::before {
|
|
|
3136
3182
|
block-size: 0.0625rem;
|
|
3137
3183
|
inline-size: auto;
|
|
3138
3184
|
}
|
|
3185
|
+
menu.transparent {
|
|
3186
|
+
margin: 0 -1rem !important;
|
|
3187
|
+
padding: 0.5rem;
|
|
3188
|
+
}
|
|
3189
|
+
menu.transparent > li {
|
|
3190
|
+
background-color: inherit;
|
|
3191
|
+
box-shadow: none;
|
|
3192
|
+
padding: 0;
|
|
3193
|
+
}
|
|
3139
3194
|
menu > li:nth-last-child(2) {
|
|
3140
3195
|
--_child: 2;
|
|
3141
3196
|
}
|
|
@@ -3228,19 +3283,19 @@ nav > :is(ol, ul) > li > :only-child {
|
|
|
3228
3283
|
white-space: normal;
|
|
3229
3284
|
flex: none;
|
|
3230
3285
|
}
|
|
3231
|
-
:is(nav, .row).
|
|
3232
|
-
|
|
3286
|
+
:is(nav, .row).min {
|
|
3287
|
+
display: inline-flex;
|
|
3233
3288
|
}
|
|
3234
|
-
:is(nav, .row).no-space
|
|
3235
|
-
|
|
3289
|
+
:is(nav, .row, li).no-space {
|
|
3290
|
+
gap: 0;
|
|
3236
3291
|
}
|
|
3237
|
-
:is(nav, .row).
|
|
3238
|
-
|
|
3292
|
+
:is(nav, .row, li).tiny-space {
|
|
3293
|
+
gap: 0.5rem;
|
|
3239
3294
|
}
|
|
3240
|
-
:is(nav, .row).medium-space {
|
|
3295
|
+
:is(nav, .row, li).medium-space {
|
|
3241
3296
|
gap: 1.5rem;
|
|
3242
3297
|
}
|
|
3243
|
-
:is(nav, .row).large-space {
|
|
3298
|
+
:is(nav, .row, li).large-space {
|
|
3244
3299
|
gap: 2rem;
|
|
3245
3300
|
}
|
|
3246
3301
|
:is(nav, .row) > .max,
|
|
@@ -3256,9 +3311,6 @@ nav.drawer > :is(ol, ul) > li > :is(a, label) > .max {
|
|
|
3256
3311
|
:is(header, footer) > :is(nav, .row) {
|
|
3257
3312
|
min-block-size: inherit;
|
|
3258
3313
|
}
|
|
3259
|
-
:is(nav, .row) > .border.no-margin + .border.no-margin {
|
|
3260
|
-
border-inline-start: 0;
|
|
3261
|
-
}
|
|
3262
3314
|
nav:is(.left, .right, .top, .bottom) {
|
|
3263
3315
|
border: 0;
|
|
3264
3316
|
position: fixed;
|
|
@@ -3305,7 +3357,7 @@ nav.right,
|
|
|
3305
3357
|
padding-inline-start: calc(var(--right) + 1rem);
|
|
3306
3358
|
}
|
|
3307
3359
|
nav.bottom {
|
|
3308
|
-
block-size: calc(var(--bottom) + 5rem);
|
|
3360
|
+
min-block-size: calc(var(--bottom) + 5rem);
|
|
3309
3361
|
inset: auto 0 0 0;
|
|
3310
3362
|
padding-block-start: 0.5rem;
|
|
3311
3363
|
}
|
|
@@ -3436,6 +3488,71 @@ nav.tabbed > a {
|
|
|
3436
3488
|
nav.tabbed > a.active {
|
|
3437
3489
|
background-color: var(--primary-container);
|
|
3438
3490
|
}
|
|
3491
|
+
nav.toolbar {
|
|
3492
|
+
display: inline-flex;
|
|
3493
|
+
justify-content: space-around;
|
|
3494
|
+
border-radius: 2rem;
|
|
3495
|
+
background-color: var(--surface-container);
|
|
3496
|
+
color: var(--on-surface);
|
|
3497
|
+
padding: 0 1rem;
|
|
3498
|
+
gap: 0.5rem;
|
|
3499
|
+
min-block-size: 4rem;
|
|
3500
|
+
min-inline-size: 4rem;
|
|
3501
|
+
}
|
|
3502
|
+
nav.toolbar > a {
|
|
3503
|
+
display: inline-flex;
|
|
3504
|
+
gap: 0.5rem;
|
|
3505
|
+
min-inline-size: 2.5rem;
|
|
3506
|
+
min-block-size: 2.5rem;
|
|
3507
|
+
border-radius: 1.75rem;
|
|
3508
|
+
}
|
|
3509
|
+
nav.toolbar > a:has(> :not(i)) {
|
|
3510
|
+
padding: 0 1rem;
|
|
3511
|
+
}
|
|
3512
|
+
nav.toolbar > a.active {
|
|
3513
|
+
background-color: var(--secondary-container);
|
|
3514
|
+
color: var(--on-secondary-container);
|
|
3515
|
+
}
|
|
3516
|
+
nav.toolbar.fill {
|
|
3517
|
+
background-color: var(--primary-container) !important;
|
|
3518
|
+
color: var(--on-primary-container) !important;
|
|
3519
|
+
}
|
|
3520
|
+
nav.toolbar.fill > a.active {
|
|
3521
|
+
background-color: var(--surface-container) !important;
|
|
3522
|
+
color: var(--on-surface) !important;
|
|
3523
|
+
}
|
|
3524
|
+
nav.toolbar.vertical {
|
|
3525
|
+
flex-direction: column !important;
|
|
3526
|
+
min-inline-size: 4rem;
|
|
3527
|
+
padding: 1rem 0;
|
|
3528
|
+
align-self: center;
|
|
3529
|
+
align-items: center !important;
|
|
3530
|
+
}
|
|
3531
|
+
nav.toolbar.vertical > a {
|
|
3532
|
+
inline-size: 2.5rem;
|
|
3533
|
+
block-size: 2.5rem;
|
|
3534
|
+
}
|
|
3535
|
+
nav.toolbar.vertical > a > :is(div, span):not(.badge, .tooltip) {
|
|
3536
|
+
display: none;
|
|
3537
|
+
}
|
|
3538
|
+
nav.toolbar.max {
|
|
3539
|
+
border-radius: 0;
|
|
3540
|
+
display: flex;
|
|
3541
|
+
}
|
|
3542
|
+
nav.group {
|
|
3543
|
+
gap: 0.125rem;
|
|
3544
|
+
}
|
|
3545
|
+
nav.group > :is(.button, button):not(.chip, .fill, .border).active {
|
|
3546
|
+
background-color: var(--primary);
|
|
3547
|
+
color: var(--on-primary);
|
|
3548
|
+
}
|
|
3549
|
+
nav.group > :is(.button, button):not(.chip, .fill, .border) {
|
|
3550
|
+
background-color: var(--surface-container);
|
|
3551
|
+
color: var(--on-surface-container);
|
|
3552
|
+
}
|
|
3553
|
+
nav.group > :is(.button, button):not(.chip).active {
|
|
3554
|
+
border-radius: 2rem !important;
|
|
3555
|
+
}
|
|
3439
3556
|
:not(nav) > :is(ul, ol) {
|
|
3440
3557
|
all: revert;
|
|
3441
3558
|
}
|
|
@@ -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.2/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.2/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.2/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.2/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 = " ";
|