mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 10:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Closes Legend element not styled in role="group" Yohn/PicoCSS#23

Browse source 
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 2024-12-31 00:16:26 -05:00
parent 324f6fcef4
commit ddf41a191a
265 changed files with 13809 additions and 4063 deletions
Download patch file Download diff file Expand all files Collapse all files

58
scss/components/_group.scss
View file

@ -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;