beercss 4.0.7 → 4.0.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 +9 -9
- package/dist/cdn/beer.css +48 -29
- package/dist/cdn/beer.custom-element.js +2 -2
- package/dist/cdn/beer.custom-element.min.js +1 -1
- package/dist/cdn/beer.js +10 -2
- package/dist/cdn/beer.min.css +1 -1
- package/dist/cdn/beer.min.js +1 -1
- package/dist/cdn/beer.scoped.css +48 -29
- package/dist/cdn/beer.scoped.min.css +2 -2
- 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/dist/cdn/material-symbols-subset.woff2 +0 -0
- package/package.json +1 -1
- package/src/cdn/customElement.js +2 -2
- package/src/cdn/elements/fields.css +29 -24
- package/src/cdn/elements/fields.ts +10 -2
- package/src/cdn/elements/menus.css +15 -1
- package/src/cdn/fonts/material-symbols-outlined.woff2 +0 -0
- package/src/cdn/fonts/material-symbols-rounded.woff2 +0 -0
- package/src/cdn/fonts/material-symbols-sharp.woff2 +0 -0
- package/src/cdn/fonts/material-symbols-subset.woff2 +0 -0
- package/src/cdn/settings/fonts.css +4 -4
package/dist/cdn/beer.scoped.css
CHANGED
|
@@ -140,7 +140,7 @@ body.dark {
|
|
|
140
140
|
font-style: normal;
|
|
141
141
|
font-weight: 400;
|
|
142
142
|
font-display: swap;
|
|
143
|
-
src: url(material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.
|
|
143
|
+
src: url(material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.8/dist/cdn/material-symbols-outlined.woff2) format("woff2");
|
|
144
144
|
}
|
|
145
145
|
|
|
146
146
|
/* rounded icons */
|
|
@@ -150,7 +150,7 @@ body.dark {
|
|
|
150
150
|
font-style: normal;
|
|
151
151
|
font-weight: 400;
|
|
152
152
|
font-display: swap;
|
|
153
|
-
src: url(material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.
|
|
153
|
+
src: url(material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.8/dist/cdn/material-symbols-rounded.woff2) format("woff2");
|
|
154
154
|
}
|
|
155
155
|
|
|
156
156
|
/* sharp icons */
|
|
@@ -160,7 +160,7 @@ body.dark {
|
|
|
160
160
|
font-style: normal;
|
|
161
161
|
font-weight: 400;
|
|
162
162
|
font-display: swap;
|
|
163
|
-
src: url(material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.
|
|
163
|
+
src: url(material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.8/dist/cdn/material-symbols-sharp.woff2) format("woff2");
|
|
164
164
|
}
|
|
165
165
|
|
|
166
166
|
/* subset of only required icons */
|
|
@@ -170,7 +170,7 @@ body.dark {
|
|
|
170
170
|
font-style: normal;
|
|
171
171
|
font-weight: 400;
|
|
172
172
|
font-display: swap;
|
|
173
|
-
src: url(material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.
|
|
173
|
+
src: url(material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.8/dist/cdn/material-symbols-subset.woff2) format("woff2");
|
|
174
174
|
}
|
|
175
175
|
|
|
176
176
|
/* begin scoped */
|
|
@@ -1630,19 +1630,19 @@ li > details > summary + .list {
|
|
|
1630
1630
|
border-radius: 0.25rem;
|
|
1631
1631
|
}
|
|
1632
1632
|
|
|
1633
|
-
.field
|
|
1633
|
+
.field[class*=round].small {
|
|
1634
1634
|
border-radius: 1.25rem;
|
|
1635
1635
|
}
|
|
1636
1636
|
|
|
1637
|
-
.field
|
|
1637
|
+
.field[class*=round] {
|
|
1638
1638
|
border-radius: 1.5rem;
|
|
1639
1639
|
}
|
|
1640
1640
|
|
|
1641
|
-
.field
|
|
1641
|
+
.field[class*=round].large {
|
|
1642
1642
|
border-radius: 1.75rem;
|
|
1643
1643
|
}
|
|
1644
1644
|
|
|
1645
|
-
.field
|
|
1645
|
+
.field[class*=round].extra {
|
|
1646
1646
|
border-radius: 2rem;
|
|
1647
1647
|
}
|
|
1648
1648
|
|
|
@@ -1729,8 +1729,7 @@ input::-webkit-date-and-time-value {
|
|
|
1729
1729
|
|
|
1730
1730
|
input[type=file],
|
|
1731
1731
|
input[type=color],
|
|
1732
|
-
:not(.field) > input[type^=date],
|
|
1733
|
-
:not(.field) > input[type^=time],
|
|
1732
|
+
:not(.field) > input:is([type^=date], [type^=time], [type=month], [type=week]),
|
|
1734
1733
|
input::-webkit-calendar-picker-indicator {
|
|
1735
1734
|
opacity: 0;
|
|
1736
1735
|
position: absolute;
|
|
@@ -1744,6 +1743,12 @@ input::-webkit-calendar-picker-indicator {
|
|
|
1744
1743
|
z-index: 2 !important;
|
|
1745
1744
|
}
|
|
1746
1745
|
|
|
1746
|
+
@media (pointer: fine) {
|
|
1747
|
+
.field > input::-webkit-calendar-picker-indicator {
|
|
1748
|
+
z-index: -1 !important;
|
|
1749
|
+
}
|
|
1750
|
+
}
|
|
1751
|
+
|
|
1747
1752
|
input::-webkit-search-decoration,
|
|
1748
1753
|
input::-webkit-search-cancel-button,
|
|
1749
1754
|
input::-webkit-search-results-button,
|
|
@@ -1765,11 +1770,11 @@ input[type=number] {
|
|
|
1765
1770
|
border-color: var(--primary);
|
|
1766
1771
|
}
|
|
1767
1772
|
|
|
1768
|
-
.field
|
|
1773
|
+
.field[class*=round] > :is(input, textarea, select) {
|
|
1769
1774
|
padding-inline: 1.4376rem;
|
|
1770
1775
|
}
|
|
1771
1776
|
|
|
1772
|
-
.field
|
|
1777
|
+
.field[class*=round] > :is(input, textarea, select):focus {
|
|
1773
1778
|
padding-inline: 1.375rem;
|
|
1774
1779
|
}
|
|
1775
1780
|
|
|
@@ -1797,25 +1802,25 @@ input[type=number] {
|
|
|
1797
1802
|
padding-inline-end: 2.875rem;
|
|
1798
1803
|
}
|
|
1799
1804
|
|
|
1800
|
-
.field:not(.border,
|
|
1805
|
+
.field:not(.border, [class*=round]) > :is(input, textarea, select) {
|
|
1801
1806
|
border-block-end-color: var(--outline);
|
|
1802
1807
|
}
|
|
1803
1808
|
|
|
1804
|
-
.field:not(.border,
|
|
1809
|
+
.field:not(.border, [class*=round]) > :is(input, textarea, select):focus {
|
|
1805
1810
|
border-block-end-color: var(--primary);
|
|
1806
1811
|
}
|
|
1807
1812
|
|
|
1808
|
-
.field
|
|
1809
|
-
.field
|
|
1813
|
+
.field[class*=round]:not(.border, .fill) > :is(input, textarea, select),
|
|
1814
|
+
.field[class*=round]:not(.border) > :is(input, textarea, select):focus {
|
|
1810
1815
|
box-shadow: var(--elevate1);
|
|
1811
1816
|
}
|
|
1812
1817
|
|
|
1813
|
-
.field
|
|
1818
|
+
.field[class*=round]:not(.border, .fill) > :is(input, textarea, select):focus {
|
|
1814
1819
|
box-shadow: var(--elevate2);
|
|
1815
1820
|
}
|
|
1816
1821
|
|
|
1817
|
-
.field.invalid:not(.border,
|
|
1818
|
-
.field.invalid:not(.border,
|
|
1822
|
+
.field.invalid:not(.border, [class*=round]) > :is(input, textarea, select),
|
|
1823
|
+
.field.invalid:not(.border, [class*=round]) > :is(input, textarea, select):focus {
|
|
1819
1824
|
border-block-end-color: var(--error);
|
|
1820
1825
|
}
|
|
1821
1826
|
|
|
@@ -1902,11 +1907,11 @@ input[type=number] {
|
|
|
1902
1907
|
inset: -0.5rem var(--_start) 0 1rem;
|
|
1903
1908
|
}
|
|
1904
1909
|
|
|
1905
|
-
.field.label
|
|
1910
|
+
.field.label[class*=round] > label {
|
|
1906
1911
|
inset: -0.5rem 1.75rem 0 var(--_start);
|
|
1907
1912
|
}
|
|
1908
1913
|
|
|
1909
|
-
[dir=rtl] .field.
|
|
1914
|
+
[dir=rtl] .field.labell[class*=round] > label {
|
|
1910
1915
|
inset: -0.5rem 1.75rem 0 var(--_start);
|
|
1911
1916
|
}
|
|
1912
1917
|
|
|
@@ -1914,8 +1919,8 @@ input[type=number] {
|
|
|
1914
1919
|
--_start: 1rem;
|
|
1915
1920
|
}
|
|
1916
1921
|
|
|
1917
|
-
.field.label
|
|
1918
|
-
.field.label.border.prefix
|
|
1922
|
+
.field.label[class*=round] > label,
|
|
1923
|
+
.field.label.border.prefix[class*=round]:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
|
|
1919
1924
|
--_start: 1.5rem;
|
|
1920
1925
|
}
|
|
1921
1926
|
|
|
@@ -1958,13 +1963,13 @@ input[type=number] {
|
|
|
1958
1963
|
clip-path: polygon(-2% -2%, 1rem -2%, 1rem 0.5rem, calc(100% - 0.75rem) 0.5rem, calc(100% - 0.75rem) -2%, 102% -2%, 102% 102%, -2% 102%);
|
|
1959
1964
|
}
|
|
1960
1965
|
|
|
1961
|
-
.field.label.border
|
|
1962
|
-
.field.label.border
|
|
1966
|
+
.field.label.border[class*=round]:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
|
|
1967
|
+
.field.label.border[class*=round]:not(.fill) > select {
|
|
1963
1968
|
clip-path: polygon(-2% -2%, 1.25rem -2%, 1.25rem 0.5rem, calc(100% - 1.75rem) 0.5rem, calc(100% - 1.75rem) -2%, 102% -2%, 102% 102%, -2% 102%);
|
|
1964
1969
|
}
|
|
1965
1970
|
|
|
1966
|
-
[dir=rtl] .field.label.border
|
|
1967
|
-
[dir=rtl] .field.label.border
|
|
1971
|
+
[dir=rtl] .field.label.border[class*=round]:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
|
|
1972
|
+
[dir=rtl] .field.label.border[class*=round]:not(.fill) > select {
|
|
1968
1973
|
clip-path: polygon(-2% -2%, 1.75rem -2%, 1.75rem 0.5rem, calc(100% - 1.25rem) 0.5rem, calc(100% - 1.25rem) -2%, 102% -2%, 102% 102%, -2% 102%);
|
|
1969
1974
|
}
|
|
1970
1975
|
|
|
@@ -2006,7 +2011,7 @@ input[type=number] {
|
|
|
2006
2011
|
color: var(--error) !important;
|
|
2007
2012
|
}
|
|
2008
2013
|
|
|
2009
|
-
.field
|
|
2014
|
+
.field[class*=round] > output {
|
|
2010
2015
|
padding: 0.25rem 1.5rem;
|
|
2011
2016
|
}
|
|
2012
2017
|
|
|
@@ -2678,7 +2683,7 @@ menu > li.active {
|
|
|
2678
2683
|
}
|
|
2679
2684
|
|
|
2680
2685
|
menu > li:is(.active, :active) {
|
|
2681
|
-
border-radius:
|
|
2686
|
+
border-radius: 0.75rem;
|
|
2682
2687
|
}
|
|
2683
2688
|
|
|
2684
2689
|
menu > li > :is(.max, .field),
|
|
@@ -2796,6 +2801,20 @@ menu.transparent > li {
|
|
|
2796
2801
|
padding: 0;
|
|
2797
2802
|
}
|
|
2798
2803
|
|
|
2804
|
+
menu.transparent > li > menu {
|
|
2805
|
+
opacity: 1;
|
|
2806
|
+
visibility: visible;
|
|
2807
|
+
position: relative;
|
|
2808
|
+
inset: 0;
|
|
2809
|
+
transform: none;
|
|
2810
|
+
max-block-size: none;
|
|
2811
|
+
border-radius: 1rem 1rem 0.5rem 0.5rem;
|
|
2812
|
+
}
|
|
2813
|
+
|
|
2814
|
+
menu.transparent > li:last-child > menu {
|
|
2815
|
+
border-radius: 0.5rem 0.5rem 1rem 1rem;
|
|
2816
|
+
}
|
|
2817
|
+
|
|
2799
2818
|
menu > li:nth-last-child(2) {
|
|
2800
2819
|
--_child: 2;
|
|
2801
2820
|
}
|