beercss 3.6.13 → 3.7.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 +6 -6
- package/dist/cdn/beer.css +34 -33
- package/dist/cdn/beer.js +427 -317
- package/dist/cdn/beer.min.css +1 -1
- package/dist/cdn/beer.min.js +1 -1
- package/dist/cdn/material-symbols-outlined.woff2 +0 -0
- package/dist/cdn/material-symbols-rounded.woff2 +0 -0
- package/dist/cdn/material-symbols-sharp.woff2 +0 -0
- package/index.d.ts +5 -2
- package/package.json +2 -2
- package/src/cdn/beer.ts +37 -488
- package/src/cdn/elements/dialogs.css +1 -0
- package/src/cdn/elements/dialogs.ts +68 -0
- package/src/cdn/elements/fields.css +2 -1
- package/src/cdn/elements/fields.ts +142 -0
- package/src/cdn/elements/icons.css +3 -1
- package/src/cdn/elements/menus.css +1 -1
- package/src/cdn/elements/menus.ts +40 -0
- package/src/cdn/elements/navigations.css +2 -1
- package/src/cdn/elements/pages.ts +7 -0
- package/src/cdn/elements/selections.css +14 -23
- package/src/cdn/elements/sliders.css +2 -1
- package/src/cdn/elements/sliders.ts +86 -0
- package/src/cdn/elements/snackbars.ts +27 -0
- package/src/cdn/helpers/reset.css +6 -0
- package/src/cdn/helpers/theme.ts +84 -0
- package/src/cdn/helpers/waves.css +2 -2
- package/src/cdn/material-symbols-outlined.woff2 +0 -0
- package/src/cdn/material-symbols-rounded.woff2 +0 -0
- package/src/cdn/material-symbols-sharp.woff2 +0 -0
- package/src/cdn/settings/fonts.css +3 -3
- package/src/cdn/utils.ts +162 -0
package/README.md
CHANGED
|
@@ -123,19 +123,19 @@ From jsdelivr.net.
|
|
|
123
123
|
|
|
124
124
|
```html
|
|
125
125
|
// with html
|
|
126
|
-
<link href="https://cdn.jsdelivr.net/npm/beercss@3.
|
|
127
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.
|
|
126
|
+
<link href="https://cdn.jsdelivr.net/npm/beercss@3.7.1/dist/cdn/beer.min.css" rel="stylesheet" />
|
|
127
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.7.1/dist/cdn/beer.min.js"></script>
|
|
128
128
|
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
|
|
129
129
|
```
|
|
130
130
|
|
|
131
131
|
```css
|
|
132
132
|
// with css
|
|
133
|
-
@import "https://cdn.jsdelivr.net/npm/beercss@3.
|
|
133
|
+
@import "https://cdn.jsdelivr.net/npm/beercss@3.7.1/dist/cdn/beer.min.css";
|
|
134
134
|
```
|
|
135
135
|
|
|
136
136
|
```js
|
|
137
137
|
// with javascript
|
|
138
|
-
import "https://cdn.jsdelivr.net/npm/beercss@3.
|
|
138
|
+
import "https://cdn.jsdelivr.net/npm/beercss@3.7.1/dist/cdn/beer.min.js";
|
|
139
139
|
import "https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js";
|
|
140
140
|
```
|
|
141
141
|
|
|
@@ -187,8 +187,8 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
|
|
|
187
187
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
188
188
|
<meta name="google" content="notranslate">
|
|
189
189
|
<title>Hello world</title>
|
|
190
|
-
<link href="https://cdn.jsdelivr.net/npm/beercss@3.
|
|
191
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.
|
|
190
|
+
<link href="https://cdn.jsdelivr.net/npm/beercss@3.7.1/dist/cdn/beer.min.css" rel="stylesheet">
|
|
191
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.7.1/dist/cdn/beer.min.js"></script>
|
|
192
192
|
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
|
|
193
193
|
</head>
|
|
194
194
|
<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.7.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.7.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.7.1/dist/cdn/material-symbols-sharp.woff2") format("woff2");
|
|
125
125
|
}
|
|
126
126
|
* {
|
|
127
127
|
-webkit-tap-highlight-color: transparent;
|
|
@@ -184,6 +184,11 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
|
|
|
184
184
|
* + :is(address, article, blockquote, code, .field, fieldset, form, .grid, h1, h2, h3, h4, h5, h6, nav, ol, p, pre, .row, section, aside, table, .tabs, ul) {
|
|
185
185
|
margin-block-start: 1rem;
|
|
186
186
|
}
|
|
187
|
+
:is(a, button, .button, .chip):focus-visible {
|
|
188
|
+
outline: 0.125rem solid var(--primary);
|
|
189
|
+
outline-offset: 0.25rem;
|
|
190
|
+
z-index: 1;
|
|
191
|
+
}
|
|
187
192
|
.primary {
|
|
188
193
|
background-color: var(--primary) !important;
|
|
189
194
|
color: var(--on-primary) !important;
|
|
@@ -1564,13 +1569,13 @@ pre:has(> code){
|
|
|
1564
1569
|
inline-size: 100%;
|
|
1565
1570
|
block-size: 100%;
|
|
1566
1571
|
background-position: center;
|
|
1567
|
-
background-image: radial-gradient(circle,
|
|
1572
|
+
background-image: radial-gradient(circle, currentColor 1%, transparent 1%);
|
|
1568
1573
|
opacity: 0;
|
|
1569
1574
|
transition: none;
|
|
1570
1575
|
}
|
|
1571
1576
|
:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):is(:focus-visible, :hover)::after {
|
|
1572
1577
|
background-size: 15000%;
|
|
1573
|
-
opacity: 1;
|
|
1578
|
+
opacity: 0.1;
|
|
1574
1579
|
transition: background-size var(--speed2) linear;
|
|
1575
1580
|
}
|
|
1576
1581
|
:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):active::after {
|
|
@@ -1976,6 +1981,7 @@ dialog {
|
|
|
1976
1981
|
transition: all var(--speed3), 0s background-color;
|
|
1977
1982
|
border-radius: 1.75rem;
|
|
1978
1983
|
transform: translate(-50%, -4rem);
|
|
1984
|
+
outline: none;
|
|
1979
1985
|
}
|
|
1980
1986
|
dialog::backdrop {
|
|
1981
1987
|
display: none;
|
|
@@ -2224,7 +2230,7 @@ input::-webkit-date-and-time-value {
|
|
|
2224
2230
|
}
|
|
2225
2231
|
:is(input, select, textarea):-webkit-autofill {
|
|
2226
2232
|
-webkit-background-clip: text;
|
|
2227
|
-
-webkit-text-fill-color:
|
|
2233
|
+
-webkit-text-fill-color: var(--on-surface);
|
|
2228
2234
|
}
|
|
2229
2235
|
.field > :is(input, textarea, select):focus {
|
|
2230
2236
|
border: 0.125rem solid transparent;
|
|
@@ -2234,6 +2240,7 @@ input::-webkit-date-and-time-value {
|
|
|
2234
2240
|
overflow: hidden;
|
|
2235
2241
|
position: absolute;
|
|
2236
2242
|
inset: 0;
|
|
2243
|
+
max-block-size: 12rem;
|
|
2237
2244
|
}
|
|
2238
2245
|
input[type=file],
|
|
2239
2246
|
input[type=color],
|
|
@@ -2646,7 +2653,9 @@ fieldset > legend + * {
|
|
|
2646
2653
|
grid-area: auto/span 12;
|
|
2647
2654
|
}
|
|
2648
2655
|
}
|
|
2649
|
-
i
|
|
2656
|
+
i,
|
|
2657
|
+
:is(.checkbox, .radio, .switch) > span::before,
|
|
2658
|
+
.icon > span > i {
|
|
2650
2659
|
---size: 1.5rem;
|
|
2651
2660
|
|
|
2652
2661
|
font-family: var(--font-icon);
|
|
@@ -2930,7 +2939,7 @@ menu.no-wrap {
|
|
|
2930
2939
|
}
|
|
2931
2940
|
menu.active,
|
|
2932
2941
|
menu:not([data-ui]):active,
|
|
2933
|
-
:not([data-ui]):focus-within > menu,
|
|
2942
|
+
:not(menu, [data-ui]):focus-within > menu,
|
|
2934
2943
|
menu > :is(a, li):hover + menu,
|
|
2935
2944
|
menu > menu:hover {
|
|
2936
2945
|
opacity: 1;
|
|
@@ -3219,6 +3228,8 @@ nav:is(.left, .right, .top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.bu
|
|
|
3219
3228
|
align-self: center;
|
|
3220
3229
|
display: flex;
|
|
3221
3230
|
flex-direction: column;
|
|
3231
|
+
gap: 0.25rem;
|
|
3232
|
+
line-height: normal;
|
|
3222
3233
|
}
|
|
3223
3234
|
nav:is(.top, .bottom):not(.drawer) > a:not(.button, .chip),
|
|
3224
3235
|
nav:is(.top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.button, .chip) {
|
|
@@ -3273,7 +3284,6 @@ nav.tabbed {
|
|
|
3273
3284
|
background-color: var(--surface-container);
|
|
3274
3285
|
border-radius: 4rem !important;
|
|
3275
3286
|
gap: 0rem;
|
|
3276
|
-
overflow-x: auto;
|
|
3277
3287
|
block-size: 4rem;
|
|
3278
3288
|
}
|
|
3279
3289
|
nav.tabbed.small {
|
|
@@ -3560,23 +3570,9 @@ progress.max.vertical {
|
|
|
3560
3570
|
padding-inline-start: 0.25rem;
|
|
3561
3571
|
}
|
|
3562
3572
|
:is(.checkbox, .radio, .switch) > span::before,
|
|
3563
|
-
.icon > span > i
|
|
3564
|
-
|
|
3565
|
-
|
|
3566
|
-
font-style: normal;
|
|
3567
|
-
font-size: 1.5rem;
|
|
3568
|
-
line-height: 1;
|
|
3569
|
-
letter-spacing: normal;
|
|
3570
|
-
text-transform: none;
|
|
3571
|
-
display: inline-block;
|
|
3572
|
-
white-space: nowrap;
|
|
3573
|
-
word-wrap: normal;
|
|
3574
|
-
direction: ltr;
|
|
3575
|
-
font-feature-settings: "liga";
|
|
3576
|
-
-webkit-font-smoothing: antialiased;
|
|
3577
|
-
vertical-align: middle;
|
|
3578
|
-
text-align: center;
|
|
3579
|
-
overflow: hidden;
|
|
3573
|
+
.icon > span > i,
|
|
3574
|
+
:is(.checkbox, .radio) > span::after {
|
|
3575
|
+
content: '';
|
|
3580
3576
|
inline-size: 1.5rem;
|
|
3581
3577
|
block-size: 1.5rem;
|
|
3582
3578
|
box-sizing: border-box;
|
|
@@ -3585,12 +3581,9 @@ progress.max.vertical {
|
|
|
3585
3581
|
color: var(--primary);
|
|
3586
3582
|
position: absolute;
|
|
3587
3583
|
inset: auto auto auto -1.5rem;
|
|
3588
|
-
background-color: transparent;
|
|
3589
3584
|
border-radius: 50%;
|
|
3590
3585
|
user-select: none;
|
|
3591
3586
|
z-index: 1;
|
|
3592
|
-
box-shadow: 0 0 0 0 var(--active);
|
|
3593
|
-
transition: all var(--speed1);
|
|
3594
3587
|
}
|
|
3595
3588
|
.switch > span::before,
|
|
3596
3589
|
.switch.icon > span > i {
|
|
@@ -3635,9 +3628,16 @@ progress.max.vertical {
|
|
|
3635
3628
|
content: "" !important;
|
|
3636
3629
|
font-variation-settings: unset !important;
|
|
3637
3630
|
}
|
|
3638
|
-
:is(.checkbox, .radio) >
|
|
3639
|
-
|
|
3640
|
-
|
|
3631
|
+
:is(.checkbox, .radio) > span::after {
|
|
3632
|
+
transition: all var(--speed1);
|
|
3633
|
+
background-color: currentColor;
|
|
3634
|
+
box-shadow: 0 0 0 0 currentColor;
|
|
3635
|
+
opacity: 0;
|
|
3636
|
+
}
|
|
3637
|
+
:is(.checkbox, .radio):is(:hover) > input:not(:disabled) + span::after,
|
|
3638
|
+
:is(.checkbox, .radio) > input:not(:disabled):is(:focus) + span::after {
|
|
3639
|
+
box-shadow: 0 0 0 0.5rem currentColor;
|
|
3640
|
+
opacity: 0.1;
|
|
3641
3641
|
}
|
|
3642
3642
|
.switch > input:not(:disabled):is(:focus, :hover) + span::before,
|
|
3643
3643
|
.switch.icon > input:not(:disabled):is(:focus, :hover) + span > i {
|
|
@@ -3754,6 +3754,7 @@ progress.max.vertical {
|
|
|
3754
3754
|
z-index: 1;
|
|
3755
3755
|
padding: 0;
|
|
3756
3756
|
margin: 0;
|
|
3757
|
+
transform: rotate(0deg);
|
|
3757
3758
|
}
|
|
3758
3759
|
.slider > input:only-of-type {
|
|
3759
3760
|
pointer-events: all;
|
|
@@ -3923,7 +3924,7 @@ progress.max.vertical {
|
|
|
3923
3924
|
.slider.max.vertical > span {
|
|
3924
3925
|
inset: var(---end) 0 var(---start) 0;
|
|
3925
3926
|
}
|
|
3926
|
-
@media (
|
|
3927
|
+
@media (pointer: coarse) {
|
|
3927
3928
|
.slider > :hover ~ .tooltip {
|
|
3928
3929
|
inset-block-start: -1rem !important;
|
|
3929
3930
|
opacity: 1 !important;
|