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 2024-12-31 00:16:26 -05:00
parent 324f6fcef4
commit ddf41a191a
265 changed files with 13809 additions and 4063 deletions

View file

@ -5,7 +5,7 @@ root = true
# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
end_of_line = crlf
insert_final_newline = true
charset = utf-8
trim_trailing_whitespace = true

2
.gitignore vendored
View file

@ -35,3 +35,5 @@ package-lock.json
/scss/components/_offcanvas.scss
docs/js/DialogManager.js
docs/modal.html
/.yohn

View file

@ -8,7 +8,7 @@
</a>
</p>
[![Github release](https://img.shields.io/github/v/release/Yohn/PicoCSS?color=0172ad&logo=github&logoColor=white)](https://github.com/Yohn/PicoCSS/releases/latest)
[![Github release](https://img.shields.io/github/v/release/Yohn/PicoCSS?color=0172.ad&logo=github&logoColor=white)](https://github.com/Yohn/PicoCSS/releases/latest)
[![npm version](https://img.shields.io/npm/v/@yohns/picocss?color=0172ad)](https://www.npmjs.com/package/@yohns/picocss)
[![License](https://img.shields.io/badge/license-MIT-%230172ad)](https://github.com/Yohn/PicoCSS/blob/master/LICENSE.md)
<!-- [![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/picocss.svg?style=social&label=Follow%20%40picocss)](https://twitter.com/picocss) -->
@ -77,7 +77,7 @@ There are 4 ways to get started with pico.css:
Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@yohns/picocss) to link pico.css.
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.1/css/pico.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.2/css/pico.min.css" />
```
### Install with NPM
@ -135,7 +135,7 @@ Use the default `.classless` version if you need centered viewports:
```html
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.1/css/pico.classless.min.css"
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.2/css/pico.classless.min.css"
/>
```
@ -144,7 +144,7 @@ Or use the `.fluid.classless` version if you need a fluid container:
```html
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.1/css/pico.fluid.classless.min.css"
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.2/css/pico.fluid.classless.min.css"
/>
```
@ -159,7 +159,7 @@ Then just write pure HTML, and it should look great:
<meta name="color-scheme" content="light dark" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.1/css/pico.classless.min.css"
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.2/css/pico.classless.min.css"
/>
<title>Hello, world!</title>
</head>

View file

@ -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
*/
/**
@ -1857,7 +1857,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);
@ -1931,8 +1932,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);
}
@ -1966,7 +1966,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;
@ -1976,7 +1977,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);
@ -2018,6 +2020,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],
@ -2027,7 +2030,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -2095,7 +2099,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;
}
@ -2103,7 +2108,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);
}
@ -3299,6 +3305,10 @@ label > details.dropdown {
/**
* Group ([role="group"], [role="search"])
*/
fieldset[role=group] > legend {
float: left;
}
[role=search],
[role=group] {
display: inline-flex;
@ -3311,18 +3321,25 @@ label > details.dropdown {
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;
@ -3330,11 +3347,15 @@ label > details.dropdown {
[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;
@ -3342,24 +3363,49 @@ label > details.dropdown {
[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),
@ -3367,7 +3413,9 @@ label > details.dropdown {
[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),
@ -3375,7 +3423,9 @@ label > details.dropdown {
[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,
@ -3383,13 +3433,17 @@ label > details.dropdown {
[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(*)) {
@ -3399,10 +3453,14 @@ label > details.dropdown {
}
[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),
@ -3414,11 +3472,15 @@ label > details.dropdown {
[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);
}
@ -3428,12 +3490,16 @@ label > details.dropdown {
[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;
}
}
@ -3451,10 +3517,14 @@ label > details.dropdown {
[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;
@ -3466,10 +3536,14 @@ label > details.dropdown {
[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);
@ -3482,7 +3556,9 @@ label > details.dropdown {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1857,7 +1857,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);
@ -1931,8 +1932,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);
}
@ -1966,7 +1966,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;
@ -1976,7 +1977,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);
@ -2018,6 +2020,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],
@ -2027,7 +2030,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -2095,7 +2099,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;
}
@ -2103,7 +2108,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);
}
@ -3299,6 +3305,10 @@ label > details.dropdown {
/**
* Group ([role="group"], [role="search"])
*/
fieldset[role=group] > legend {
float: left;
}
[role=search],
[role=group] {
display: inline-flex;
@ -3311,18 +3321,25 @@ label > details.dropdown {
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;
@ -3330,11 +3347,15 @@ label > details.dropdown {
[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;
@ -3342,24 +3363,49 @@ label > details.dropdown {
[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),
@ -3367,7 +3413,9 @@ label > details.dropdown {
[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),
@ -3375,7 +3423,9 @@ label > details.dropdown {
[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,
@ -3383,13 +3433,17 @@ label > details.dropdown {
[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(*)) {
@ -3399,10 +3453,14 @@ label > details.dropdown {
}
[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),
@ -3414,11 +3472,15 @@ label > details.dropdown {
[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);
}
@ -3428,12 +3490,16 @@ label > details.dropdown {
[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;
}
}
@ -3451,10 +3517,14 @@ label > details.dropdown {
[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;
@ -3466,10 +3536,14 @@ label > details.dropdown {
[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);
@ -3482,7 +3556,9 @@ label > details.dropdown {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1857,7 +1857,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);
@ -1931,8 +1932,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);
}
@ -1966,7 +1966,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;
@ -1976,7 +1977,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);
@ -2018,6 +2020,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],
@ -2027,7 +2030,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -2095,7 +2099,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;
}
@ -2103,7 +2108,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);
}
@ -3299,6 +3305,10 @@ label > details.dropdown {
/**
* Group ([role="group"], [role="search"])
*/
fieldset[role=group] > legend {
float: left;
}
[role=search],
[role=group] {
display: inline-flex;
@ -3311,18 +3321,25 @@ label > details.dropdown {
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;
@ -3330,11 +3347,15 @@ label > details.dropdown {
[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;
@ -3342,24 +3363,49 @@ label > details.dropdown {
[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),
@ -3367,7 +3413,9 @@ label > details.dropdown {
[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),
@ -3375,7 +3423,9 @@ label > details.dropdown {
[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,
@ -3383,13 +3433,17 @@ label > details.dropdown {
[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(*)) {
@ -3399,10 +3453,14 @@ label > details.dropdown {
}
[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),
@ -3414,11 +3472,15 @@ label > details.dropdown {
[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);
}
@ -3428,12 +3490,16 @@ label > details.dropdown {
[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;
}
}
@ -3451,10 +3517,14 @@ label > details.dropdown {
[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;
@ -3466,10 +3536,14 @@ label > details.dropdown {
[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);
@ -3482,7 +3556,9 @@ label > details.dropdown {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,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);
@ -1233,8 +1234,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);
}
@ -1268,7 +1268,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;
@ -1278,7 +1279,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);
@ -1320,6 +1322,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],
@ -1329,7 +1332,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,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;
}
@ -1405,7 +1410,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);
}
@ -2441,6 +2447,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;
@ -2453,18 +2463,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;
@ -2472,11 +2489,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;
@ -2484,24 +2505,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),
@ -2509,7 +2555,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),
@ -2517,7 +2565,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,
@ -2525,13 +2575,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(*)) {
@ -2541,10 +2595,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),
@ -2556,11 +2614,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);
}
@ -2570,12 +2632,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;
}
}
@ -2593,10 +2659,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;
@ -2608,10 +2678,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);
@ -2624,7 +2698,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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,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);
@ -1233,8 +1234,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);
}
@ -1268,7 +1268,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;
@ -1278,7 +1279,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);
@ -1320,6 +1322,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],
@ -1329,7 +1332,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,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;
}
@ -1405,7 +1410,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);
}
@ -2441,6 +2447,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;
@ -2453,18 +2463,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;
@ -2472,11 +2489,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;
@ -2484,24 +2505,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),
@ -2509,7 +2555,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),
@ -2517,7 +2565,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,
@ -2525,13 +2575,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(*)) {
@ -2541,10 +2595,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),
@ -2556,11 +2614,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);
}
@ -2570,12 +2632,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;
}
}
@ -2593,10 +2659,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;
@ -2608,10 +2678,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);
@ -2624,7 +2698,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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,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);
@ -1233,8 +1234,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);
}
@ -1268,7 +1268,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;
@ -1278,7 +1279,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);
@ -1320,6 +1322,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],
@ -1329,7 +1332,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,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;
}
@ -1405,7 +1410,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);
}
@ -2441,6 +2447,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;
@ -2453,18 +2463,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;
@ -2472,11 +2489,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;
@ -2484,24 +2505,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),
@ -2509,7 +2555,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),
@ -2517,7 +2565,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,
@ -2525,13 +2575,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(*)) {
@ -2541,10 +2595,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),
@ -2556,11 +2614,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);
}
@ -2570,12 +2632,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;
}
}
@ -2593,10 +2659,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;
@ -2608,10 +2678,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);
@ -2624,7 +2698,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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1233,8 +1234,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1268,7 +1268,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1278,7 +1279,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -1320,6 +1322,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -1329,7 +1332,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -1405,7 +1410,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -2441,6 +2447,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -2453,18 +2463,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -2472,11 +2489,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -2484,24 +2505,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -2509,7 +2555,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -2517,7 +2565,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -2525,13 +2575,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -2541,10 +2595,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -2556,11 +2614,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -2570,12 +2632,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -2593,10 +2659,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -2608,10 +2678,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -2624,7 +2698,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1233,8 +1234,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1268,7 +1268,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1278,7 +1279,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -1320,6 +1322,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -1329,7 +1332,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -1405,7 +1410,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -2441,6 +2447,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -2453,18 +2463,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -2472,11 +2489,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -2484,24 +2505,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -2509,7 +2555,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -2517,7 +2565,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -2525,13 +2575,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -2541,10 +2595,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -2556,11 +2614,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -2570,12 +2632,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -2593,10 +2659,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -2608,10 +2678,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -2624,7 +2698,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1233,8 +1234,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1268,7 +1268,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1278,7 +1279,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -1320,6 +1322,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -1329,7 +1332,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -1405,7 +1410,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -2441,6 +2447,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -2453,18 +2463,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -2472,11 +2489,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -2484,24 +2505,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -2509,7 +2555,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -2517,7 +2565,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -2525,13 +2575,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -2541,10 +2595,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -2556,11 +2614,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -2570,12 +2632,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -2593,10 +2659,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -2608,10 +2678,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -2624,7 +2698,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1233,8 +1234,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1268,7 +1268,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1278,7 +1279,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -1320,6 +1322,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -1329,7 +1332,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -1405,7 +1410,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -2441,6 +2447,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -2453,18 +2463,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -2472,11 +2489,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -2484,24 +2505,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -2509,7 +2555,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -2517,7 +2565,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -2525,13 +2575,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -2541,10 +2595,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -2556,11 +2614,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -2570,12 +2632,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -2593,10 +2659,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -2608,10 +2678,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -2624,7 +2698,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1233,8 +1234,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1268,7 +1268,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1278,7 +1279,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -1320,6 +1322,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -1329,7 +1332,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -1405,7 +1410,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -2441,6 +2447,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -2453,18 +2463,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -2472,11 +2489,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -2484,24 +2505,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -2509,7 +2555,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -2517,7 +2565,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -2525,13 +2575,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -2541,10 +2595,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -2556,11 +2614,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -2570,12 +2632,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -2593,10 +2659,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -2608,10 +2678,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -2624,7 +2698,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1233,8 +1234,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1268,7 +1268,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1278,7 +1279,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -1320,6 +1322,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -1329,7 +1332,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -1405,7 +1410,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -2441,6 +2447,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -2453,18 +2463,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -2472,11 +2489,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -2484,24 +2505,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -2509,7 +2555,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -2517,7 +2565,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -2525,13 +2575,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -2541,10 +2595,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -2556,11 +2614,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -2570,12 +2632,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -2593,10 +2659,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -2608,10 +2678,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -2624,7 +2698,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1233,8 +1234,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1268,7 +1268,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1278,7 +1279,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -1320,6 +1322,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -1329,7 +1332,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -1405,7 +1410,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -2441,6 +2447,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -2453,18 +2463,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -2472,11 +2489,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -2484,24 +2505,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -2509,7 +2555,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -2517,7 +2565,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -2525,13 +2575,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -2541,10 +2595,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -2556,11 +2614,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -2570,12 +2632,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -2593,10 +2659,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -2608,10 +2678,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -2624,7 +2698,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1233,8 +1234,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1268,7 +1268,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1278,7 +1279,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -1320,6 +1322,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -1329,7 +1332,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -1405,7 +1410,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -2441,6 +2447,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -2453,18 +2463,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -2472,11 +2489,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -2484,24 +2505,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -2509,7 +2555,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -2517,7 +2565,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -2525,13 +2575,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -2541,10 +2595,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -2556,11 +2614,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -2570,12 +2632,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -2593,10 +2659,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -2608,10 +2678,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -2624,7 +2698,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1233,8 +1234,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1268,7 +1268,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1278,7 +1279,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -1320,6 +1322,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -1329,7 +1332,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -1405,7 +1410,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -2441,6 +2447,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -2453,18 +2463,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -2472,11 +2489,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -2484,24 +2505,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -2509,7 +2555,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -2517,7 +2565,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -2525,13 +2575,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -2541,10 +2595,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -2556,11 +2614,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -2570,12 +2632,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -2593,10 +2659,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -2608,10 +2678,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -2624,7 +2698,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1233,8 +1234,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1268,7 +1268,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1278,7 +1279,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -1320,6 +1322,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -1329,7 +1332,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -1405,7 +1410,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -2441,6 +2447,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -2453,18 +2463,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -2472,11 +2489,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -2484,24 +2505,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -2509,7 +2555,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -2517,7 +2565,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -2525,13 +2575,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -2541,10 +2595,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -2556,11 +2614,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -2570,12 +2632,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -2593,10 +2659,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -2608,10 +2678,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -2624,7 +2698,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1233,8 +1234,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1268,7 +1268,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1278,7 +1279,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -1320,6 +1322,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -1329,7 +1332,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -1405,7 +1410,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -2441,6 +2447,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -2453,18 +2463,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -2472,11 +2489,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -2484,24 +2505,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -2509,7 +2555,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -2517,7 +2565,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -2525,13 +2575,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -2541,10 +2595,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -2556,11 +2614,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -2570,12 +2632,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -2593,10 +2659,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -2608,10 +2678,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -2624,7 +2698,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1233,8 +1234,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1268,7 +1268,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1278,7 +1279,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -1320,6 +1322,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -1329,7 +1332,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -1405,7 +1410,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -2441,6 +2447,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -2453,18 +2463,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -2472,11 +2489,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -2484,24 +2505,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -2509,7 +2555,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -2517,7 +2565,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -2525,13 +2575,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -2541,10 +2595,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -2556,11 +2614,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -2570,12 +2632,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -2593,10 +2659,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -2608,10 +2678,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -2624,7 +2698,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1233,8 +1234,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1268,7 +1268,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1278,7 +1279,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -1320,6 +1322,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -1329,7 +1332,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -1405,7 +1410,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -2441,6 +2447,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -2453,18 +2463,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -2472,11 +2489,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -2484,24 +2505,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -2509,7 +2555,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -2517,7 +2565,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -2525,13 +2575,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -2541,10 +2595,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -2556,11 +2614,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -2570,12 +2632,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -2593,10 +2659,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -2608,10 +2678,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -2624,7 +2698,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1233,8 +1234,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1268,7 +1268,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1278,7 +1279,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -1320,6 +1322,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -1329,7 +1332,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -1405,7 +1410,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -2441,6 +2447,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -2453,18 +2463,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -2472,11 +2489,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -2484,24 +2505,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -2509,7 +2555,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -2517,7 +2565,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -2525,13 +2575,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -2541,10 +2595,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -2556,11 +2614,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -2570,12 +2632,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -2593,10 +2659,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -2608,10 +2678,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -2624,7 +2698,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1233,8 +1234,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1268,7 +1268,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1278,7 +1279,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -1320,6 +1322,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -1329,7 +1332,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -1405,7 +1410,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -2441,6 +2447,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -2453,18 +2463,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -2472,11 +2489,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -2484,24 +2505,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -2509,7 +2555,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -2517,7 +2565,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -2525,13 +2575,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -2541,10 +2595,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -2556,11 +2614,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -2570,12 +2632,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -2593,10 +2659,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -2608,10 +2678,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -2624,7 +2698,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1233,8 +1234,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1268,7 +1268,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1278,7 +1279,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -1320,6 +1322,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -1329,7 +1332,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -1405,7 +1410,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -2441,6 +2447,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -2453,18 +2463,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -2472,11 +2489,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -2484,24 +2505,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -2509,7 +2555,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -2517,7 +2565,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -2525,13 +2575,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -2541,10 +2595,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -2556,11 +2614,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -2570,12 +2632,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -2593,10 +2659,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -2608,10 +2678,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -2624,7 +2698,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1233,8 +1234,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1268,7 +1268,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1278,7 +1279,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -1320,6 +1322,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -1329,7 +1332,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -1405,7 +1410,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -2441,6 +2447,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -2453,18 +2463,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -2472,11 +2489,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -2484,24 +2505,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -2509,7 +2555,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -2517,7 +2565,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -2525,13 +2575,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -2541,10 +2595,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -2556,11 +2614,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -2570,12 +2632,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -2593,10 +2659,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -2608,10 +2678,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -2624,7 +2698,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1233,8 +1234,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1268,7 +1268,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1278,7 +1279,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -1320,6 +1322,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -1329,7 +1332,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -1405,7 +1410,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -2441,6 +2447,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -2453,18 +2463,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -2472,11 +2489,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -2484,24 +2505,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -2509,7 +2555,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -2517,7 +2565,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -2525,13 +2575,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -2541,10 +2595,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -2556,11 +2614,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -2570,12 +2632,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -2593,10 +2659,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -2608,10 +2678,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -2624,7 +2698,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1233,8 +1234,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1268,7 +1268,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1278,7 +1279,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -1320,6 +1322,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -1329,7 +1332,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -1405,7 +1410,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -2441,6 +2447,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -2453,18 +2463,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -2472,11 +2489,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -2484,24 +2505,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -2509,7 +2555,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -2517,7 +2565,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -2525,13 +2575,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -2541,10 +2595,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -2556,11 +2614,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -2570,12 +2632,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -2593,10 +2659,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -2608,10 +2678,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -2624,7 +2698,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1233,8 +1234,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1268,7 +1268,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1278,7 +1279,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -1320,6 +1322,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -1329,7 +1332,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -1405,7 +1410,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -2441,6 +2447,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -2453,18 +2463,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -2472,11 +2489,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -2484,24 +2505,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -2509,7 +2555,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -2517,7 +2565,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -2525,13 +2575,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -2541,10 +2595,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -2556,11 +2614,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -2570,12 +2632,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -2593,10 +2659,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -2608,10 +2678,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -2624,7 +2698,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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,18 +199,18 @@ input:not([type=submit],
color-scheme: light;
--pico-background-color: #fff;
--pico-color: #373c44;
--pico-text-selection-color: rgba(240, 96, 72, 0.25);
--pico-text-selection-color: rgba(71, 164, 23, 0.25);
--pico-muted-color: #646b79;
--pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #c52f21;
--pico-primary-background: #c52f21;
--pico-primary: #33790f;
--pico-primary-background: #398712;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(197, 47, 33, 0.5);
--pico-primary-hover: #9b2318;
--pico-primary-hover-background: #af291d;
--pico-primary-underline: rgba(51, 121, 15, 0.5);
--pico-primary-hover: #265e09;
--pico-primary-hover-background: #33790f;
--pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(240, 96, 72, 0.5);
--pico-primary-focus: rgba(71, 164, 23, 0.5);
--pico-primary-inverse: #fff;
--pico-secondary: #5d6b89;
--pico-secondary-background: #525f7a;
@ -339,18 +339,18 @@ input:not([type=submit],
color-scheme: dark;
--pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0;
--pico-text-selection-color: rgba(241, 121, 97, 0.1875);
--pico-text-selection-color: rgba(78, 179, 27, 0.1875);
--pico-muted-color: #7b8495;
--pico-muted-border-color: #202632;
--pico-primary: #f17961;
--pico-primary-background: #c52f21;
--pico-primary: #4eb31b;
--pico-primary-background: #398712;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(241, 121, 97, 0.5);
--pico-primary-hover: #f5a390;
--pico-primary-hover-background: #d93526;
--pico-primary-underline: rgba(78, 179, 27, 0.5);
--pico-primary-hover: #5dd121;
--pico-primary-hover-background: #409614;
--pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(241, 121, 97, 0.375);
--pico-primary-focus: rgba(78, 179, 27, 0.375);
--pico-primary-inverse: #fff;
--pico-secondary: #969eaf;
--pico-secondary-background: #525f7a;
@ -469,18 +469,18 @@ input:not([type=submit],
color-scheme: dark;
--pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0;
--pico-text-selection-color: rgba(241, 121, 97, 0.1875);
--pico-text-selection-color: rgba(78, 179, 27, 0.1875);
--pico-muted-color: #7b8495;
--pico-muted-border-color: #202632;
--pico-primary: #f17961;
--pico-primary-background: #c52f21;
--pico-primary: #4eb31b;
--pico-primary-background: #398712;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(241, 121, 97, 0.5);
--pico-primary-hover: #f5a390;
--pico-primary-hover-background: #d93526;
--pico-primary-underline: rgba(78, 179, 27, 0.5);
--pico-primary-hover: #5dd121;
--pico-primary-hover-background: #409614;
--pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(241, 121, 97, 0.375);
--pico-primary-focus: rgba(78, 179, 27, 0.375);
--pico-primary-inverse: #fff;
--pico-secondary: #969eaf;
--pico-secondary-background: #525f7a;
@ -1159,7 +1159,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);
@ -1233,8 +1234,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);
}
@ -1268,7 +1268,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;
@ -1278,7 +1279,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);
@ -1320,6 +1322,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],
@ -1329,7 +1332,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,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;
}
@ -1405,7 +1410,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);
}
@ -2441,6 +2447,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;
@ -2453,18 +2463,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;
@ -2472,11 +2489,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;
@ -2484,24 +2505,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),
@ -2509,7 +2555,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),
@ -2517,7 +2565,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,
@ -2525,13 +2575,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(*)) {
@ -2541,10 +2595,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),
@ -2556,11 +2614,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);
}
@ -2570,12 +2632,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;
}
}
@ -2593,10 +2659,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;
@ -2608,10 +2678,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);
@ -2624,7 +2698,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;
}

View file

@ -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
*/
/**
@ -1159,7 +1159,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);
@ -1233,8 +1234,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);
}
@ -1268,7 +1268,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;
@ -1278,7 +1279,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);
@ -1320,6 +1322,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],
@ -1329,7 +1332,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,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;
}
@ -1405,7 +1410,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);
}
@ -2441,6 +2447,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;
@ -2453,18 +2463,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;
@ -2472,11 +2489,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;
@ -2484,24 +2505,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),
@ -2509,7 +2555,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),
@ -2517,7 +2565,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,
@ -2525,13 +2575,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(*)) {
@ -2541,10 +2595,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),
@ -2556,11 +2614,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);
}
@ -2570,12 +2632,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;
}
}
@ -2593,10 +2659,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;
@ -2608,10 +2678,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);
@ -2624,7 +2698,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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,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);
@ -1233,8 +1234,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);
}
@ -1268,7 +1268,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;
@ -1278,7 +1279,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);
@ -1320,6 +1322,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],
@ -1329,7 +1332,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,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;
}
@ -1405,7 +1410,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);
}
@ -2441,6 +2447,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;
@ -2453,18 +2463,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;
@ -2472,11 +2489,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;
@ -2484,24 +2505,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),
@ -2509,7 +2555,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),
@ -2517,7 +2565,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,
@ -2525,13 +2575,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(*)) {
@ -2541,10 +2595,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),
@ -2556,11 +2614,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);
}
@ -2570,12 +2632,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;
}
}
@ -2593,10 +2659,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;
@ -2608,10 +2678,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);
@ -2624,7 +2698,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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,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);
@ -1233,8 +1234,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);
}
@ -1268,7 +1268,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;
@ -1278,7 +1279,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);
@ -1320,6 +1322,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],
@ -1329,7 +1332,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,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;
}
@ -1405,7 +1410,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);
}
@ -2441,6 +2447,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;
@ -2453,18 +2463,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;
@ -2472,11 +2489,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;
@ -2484,24 +2505,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),
@ -2509,7 +2555,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),
@ -2517,7 +2565,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,
@ -2525,13 +2575,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(*)) {
@ -2541,10 +2595,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),
@ -2556,11 +2614,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);
}
@ -2570,12 +2632,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;
}
}
@ -2593,10 +2659,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;
@ -2608,10 +2678,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);
@ -2624,7 +2698,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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,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);
@ -1233,8 +1234,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);
}
@ -1268,7 +1268,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;
@ -1278,7 +1279,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);
@ -1320,6 +1322,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],
@ -1329,7 +1332,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,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;
}
@ -1405,7 +1410,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);
}
@ -2441,6 +2447,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;
@ -2453,18 +2463,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;
@ -2472,11 +2489,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;
@ -2484,24 +2505,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),
@ -2509,7 +2555,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),
@ -2517,7 +2565,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,
@ -2525,13 +2575,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(*)) {
@ -2541,10 +2595,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),
@ -2556,11 +2614,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);
}
@ -2570,12 +2632,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;
}
}
@ -2593,10 +2659,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;
@ -2608,10 +2678,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);
@ -2624,7 +2698,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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,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);
@ -1233,8 +1234,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);
}
@ -1268,7 +1268,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;
@ -1278,7 +1279,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);
@ -1320,6 +1322,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],
@ -1329,7 +1332,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,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;
}
@ -1405,7 +1410,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);
}
@ -2441,6 +2447,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;
@ -2453,18 +2463,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;
@ -2472,11 +2489,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;
@ -2484,24 +2505,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),
@ -2509,7 +2555,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),
@ -2517,7 +2565,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,
@ -2525,13 +2575,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(*)) {
@ -2541,10 +2595,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),
@ -2556,11 +2614,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);
}
@ -2570,12 +2632,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;
}
}
@ -2593,10 +2659,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;
@ -2608,10 +2678,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);
@ -2624,7 +2698,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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,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);
@ -1233,8 +1234,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);
}
@ -1268,7 +1268,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;
@ -1278,7 +1279,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);
@ -1320,6 +1322,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],
@ -1329,7 +1332,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,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;
}
@ -1405,7 +1410,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);
}
@ -2441,6 +2447,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;
@ -2453,18 +2463,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;
@ -2472,11 +2489,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;
@ -2484,24 +2505,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),
@ -2509,7 +2555,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),
@ -2517,7 +2565,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,
@ -2525,13 +2575,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(*)) {
@ -2541,10 +2595,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),
@ -2556,11 +2614,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);
}
@ -2570,12 +2632,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;
}
}
@ -2593,10 +2659,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;
@ -2608,10 +2678,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);
@ -2624,7 +2698,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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,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);
@ -1233,8 +1234,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);
}
@ -1268,7 +1268,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;
@ -1278,7 +1279,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);
@ -1320,6 +1322,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],
@ -1329,7 +1332,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,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;
}
@ -1405,7 +1410,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);
}
@ -2441,6 +2447,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;
@ -2453,18 +2463,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;
@ -2472,11 +2489,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;
@ -2484,24 +2505,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),
@ -2509,7 +2555,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),
@ -2517,7 +2565,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,
@ -2525,13 +2575,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(*)) {
@ -2541,10 +2595,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),
@ -2556,11 +2614,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);
}
@ -2570,12 +2632,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;
}
}
@ -2593,10 +2659,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;
@ -2608,10 +2678,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);
@ -2624,7 +2698,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;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,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);
@ -1233,8 +1234,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);
}
@ -1268,7 +1268,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;
@ -1278,7 +1279,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);
@ -1320,6 +1322,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],
@ -1329,7 +1332,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,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;
}
@ -1405,7 +1410,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);
}
@ -2441,6 +2447,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;
@ -2453,18 +2463,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;
@ -2472,11 +2489,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;
@ -2484,24 +2505,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),
@ -2509,7 +2555,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),
@ -2517,7 +2565,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,
@ -2525,13 +2575,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(*)) {
@ -2541,10 +2595,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),
@ -2556,11 +2614,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);
}
@ -2570,12 +2632,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;
}
}
@ -2593,10 +2659,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;
@ -2608,10 +2678,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);
@ -2624,7 +2698,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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,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);
@ -1233,8 +1234,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);
}
@ -1268,7 +1268,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;
@ -1278,7 +1279,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);
@ -1320,6 +1322,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],
@ -1329,7 +1332,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,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;
}
@ -1405,7 +1410,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);
}
@ -2441,6 +2447,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;
@ -2453,18 +2463,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;
@ -2472,11 +2489,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;
@ -2484,24 +2505,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),
@ -2509,7 +2555,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),
@ -2517,7 +2565,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,
@ -2525,13 +2575,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(*)) {
@ -2541,10 +2595,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),
@ -2556,11 +2614,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);
}
@ -2570,12 +2632,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;
}
}
@ -2593,10 +2659,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;
@ -2608,10 +2678,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);
@ -2624,7 +2698,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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,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);
@ -1233,8 +1234,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);
}
@ -1268,7 +1268,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;
@ -1278,7 +1279,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);
@ -1320,6 +1322,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],
@ -1329,7 +1332,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,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;
}
@ -1405,7 +1410,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);
}
@ -2441,6 +2447,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;
@ -2453,18 +2463,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;
@ -2472,11 +2489,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;
@ -2484,24 +2505,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),
@ -2509,7 +2555,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),
@ -2517,7 +2565,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,
@ -2525,13 +2575,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(*)) {
@ -2541,10 +2595,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),
@ -2556,11 +2614,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);
}
@ -2570,12 +2632,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;
}
}
@ -2593,10 +2659,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;
@ -2608,10 +2678,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);
@ -2624,7 +2698,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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,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);
@ -1233,8 +1234,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);
}
@ -1268,7 +1268,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;
@ -1278,7 +1279,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);
@ -1320,6 +1322,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],
@ -1329,7 +1332,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,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;
}
@ -1405,7 +1410,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);
}
@ -2441,6 +2447,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;
@ -2453,18 +2463,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;
@ -2472,11 +2489,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;
@ -2484,24 +2505,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),
@ -2509,7 +2555,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),
@ -2517,7 +2565,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,
@ -2525,13 +2575,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(*)) {
@ -2541,10 +2595,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),
@ -2556,11 +2614,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);
}
@ -2570,12 +2632,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;
}
}
@ -2593,10 +2659,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;
@ -2608,10 +2678,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);
@ -2624,7 +2698,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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,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);
@ -1233,8 +1234,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);
}
@ -1268,7 +1268,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;
@ -1278,7 +1279,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);
@ -1320,6 +1322,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],
@ -1329,7 +1332,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,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;
}
@ -1405,7 +1410,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);
}
@ -2441,6 +2447,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;
@ -2453,18 +2463,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;
@ -2472,11 +2489,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;
@ -2484,24 +2505,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),
@ -2509,7 +2555,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),
@ -2517,7 +2565,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,
@ -2525,13 +2575,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(*)) {
@ -2541,10 +2595,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),
@ -2556,11 +2614,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);
}
@ -2570,12 +2632,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;
}
}
@ -2593,10 +2659,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;
@ -2608,10 +2678,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);
@ -2624,7 +2698,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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,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);
@ -1233,8 +1234,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);
}
@ -1268,7 +1268,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;
@ -1278,7 +1279,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);
@ -1320,6 +1322,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],
@ -1329,7 +1332,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,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;
}
@ -1405,7 +1410,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);
}
@ -2441,6 +2447,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;
@ -2453,18 +2463,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;
@ -2472,11 +2489,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;
@ -2484,24 +2505,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),
@ -2509,7 +2555,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),
@ -2517,7 +2565,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,
@ -2525,13 +2575,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(*)) {
@ -2541,10 +2595,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),
@ -2556,11 +2614,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);
}
@ -2570,12 +2632,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;
}
}
@ -2593,10 +2659,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;
@ -2608,10 +2678,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);
@ -2624,7 +2698,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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,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);
@ -1233,8 +1234,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);
}
@ -1268,7 +1268,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;
@ -1278,7 +1279,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);
@ -1320,6 +1322,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],
@ -1329,7 +1332,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,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;
}
@ -1405,7 +1410,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);
}
@ -2441,6 +2447,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;
@ -2453,18 +2463,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;
@ -2472,11 +2489,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;
@ -2484,24 +2505,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),
@ -2509,7 +2555,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),
@ -2517,7 +2565,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,
@ -2525,13 +2575,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(*)) {
@ -2541,10 +2595,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),
@ -2556,11 +2614,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);
}
@ -2570,12 +2632,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;
}
}
@ -2593,10 +2659,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;
@ -2608,10 +2678,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);
@ -2624,7 +2698,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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,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);
@ -1233,8 +1234,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);
}
@ -1268,7 +1268,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;
@ -1278,7 +1279,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);
@ -1320,6 +1322,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],
@ -1329,7 +1332,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,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;
}
@ -1405,7 +1410,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);
}
@ -2441,6 +2447,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;
@ -2453,18 +2463,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;
@ -2472,11 +2489,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;
@ -2484,24 +2505,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),
@ -2509,7 +2555,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),
@ -2517,7 +2565,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,
@ -2525,13 +2575,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(*)) {
@ -2541,10 +2595,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),
@ -2556,11 +2614,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);
}
@ -2570,12 +2632,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;
}
}
@ -2593,10 +2659,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;
@ -2608,10 +2678,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);
@ -2624,7 +2698,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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,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);
@ -1233,8 +1234,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);
}
@ -1268,7 +1268,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;
@ -1278,7 +1279,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);
@ -1320,6 +1322,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],
@ -1329,7 +1332,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,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;
}
@ -1405,7 +1410,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);
}
@ -2441,6 +2447,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;
@ -2453,18 +2463,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;
@ -2472,11 +2489,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;
@ -2484,24 +2505,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),
@ -2509,7 +2555,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),
@ -2517,7 +2565,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,
@ -2525,13 +2575,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(*)) {
@ -2541,10 +2595,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),
@ -2556,11 +2614,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);
}
@ -2570,12 +2632,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;
}
}
@ -2593,10 +2659,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;
@ -2608,10 +2678,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);
@ -2624,7 +2698,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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1159,7 +1159,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);
@ -1233,8 +1234,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);
}
@ -1268,7 +1268,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;
@ -1278,7 +1279,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);
@ -1320,6 +1322,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],
@ -1329,7 +1332,8 @@ label[aria-disabled=true],
}
label[aria-disabled=true] input[disabled],
[role=group] > label {
[role=group] > label,
[role=group] > legend {
opacity: 1;
}
@ -1397,7 +1401,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;
}
@ -1405,7 +1410,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);
}
@ -2441,6 +2447,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;
@ -2453,18 +2463,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;
@ -2472,11 +2489,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;
@ -2484,24 +2505,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),
@ -2509,7 +2555,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),
@ -2517,7 +2565,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,
@ -2525,13 +2575,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(*)) {
@ -2541,10 +2595,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),
@ -2556,11 +2614,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);
}
@ -2570,12 +2632,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;
}
}
@ -2593,10 +2659,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;
@ -2608,10 +2678,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);
@ -2624,7 +2698,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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
:root,

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1857,7 +1857,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1931,8 +1932,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1966,7 +1966,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1976,7 +1977,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -2018,6 +2020,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -2027,7 +2030,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -2095,7 +2099,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -2103,7 +2108,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -3299,6 +3305,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -3311,18 +3321,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -3330,11 +3347,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -3342,24 +3363,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -3367,7 +3413,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -3375,7 +3423,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -3383,13 +3433,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -3399,10 +3453,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -3414,11 +3472,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -3428,12 +3490,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -3451,10 +3517,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -3466,10 +3536,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -3482,7 +3556,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1857,7 +1857,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1931,8 +1932,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1966,7 +1966,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1976,7 +1977,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -2018,6 +2020,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -2027,7 +2030,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -2095,7 +2099,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -2103,7 +2108,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -3299,6 +3305,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -3311,18 +3321,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -3330,11 +3347,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -3342,24 +3363,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -3367,7 +3413,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -3375,7 +3423,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -3383,13 +3433,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -3399,10 +3453,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -3414,11 +3472,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -3428,12 +3490,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -3451,10 +3517,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -3466,10 +3536,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -3482,7 +3556,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1857,7 +1857,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1931,8 +1932,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1966,7 +1966,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1976,7 +1977,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -2018,6 +2020,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -2027,7 +2030,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -2095,7 +2099,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -2103,7 +2108,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -3299,6 +3305,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -3311,18 +3321,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -3330,11 +3347,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -3342,24 +3363,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -3367,7 +3413,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -3375,7 +3423,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -3383,13 +3433,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -3399,10 +3453,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -3414,11 +3472,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -3428,12 +3490,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -3451,10 +3517,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -3466,10 +3536,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -3482,7 +3556,9 @@ main {
[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;
}

File diff suppressed because one or more lines are too long

View file

@ -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
*/
/**
@ -1857,7 +1857,8 @@ main {
.pico optgroup,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
@ -1931,8 +1932,7 @@ main {
border-width: 0;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]),
.pico [role=group] > label {
.pico 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);
}
@ -1966,7 +1966,8 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -1976,7 +1977,8 @@ main {
.pico input,
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [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);
@ -2018,6 +2020,7 @@ main {
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
@ -2027,7 +2030,8 @@ main {
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
opacity: 1;
}
@ -2095,7 +2099,8 @@ main {
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
.pico select:invalid,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
@ -2103,7 +2108,8 @@ main {
.pico input:not([type=checkbox], [type=radio]),
.pico select,
.pico textarea,
.pico [role=group] > label {
.pico [role=group] > label,
.pico [role=group] > legend {
margin-bottom: var(--pico-spacing);
}
@ -3299,6 +3305,10 @@ main {
/**
* Group ([role="group"], [role="search"])
*/
.pico fieldset[role=group] > legend {
float: left;
}
.pico [role=search],
.pico [role=group] {
display: inline-flex;
@ -3311,18 +3321,25 @@ main {
transition: box-shadow var(--pico-transition);
}
.pico [role=search] > label,
.pico [role=group] > label {
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
.pico [role=group] select,
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
@ -3330,11 +3347,15 @@ main {
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -3342,24 +3363,49 @@ main {
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
.pico [role=search] label:not(:last-child),
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child),
.pico [role=group] label:not(:last-child) {
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
.pico [role=search] label:focus,
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] select:focus,
.pico [role=group] label:focus {
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
z-index: 2;
}
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
@ -3367,7 +3413,9 @@ main {
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
.pico [role=search] label:not(:first-child),
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
@ -3375,7 +3423,9 @@ main {
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child),
.pico [role=group] label:not(:first-child) {
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
@ -3383,13 +3433,17 @@ main {
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
.pico [role=search] label,
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
.pico [role=group] [role=button],
.pico [role=group] label {
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
width: auto;
}
@supports selector(:has(*)) {
@ -3399,10 +3453,14 @@ main {
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@ -3414,11 +3472,15 @@ main {
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [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);
}
@ -3428,12 +3490,16 @@ main {
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
.pico [role=search] label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
.pico [role=group] [role=button]:focus,
.pico [role=group] label:focus {
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
box-shadow: none;
}
}
@ -3451,10 +3517,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child) {
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
@ -3466,10 +3536,14 @@ main {
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
[dir=rtl] .pico [role=group] label:not(:last-child) {
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [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);
@ -3482,7 +3556,9 @@ main {
[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;
}

Some files were not shown because too many files have changed in this diff Show more