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:
Yohn
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@use "sass:string";
|
||||
@use "sass:map";
|
||||
@use "sass:math";
|
||||
@use "../settings" as *; // for spacing, breakpoints, and if columns are defined.
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
|
|
@ -13,6 +14,20 @@
|
|||
display: grid;
|
||||
grid-template-columns: repeat($row-columns, 1fr);
|
||||
gap: var(#{$css-var-prefix}grid-row-gap) var(#{$css-var-prefix}grid-column-gap);
|
||||
&.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
&.align-start {
|
||||
align-items: start;
|
||||
}
|
||||
&.align-end {
|
||||
align-items: end;
|
||||
}
|
||||
> [class*="col"] > *,
|
||||
> [class|="col"] > *,
|
||||
> [class~="col"] > * {
|
||||
margin: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.5) auto;
|
||||
}
|
||||
}
|
||||
.row {
|
||||
max-width: map.get(map.get($breakpoints, "xl"), "viewport");
|
||||
|
|
@ -48,7 +63,7 @@
|
|||
|
||||
@each $breakpoint, $values in $breakpoints {
|
||||
@if $values {
|
||||
@media (max-width: map.get($values, "viewport")) {
|
||||
@media (min-width: map.get($values, "viewport")) {
|
||||
@for $col from 1 through $row-columns {
|
||||
.col-#{$breakpoint}-#{$col} {
|
||||
grid-column-end: span $col;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue