mirror of
https://github.com/picocss/pico.git
synced 2025-04-20 08:45:06 -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
|
||||
*/
|
||||
|
|
@ -749,8 +774,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 +889,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 +995,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 +1028,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 +1041,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 +1677,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 +1686,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 +1789,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 +2043,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 +2075,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])
|
||||
*/
|
||||
|
|
@ -2233,7 +2368,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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
css/pico.classless.min.css
vendored
2
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
295
css/pico.css
295
css/pico.css
|
|
@ -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;
|
||||
|
|
@ -215,7 +215,7 @@ thead td,
|
|||
tfoot th,
|
||||
tfoot td {
|
||||
--pico-font-weight: 600;
|
||||
--pico-border-width: 3px;
|
||||
--pico-border-width: 0.1875rem;
|
||||
}
|
||||
|
||||
pre,
|
||||
|
|
@ -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,47 @@ 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]: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-with-button: 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-with-button: 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
|
||||
}
|
||||
[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
|
||||
*/
|
||||
|
|
@ -791,8 +836,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 +851,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 +861,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 +971,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 +1077,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 +1110,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 +1123,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 +1806,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 +1815,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 +1918,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 +2172,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 +2204,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])
|
||||
*/
|
||||
|
|
@ -2279,7 +2434,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 +2559,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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
css/pico.fluid.classless.min.css
vendored
2
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
2
css/pico.min.css
vendored
2
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
115
scss/components/_group.scss
Normal file
115
scss/components/_group.scss
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
@supports selector(:has(*)) {
|
||||
// Group box shadow when a button is focused
|
||||
&:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
|
||||
#{$✨}group-box-shadow: var(#{$✨}group-box-shadow-with-button);
|
||||
}
|
||||
|
||||
// Group box shadow when an input is focused
|
||||
&:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
|
||||
#{$✨}group-box-shadow: var(#{$✨}group-box-shadow-with-input);
|
||||
|
||||
// Adapt box shadow for buttons
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="button"],
|
||||
[role="button"] {
|
||||
#{$✨}button-box-shadow: 0 0 0 var(#{$✨}border-width) var(#{$✨}primary-border);
|
||||
#{$✨}button-hover-box-shadow: 0 0 0 var(#{$✨}border-width)
|
||||
var(#{$✨}primary-border-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove button box shadow if we have a group box shadow
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="button"],
|
||||
[role="button"] {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
|
||||
// Borders
|
||||
#{$✨}border-radius: 0.25rem;
|
||||
#{$✨}border-width: 1px;
|
||||
#{$✨}border-width: 0.0625rem;
|
||||
#{$✨}outline-width: 0.1875rem;
|
||||
|
||||
// Transitions
|
||||
|
|
@ -308,7 +308,7 @@
|
|||
th,
|
||||
td {
|
||||
#{$✨}font-weight: 600;
|
||||
#{$✨}border-width: 3px;
|
||||
#{$✨}border-width: 0.1875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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,53 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
#{$✨}group-box-shadow-with-button: 0 0 0 var(#{$✨}outline-width) var(#{$✨}primary-focus);
|
||||
#{$✨}group-box-shadow-with-input: 0 0 0 0.0625rem var(#{$✨}form-element-border-color);
|
||||
|
||||
@if $enable-classes {
|
||||
&:has(
|
||||
button.secondary:focus,
|
||||
[type="submit"].secondary:focus,
|
||||
[type="button"].secondary:focus,
|
||||
[role="button"].secondary:focus
|
||||
) {
|
||||
#{$✨}group-box-shadow-with-button: 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-with-button: 0
|
||||
0
|
||||
0
|
||||
var(#{$✨}outline-width)
|
||||
var(#{$✨}contrast-focus);
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="button"],
|
||||
[role="button"] {
|
||||
#{$✨}form-element-spacing-horizontal: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue