Added <label> compatibility to groups

This commit is contained in:
Yohn 2024-11-11 22:10:47 -05:00
parent fe78285302
commit b1fcd44b73
241 changed files with 10390 additions and 3095 deletions

View file

@ -10,6 +10,15 @@
display: block;
margin-bottom: var(#{$css-var-prefix}spacing);
&:not([open]) summary ~ * {
max-height: 0;
overflow: hidden;
opacity: 0;
transition:
max-height var(#{$css-var-prefix}transition),
opacity var(#{$css-var-prefix}transition);
}
summary {
line-height: 1rem;
list-style-type: none;
@ -82,7 +91,9 @@
}
}
}
//!
//!
//!
// Open
&[open] {
> summary {
@ -97,6 +108,14 @@
&::after {
transform: rotate(0);
}
~ * {
max-height: 100; /* Initial max height for content */
opacity: 1;
transition:
max-height var(#{$css-var-prefix}transition),
opacity var(#{$css-var-prefix}transition);
}
}
}
}

View file

@ -17,9 +17,16 @@
vertical-align: middle;
transition: box-shadow var(#{$css-var-prefix}transition);
> label {
//border-color: var(#{$css-var-prefix}secondary-background);
background-color: var(#{$css-var-prefix}secondary-background);
color: var(#{$css-var-prefix}secondary-inverse);
}
> *,
input:not([type="checkbox"], [type="radio"]),
select {
select,
label {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -46,7 +53,8 @@
[type="button"],
[role="button"],
input:not([type="checkbox"], [type="radio"]),
select {
select,
label {
&:not(:first-child) {
margin-left: calc(var(#{$css-var-prefix}border-width) * -1);
}
@ -56,7 +64,8 @@
[type="submit"],
[type="reset"],
[type="button"],
[role="button"] {
[role="button"],
label {
width: auto;
}
@ -68,7 +77,8 @@
);
input:not([type="checkbox"], [type="radio"]),
select {
select,
label {
border-color: transparent;
}
}
@ -83,7 +93,8 @@
button,
[type="submit"],
[type="button"],
[role="button"] {
[role="button"],
label {
#{$css-var-prefix}button-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}button-hover-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
@ -96,7 +107,8 @@
[type="submit"],
[type="reset"],
[type="button"],
[role="button"] {
[role="button"],
label {
&:focus {
box-shadow: none;
}