mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 09:26:14 -04:00
Closes Legend element not styled in role="group" Yohn/PicoCSS#23
Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
This commit is contained in:
Yohn
parent
324f6fcef4
commit
ddf41a191a
265 changed files with 13809 additions and 4063 deletions
|
|
@ -6,6 +6,10 @@
|
|||
* Group ([role="group"], [role="search"])
|
||||
*/
|
||||
|
||||
#{$parent-selector} fieldset[role="group"] > legend {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#{$parent-selector} [role="search"],
|
||||
#{$parent-selector} [role="group"] {
|
||||
display: inline-flex;
|
||||
|
|
@ -17,8 +21,9 @@
|
|||
vertical-align: middle;
|
||||
transition: box-shadow var(#{$css-var-prefix}transition);
|
||||
|
||||
> label {
|
||||
//border-color: var(#{$css-var-prefix}secondary-background);
|
||||
> label,
|
||||
> legend {
|
||||
border-color: var(#{$css-var-prefix}secondary-background);
|
||||
background-color: var(#{$css-var-prefix}secondary-background);
|
||||
color: var(#{$css-var-prefix}secondary-inverse);
|
||||
}
|
||||
|
|
@ -26,7 +31,9 @@
|
|||
> *,
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select,
|
||||
label {
|
||||
> label,
|
||||
> legend,
|
||||
> details {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -47,6 +54,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
> details {
|
||||
&:not(:first-child) > summary {
|
||||
margin-left: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) > summary {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
> summary,
|
||||
> summary:not([role]) {
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="reset"],
|
||||
|
|
@ -54,7 +78,9 @@
|
|||
[role="button"],
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select,
|
||||
label {
|
||||
> label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
&:not(:first-child) {
|
||||
margin-left: calc(var(#{$css-var-prefix}border-width) * -1);
|
||||
}
|
||||
|
|
@ -65,7 +91,9 @@
|
|||
[type="reset"],
|
||||
[type="button"],
|
||||
[role="button"],
|
||||
label {
|
||||
> label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
|
@ -78,7 +106,9 @@
|
|||
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select,
|
||||
label {
|
||||
> label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
|
@ -94,7 +124,9 @@
|
|||
[type="submit"],
|
||||
[type="button"],
|
||||
[role="button"],
|
||||
label {
|
||||
label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
#{$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)
|
||||
|
|
@ -108,7 +140,9 @@
|
|||
[type="reset"],
|
||||
[type="button"],
|
||||
[role="button"],
|
||||
label {
|
||||
label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -136,7 +170,9 @@
|
|||
> *,
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select,
|
||||
label {
|
||||
label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
&:not(:first-child) {
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
|
|
@ -162,7 +198,9 @@
|
|||
[role="button"],
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select,
|
||||
label {
|
||||
label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
&:not(:first-child) {
|
||||
margin-right: calc(var(#{$css-var-prefix}border-width) * -1);
|
||||
margin-left: auto;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@
|
|||
#{$parent-selector} optgroup,
|
||||
#{$parent-selector} select,
|
||||
#{$parent-selector} textarea,
|
||||
#{$parent-selector} [role="group"] > label {
|
||||
#{$parent-selector} [role="group"] > label,
|
||||
#{$parent-selector} [role="group"] > legend {
|
||||
margin: 0; // 2
|
||||
font-size: 1rem; // 1
|
||||
line-height: var(#{$css-var-prefix}line-height); // 1
|
||||
|
|
@ -116,8 +117,10 @@
|
|||
// ––––––––––––––––––––
|
||||
|
||||
// Force height for alternatives input types
|
||||
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="date"]),
|
||||
#{$parent-selector} [role="group"] > label {
|
||||
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="date"]) {
|
||||
//,
|
||||
//#{$parent-selector} [role="group"] > label,
|
||||
//#{$parent-selector} [role="group"] > legend {
|
||||
height: calc(
|
||||
(1rem * var(#{$css-var-prefix}line-height)) +
|
||||
(var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
|
||||
|
|
@ -159,7 +162,8 @@
|
|||
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
|
||||
#{$parent-selector} select,
|
||||
#{$parent-selector} textarea,
|
||||
#{$parent-selector} [role="group"] > label {
|
||||
#{$parent-selector} [role="group"] > label,
|
||||
#{$parent-selector} [role="group"] > legend {
|
||||
appearance: none;
|
||||
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
|
||||
var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||
|
|
@ -169,7 +173,8 @@
|
|||
#{$parent-selector} input,
|
||||
#{$parent-selector} select,
|
||||
#{$parent-selector} textarea,
|
||||
#{$parent-selector} [role="group"] > label {
|
||||
#{$parent-selector} [role="group"] > label,
|
||||
#{$parent-selector} [role="group"] > legend {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-background-color);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-border-color);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}form-element-color);
|
||||
|
|
@ -241,6 +246,7 @@
|
|||
// Disabled
|
||||
#{$parent-selector} input:not([type="submit"], [type="button"], [type="reset"])[disabled],
|
||||
#{$parent-selector} [role="group"] > label,
|
||||
#{$parent-selector} [role="group"] > legend,
|
||||
#{$parent-selector} select[disabled],
|
||||
#{$parent-selector} textarea[disabled],
|
||||
#{$parent-selector} label[aria-disabled="true"],
|
||||
|
|
@ -252,7 +258,8 @@
|
|||
}
|
||||
|
||||
#{$parent-selector} label[aria-disabled="true"] input[disabled],
|
||||
#{$parent-selector} [role="group"] > label {
|
||||
#{$parent-selector} [role="group"] > label,
|
||||
#{$parent-selector} [role="group"] > legend {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -380,7 +387,8 @@
|
|||
#{$parent-selector} textarea::placeholder,
|
||||
#{$parent-selector} textarea::-webkit-input-placeholder,
|
||||
#{$parent-selector} select:invalid,
|
||||
#{$parent-selector} [role="group"] > label {
|
||||
#{$parent-selector} [role="group"] > label,
|
||||
#{$parent-selector} [role="group"] > legend {
|
||||
color: var(#{$css-var-prefix}form-element-placeholder-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -389,7 +397,8 @@
|
|||
#{$parent-selector} input:not([type="checkbox"], [type="radio"]),
|
||||
#{$parent-selector} select,
|
||||
#{$parent-selector} textarea,
|
||||
#{$parent-selector} [role="group"] > label {
|
||||
#{$parent-selector} [role="group"] > label,
|
||||
#{$parent-selector} [role="group"] > legend {
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/*!
|
||||
* Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
|
||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||
* Copyright 2019-2024 - Licensed under MIT
|
||||
*/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue