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

Added <label> compatibility to groups

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

22
scss/forms/_basics.scss
View file

@ -18,7 +18,8 @@
#{$parent-selector} input,
#{$parent-selector} optgroup,
#{$parent-selector} select,
#{$parent-selector} textarea {
#{$parent-selector} textarea,
#{$parent-selector} [role="group"] > label {
margin: 0; // 2
font-size: 1rem; // 1
line-height: var(#{$css-var-prefix}line-height); // 1
@ -115,7 +116,8 @@
// ––––––––––––––––––––
// Force height for alternatives input types
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="date"]) {
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="date"]),
#{$parent-selector} [role="group"] > label {
height: calc(
(1rem * var(#{$css-var-prefix}line-height)) +
(var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
@ -156,7 +158,8 @@
// Reset appearance (Not Checkboxes, Radios, Range and File)
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
#{$parent-selector} select,
#{$parent-selector} textarea {
#{$parent-selector} textarea,
#{$parent-selector} [role="group"] > label {
appearance: none;
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
var(#{$css-var-prefix}form-element-spacing-horizontal);
@ -165,7 +168,8 @@
// Commons styles
#{$parent-selector} input,
#{$parent-selector} select,
#{$parent-selector} textarea {
#{$parent-selector} textarea,
#{$parent-selector} [role="group"] > label {
#{$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);
@ -236,6 +240,7 @@
// Disabled
#{$parent-selector} input:not([type="submit"], [type="button"], [type="reset"])[disabled],
#{$parent-selector} [role="group"] > label,
#{$parent-selector} select[disabled],
#{$parent-selector} textarea[disabled],
#{$parent-selector} label[aria-disabled="true"],
@ -246,7 +251,8 @@
pointer-events: none;
}
#{$parent-selector} label[aria-disabled="true"] input[disabled] {
#{$parent-selector} label[aria-disabled="true"] input[disabled],
#{$parent-selector} [role="group"] > label {
opacity: 1;
}
@ -372,7 +378,8 @@
#{$parent-selector} input::-webkit-input-placeholder,
#{$parent-selector} textarea::placeholder,
#{$parent-selector} textarea::-webkit-input-placeholder,
#{$parent-selector} select:invalid {
#{$parent-selector} select:invalid,
#{$parent-selector} [role="group"] > label {
color: var(#{$css-var-prefix}form-element-placeholder-color);
opacity: 1;
}
@ -380,7 +387,8 @@
// Margin bottom (Not Checkboxes and Radios)
#{$parent-selector} input:not([type="checkbox"], [type="radio"]),
#{$parent-selector} select,
#{$parent-selector} textarea {
#{$parent-selector} textarea,
#{$parent-selector} [role="group"] > label {
margin-bottom: var(#{$css-var-prefix}spacing);
}