mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 10:26:13 -04:00
feat: group
This commit is contained in:
Lucas Larroche
parent
395ceca401
commit
c27bdad392
13 changed files with 771 additions and 176 deletions
|
|
@ -13,7 +13,7 @@
|
|||
--pico-font-size: 100%;
|
||||
--pico-text-underline-offset: 0.1rem;
|
||||
--pico-border-radius: 0.25rem;
|
||||
--pico-border-width: 1px;
|
||||
--pico-border-width: 0.0625rem;
|
||||
--pico-outline-width: 0.1875rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
|
|
@ -213,7 +213,7 @@ thead td,
|
|||
tfoot th,
|
||||
tfoot td {
|
||||
--pico-font-weight: 600;
|
||||
--pico-border-width: 3px;
|
||||
--pico-border-width: 0.1875rem;
|
||||
}
|
||||
|
||||
pre,
|
||||
|
|
@ -237,6 +237,10 @@ input:not([type=submit],
|
|||
--pico-outline-width: 0.0625rem;
|
||||
}
|
||||
|
||||
[type=search] {
|
||||
--pico-border-radius: 5rem;
|
||||
}
|
||||
|
||||
[type=checkbox],
|
||||
[type=radio] {
|
||||
--pico-border-width: 0.125rem;
|
||||
|
|
@ -254,6 +258,27 @@ nav details[role=list] summary:focus-visible {
|
|||
--pico-outline-width: 0.1875rem;
|
||||
}
|
||||
|
||||
[role=search] {
|
||||
--pico-border-radius: 5rem;
|
||||
}
|
||||
|
||||
[role=search],
|
||||
[role=group] {
|
||||
--pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--pico-group-box-shadow-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||
--pico-group-box-shadow-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color);
|
||||
}
|
||||
[role=search] button,
|
||||
[role=search] [type=submit],
|
||||
[role=search] [type=button],
|
||||
[role=search] [role=button],
|
||||
[role=group] button,
|
||||
[role=group] [type=submit],
|
||||
[role=group] [type=button],
|
||||
[role=group] [role=button] {
|
||||
--pico-form-element-spacing-horizontal: 2rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Color schemes
|
||||
*/
|
||||
|
|
@ -712,8 +737,8 @@ a,
|
|||
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
|
||||
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
|
||||
}
|
||||
a:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
|
||||
[role=link]:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
|
||||
a:is([aria-current], :hover, :active, :focus),
|
||||
[role=link]:is([aria-current], :hover, :active, :focus) {
|
||||
--pico-color: var(--pico-primary-hover);
|
||||
--pico-underline: var(--pico-primary-underline-hover);
|
||||
--pico-text-decoration: underline;
|
||||
|
|
@ -827,19 +852,11 @@ hgroup > *:not(:first-child):last-child {
|
|||
font-family: unset;
|
||||
}
|
||||
|
||||
:where(dl, ol, ul) {
|
||||
padding-right: 0;
|
||||
padding-left: var(--pico-spacing);
|
||||
-webkit-padding-start: var(--pico-spacing);
|
||||
padding-inline-start: var(--pico-spacing);
|
||||
-webkit-padding-end: 0;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
:where(dl, ol, ul) li {
|
||||
:where(ol, ul) li {
|
||||
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
|
||||
:where(dl, ol, ul) :is(dl, ol, ul) {
|
||||
:where(dl, ol, ul) :where(dl, ol, ul) {
|
||||
margin: 0;
|
||||
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
|
|
@ -941,16 +958,16 @@ button {
|
|||
|
||||
button,
|
||||
[type=submit],
|
||||
input[type=reset],
|
||||
input[type=button] {
|
||||
[type=reset],
|
||||
[type=button] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button,
|
||||
[type=submit],
|
||||
input[type=reset],
|
||||
input[type=button],
|
||||
input[type=file]::file-selector-button,
|
||||
[type=reset],
|
||||
[type=button],
|
||||
[type=file]::file-selector-button,
|
||||
[role=button] {
|
||||
--pico-background-color: var(--pico-primary-background);
|
||||
--pico-border-color: var(--pico-primary-border);
|
||||
|
|
@ -974,12 +991,12 @@ input[type=file]::file-selector-button,
|
|||
user-select: none;
|
||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||
}
|
||||
button:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
|
||||
[type=submit]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
|
||||
input[type=reset]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
|
||||
input[type=button]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
|
||||
input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
|
||||
[role=button]:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
|
||||
button:is([aria-current], :hover, :active, :focus),
|
||||
[type=submit]:is([aria-current], :hover, :active, :focus),
|
||||
[type=reset]:is([aria-current], :hover, :active, :focus),
|
||||
[type=button]:is([aria-current], :hover, :active, :focus),
|
||||
[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus),
|
||||
[role=button]:is([aria-current], :hover, :active, :focus) {
|
||||
--pico-background-color: var(--pico-primary-background-hover);
|
||||
--pico-border-color: var(--pico-primary-border-hover);
|
||||
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
|
|
@ -987,42 +1004,38 @@ input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focu
|
|||
}
|
||||
button:focus,
|
||||
[type=submit]:focus,
|
||||
input[type=reset]:focus,
|
||||
input[type=button]:focus,
|
||||
input[type=file]::file-selector-button:focus,
|
||||
[type=reset]:focus,
|
||||
[type=button]:focus,
|
||||
[type=file]::file-selector-button:focus,
|
||||
[role=button]:focus {
|
||||
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||
}
|
||||
|
||||
[type=submit],
|
||||
input[type=reset],
|
||||
input[type=button] {
|
||||
[type=reset],
|
||||
[type=button] {
|
||||
margin-bottom: var(--pico-spacing);
|
||||
}
|
||||
|
||||
input[type=reset],
|
||||
input[type=file]::file-selector-button {
|
||||
[type=reset],
|
||||
[type=file]::file-selector-button {
|
||||
--pico-background-color: var(--pico-secondary);
|
||||
--pico-border-color: var(--pico-secondary);
|
||||
--pico-color: var(--pico-secondary-inverse);
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=reset]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
|
||||
input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
|
||||
[type=reset]:is([aria-current], :hover, :active, :focus),
|
||||
[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus) {
|
||||
--pico-background-color: var(--pico-secondary-hover);
|
||||
--pico-border-color: var(--pico-secondary-hover);
|
||||
}
|
||||
input[type=reset]:focus,
|
||||
input[type=file]::file-selector-button:focus {
|
||||
[type=reset]:focus,
|
||||
[type=file]::file-selector-button:focus {
|
||||
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
|
||||
}
|
||||
|
||||
:where(button,
|
||||
[type=submit],
|
||||
input[type=reset],
|
||||
input[type=button],
|
||||
[role=button])[disabled],
|
||||
:where(fieldset[disabled]) :is(button, [type=submit], input[type=button], input[type=reset], [role=button]) {
|
||||
:where(button, [type=submit], [type=reset], [type=button], [role=button])[disabled],
|
||||
:where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]) {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -1627,7 +1640,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
|
|||
/**
|
||||
* Input type file
|
||||
*/
|
||||
input[type=file] {
|
||||
[type=file] {
|
||||
--pico-color: var(--pico-muted-color);
|
||||
margin-left: calc(var(--pico-outline-width) * -1);
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
|
||||
|
|
@ -1636,15 +1649,15 @@ input[type=file] {
|
|||
border-radius: 0;
|
||||
background: none;
|
||||
}
|
||||
input[type=file]::file-selector-button {
|
||||
[type=file]::file-selector-button {
|
||||
margin-right: calc(var(--pico-spacing) / 2);
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||
}
|
||||
input[type=file]:is(:hover, :active, :focus)::file-selector-button {
|
||||
[type=file]:is(:hover, :active, :focus)::file-selector-button {
|
||||
--pico-background-color: var(--pico-secondary-background-hover);
|
||||
--pico-border-color: var(--pico-secondary-border-hover);
|
||||
}
|
||||
input[type=file]:focus::file-selector-button {
|
||||
[type=file]:focus::file-selector-button {
|
||||
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
|
||||
}
|
||||
|
||||
|
|
@ -1739,7 +1752,6 @@ input[type=file]:focus::file-selector-button {
|
|||
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
|
||||
-webkit-padding-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
|
||||
padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
|
||||
border-radius: 5rem;
|
||||
background-image: var(--pico-icon-search);
|
||||
background-position: center left 1.125rem;
|
||||
background-size: 1rem auto;
|
||||
|
|
@ -1994,7 +2006,7 @@ details[role=list] summary + ul li a {
|
|||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
details[role=list] summary + ul li a:hover, details[role=list] summary + ul li a:focus, details[role=list] summary + ul li a:active, details[role=list] summary + ul li a:focus-visible, details[role=list] summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||
details[role=list] summary + ul li a:hover, details[role=list] summary + ul li a:focus, details[role=list] summary + ul li a:active, details[role=list] summary + ul li a:focus-visible, details[role=list] summary + ul li a[aria-current] {
|
||||
background-color: var(--pico-dropdown-hover-background-color);
|
||||
}
|
||||
details[role=list] summary + ul li label {
|
||||
|
|
@ -2026,6 +2038,129 @@ details[role=list][open] summary::before {
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Group ([role="group"], [role="search"])
|
||||
*/
|
||||
form[role=search], form[role=group] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[role=search] > *:first-child {
|
||||
border-top-left-radius: 5rem;
|
||||
border-bottom-left-radius: 5rem;
|
||||
}
|
||||
[role=search] > *:last-child {
|
||||
border-top-right-radius: 5rem;
|
||||
border-bottom-right-radius: 5rem;
|
||||
}
|
||||
|
||||
[role=search],
|
||||
[role=group] {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
margin-bottom: var(--pico-spacing);
|
||||
border-radius: var(--pico-border-radius);
|
||||
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
vertical-align: middle;
|
||||
transition: box-shadow var(--pico-transition);
|
||||
}
|
||||
[role=search] > *,
|
||||
[role=search] input:not([type=checkbox], [type=radio]),
|
||||
[role=search] select,
|
||||
[role=group] > *,
|
||||
[role=group] input:not([type=checkbox], [type=radio]),
|
||||
[role=group] select {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
[role=search] > *:not(:first-child),
|
||||
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
|
||||
[role=search] select: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) {
|
||||
margin-left: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
[role=search] > *:not(:last-child),
|
||||
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
|
||||
[role=search] select: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) {
|
||||
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=group] > *:focus,
|
||||
[role=group] input:not([type=checkbox], [type=radio]):focus,
|
||||
[role=group] select:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
[role=search] button:not(:first-child),
|
||||
[role=search] [type=submit]:not(:first-child),
|
||||
[role=search] [type=reset]:not(:first-child),
|
||||
[role=search] [type=button]:not(:first-child),
|
||||
[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=group] button:not(:first-child),
|
||||
[role=group] [type=submit]:not(:first-child),
|
||||
[role=group] [type=reset]:not(:first-child),
|
||||
[role=group] [type=button]:not(:first-child),
|
||||
[role=group] [role=button]:not(:first-child),
|
||||
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
|
||||
[role=group] select:not(:first-child) {
|
||||
margin-left: calc(var(--pico-border-width) * -1);
|
||||
}
|
||||
[role=search] button,
|
||||
[role=search] [type=submit],
|
||||
[role=search] [type=reset],
|
||||
[role=search] [type=button],
|
||||
[role=search] [role=button],
|
||||
[role=group] button,
|
||||
[role=group] [type=submit],
|
||||
[role=group] [type=reset],
|
||||
[role=group] [type=button],
|
||||
[role=group] [role=button] {
|
||||
width: auto;
|
||||
}
|
||||
@supports selector(:has(*)) {
|
||||
[role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus),
|
||||
[role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) {
|
||||
--pico-group-box-shadow: var(--pico-group-box-shadow-with-button);
|
||||
}
|
||||
[role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
|
||||
[role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) {
|
||||
--pico-group-box-shadow: var(--pico-group-box-shadow-with-input);
|
||||
}
|
||||
[role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
|
||||
[role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
|
||||
[role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
|
||||
[role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
|
||||
[role=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] {
|
||||
--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-border-hover);
|
||||
}
|
||||
[role=search] button:focus,
|
||||
[role=search] [type=submit]:focus,
|
||||
[role=search] [type=button]:focus,
|
||||
[role=search] [role=button]:focus,
|
||||
[role=group] button:focus,
|
||||
[role=group] [type=submit]:focus,
|
||||
[role=group] [type=button]:focus,
|
||||
[role=group] [role=button]:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Loading ([aria-busy=true])
|
||||
*/
|
||||
|
|
@ -2196,7 +2331,7 @@ nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
|
|||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]) {
|
||||
nav[aria-label=breadcrumb] a[aria-current] {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue