mirror of
https://github.com/picocss/pico.git
synced 2025-06-19 04:35:08 -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
|
|
@ -1,6 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
/*!
|
||||
* 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
|
||||
*/
|
||||
/**
|
||||
|
|
@ -199,19 +199,19 @@ input:not([type=submit],
|
|||
color-scheme: light;
|
||||
--pico-background-color: #fff;
|
||||
--pico-color: #373c44;
|
||||
--pico-text-selection-color: rgba(119, 156, 0, 0.25);
|
||||
--pico-text-selection-color: rgba(0, 166, 110, 0.25);
|
||||
--pico-muted-color: #646b79;
|
||||
--pico-muted-border-color: rgb(231, 234, 239.5);
|
||||
--pico-primary: #577400;
|
||||
--pico-primary-background: #a5d601;
|
||||
--pico-primary: #007a50;
|
||||
--pico-primary-background: #007a50;
|
||||
--pico-primary-border: var(--pico-primary-background);
|
||||
--pico-primary-underline: rgba(87, 116, 0, 0.5);
|
||||
--pico-primary-hover: #435a00;
|
||||
--pico-primary-hover-background: #99c801;
|
||||
--pico-primary-underline: rgba(0, 122, 80, 0.5);
|
||||
--pico-primary-hover: #005f3d;
|
||||
--pico-primary-hover-background: #006d46;
|
||||
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
||||
--pico-primary-hover-underline: var(--pico-primary-hover);
|
||||
--pico-primary-focus: rgba(119, 156, 0, 0.5);
|
||||
--pico-primary-inverse: #000;
|
||||
--pico-primary-focus: rgba(0, 166, 110, 0.5);
|
||||
--pico-primary-inverse: #fff;
|
||||
--pico-secondary: #5d6b89;
|
||||
--pico-secondary-background: #525f7a;
|
||||
--pico-secondary-border: var(--pico-secondary-background);
|
||||
|
|
@ -275,7 +275,7 @@ input:not([type=submit],
|
|||
--pico-switch-background-color: #bfc7d9;
|
||||
--pico-switch-checked-background-color: var(--pico-primary-background);
|
||||
--pico-switch-color: #fff;
|
||||
--pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
|
||||
--pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--pico-range-border-color: #dfe3eb;
|
||||
--pico-range-active-border-color: #bfc7d9;
|
||||
--pico-range-thumb-border-color: var(--pico-background-color);
|
||||
|
|
@ -305,12 +305,12 @@ input:not([type=submit],
|
|||
[data-theme=light] details summary[role=button]::after,
|
||||
:root:not([data-theme=dark]) details summary[role=button]::after,
|
||||
:host(:not([data-theme=dark])) details summary[role=button]::after {
|
||||
filter: brightness(100) invert(1);
|
||||
filter: brightness(100) invert(0);
|
||||
}
|
||||
[data-theme=light] [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button])::before,
|
||||
:root:not([data-theme=dark]) [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button])::before,
|
||||
:host(:not([data-theme=dark])) [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button])::before {
|
||||
filter: brightness(0) invert(1);
|
||||
filter: brightness(100) invert(0);
|
||||
}
|
||||
[data-theme=light] input:is([type=submit],
|
||||
[type=button],
|
||||
|
|
@ -339,19 +339,19 @@ input:not([type=submit],
|
|||
color-scheme: dark;
|
||||
--pico-background-color: rgb(19, 22.5, 30.5);
|
||||
--pico-color: #c2c7d0;
|
||||
--pico-text-selection-color: rgba(130, 171, 0, 0.1875);
|
||||
--pico-text-selection-color: rgba(0, 180, 120, 0.1875);
|
||||
--pico-muted-color: #7b8495;
|
||||
--pico-muted-border-color: #202632;
|
||||
--pico-primary: #82ab00;
|
||||
--pico-primary-background: #a5d601;
|
||||
--pico-primary: #00b478;
|
||||
--pico-primary-background: #007a50;
|
||||
--pico-primary-border: var(--pico-primary-background);
|
||||
--pico-primary-underline: rgba(130, 171, 0, 0.5);
|
||||
--pico-primary-hover: #99c801;
|
||||
--pico-primary-hover-background: #b2e51a;
|
||||
--pico-primary-underline: rgba(0, 180, 120, 0.5);
|
||||
--pico-primary-hover: #00cc88;
|
||||
--pico-primary-hover-background: #00895a;
|
||||
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
||||
--pico-primary-hover-underline: var(--pico-primary-hover);
|
||||
--pico-primary-focus: rgba(130, 171, 0, 0.375);
|
||||
--pico-primary-inverse: #000;
|
||||
--pico-primary-focus: rgba(0, 180, 120, 0.375);
|
||||
--pico-primary-inverse: #fff;
|
||||
--pico-secondary: #969eaf;
|
||||
--pico-secondary-background: #525f7a;
|
||||
--pico-secondary-border: var(--pico-secondary-background);
|
||||
|
|
@ -415,7 +415,7 @@ input:not([type=submit],
|
|||
--pico-switch-background-color: #333c4e;
|
||||
--pico-switch-checked-background-color: var(--pico-primary-background);
|
||||
--pico-switch-color: #fff;
|
||||
--pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
|
||||
--pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--pico-range-border-color: #202632;
|
||||
--pico-range-active-border-color: #2a3140;
|
||||
--pico-range-thumb-border-color: var(--pico-background-color);
|
||||
|
|
@ -458,30 +458,30 @@ input:not([type=submit],
|
|||
}
|
||||
:root:not([data-theme]) details summary[role=button]::after,
|
||||
:host(:not([data-theme])) details summary[role=button]::after {
|
||||
filter: brightness(100) invert(1);
|
||||
filter: brightness(100) invert(0);
|
||||
}
|
||||
:root:not([data-theme]) [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button])::before,
|
||||
:host(:not([data-theme])) [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button])::before {
|
||||
filter: brightness(100) invert(0);
|
||||
filter: brightness(100) invert(1);
|
||||
}
|
||||
}
|
||||
[data-theme=dark] {
|
||||
color-scheme: dark;
|
||||
--pico-background-color: rgb(19, 22.5, 30.5);
|
||||
--pico-color: #c2c7d0;
|
||||
--pico-text-selection-color: rgba(130, 171, 0, 0.1875);
|
||||
--pico-text-selection-color: rgba(0, 180, 120, 0.1875);
|
||||
--pico-muted-color: #7b8495;
|
||||
--pico-muted-border-color: #202632;
|
||||
--pico-primary: #82ab00;
|
||||
--pico-primary-background: #a5d601;
|
||||
--pico-primary: #00b478;
|
||||
--pico-primary-background: #007a50;
|
||||
--pico-primary-border: var(--pico-primary-background);
|
||||
--pico-primary-underline: rgba(130, 171, 0, 0.5);
|
||||
--pico-primary-hover: #99c801;
|
||||
--pico-primary-hover-background: #b2e51a;
|
||||
--pico-primary-underline: rgba(0, 180, 120, 0.5);
|
||||
--pico-primary-hover: #00cc88;
|
||||
--pico-primary-hover-background: #00895a;
|
||||
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
||||
--pico-primary-hover-underline: var(--pico-primary-hover);
|
||||
--pico-primary-focus: rgba(130, 171, 0, 0.375);
|
||||
--pico-primary-inverse: #000;
|
||||
--pico-primary-focus: rgba(0, 180, 120, 0.375);
|
||||
--pico-primary-inverse: #fff;
|
||||
--pico-secondary: #969eaf;
|
||||
--pico-secondary-background: #525f7a;
|
||||
--pico-secondary-border: var(--pico-secondary-background);
|
||||
|
|
@ -545,7 +545,7 @@ input:not([type=submit],
|
|||
--pico-switch-background-color: #333c4e;
|
||||
--pico-switch-checked-background-color: var(--pico-primary-background);
|
||||
--pico-switch-color: #fff;
|
||||
--pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
|
||||
--pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--pico-range-border-color: #202632;
|
||||
--pico-range-active-border-color: #2a3140;
|
||||
--pico-range-thumb-border-color: var(--pico-background-color);
|
||||
|
|
@ -581,10 +581,10 @@ input:not([type=submit],
|
|||
--pico-form-element-focus-color: var(--pico-primary-focus);
|
||||
}
|
||||
[data-theme=dark] details summary[role=button]::after {
|
||||
filter: brightness(100) invert(1);
|
||||
filter: brightness(100) invert(0);
|
||||
}
|
||||
[data-theme=dark] [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button])::before {
|
||||
filter: brightness(100) invert(0);
|
||||
filter: brightness(100) invert(1);
|
||||
}
|
||||
|
||||
progress,
|
||||
|
|
@ -1122,7 +1122,8 @@ input,
|
|||
optgroup,
|
||||
select,
|
||||
textarea,
|
||||
[role=group] > label {
|
||||
[role=group] > label,
|
||||
[role=group] > legend {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
line-height: var(--pico-line-height);
|
||||
|
|
@ -1196,8 +1197,7 @@ textarea {
|
|||
border-width: 0;
|
||||
}
|
||||
|
||||
input:not([type=checkbox], [type=radio], [type=range], [type=date]),
|
||||
[role=group] > label {
|
||||
input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
|
||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||
}
|
||||
|
||||
|
|
@ -1231,7 +1231,8 @@ textarea {
|
|||
input:not([type=checkbox], [type=radio], [type=range], [type=file]),
|
||||
select,
|
||||
textarea,
|
||||
[role=group] > label {
|
||||
[role=group] > label,
|
||||
[role=group] > legend {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
|
@ -1241,7 +1242,8 @@ textarea,
|
|||
input,
|
||||
select,
|
||||
textarea,
|
||||
[role=group] > label {
|
||||
[role=group] > label,
|
||||
[role=group] > legend {
|
||||
--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);
|
||||
|
|
@ -1283,6 +1285,7 @@ input:not([type=submit],
|
|||
|
||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||
[role=group] > label,
|
||||
[role=group] > legend,
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
label[aria-disabled=true],
|
||||
|
|
@ -1292,7 +1295,8 @@ label[aria-disabled=true],
|
|||
}
|
||||
|
||||
label[aria-disabled=true] input[disabled],
|
||||
[role=group] > label {
|
||||
[role=group] > label,
|
||||
[role=group] > legend {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -1360,7 +1364,8 @@ input::-webkit-input-placeholder,
|
|||
textarea::placeholder,
|
||||
textarea::-webkit-input-placeholder,
|
||||
select:invalid,
|
||||
[role=group] > label {
|
||||
[role=group] > label,
|
||||
[role=group] > legend {
|
||||
color: var(--pico-form-element-placeholder-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -1368,7 +1373,8 @@ select:invalid,
|
|||
input:not([type=checkbox], [type=radio]),
|
||||
select,
|
||||
textarea,
|
||||
[role=group] > label {
|
||||
[role=group] > label,
|
||||
[role=group] > legend {
|
||||
margin-bottom: var(--pico-spacing);
|
||||
}
|
||||
|
||||
|
|
@ -2404,6 +2410,10 @@ article > form > footer ol:has(+ [type=hidden]),
|
|||
/**
|
||||
* Group ([role="group"], [role="search"])
|
||||
*/
|
||||
fieldset[role=group] > legend {
|
||||
float: left;
|
||||
}
|
||||
|
||||
[role=search],
|
||||
[role=group] {
|
||||
display: inline-flex;
|
||||
|
|
@ -2416,18 +2426,25 @@ article > form > footer ol:has(+ [type=hidden]),
|
|||
transition: box-shadow var(--pico-transition);
|
||||
}
|
||||
[role=search] > label,
|
||||
[role=group] > label {
|
||||
[role=search] > legend,
|
||||
[role=group] > label,
|
||||
[role=group] > legend {
|
||||
border-color: var(--pico-secondary-background);
|
||||
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=search] > label,
|
||||
[role=search] > legend,
|
||||
[role=search] > details,
|
||||
[role=group] > *,
|
||||
[role=group] input:not([type=checkbox], [type=radio]),
|
||||
[role=group] select,
|
||||
[role=group] label {
|
||||
[role=group] > label,
|
||||
[role=group] > legend,
|
||||
[role=group] > details {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -2435,11 +2452,15 @@ article > form > footer ol:has(+ [type=hidden]),
|
|||
[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=search] > label:not(:first-child),
|
||||
[role=search] > legend:not(:first-child),
|
||||
[role=search] > details: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] label:not(:first-child) {
|
||||
[role=group] > label:not(:first-child),
|
||||
[role=group] > legend:not(:first-child),
|
||||
[role=group] > details:not(:first-child) {
|
||||
margin-left: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
|
@ -2447,24 +2468,49 @@ article > form > footer ol:has(+ [type=hidden]),
|
|||
[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=search] > label:not(:last-child),
|
||||
[role=search] > legend:not(:last-child),
|
||||
[role=search] > details: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] label:not(:last-child) {
|
||||
[role=group] > label:not(:last-child),
|
||||
[role=group] > legend:not(:last-child),
|
||||
[role=group] > details: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=search] > label:focus,
|
||||
[role=search] > legend:focus,
|
||||
[role=search] > details:focus,
|
||||
[role=group] > *:focus,
|
||||
[role=group] input:not([type=checkbox], [type=radio]):focus,
|
||||
[role=group] select:focus,
|
||||
[role=group] label:focus {
|
||||
[role=group] > label:focus,
|
||||
[role=group] > legend:focus,
|
||||
[role=group] > details:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
[role=search] > details:not(:first-child) > summary,
|
||||
[role=group] > details:not(:first-child) > summary {
|
||||
margin-left: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
[role=search] > details:not(:last-child) > summary,
|
||||
[role=group] > details:not(:last-child) > summary {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
[role=search] > details > summary,
|
||||
[role=search] > details > summary:not([role]),
|
||||
[role=group] > details > summary,
|
||||
[role=group] > details > summary:not([role]) {
|
||||
height: 100% !important;
|
||||
}
|
||||
[role=search] button:not(:first-child),
|
||||
[role=search] [type=submit]:not(:first-child),
|
||||
[role=search] [type=reset]:not(:first-child),
|
||||
|
|
@ -2472,7 +2518,9 @@ article > form > footer ol:has(+ [type=hidden]),
|
|||
[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=search] > label:not(:first-child),
|
||||
[role=search] > legend:not(:first-child),
|
||||
[role=search] > details > summary:not(:first-child),
|
||||
[role=group] button:not(:first-child),
|
||||
[role=group] [type=submit]:not(:first-child),
|
||||
[role=group] [type=reset]:not(:first-child),
|
||||
|
|
@ -2480,7 +2528,9 @@ article > form > footer ol:has(+ [type=hidden]),
|
|||
[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] label:not(:first-child) {
|
||||
[role=group] > label:not(:first-child),
|
||||
[role=group] > legend:not(:first-child),
|
||||
[role=group] > details > summary:not(:first-child) {
|
||||
margin-left: calc(var(--pico-border-width) * -1);
|
||||
}
|
||||
[role=search] button,
|
||||
|
|
@ -2488,13 +2538,17 @@ article > form > footer ol:has(+ [type=hidden]),
|
|||
[role=search] [type=reset],
|
||||
[role=search] [type=button],
|
||||
[role=search] [role=button],
|
||||
[role=search] label,
|
||||
[role=search] > label,
|
||||
[role=search] > legend,
|
||||
[role=search] > details > summary,
|
||||
[role=group] button,
|
||||
[role=group] [type=submit],
|
||||
[role=group] [type=reset],
|
||||
[role=group] [type=button],
|
||||
[role=group] [role=button],
|
||||
[role=group] label {
|
||||
[role=group] > label,
|
||||
[role=group] > legend,
|
||||
[role=group] > details > summary {
|
||||
width: auto;
|
||||
}
|
||||
@supports selector(:has(*)) {
|
||||
|
|
@ -2504,10 +2558,14 @@ article > form > footer ol:has(+ [type=hidden]),
|
|||
}
|
||||
[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=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
|
||||
[role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
|
||||
[role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
|
||||
[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) label {
|
||||
[role=group]: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) > legend,
|
||||
[role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
|
||||
border-color: transparent;
|
||||
}
|
||||
[role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
|
||||
|
|
@ -2519,11 +2577,15 @@ article > form > footer ol:has(+ [type=hidden]),
|
|||
[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=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
|
||||
[role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
|
||||
[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) label {
|
||||
[role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
|
||||
[role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
|
||||
[role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary {
|
||||
--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);
|
||||
}
|
||||
|
|
@ -2533,12 +2595,16 @@ article > form > footer ol:has(+ [type=hidden]),
|
|||
[role=search] [type=button]:focus,
|
||||
[role=search] [role=button]:focus,
|
||||
[role=search] label:focus,
|
||||
[role=search] > legend:focus,
|
||||
[role=search] > details > summary: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] label:focus {
|
||||
[role=group] label:focus,
|
||||
[role=group] > legend:focus,
|
||||
[role=group] > details > summary:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -2556,10 +2622,14 @@ article > form > footer ol:has(+ [type=hidden]),
|
|||
[dir=rtl] [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
|
||||
[dir=rtl] [role=search] select:not(:first-child),
|
||||
[dir=rtl] [role=search] label:not(:first-child),
|
||||
[dir=rtl] [role=search] > legend:not(:first-child),
|
||||
[dir=rtl] [role=search] > details > summary:not(:first-child),
|
||||
[dir=rtl] [role=group] > *:not(:first-child),
|
||||
[dir=rtl] [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
|
||||
[dir=rtl] [role=group] select:not(:first-child),
|
||||
[dir=rtl] [role=group] label:not(:first-child) {
|
||||
[dir=rtl] [role=group] label:not(:first-child),
|
||||
[dir=rtl] [role=group] > legend:not(:first-child),
|
||||
[dir=rtl] [role=group] > details > summary:not(:first-child) {
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
border-top-right-radius: 0;
|
||||
|
|
@ -2571,10 +2641,14 @@ article > form > footer ol:has(+ [type=hidden]),
|
|||
[dir=rtl] [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
|
||||
[dir=rtl] [role=search] select:not(:last-child),
|
||||
[dir=rtl] [role=search] label:not(:last-child),
|
||||
[dir=rtl] [role=search] > legend:not(:last-child),
|
||||
[dir=rtl] [role=search] > details > summary:not(:last-child),
|
||||
[dir=rtl] [role=group] > *:not(:last-child),
|
||||
[dir=rtl] [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
|
||||
[dir=rtl] [role=group] select:not(:last-child),
|
||||
[dir=rtl] [role=group] label:not(:last-child) {
|
||||
[dir=rtl] [role=group] label:not(:last-child),
|
||||
[dir=rtl] [role=group] > legend:not(:last-child),
|
||||
[dir=rtl] [role=group] > details > summary:not(:last-child) {
|
||||
border-top-right-radius: var(--pico-border-radius);
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-right-radius: var(--pico-border-radius);
|
||||
|
|
@ -2587,7 +2661,9 @@ article > form > footer ol:has(+ [type=hidden]),
|
|||
[dir=rtl] [role=button]:not(:first-child),
|
||||
[dir=rtl] input:not([type=checkbox], [type=radio]):not(:first-child),
|
||||
[dir=rtl] select:not(:first-child),
|
||||
[dir=rtl] label:not(:first-child) {
|
||||
[dir=rtl] label:not(:first-child),
|
||||
[dir=rtl] > legend:not(:first-child),
|
||||
[dir=rtl] > details > summary:not(:first-child) {
|
||||
margin-right: calc(var(--pico-border-width) * -1);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue