beercss 3.6.13 → 3.7.0
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 +29 -32
- package/dist/cdn/beer.js +420 -317
- package/dist/cdn/beer.min.css +1 -1
- package/dist/cdn/beer.min.js +1 -1
- package/index.d.ts +5 -2
- package/package.json +2 -2
- package/src/cdn/beer.ts +32 -490
- 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 -0
- 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/theme.ts +84 -0
- package/src/cdn/helpers/waves.css +2 -2
- 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.0/dist/cdn/beer.min.css" rel="stylesheet" />
|
|
127
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.7.0/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.0/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.0/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.0/dist/cdn/beer.min.css" rel="stylesheet">
|
|
191
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.7.0/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.0/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.0/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.0/dist/cdn/material-symbols-sharp.woff2") format("woff2");
|
|
125
125
|
}
|
|
126
126
|
* {
|
|
127
127
|
-webkit-tap-highlight-color: transparent;
|
|
@@ -1564,13 +1564,13 @@ pre:has(> code){
|
|
|
1564
1564
|
inline-size: 100%;
|
|
1565
1565
|
block-size: 100%;
|
|
1566
1566
|
background-position: center;
|
|
1567
|
-
background-image: radial-gradient(circle,
|
|
1567
|
+
background-image: radial-gradient(circle, currentColor 1%, transparent 1%);
|
|
1568
1568
|
opacity: 0;
|
|
1569
1569
|
transition: none;
|
|
1570
1570
|
}
|
|
1571
1571
|
:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):is(:focus-visible, :hover)::after {
|
|
1572
1572
|
background-size: 15000%;
|
|
1573
|
-
opacity: 1;
|
|
1573
|
+
opacity: 0.1;
|
|
1574
1574
|
transition: background-size var(--speed2) linear;
|
|
1575
1575
|
}
|
|
1576
1576
|
:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):active::after {
|
|
@@ -1976,6 +1976,7 @@ dialog {
|
|
|
1976
1976
|
transition: all var(--speed3), 0s background-color;
|
|
1977
1977
|
border-radius: 1.75rem;
|
|
1978
1978
|
transform: translate(-50%, -4rem);
|
|
1979
|
+
outline: none;
|
|
1979
1980
|
}
|
|
1980
1981
|
dialog::backdrop {
|
|
1981
1982
|
display: none;
|
|
@@ -2224,7 +2225,7 @@ input::-webkit-date-and-time-value {
|
|
|
2224
2225
|
}
|
|
2225
2226
|
:is(input, select, textarea):-webkit-autofill {
|
|
2226
2227
|
-webkit-background-clip: text;
|
|
2227
|
-
-webkit-text-fill-color:
|
|
2228
|
+
-webkit-text-fill-color: var(--on-surface);
|
|
2228
2229
|
}
|
|
2229
2230
|
.field > :is(input, textarea, select):focus {
|
|
2230
2231
|
border: 0.125rem solid transparent;
|
|
@@ -2234,6 +2235,7 @@ input::-webkit-date-and-time-value {
|
|
|
2234
2235
|
overflow: hidden;
|
|
2235
2236
|
position: absolute;
|
|
2236
2237
|
inset: 0;
|
|
2238
|
+
max-block-size: 12rem;
|
|
2237
2239
|
}
|
|
2238
2240
|
input[type=file],
|
|
2239
2241
|
input[type=color],
|
|
@@ -2646,7 +2648,9 @@ fieldset > legend + * {
|
|
|
2646
2648
|
grid-area: auto/span 12;
|
|
2647
2649
|
}
|
|
2648
2650
|
}
|
|
2649
|
-
i
|
|
2651
|
+
i,
|
|
2652
|
+
:is(.checkbox, .radio, .switch) > span::before,
|
|
2653
|
+
.icon > span > i {
|
|
2650
2654
|
---size: 1.5rem;
|
|
2651
2655
|
|
|
2652
2656
|
font-family: var(--font-icon);
|
|
@@ -2930,7 +2934,7 @@ menu.no-wrap {
|
|
|
2930
2934
|
}
|
|
2931
2935
|
menu.active,
|
|
2932
2936
|
menu:not([data-ui]):active,
|
|
2933
|
-
:not([data-ui]):focus-within > menu,
|
|
2937
|
+
:not(menu, [data-ui]):focus-within > menu,
|
|
2934
2938
|
menu > :is(a, li):hover + menu,
|
|
2935
2939
|
menu > menu:hover {
|
|
2936
2940
|
opacity: 1;
|
|
@@ -3219,6 +3223,8 @@ nav:is(.left, .right, .top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.bu
|
|
|
3219
3223
|
align-self: center;
|
|
3220
3224
|
display: flex;
|
|
3221
3225
|
flex-direction: column;
|
|
3226
|
+
gap: 0.25rem;
|
|
3227
|
+
line-height: normal;
|
|
3222
3228
|
}
|
|
3223
3229
|
nav:is(.top, .bottom):not(.drawer) > a:not(.button, .chip),
|
|
3224
3230
|
nav:is(.top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.button, .chip) {
|
|
@@ -3560,23 +3566,9 @@ progress.max.vertical {
|
|
|
3560
3566
|
padding-inline-start: 0.25rem;
|
|
3561
3567
|
}
|
|
3562
3568
|
: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;
|
|
3569
|
+
.icon > span > i,
|
|
3570
|
+
:is(.checkbox, .radio) > span::after {
|
|
3571
|
+
content: '';
|
|
3580
3572
|
inline-size: 1.5rem;
|
|
3581
3573
|
block-size: 1.5rem;
|
|
3582
3574
|
box-sizing: border-box;
|
|
@@ -3585,12 +3577,9 @@ progress.max.vertical {
|
|
|
3585
3577
|
color: var(--primary);
|
|
3586
3578
|
position: absolute;
|
|
3587
3579
|
inset: auto auto auto -1.5rem;
|
|
3588
|
-
background-color: transparent;
|
|
3589
3580
|
border-radius: 50%;
|
|
3590
3581
|
user-select: none;
|
|
3591
3582
|
z-index: 1;
|
|
3592
|
-
box-shadow: 0 0 0 0 var(--active);
|
|
3593
|
-
transition: all var(--speed1);
|
|
3594
3583
|
}
|
|
3595
3584
|
.switch > span::before,
|
|
3596
3585
|
.switch.icon > span > i {
|
|
@@ -3635,9 +3624,16 @@ progress.max.vertical {
|
|
|
3635
3624
|
content: "" !important;
|
|
3636
3625
|
font-variation-settings: unset !important;
|
|
3637
3626
|
}
|
|
3638
|
-
:is(.checkbox, .radio) >
|
|
3639
|
-
|
|
3640
|
-
|
|
3627
|
+
:is(.checkbox, .radio) > span::after {
|
|
3628
|
+
transition: all var(--speed1);
|
|
3629
|
+
background-color: currentColor;
|
|
3630
|
+
box-shadow: 0 0 0 0 currentColor;
|
|
3631
|
+
opacity: 0;
|
|
3632
|
+
}
|
|
3633
|
+
:is(.checkbox, .radio):is(:hover) > input:not(:disabled) + span::after,
|
|
3634
|
+
:is(.checkbox, .radio) > input:not(:disabled):is(:focus) + span::after {
|
|
3635
|
+
box-shadow: 0 0 0 0.5rem currentColor;
|
|
3636
|
+
opacity: 0.1;
|
|
3641
3637
|
}
|
|
3642
3638
|
.switch > input:not(:disabled):is(:focus, :hover) + span::before,
|
|
3643
3639
|
.switch.icon > input:not(:disabled):is(:focus, :hover) + span > i {
|
|
@@ -3754,6 +3750,7 @@ progress.max.vertical {
|
|
|
3754
3750
|
z-index: 1;
|
|
3755
3751
|
padding: 0;
|
|
3756
3752
|
margin: 0;
|
|
3753
|
+
transform: rotate(0deg);
|
|
3757
3754
|
}
|
|
3758
3755
|
.slider > input:only-of-type {
|
|
3759
3756
|
pointer-events: all;
|
|
@@ -3923,7 +3920,7 @@ progress.max.vertical {
|
|
|
3923
3920
|
.slider.max.vertical > span {
|
|
3924
3921
|
inset: var(---end) 0 var(---start) 0;
|
|
3925
3922
|
}
|
|
3926
|
-
@media (
|
|
3923
|
+
@media (pointer: coarse) {
|
|
3927
3924
|
.slider > :hover ~ .tooltip {
|
|
3928
3925
|
inset-block-start: -1rem !important;
|
|
3929
3926
|
opacity: 1 !important;
|