mirror of
https://github.com/picocss/pico.git
synced 2025-04-25 18:56:15 -04:00
Added <label> compatibility to groups
This commit is contained in:
parent
fe78285302
commit
b1fcd44b73
241 changed files with 10390 additions and 3095 deletions
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue