mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-21 09:06:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: group

Browse source
This commit is contained in:
Lucas Larroche 2023-04-02 10:06:47 +07:00
parent 395ceca401
commit 2c202a420d
13 changed files with 741 additions and 168 deletions
Download patch file Download diff file Expand all files Collapse all files

227
css/pico.classless.css
View file

@ -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,56 @@ 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);
}
[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;
}
@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: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
}
[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: 0 0 0 0.0625rem var(--pico-form-element-border-color);
}
[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 0.0625rem var(--pico-primary-border);
--pico-button-hover-box-shadow: 0 0 0 0.0625rem 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;
}
}
/**
* Color schemes
*/
@ -749,8 +803,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;
@ -864,19 +918,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);
}
@ -978,16 +1024,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);
@ -1011,12 +1057,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));
@ -1024,42 +1070,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;
}
@ -1664,7 +1706,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;
@ -1673,15 +1715,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);
}
@ -1776,7 +1818,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;
@ -2031,7 +2072,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 {
@ -2063,6 +2104,98 @@ 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;
}
/**
* Loading ([aria-busy=true])
*/
@ -2233,7 +2366,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;

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

289
css/pico.css
View file

@ -239,6 +239,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;
@ -256,6 +260,76 @@ 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);
}
[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;
}
@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: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
}
[role=search]:has(button.secondary:focus,
[type=submit].secondary:focus,
[type=button].secondary:focus,
[role=button].secondary:focus),
[role=group]:has(button.secondary:focus,
[type=submit].secondary:focus,
[type=button].secondary:focus,
[role=button].secondary:focus) {
--pico-group-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
}
[role=search]:has(button.contrast:focus,
[type=submit].contrast:focus,
[type=button].contrast:focus,
[role=button].contrast:focus),
[role=group]:has(button.contrast:focus,
[type=submit].contrast:focus,
[type=button].contrast:focus,
[role=button].contrast:focus) {
--pico-group-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
}
[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: 0 0 0 0.0625rem var(--pico-form-element-border-color);
}
[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 0.0625rem var(--pico-primary-border);
--pico-button-hover-box-shadow: 0 0 0 0.0625rem 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;
}
}
/**
* Color schemes
*/
@ -791,8 +865,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;
@ -806,8 +880,8 @@ a.secondary,
--pico-color: var(--pico-secondary);
--pico-underline: var(--pico-secondary-underline);
}
a.secondary:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
[role=link].secondary:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
a.secondary:is([aria-current], :hover, :active, :focus),
[role=link].secondary:is([aria-current], :hover, :active, :focus) {
--pico-color: var(--pico-secondary-hover);
--pico-underline: var(--pico-secondary-underline-hover);
}
@ -816,8 +890,8 @@ a.contrast,
--pico-color: var(--pico-contrast);
--pico-underline: var(--pico-contrast-underline);
}
a.contrast:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
[role=link].contrast:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
a.contrast:is([aria-current], :hover, :active, :focus),
[role=link].contrast:is([aria-current], :hover, :active, :focus) {
--pico-color: var(--pico-contrast-hover);
--pico-underline: var(--pico-contrast-underline-hover);
}
@ -926,19 +1000,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);
}
@ -1040,16 +1106,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);
@ -1073,12 +1139,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));
@ -1086,89 +1152,85 @@ 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);
}
:is(button, [type=submit], input[type=button], [role=button]).secondary,
input[type=reset],
input[type=file]::file-selector-button {
:is(button, [type=submit], [type=button], [role=button]).secondary,
[type=reset],
[type=file]::file-selector-button {
--pico-background-color: var(--pico-secondary-background);
--pico-border-color: var(--pico-secondary-border);
--pico-color: var(--pico-secondary-inverse);
cursor: pointer;
}
:is(button, [type=submit], input[type=button], [role=button]).secondary: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=file]::file-selector-button:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
:is(button, [type=submit], [type=button], [role=button]).secondary:is([aria-current], :hover, :active, :focus),
[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-background-hover);
--pico-border-color: var(--pico-secondary-border-hover);
--pico-color: var(--pico-secondary-inverse);
}
:is(button, [type=submit], input[type=button], [role=button]).secondary:focus,
input[type=reset]:focus,
input[type=file]::file-selector-button:focus {
:is(button, [type=submit], [type=button], [role=button]).secondary: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);
}
:is(button, [type=submit], input[type=button], [role=button]).contrast {
:is(button, [type=submit], [type=button], [role=button]).contrast {
--pico-background-color: var(--pico-contrast-background);
--pico-border-color: var(--pico-contrast-border);
--pico-color: var(--pico-contrast-inverse);
}
:is(button, [type=submit], input[type=button], [role=button]).contrast:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
:is(button, [type=submit], [type=button], [role=button]).contrast:is([aria-current], :hover, :active, :focus) {
--pico-background-color: var(--pico-contrast-background-hover);
--pico-border-color: var(--pico-contrast-border-hover);
--pico-color: var(--pico-contrast-inverse);
}
:is(button, [type=submit], input[type=button], [role=button]).contrast:focus {
:is(button, [type=submit], [type=button], [role=button]).contrast: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-contrast-focus);
}
:is(button, [type=submit], input[type=button], [role=button]).outline,
input[type=reset].outline {
:is(button, [type=submit], [type=button], [role=button]).outline,
[type=reset].outline {
--pico-background-color: transparent;
--pico-color: var(--pico-primary);
--pico-border-color: currentColor;
}
:is(button, [type=submit], input[type=button], [role=button]).outline:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
input[type=reset].outline:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
:is(button, [type=submit], [type=button], [role=button]).outline:is([aria-current], :hover, :active, :focus),
[type=reset].outline:is([aria-current], :hover, :active, :focus) {
--pico-background-color: transparent;
--pico-color: var(--pico-primary-hover);
}
:is(button, [type=submit], input[type=button], [role=button]).outline.secondary,
input[type=reset].outline {
:is(button, [type=submit], [type=button], [role=button]).outline.secondary,
[type=reset].outline {
--pico-color: var(--pico-secondary);
--pico-border-color: currentColor;
}
:is(button, [type=submit], input[type=button], [role=button]).outline.secondary:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
input[type=reset].outline:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
:is(button, [type=submit], [type=button], [role=button]).outline.secondary:is([aria-current], :hover, :active, :focus),
[type=reset].outline:is([aria-current], :hover, :active, :focus) {
--pico-color: var(--pico-secondary-hover);
}
:is(button, [type=submit], input[type=button], [role=button]).outline.contrast {
:is(button, [type=submit], [type=button], [role=button]).outline.contrast {
--pico-color: var(--pico-contrast);
}
:is(button, [type=submit], input[type=button], [role=button]).outline.contrast:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
:is(button, [type=submit], [type=button], [role=button]).outline.contrast:is([aria-current], :hover, :active, :focus) {
--pico-color: var(--pico-contrast-hover);
}
: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;
}
@ -1773,7 +1835,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;
@ -1782,15 +1844,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);
}
@ -1885,7 +1947,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;
@ -2140,7 +2201,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 {
@ -2172,6 +2233,98 @@ 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;
}
/**
* Loading ([aria-busy=true])
*/
@ -2279,7 +2432,7 @@ dialog article .close {
opacity: 0.5;
transition: opacity var(--pico-transition);
}
dialog article .close:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
dialog article .close:is([aria-current], :hover, :active, :focus) {
opacity: 1;
}
dialog:not([open]), dialog[open=false] {
@ -2404,7 +2557,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;

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

227
css/pico.fluid.classless.css
View file

@ -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,56 @@ 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);
}
[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;
}
@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: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
}
[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: 0 0 0 0.0625rem var(--pico-form-element-border-color);
}
[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 0.0625rem var(--pico-primary-border);
--pico-button-hover-box-shadow: 0 0 0 0.0625rem 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;
}
}
/**
* Color schemes
*/
@ -712,8 +766,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 +881,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 +987,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 +1020,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 +1033,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 +1669,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 +1678,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 +1781,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 +2035,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 +2067,98 @@ 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;
}
/**
* Loading ([aria-busy=true])
*/
@ -2196,7 +2329,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;

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
scss/_index.scss
View file

@ -36,6 +36,7 @@
@use "components/accordion"; // details, summary
@use "components/card"; // article
@use "components/dropdown"; // details[role="list"]
@use "components/group"; // details[role="list"]
@use "components/loading"; // aria-busy=true
@use "components/modal"; // dialog
@use "components/nav"; // nav

1
scss/_settings.scss
View file

@ -124,6 +124,7 @@ $modules: map.merge(
"components/accordion": true,
"components/card": true,
"components/dropdown": true,
"components/group": true,
"components/loading": true,
"components/modal": true,
"components/nav": true,

83
scss/components/_group.scss Normal file
View file

@ -0,0 +1,83 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/group") {
/**
* Group ([role="group"], [role="search"])
*/
form {
&[role="search"],
&[role="group"] {
width: 100%;
}
}
[role="search"] {
> * {
&:first-child {
border-top-left-radius: 5rem;
border-bottom-left-radius: 5rem;
}
&:last-child {
border-top-right-radius: 5rem;
border-bottom-right-radius: 5rem;
}
}
}
[role="search"],
[role="group"] {
display: inline-flex;
position: relative;
margin-bottom: var(#{$✨}spacing);
border-radius: var(#{$✨}border-radius);
box-shadow: var(#{$✨}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle;
transition: box-shadow var(#{$✨}transition);
> *,
input:not([type="checkbox"], [type="radio"]),
select {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
&:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:focus {
z-index: 2;
}
}
button,
[type="submit"],
[type="reset"],
[type="button"],
[role="button"],
input:not([type="checkbox"], [type="radio"]),
select {
&:not(:first-child) {
margin-left: calc(var(#{$✨}border-width) * -1);
}
}
button,
[type="submit"],
[type="reset"],
[type="button"],
[role="button"] {
width: auto;
}
}
}

69
scss/themes/default/_styles.scss
View file

@ -342,6 +342,10 @@
#{$✨}outline-width: 0.0625rem;
}
[type="search"] {
#{$✨}border-radius: 5rem;
}
// Checkboxes, Radios and Switches
@if map.get($modules, "forms/checkbox-radio-switch") {
[type="checkbox"],
@ -369,4 +373,69 @@
}
}
}
// Group (role="group")
@if map.get($modules, "components/group") {
[role="search"] {
#{$✨}border-radius: 5rem;
}
[role="search"],
[role="group"] {
#{$✨}group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
button,
[type="submit"],
[type="button"],
[role="button"] {
#{$✨}form-element-spacing-horizontal: 2rem;
}
@supports selector(:has(*)) {
&:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
#{$✨}group-box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}primary-focus);
}
@if $enable-classes {
&:has(
button.secondary:focus,
[type="submit"].secondary:focus,
[type="button"].secondary:focus,
[role="button"].secondary:focus
) {
#{$✨}group-box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}secondary-focus);
}
&:has(
button.contrast:focus,
[type="submit"].contrast:focus,
[type="button"].contrast:focus,
[role="button"].contrast:focus
) {
#{$✨}group-box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}contrast-focus);
}
}
&:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
#{$✨}group-box-shadow: 0 0 0 0.0625rem var(#{$✨}form-element-border-color);
button,
[type="submit"],
[type="button"],
[role="button"] {
#{$✨}button-box-shadow: 0 0 0 0.0625rem var(#{$✨}primary-border);
#{$✨}button-hover-box-shadow: 0 0 0 0.0625rem var(#{$✨}primary-border-hover);
}
}
button,
[type="submit"],
[type="button"],
[role="button"] {
&:focus {
box-shadow: none;
}
}
}
}
}
}