mirror of
https://github.com/picocss/pico.git
synced 2025-04-20 16:46:14 -04:00
Closes Legend element not styled in role="group" Yohn/PicoCSS#23
Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
This commit is contained in:
Yohn
parent
324f6fcef4
commit
ddf41a191a
265 changed files with 13809 additions and 4063 deletions
119
docs/index.html
119
docs/index.html
|
|
@ -63,7 +63,7 @@
|
|||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body id="top">
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div class="col-12 col-md-3 col-lg-2">
|
||||
|
|
@ -188,6 +188,7 @@
|
|||
<li><a href="#floating-labels">Floating Labels [role=form]</a></li>
|
||||
<li><a href="#validation">Validation</a></li>
|
||||
<li><a href="#group">Group</a></li>
|
||||
<li><a href="#dropdown-submenu">Dropdown Submenu</a></li>
|
||||
<li><a href="#rows">Row</a></li>
|
||||
<li><a href="#row-offsets">Row Offset</a></li>
|
||||
<li><a href="#row-alignments">Row Alignments</a></li>
|
||||
|
|
@ -209,7 +210,7 @@
|
|||
<main class="col-12 col-md-9 col-lg-10">
|
||||
<article>
|
||||
<header>
|
||||
<h2>Yohns PicoCSS Fork v2.2.1</h2>
|
||||
<h2>Yohns PicoCSS Fork v2.2.2</h2>
|
||||
<p class="mb-0">Not in npm yet, but will be soon.</p>
|
||||
</header>
|
||||
<p>I've merged some open pull requests from the <a href="https://github.com/picocss/pico">original Pico</a>
|
||||
|
|
@ -652,8 +653,98 @@
|
|||
<h2>Group</h2>
|
||||
<h6 class="fw-n">Classless and no JavaScript!</h6>
|
||||
</header>
|
||||
<p>I wanted to add the label tah to have an input group kind of thing going on.</p>
|
||||
<ol>
|
||||
<li><code><label></code> has been added.</li>
|
||||
<li><code><legend></code> has been added. (To be used with <code><fieldset role="group"></code></li>
|
||||
<li><code><details class="dropdown"></code> has been added.</li>
|
||||
</ol>
|
||||
<h4 id="dropdown-submenu">Dropdown Submenu Example</h4>
|
||||
<p>Click on the <strong>Getting Started</strong> to see the sub-dropdown menu under <strong>About</strong>.</p>
|
||||
<hr>
|
||||
<div>
|
||||
<h3>[role=group] > .dropdown</h3>
|
||||
<div role="group">
|
||||
<details class="dropdown">
|
||||
<summary>Getting Started</summary>
|
||||
<ul>
|
||||
<li>
|
||||
<details class="dropdown">
|
||||
<summary class="secondary">About</summary>
|
||||
<ul>
|
||||
<li><a class="load-page" href="data/What’s new in v2?.json">What’s new in v2?</a></li>
|
||||
<li><a class="load-page" href="data/Mission.json">Mission</a></li>
|
||||
<li><a class="load-page" href="data/Usage scenarios.json">Usage scenarios</a></li>
|
||||
<li><a class="load-page" href="data/Brand.json">Brand</a></li>
|
||||
<li><a class="load-page" href="data/Built With.json">Built With</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>Quick start</li>
|
||||
<li>Version picker New</li>
|
||||
<li>Color schemes</li>
|
||||
<li>Class-less version</li>
|
||||
<li>Conditional styling New</li>
|
||||
<li>RTL</li>
|
||||
<li>CSS Variables</li>
|
||||
<li>Sass</li>
|
||||
<li>Colors New</li>
|
||||
</ul>
|
||||
</details>
|
||||
<details class="dropdown">
|
||||
<summary class="contrast">Layout</summary>
|
||||
<ul>
|
||||
<li><a class="load-page" href="data/Container.json">Container</a></li>
|
||||
<li><a class="load-page" href="data/Landmarks.json">Landmarks & Section</a></li>
|
||||
<li><a class="load-page" href="data/Grid.json">Grid</a></li>
|
||||
<li><a class="load-page" href="data/Row.json">Row</a></li>
|
||||
<li><a class="load-page" href="data/Overflow.json">Overflow</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<details class="dropdown">
|
||||
<summary>Content</summary>
|
||||
<ul>
|
||||
<li><a class="load-page" href="data/Typography.json">Typography</a></li>
|
||||
<li><a class="load-page" href="data/Link.json">Link</a></li>
|
||||
<li><a class="load-page" href="data/Table.json">Table</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<details class="dropdown">
|
||||
<summary>Form</summary>
|
||||
<ul>
|
||||
<li><a class="load-page" href="data/Overview.json">Overview</a></li>
|
||||
<li><a class="load-page" href="data/Button.json">Button</a></li>
|
||||
<li><a class="load-page" href="data/Checkboxes.json">Checkboxes</a></li>
|
||||
<li><a class="load-page" href="data/File.json">File</a></li>
|
||||
<li><a class="load-page" href="data/Floating.json">Floating Labels</a></li>
|
||||
<li><a class="load-page" href="data/Input.json">Input</a></li>
|
||||
<li><a class="load-page" href="data/Select.json">Select</a></li>
|
||||
<li><a class="load-page" href="data/Switch.json">Switch</a></li>
|
||||
<li><a class="load-page" href="data/Radios.json">Radios</a></li>
|
||||
<li><a class="load-page" href="data/Range.json">Range</a></li>
|
||||
<li><a class="load-page" href="data/Textarea.json">Textarea</a></li>
|
||||
<li><a class="load-page" href="data/Validation.json">Validation</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<details class="dropdown">
|
||||
<summary>Components</summary>
|
||||
<ul>
|
||||
<li><a class="load-page" href="data/Accordion.json">Accordion</a></li>
|
||||
<li><a class="load-page" href="data/Card.json">Card</a></li>
|
||||
<li><a class="load-page" href="data/Dropdown.json">Dropdown</a></li>
|
||||
<li><a class="load-page" href="data/Group.json">Group</a></li>
|
||||
<li><a class="load-page" href="data/Loading.json">Loading</a></li>
|
||||
<li><a class="load-page" href="data/Modal.json">Modal</a></li>
|
||||
<li><a class="load-page" href="data/Nav.json">Nav</a></li>
|
||||
<li><a class="load-page" href="data/Popover.json">Popover</a></li>
|
||||
<li><a class="load-page" href="data/Progress.json">Progress</a></li>
|
||||
<li><a class="load-page" href="data/Tabs.json">Tabs</a></li>
|
||||
<li><a class="load-page" href="data/Timeline.json">Timeline</a></li>
|
||||
<li><a class="load-page" href="data/Tooltip.json">Tooltip</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
<hr>
|
||||
<h3>form > [role=group]</h3>
|
||||
<form action="javascript:void(0);" novalidate>
|
||||
<div role="group">
|
||||
<label for="email">Email:</label>
|
||||
|
|
@ -661,7 +752,8 @@
|
|||
<input type="submit" value="Subscribe" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<hr>
|
||||
<h3>form > [role=group] > select</h3>
|
||||
<form action="javascript:void(0);" novalidate>
|
||||
<div role="group">
|
||||
<label for="ex-browser">Browser:</label>
|
||||
|
|
@ -674,6 +766,23 @@
|
|||
<input type="submit" value="Save" />
|
||||
</div>
|
||||
</form>
|
||||
<hr>
|
||||
<h3>fieldset[role=group] with > legend</h3>
|
||||
<fieldset role="group">
|
||||
<legend>Sort By</legend>
|
||||
<button class="outline secondary">Availability</button>
|
||||
<button class="outline">Relative Profit</button>
|
||||
<button class="outline secondary">Absolute Profit</button>
|
||||
</fieldset>
|
||||
<hr>
|
||||
<h3>div[role=group] with > legend</h3>
|
||||
<div role="group">
|
||||
<legend>Sort By</legend>
|
||||
<button class="outline secondary">Availability</button>
|
||||
<button>Relative Profit</button>
|
||||
<button class="outline secondary">Absolute Profit</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
<!-- ./ Group -->
|
||||
|
|
@ -1326,7 +1435,7 @@
|
|||
function changeTheme(newTheme) {
|
||||
const linkElement = document.getElementById('theme-color-ss');
|
||||
if (linkElement) {
|
||||
linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/PicoCSS@2.2.1/css/pico.' + newTheme + '.min.css');
|
||||
linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/PicoCSS@2.2.2/css/pico.' + newTheme + '.min.css');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
2
docs/pico.colors.min.css
vendored
2
docs/pico.colors.min.css
vendored
File diff suppressed because one or more lines are too long
178
docs/pico.css
178
docs/pico.css
|
|
@ -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
|
||||
*/
|
||||
/**
|
||||
|
|
@ -232,18 +232,18 @@ nav details.dropdown summary:focus-visible {
|
|||
color-scheme: light;
|
||||
--pico-background-color: #fff;
|
||||
--pico-color: #373c44;
|
||||
--pico-text-selection-color: rgba(148, 134, 225, 0.25);
|
||||
--pico-text-selection-color: rgba(205, 104, 224, 0.25);
|
||||
--pico-muted-color: #646b79;
|
||||
--pico-muted-border-color: rgb(231, 234, 239.5);
|
||||
--pico-primary: #655cd6;
|
||||
--pico-primary-background: #524ed2;
|
||||
--pico-primary: #aa40bf;
|
||||
--pico-primary-background: #9236a4;
|
||||
--pico-primary-border: var(--pico-primary-background);
|
||||
--pico-primary-underline: rgba(101, 92, 214, 0.5);
|
||||
--pico-primary-hover: #4040bf;
|
||||
--pico-primary-hover-background: #4040bf;
|
||||
--pico-primary-underline: rgba(170, 64, 191, 0.5);
|
||||
--pico-primary-hover: #802e90;
|
||||
--pico-primary-hover-background: #802e90;
|
||||
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
||||
--pico-primary-hover-underline: var(--pico-primary-hover);
|
||||
--pico-primary-focus: rgba(148, 134, 225, 0.5);
|
||||
--pico-primary-focus: rgba(205, 104, 224, 0.5);
|
||||
--pico-primary-inverse: #fff;
|
||||
--pico-secondary: #5d6b89;
|
||||
--pico-secondary-background: #525f7a;
|
||||
|
|
@ -387,18 +387,18 @@ nav details.dropdown summary:focus-visible {
|
|||
color-scheme: dark;
|
||||
--pico-background-color: rgb(19, 22.5, 30.5);
|
||||
--pico-color: #c2c7d0;
|
||||
--pico-text-selection-color: rgba(162, 148, 229, 0.1875);
|
||||
--pico-text-selection-color: rgba(212, 125, 228, 0.1875);
|
||||
--pico-muted-color: #7b8495;
|
||||
--pico-muted-border-color: #202632;
|
||||
--pico-primary: #a294e5;
|
||||
--pico-primary-background: #524ed2;
|
||||
--pico-primary: #d47de4;
|
||||
--pico-primary-background: #9236a4;
|
||||
--pico-primary-border: var(--pico-primary-background);
|
||||
--pico-primary-underline: rgba(162, 148, 229, 0.5);
|
||||
--pico-primary-hover: #bdb2ec;
|
||||
--pico-primary-hover-background: #655cd6;
|
||||
--pico-primary-underline: rgba(212, 125, 228, 0.5);
|
||||
--pico-primary-hover: #e2a3eb;
|
||||
--pico-primary-hover-background: #aa40bf;
|
||||
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
||||
--pico-primary-hover-underline: var(--pico-primary-hover);
|
||||
--pico-primary-focus: rgba(162, 148, 229, 0.375);
|
||||
--pico-primary-focus: rgba(212, 125, 228, 0.375);
|
||||
--pico-primary-inverse: #fff;
|
||||
--pico-secondary: #969eaf;
|
||||
--pico-secondary-background: #525f7a;
|
||||
|
|
@ -542,18 +542,18 @@ nav details.dropdown summary:focus-visible {
|
|||
color-scheme: dark;
|
||||
--pico-background-color: rgb(19, 22.5, 30.5);
|
||||
--pico-color: #c2c7d0;
|
||||
--pico-text-selection-color: rgba(162, 148, 229, 0.1875);
|
||||
--pico-text-selection-color: rgba(212, 125, 228, 0.1875);
|
||||
--pico-muted-color: #7b8495;
|
||||
--pico-muted-border-color: #202632;
|
||||
--pico-primary: #a294e5;
|
||||
--pico-primary-background: #524ed2;
|
||||
--pico-primary: #d47de4;
|
||||
--pico-primary-background: #9236a4;
|
||||
--pico-primary-border: var(--pico-primary-background);
|
||||
--pico-primary-underline: rgba(162, 148, 229, 0.5);
|
||||
--pico-primary-hover: #bdb2ec;
|
||||
--pico-primary-hover-background: #655cd6;
|
||||
--pico-primary-underline: rgba(212, 125, 228, 0.5);
|
||||
--pico-primary-hover: #e2a3eb;
|
||||
--pico-primary-hover-background: #aa40bf;
|
||||
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
||||
--pico-primary-hover-underline: var(--pico-primary-hover);
|
||||
--pico-primary-focus: rgba(162, 148, 229, 0.375);
|
||||
--pico-primary-focus: rgba(212, 125, 228, 0.375);
|
||||
--pico-primary-inverse: #fff;
|
||||
--pico-secondary: #969eaf;
|
||||
--pico-secondary-background: #525f7a;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -4434,4 +4510,4 @@ textarea,
|
|||
transition-delay: 0s !important;
|
||||
transition-duration: 0s !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
4
docs/pico.min.css
vendored
4
docs/pico.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue