mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 18:26:14 -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
|
|
@ -601,6 +601,26 @@ section {
|
|||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
.row-fluid.align-center,
|
||||
.row.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
.row-fluid.align-start,
|
||||
.row.align-start {
|
||||
align-items: start;
|
||||
}
|
||||
.row-fluid.align-end,
|
||||
.row.align-end {
|
||||
align-items: end;
|
||||
}
|
||||
.row-fluid > [class*=col] > *,
|
||||
.row-fluid > [class|=col] > *,
|
||||
.row-fluid > [class~=col] > *,
|
||||
.row > [class*=col] > *,
|
||||
.row > [class|=col] > *,
|
||||
.row > [class~=col] > * {
|
||||
margin: calc(var(--pico-block-spacing-vertical) * 0.5) auto;
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
|
|
@ -704,7 +724,7 @@ section {
|
|||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
@media (min-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
|
@ -778,7 +798,7 @@ section {
|
|||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
@media (min-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
|
@ -852,7 +872,7 @@ section {
|
|||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
@media (min-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
|
@ -926,7 +946,7 @@ section {
|
|||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
@media (min-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
|
@ -1000,7 +1020,7 @@ section {
|
|||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
@media (min-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
|
@ -1539,7 +1559,8 @@ canvas {
|
|||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
textarea,
|
||||
[role=group] > label {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
line-height: var(--pico-line-height);
|
||||
|
|
@ -1613,7 +1634,8 @@ textarea {
|
|||
border-width: 0;
|
||||
}
|
||||
|
||||
input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
|
||||
input:not([type=checkbox], [type=radio], [type=range], [type=date]),
|
||||
[role=group] > label {
|
||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||
}
|
||||
|
||||
|
|
@ -1646,7 +1668,8 @@ textarea {
|
|||
|
||||
input:not([type=checkbox], [type=radio], [type=range], [type=file]),
|
||||
select,
|
||||
textarea {
|
||||
textarea,
|
||||
[role=group] > label {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
|
@ -1655,7 +1678,8 @@ textarea {
|
|||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
textarea,
|
||||
[role=group] > label {
|
||||
--pico-background-color: var(--pico-form-element-background-color);
|
||||
--pico-border-color: var(--pico-form-element-border-color);
|
||||
--pico-color: var(--pico-form-element-color);
|
||||
|
|
@ -1696,6 +1720,7 @@ input:not([type=submit],
|
|||
}
|
||||
|
||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||
[role=group] > label,
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
label[aria-disabled=true],
|
||||
|
|
@ -1704,7 +1729,8 @@ label[aria-disabled=true],
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
label[aria-disabled=true] input[disabled] {
|
||||
label[aria-disabled=true] input[disabled],
|
||||
[role=group] > label {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -1771,14 +1797,16 @@ input::placeholder,
|
|||
input::-webkit-input-placeholder,
|
||||
textarea::placeholder,
|
||||
textarea::-webkit-input-placeholder,
|
||||
select:invalid {
|
||||
select:invalid,
|
||||
[role=group] > label {
|
||||
color: var(--pico-form-element-placeholder-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input:not([type=checkbox], [type=radio]),
|
||||
select,
|
||||
textarea {
|
||||
textarea,
|
||||
[role=group] > label {
|
||||
margin-bottom: var(--pico-spacing);
|
||||
}
|
||||
|
||||
|
|
@ -2173,6 +2201,12 @@ details {
|
|||
display: block;
|
||||
margin-bottom: var(--pico-spacing);
|
||||
}
|
||||
details:not([open]) summary ~ * {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transition: max-height var(--pico-transition), opacity var(--pico-transition);
|
||||
}
|
||||
details summary {
|
||||
line-height: 1rem;
|
||||
list-style-type: none;
|
||||
|
|
@ -2232,6 +2266,11 @@ details[open] > summary:not([role]):not(:focus) {
|
|||
details[open] > summary::after {
|
||||
transform: rotate(0);
|
||||
}
|
||||
details[open] > summary ~ * {
|
||||
max-height: 100; /* Initial max height for content */
|
||||
opacity: 1;
|
||||
transition: max-height var(--pico-transition), opacity var(--pico-transition);
|
||||
}
|
||||
|
||||
[dir=rtl] details summary {
|
||||
text-align: right;
|
||||
|
|
@ -2287,12 +2326,19 @@ article > footer {
|
|||
vertical-align: middle;
|
||||
transition: box-shadow var(--pico-transition);
|
||||
}
|
||||
[role=search] > label,
|
||||
[role=group] > label {
|
||||
background-color: var(--pico-secondary-background);
|
||||
color: var(--pico-secondary-inverse);
|
||||
}
|
||||
[role=search] > *,
|
||||
[role=search] input:not([type=checkbox], [type=radio]),
|
||||
[role=search] select,
|
||||
[role=search] label,
|
||||
[role=group] > *,
|
||||
[role=group] input:not([type=checkbox], [type=radio]),
|
||||
[role=group] select {
|
||||
[role=group] select,
|
||||
[role=group] label {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -2300,9 +2346,11 @@ article > footer {
|
|||
[role=search] > *:not(:first-child),
|
||||
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
|
||||
[role=search] select:not(:first-child),
|
||||
[role=search] label:not(:first-child),
|
||||
[role=group] > *:not(:first-child),
|
||||
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
|
||||
[role=group] select:not(:first-child) {
|
||||
[role=group] select:not(:first-child),
|
||||
[role=group] label:not(:first-child) {
|
||||
margin-left: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
|
@ -2310,18 +2358,22 @@ article > footer {
|
|||
[role=search] > *:not(:last-child),
|
||||
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
|
||||
[role=search] select:not(:last-child),
|
||||
[role=search] label:not(:last-child),
|
||||
[role=group] > *:not(:last-child),
|
||||
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
|
||||
[role=group] select:not(:last-child) {
|
||||
[role=group] select:not(:last-child),
|
||||
[role=group] label:not(:last-child) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
[role=search] > *:focus,
|
||||
[role=search] input:not([type=checkbox], [type=radio]):focus,
|
||||
[role=search] select:focus,
|
||||
[role=search] label:focus,
|
||||
[role=group] > *:focus,
|
||||
[role=group] input:not([type=checkbox], [type=radio]):focus,
|
||||
[role=group] select:focus {
|
||||
[role=group] select:focus,
|
||||
[role=group] label:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
[role=search] button:not(:first-child),
|
||||
|
|
@ -2331,13 +2383,15 @@ article > footer {
|
|||
[role=search] [role=button]:not(:first-child),
|
||||
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
|
||||
[role=search] select:not(:first-child),
|
||||
[role=search] label:not(:first-child),
|
||||
[role=group] button:not(:first-child),
|
||||
[role=group] [type=submit]:not(:first-child),
|
||||
[role=group] [type=reset]:not(:first-child),
|
||||
[role=group] [type=button]:not(:first-child),
|
||||
[role=group] [role=button]:not(:first-child),
|
||||
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
|
||||
[role=group] select:not(:first-child) {
|
||||
[role=group] select:not(:first-child),
|
||||
[role=group] label:not(:first-child) {
|
||||
margin-left: calc(var(--pico-border-width) * -1);
|
||||
}
|
||||
[role=search] button,
|
||||
|
|
@ -2345,11 +2399,13 @@ article > footer {
|
|||
[role=search] [type=reset],
|
||||
[role=search] [type=button],
|
||||
[role=search] [role=button],
|
||||
[role=search] label,
|
||||
[role=group] button,
|
||||
[role=group] [type=submit],
|
||||
[role=group] [type=reset],
|
||||
[role=group] [type=button],
|
||||
[role=group] [role=button] {
|
||||
[role=group] [role=button],
|
||||
[role=group] label {
|
||||
width: auto;
|
||||
}
|
||||
@supports selector(:has(*)) {
|
||||
|
|
@ -2359,8 +2415,10 @@ article > footer {
|
|||
}
|
||||
[role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
|
||||
[role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
|
||||
[role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
|
||||
[role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
|
||||
[role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select {
|
||||
[role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
|
||||
[role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
|
||||
border-color: transparent;
|
||||
}
|
||||
[role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
|
||||
|
|
@ -2371,10 +2429,12 @@ article > footer {
|
|||
[role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
|
||||
[role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
|
||||
[role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
|
||||
[role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
|
||||
[role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
|
||||
[role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
|
||||
[role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
|
||||
[role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button] {
|
||||
[role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
|
||||
[role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
|
||||
--pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border);
|
||||
--pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border);
|
||||
}
|
||||
|
|
@ -2383,11 +2443,13 @@ article > footer {
|
|||
[role=search] [type=reset]:focus,
|
||||
[role=search] [type=button]:focus,
|
||||
[role=search] [role=button]:focus,
|
||||
[role=search] label:focus,
|
||||
[role=group] button:focus,
|
||||
[role=group] [type=submit]:focus,
|
||||
[role=group] [type=reset]:focus,
|
||||
[role=group] [type=button]:focus,
|
||||
[role=group] [role=button]:focus {
|
||||
[role=group] [role=button]:focus,
|
||||
[role=group] label:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue