mirror of
https://github.com/picocss/pico.git
synced 2025-07-29 00:03:56 -04:00
Compare commits
No commits in common. "319e48ba91df25a19f65f0eb2d970995e0301c23" and "7d4ee7c725e0e4261eb73b13d02c8636f39b5e20" have entirely different histories.
319e48ba91
...
7d4ee7c725
@ -1,6 +1,6 @@
|
|||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.0.0-rc1 (https://picocss.com)
|
* Pico CSS ✨ v2.0.0-alpha1 (https://picocss.com)
|
||||||
* Copyright 2019-2023 - Licensed under MIT
|
* Copyright 2019-2023 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
@ -751,8 +751,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);
|
||||||
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);
|
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]:not([aria-current=false]), :hover, :active, :focus),
|
a:is([aria-current], :hover, :active, :focus),
|
||||||
[role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
[role=link]:is([aria-current], :hover, :active, :focus) {
|
||||||
--pico-color: var(--pico-primary-hover);
|
--pico-color: var(--pico-primary-hover);
|
||||||
--pico-underline: var(--pico-primary-hover-underline);
|
--pico-underline: var(--pico-primary-hover-underline);
|
||||||
--pico-text-decoration: underline;
|
--pico-text-decoration: underline;
|
||||||
@ -1003,12 +1003,12 @@ button,
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
button:is([aria-current], :hover, :active, :focus),
|
||||||
[type=submit]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
[type=submit]:is([aria-current], :hover, :active, :focus),
|
||||||
[type=reset]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
[type=reset]:is([aria-current], :hover, :active, :focus),
|
||||||
[type=button]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
[type=button]:is([aria-current], :hover, :active, :focus),
|
||||||
[type=file]::file-selector-button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus),
|
||||||
[role=button]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
[role=button]:is([aria-current], :hover, :active, :focus) {
|
||||||
--pico-background-color: var(--pico-primary-hover-background);
|
--pico-background-color: var(--pico-primary-hover-background);
|
||||||
--pico-border-color: var(--pico-primary-hover-border);
|
--pico-border-color: var(--pico-primary-hover-border);
|
||||||
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||||
@ -1036,8 +1036,8 @@ button:focus,
|
|||||||
--pico-color: var(--pico-secondary-inverse);
|
--pico-color: var(--pico-secondary-inverse);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
[type=reset]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
[type=reset]:is([aria-current], :hover, :active, :focus),
|
||||||
[type=file]::file-selector-button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus) {
|
||||||
--pico-background-color: var(--pico-secondary-hover);
|
--pico-background-color: var(--pico-secondary-hover);
|
||||||
--pico-border-color: var(--pico-secondary-hover);
|
--pico-border-color: var(--pico-secondary-hover);
|
||||||
}
|
}
|
||||||
@ -1539,7 +1539,7 @@ label:has([type=checkbox], [type=radio]) {
|
|||||||
}
|
}
|
||||||
[type=checkbox][role=switch]:before {
|
[type=checkbox][role=switch]:before {
|
||||||
display: block;
|
display: block;
|
||||||
width: calc(1.25em - (var(--pico-border-width) * 2));
|
width: calc(1.25em - var(--pico-border-width) * 2);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: var(--pico-color);
|
background-color: var(--pico-color);
|
||||||
@ -2105,10 +2105,7 @@ dialog article > header,
|
|||||||
dialog article > footer {
|
dialog article > footer {
|
||||||
padding: calc(var(--pico-block-spacing-vertical) * 0.5) var(--pico-block-spacing-horizontal);
|
padding: calc(var(--pico-block-spacing-vertical) * 0.5) var(--pico-block-spacing-horizontal);
|
||||||
}
|
}
|
||||||
dialog article > header > * {
|
dialog article > header .close {
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
dialog article > header a[rel=prev] {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-left: var(--pico-spacing);
|
margin-left: var(--pico-spacing);
|
||||||
float: right;
|
float: right;
|
||||||
@ -2124,23 +2121,6 @@ dialog article > footer button:not(:first-of-type),
|
|||||||
dialog article > footer [role=button]:not(:first-of-type) {
|
dialog article > footer [role=button]:not(:first-of-type) {
|
||||||
margin-left: calc(var(--pico-spacing) * 0.5);
|
margin-left: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
dialog article a[rel=prev] {
|
|
||||||
display: block;
|
|
||||||
width: 1rem;
|
|
||||||
height: 1rem;
|
|
||||||
margin-top: calc(var(--pico-spacing) * -1);
|
|
||||||
margin-bottom: var(--pico-spacing);
|
|
||||||
margin-left: auto;
|
|
||||||
background-image: var(--pico-icon-close);
|
|
||||||
background-position: center;
|
|
||||||
background-size: auto 1rem;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
opacity: 0.5;
|
|
||||||
transition: opacity var(--pico-transition);
|
|
||||||
}
|
|
||||||
dialog article a[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
dialog:not([open]), dialog[open=false] {
|
dialog:not([open]), dialog[open=false] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -2207,22 +2187,16 @@ nav[aria-label=breadcrumb] {
|
|||||||
nav[aria-label=breadcrumb] ul li:not(:first-child) {
|
nav[aria-label=breadcrumb] ul li:not(:first-child) {
|
||||||
margin-inline-start: var(--pico-nav-link-spacing-horizontal);
|
margin-inline-start: var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav[aria-label=breadcrumb] ul li a {
|
|
||||||
margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 0;
|
|
||||||
margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) * -1);
|
|
||||||
}
|
|
||||||
nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
|
nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: calc(var(--pico-nav-link-spacing-horizontal) * 4);
|
width: calc(var(--pico-nav-link-spacing-horizontal) * 2);
|
||||||
margin: 0 calc(var(--pico-nav-link-spacing-horizontal) * -1);
|
margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) / 2);
|
||||||
content: var(--pico-nav-breadcrumb-divider);
|
content: var(--pico-nav-breadcrumb-divider);
|
||||||
color: var(--pico-muted-color);
|
color: var(--pico-muted-color);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]) {
|
nav[aria-label=breadcrumb] a[aria-current] {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
4
css/pico.classless.min.css
vendored
4
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
|||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.0.0-rc1 (https://picocss.com)
|
* Pico CSS ✨ v2.0.0-alpha1 (https://picocss.com)
|
||||||
* Copyright 2019-2023 - Licensed under MIT
|
* Copyright 2019-2023 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
:root {
|
:root {
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
2
css/pico.colors.min.css
vendored
2
css/pico.colors.min.css
vendored
File diff suppressed because one or more lines are too long
69
css/pico.css
69
css/pico.css
@ -1,6 +1,6 @@
|
|||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.0.0-rc1 (https://picocss.com)
|
* Pico CSS ✨ v2.0.0-alpha1 (https://picocss.com)
|
||||||
* Copyright 2019-2023 - Licensed under MIT
|
* Copyright 2019-2023 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
@ -836,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);
|
||||||
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);
|
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]:not([aria-current=false]), :hover, :active, :focus),
|
a:is([aria-current], :hover, :active, :focus),
|
||||||
[role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
[role=link]:is([aria-current], :hover, :active, :focus) {
|
||||||
--pico-color: var(--pico-primary-hover);
|
--pico-color: var(--pico-primary-hover);
|
||||||
--pico-underline: var(--pico-primary-hover-underline);
|
--pico-underline: var(--pico-primary-hover-underline);
|
||||||
--pico-text-decoration: underline;
|
--pico-text-decoration: underline;
|
||||||
@ -851,8 +851,8 @@ a.secondary,
|
|||||||
--pico-color: var(--pico-secondary);
|
--pico-color: var(--pico-secondary);
|
||||||
--pico-underline: var(--pico-secondary-underline);
|
--pico-underline: var(--pico-secondary-underline);
|
||||||
}
|
}
|
||||||
a.secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
a.secondary:is([aria-current], :hover, :active, :focus),
|
||||||
[role=link].secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
[role=link].secondary:is([aria-current], :hover, :active, :focus) {
|
||||||
--pico-color: var(--pico-secondary-hover);
|
--pico-color: var(--pico-secondary-hover);
|
||||||
--pico-underline: var(--pico-secondary-hover-underline);
|
--pico-underline: var(--pico-secondary-hover-underline);
|
||||||
}
|
}
|
||||||
@ -861,8 +861,8 @@ a.contrast,
|
|||||||
--pico-color: var(--pico-contrast);
|
--pico-color: var(--pico-contrast);
|
||||||
--pico-underline: var(--pico-contrast-underline);
|
--pico-underline: var(--pico-contrast-underline);
|
||||||
}
|
}
|
||||||
a.contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
a.contrast:is([aria-current], :hover, :active, :focus),
|
||||||
[role=link].contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
[role=link].contrast:is([aria-current], :hover, :active, :focus) {
|
||||||
--pico-color: var(--pico-contrast-hover);
|
--pico-color: var(--pico-contrast-hover);
|
||||||
--pico-underline: var(--pico-contrast-hover-underline);
|
--pico-underline: var(--pico-contrast-hover-underline);
|
||||||
}
|
}
|
||||||
@ -1108,12 +1108,12 @@ button,
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
button:is([aria-current], :hover, :active, :focus),
|
||||||
[type=submit]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
[type=submit]:is([aria-current], :hover, :active, :focus),
|
||||||
[type=reset]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
[type=reset]:is([aria-current], :hover, :active, :focus),
|
||||||
[type=button]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
[type=button]:is([aria-current], :hover, :active, :focus),
|
||||||
[type=file]::file-selector-button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus),
|
||||||
[role=button]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
[role=button]:is([aria-current], :hover, :active, :focus) {
|
||||||
--pico-background-color: var(--pico-primary-hover-background);
|
--pico-background-color: var(--pico-primary-hover-background);
|
||||||
--pico-border-color: var(--pico-primary-hover-border);
|
--pico-border-color: var(--pico-primary-hover-border);
|
||||||
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||||
@ -1142,9 +1142,9 @@ button:focus,
|
|||||||
--pico-color: var(--pico-secondary-inverse);
|
--pico-color: var(--pico-secondary-inverse);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
:is(button, [type=submit], [type=button], [role=button]).secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
:is(button, [type=submit], [type=button], [role=button]).secondary:is([aria-current], :hover, :active, :focus),
|
||||||
[type=reset]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
[type=reset]:is([aria-current], :hover, :active, :focus),
|
||||||
[type=file]::file-selector-button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus) {
|
||||||
--pico-background-color: var(--pico-secondary-hover-background);
|
--pico-background-color: var(--pico-secondary-hover-background);
|
||||||
--pico-border-color: var(--pico-secondary-hover-border);
|
--pico-border-color: var(--pico-secondary-hover-border);
|
||||||
--pico-color: var(--pico-secondary-inverse);
|
--pico-color: var(--pico-secondary-inverse);
|
||||||
@ -1160,7 +1160,7 @@ button:focus,
|
|||||||
--pico-border-color: var(--pico-contrast-border);
|
--pico-border-color: var(--pico-contrast-border);
|
||||||
--pico-color: var(--pico-contrast-inverse);
|
--pico-color: var(--pico-contrast-inverse);
|
||||||
}
|
}
|
||||||
:is(button, [type=submit], [type=button], [role=button]).contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
:is(button, [type=submit], [type=button], [role=button]).contrast:is([aria-current], :hover, :active, :focus) {
|
||||||
--pico-background-color: var(--pico-contrast-hover-background);
|
--pico-background-color: var(--pico-contrast-hover-background);
|
||||||
--pico-border-color: var(--pico-contrast-hover-border);
|
--pico-border-color: var(--pico-contrast-hover-border);
|
||||||
--pico-color: var(--pico-contrast-inverse);
|
--pico-color: var(--pico-contrast-inverse);
|
||||||
@ -1175,8 +1175,8 @@ button:focus,
|
|||||||
--pico-color: var(--pico-primary);
|
--pico-color: var(--pico-primary);
|
||||||
--pico-border-color: currentColor;
|
--pico-border-color: currentColor;
|
||||||
}
|
}
|
||||||
:is(button, [type=submit], [type=button], [role=button]).outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
:is(button, [type=submit], [type=button], [role=button]).outline:is([aria-current], :hover, :active, :focus),
|
||||||
[type=reset].outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
[type=reset].outline:is([aria-current], :hover, :active, :focus) {
|
||||||
--pico-background-color: transparent;
|
--pico-background-color: transparent;
|
||||||
--pico-color: var(--pico-primary-hover);
|
--pico-color: var(--pico-primary-hover);
|
||||||
}
|
}
|
||||||
@ -1186,15 +1186,15 @@ button:focus,
|
|||||||
--pico-color: var(--pico-secondary);
|
--pico-color: var(--pico-secondary);
|
||||||
--pico-border-color: currentColor;
|
--pico-border-color: currentColor;
|
||||||
}
|
}
|
||||||
:is(button, [type=submit], [type=button], [role=button]).outline.secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
:is(button, [type=submit], [type=button], [role=button]).outline.secondary:is([aria-current], :hover, :active, :focus),
|
||||||
[type=reset].outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
[type=reset].outline:is([aria-current], :hover, :active, :focus) {
|
||||||
--pico-color: var(--pico-secondary-hover);
|
--pico-color: var(--pico-secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
:is(button, [type=submit], [type=button], [role=button]).outline.contrast {
|
:is(button, [type=submit], [type=button], [role=button]).outline.contrast {
|
||||||
--pico-color: var(--pico-contrast);
|
--pico-color: var(--pico-contrast);
|
||||||
}
|
}
|
||||||
:is(button, [type=submit], [type=button], [role=button]).outline.contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
:is(button, [type=submit], [type=button], [role=button]).outline.contrast:is([aria-current], :hover, :active, :focus) {
|
||||||
--pico-color: var(--pico-contrast-hover);
|
--pico-color: var(--pico-contrast-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1691,7 +1691,7 @@ label:has([type=checkbox], [type=radio]) {
|
|||||||
}
|
}
|
||||||
[type=checkbox][role=switch]:before {
|
[type=checkbox][role=switch]:before {
|
||||||
display: block;
|
display: block;
|
||||||
width: calc(1.25em - (var(--pico-border-width) * 2));
|
width: calc(1.25em - var(--pico-border-width) * 2);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: var(--pico-color);
|
background-color: var(--pico-color);
|
||||||
@ -2170,7 +2170,7 @@ details.dropdown summary + ul li a {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current] {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li label {
|
details.dropdown summary + ul li label {
|
||||||
@ -2414,10 +2414,7 @@ dialog article > header,
|
|||||||
dialog article > footer {
|
dialog article > footer {
|
||||||
padding: calc(var(--pico-block-spacing-vertical) * 0.5) var(--pico-block-spacing-horizontal);
|
padding: calc(var(--pico-block-spacing-vertical) * 0.5) var(--pico-block-spacing-horizontal);
|
||||||
}
|
}
|
||||||
dialog article > header > * {
|
dialog article > header .close {
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
dialog article > header .close, dialog article > header a[rel=prev] {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-left: var(--pico-spacing);
|
margin-left: var(--pico-spacing);
|
||||||
float: right;
|
float: right;
|
||||||
@ -2433,7 +2430,7 @@ dialog article > footer button:not(:first-of-type),
|
|||||||
dialog article > footer [role=button]:not(:first-of-type) {
|
dialog article > footer [role=button]:not(:first-of-type) {
|
||||||
margin-left: calc(var(--pico-spacing) * 0.5);
|
margin-left: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
dialog article .close, dialog article a[rel=prev] {
|
dialog article .close {
|
||||||
display: block;
|
display: block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
@ -2447,7 +2444,7 @@ dialog article .close, dialog article a[rel=prev] {
|
|||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
dialog article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), dialog article a[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
dialog article .close:is([aria-current], :hover, :active, :focus) {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
dialog:not([open]), dialog[open=false] {
|
dialog:not([open]), dialog[open=false] {
|
||||||
@ -2561,22 +2558,16 @@ nav[aria-label=breadcrumb] {
|
|||||||
nav[aria-label=breadcrumb] ul li:not(:first-child) {
|
nav[aria-label=breadcrumb] ul li:not(:first-child) {
|
||||||
margin-inline-start: var(--pico-nav-link-spacing-horizontal);
|
margin-inline-start: var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav[aria-label=breadcrumb] ul li a {
|
|
||||||
margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 0;
|
|
||||||
margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) * -1);
|
|
||||||
}
|
|
||||||
nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
|
nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: calc(var(--pico-nav-link-spacing-horizontal) * 4);
|
width: calc(var(--pico-nav-link-spacing-horizontal) * 2);
|
||||||
margin: 0 calc(var(--pico-nav-link-spacing-horizontal) * -1);
|
margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) / 2);
|
||||||
content: var(--pico-nav-breadcrumb-divider);
|
content: var(--pico-nav-breadcrumb-divider);
|
||||||
color: var(--pico-muted-color);
|
color: var(--pico-muted-color);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]) {
|
nav[aria-label=breadcrumb] a[aria-current] {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
|||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.0.0-rc1 (https://picocss.com)
|
* Pico CSS ✨ v2.0.0-alpha1 (https://picocss.com)
|
||||||
* Copyright 2019-2023 - Licensed under MIT
|
* Copyright 2019-2023 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
@ -714,8 +714,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);
|
||||||
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);
|
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]:not([aria-current=false]), :hover, :active, :focus),
|
a:is([aria-current], :hover, :active, :focus),
|
||||||
[role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
[role=link]:is([aria-current], :hover, :active, :focus) {
|
||||||
--pico-color: var(--pico-primary-hover);
|
--pico-color: var(--pico-primary-hover);
|
||||||
--pico-underline: var(--pico-primary-hover-underline);
|
--pico-underline: var(--pico-primary-hover-underline);
|
||||||
--pico-text-decoration: underline;
|
--pico-text-decoration: underline;
|
||||||
@ -966,12 +966,12 @@ button,
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
button:is([aria-current], :hover, :active, :focus),
|
||||||
[type=submit]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
[type=submit]:is([aria-current], :hover, :active, :focus),
|
||||||
[type=reset]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
[type=reset]:is([aria-current], :hover, :active, :focus),
|
||||||
[type=button]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
[type=button]:is([aria-current], :hover, :active, :focus),
|
||||||
[type=file]::file-selector-button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus),
|
||||||
[role=button]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
[role=button]:is([aria-current], :hover, :active, :focus) {
|
||||||
--pico-background-color: var(--pico-primary-hover-background);
|
--pico-background-color: var(--pico-primary-hover-background);
|
||||||
--pico-border-color: var(--pico-primary-hover-border);
|
--pico-border-color: var(--pico-primary-hover-border);
|
||||||
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||||
@ -999,8 +999,8 @@ button:focus,
|
|||||||
--pico-color: var(--pico-secondary-inverse);
|
--pico-color: var(--pico-secondary-inverse);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
[type=reset]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
[type=reset]:is([aria-current], :hover, :active, :focus),
|
||||||
[type=file]::file-selector-button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus) {
|
||||||
--pico-background-color: var(--pico-secondary-hover);
|
--pico-background-color: var(--pico-secondary-hover);
|
||||||
--pico-border-color: var(--pico-secondary-hover);
|
--pico-border-color: var(--pico-secondary-hover);
|
||||||
}
|
}
|
||||||
@ -1502,7 +1502,7 @@ label:has([type=checkbox], [type=radio]) {
|
|||||||
}
|
}
|
||||||
[type=checkbox][role=switch]:before {
|
[type=checkbox][role=switch]:before {
|
||||||
display: block;
|
display: block;
|
||||||
width: calc(1.25em - (var(--pico-border-width) * 2));
|
width: calc(1.25em - var(--pico-border-width) * 2);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: var(--pico-color);
|
background-color: var(--pico-color);
|
||||||
@ -2068,10 +2068,7 @@ dialog article > header,
|
|||||||
dialog article > footer {
|
dialog article > footer {
|
||||||
padding: calc(var(--pico-block-spacing-vertical) * 0.5) var(--pico-block-spacing-horizontal);
|
padding: calc(var(--pico-block-spacing-vertical) * 0.5) var(--pico-block-spacing-horizontal);
|
||||||
}
|
}
|
||||||
dialog article > header > * {
|
dialog article > header .close {
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
dialog article > header a[rel=prev] {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-left: var(--pico-spacing);
|
margin-left: var(--pico-spacing);
|
||||||
float: right;
|
float: right;
|
||||||
@ -2087,23 +2084,6 @@ dialog article > footer button:not(:first-of-type),
|
|||||||
dialog article > footer [role=button]:not(:first-of-type) {
|
dialog article > footer [role=button]:not(:first-of-type) {
|
||||||
margin-left: calc(var(--pico-spacing) * 0.5);
|
margin-left: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
dialog article a[rel=prev] {
|
|
||||||
display: block;
|
|
||||||
width: 1rem;
|
|
||||||
height: 1rem;
|
|
||||||
margin-top: calc(var(--pico-spacing) * -1);
|
|
||||||
margin-bottom: var(--pico-spacing);
|
|
||||||
margin-left: auto;
|
|
||||||
background-image: var(--pico-icon-close);
|
|
||||||
background-position: center;
|
|
||||||
background-size: auto 1rem;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
opacity: 0.5;
|
|
||||||
transition: opacity var(--pico-transition);
|
|
||||||
}
|
|
||||||
dialog article a[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
dialog:not([open]), dialog[open=false] {
|
dialog:not([open]), dialog[open=false] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -2170,22 +2150,16 @@ nav[aria-label=breadcrumb] {
|
|||||||
nav[aria-label=breadcrumb] ul li:not(:first-child) {
|
nav[aria-label=breadcrumb] ul li:not(:first-child) {
|
||||||
margin-inline-start: var(--pico-nav-link-spacing-horizontal);
|
margin-inline-start: var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav[aria-label=breadcrumb] ul li a {
|
|
||||||
margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 0;
|
|
||||||
margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) * -1);
|
|
||||||
}
|
|
||||||
nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
|
nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: calc(var(--pico-nav-link-spacing-horizontal) * 4);
|
width: calc(var(--pico-nav-link-spacing-horizontal) * 2);
|
||||||
margin: 0 calc(var(--pico-nav-link-spacing-horizontal) * -1);
|
margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) / 2);
|
||||||
content: var(--pico-nav-breadcrumb-divider);
|
content: var(--pico-nav-breadcrumb-divider);
|
||||||
color: var(--pico-muted-color);
|
color: var(--pico-muted-color);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]) {
|
nav[aria-label=breadcrumb] a[aria-current] {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
4
css/pico.fluid.classless.min.css
vendored
4
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
4
css/pico.min.css
vendored
4
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
11
package.json
11
package.json
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@picocss/pico",
|
"name": "@picocss/pico",
|
||||||
"version": "2.0.0-rc1",
|
"version": "2.0.0-alpha1",
|
||||||
"description": "Minimal CSS Framework for semantic HTML",
|
"description": "Minimal CSS Framework for semantic HTML",
|
||||||
"author": "Lucas Larroche",
|
"author": "Lucas Larroche",
|
||||||
"main": "css/pico.min.css",
|
"main": "css/pico.min.css",
|
||||||
@ -34,7 +34,7 @@
|
|||||||
"build": "run-s start lint \"build:*\" done --silent",
|
"build": "run-s start lint \"build:*\" done --silent",
|
||||||
"dev": "nodemon -q --watch scss/ --ext scss --exec 'run-s build'",
|
"dev": "nodemon -q --watch scss/ --ext scss --exec 'run-s build'",
|
||||||
"lint": "run-s \"lint:*\" --silent",
|
"lint": "run-s \"lint:*\" --silent",
|
||||||
"lint:prettier": "prettier --write --log-level silent 'scss/**/*.scss'",
|
"lint:prettier": "prettier --write --loglevel silent 'scss/**/*.scss'",
|
||||||
"lint:sort-scss": "postcss --config scss ./scss/**/*.scss --replace",
|
"lint:sort-scss": "postcss --config scss ./scss/**/*.scss --replace",
|
||||||
"build:css": "sass --load-path=node_modules/@picocss/colors/scss --style expanded --source-map --embed-sources --no-error-css scss/:css/",
|
"build:css": "sass --load-path=node_modules/@picocss/colors/scss --style expanded --source-map --embed-sources --no-error-css scss/:css/",
|
||||||
"build:autoprefix": "postcss --config css --replace css/*.css !css/*.min.css",
|
"build:autoprefix": "postcss --config css --replace css/*.css !css/*.min.css",
|
||||||
@ -48,7 +48,7 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "^10.4.16",
|
"autoprefixer": "^10.4.16",
|
||||||
"caniuse-lite": "1.0.30001572",
|
"caniuse-lite": "1.0.30001571",
|
||||||
"clean-css-cli": "^5.6.3",
|
"clean-css-cli": "^5.6.3",
|
||||||
"css-declaration-sorter": "^7.1.1",
|
"css-declaration-sorter": "^7.1.1",
|
||||||
"nodemon": "^3.0.2",
|
"nodemon": "^3.0.2",
|
||||||
@ -63,6 +63,9 @@
|
|||||||
"node": ">=18.19.0"
|
"node": ">=18.19.0"
|
||||||
},
|
},
|
||||||
"browserslist": [
|
"browserslist": [
|
||||||
"defaults"
|
">= 0.5%",
|
||||||
|
"last 2 major versions",
|
||||||
|
"not dead",
|
||||||
|
"not ie > 0"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
// Prefix for CSS variables
|
// Prefix for CSS variables
|
||||||
$css-var-prefix: "--pico-" !default; // Must start with "--"
|
$css-var-prefix: "pico-" !default;
|
||||||
|
|
||||||
// Define the root element used to target <header>, <main>, <footer>
|
// Define the root element used to target <header>, <main>, <footer>
|
||||||
// with $enable-semantic-container and $enable-responsive-spacings
|
// with $enable-semantic-container and $enable-responsive-spacings
|
||||||
@ -137,3 +137,6 @@ $modules: map.merge(
|
|||||||
),
|
),
|
||||||
$modules
|
$modules
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Shortcut for CSS vars prefix
|
||||||
|
$✨: --#{$css-var-prefix};
|
||||||
|
|||||||
@ -12,13 +12,13 @@ $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
|
|||||||
@if map.get(settings.$utilities, "color-for-background-colors") {
|
@if map.get(settings.$utilities, "color-for-background-colors") {
|
||||||
@if utils.foreground-brightness($background-color) == "light" {
|
@if utils.foreground-brightness($background-color) == "light" {
|
||||||
@if $enable-css-vars {
|
@if $enable-css-vars {
|
||||||
color: var(#{$css-var-color-prefix}-light);
|
color: var(--#{$css-var-color-prefix}-light);
|
||||||
} @else {
|
} @else {
|
||||||
color: utils.display-color(map.get(settings.$palette, "light-color"));
|
color: utils.display-color(map.get(settings.$palette, "light-color"));
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
@if $enable-css-vars {
|
@if $enable-css-vars {
|
||||||
color: var(#{$css-var-color-prefix}-dark);
|
color: var(--#{$css-var-color-prefix}-dark);
|
||||||
} @else {
|
} @else {
|
||||||
color: utils.display-color(map.get(settings.$palette, "dark-color"));
|
color: utils.display-color(map.get(settings.$palette, "dark-color"));
|
||||||
}
|
}
|
||||||
@ -40,7 +40,7 @@ $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
|
|||||||
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
|
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
|
||||||
$value: $color-value;
|
$value: $color-value;
|
||||||
@if $enable-css-vars {
|
@if $enable-css-vars {
|
||||||
$value: var(#{$css-var-family-name});
|
$value: var(--#{$css-var-family-name});
|
||||||
} @else {
|
} @else {
|
||||||
$value: utils.display-color($color-value);
|
$value: utils.display-color($color-value);
|
||||||
}
|
}
|
||||||
@ -57,7 +57,7 @@ $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
|
|||||||
{
|
{
|
||||||
$value: $color-value;
|
$value: $color-value;
|
||||||
@if $enable-css-vars {
|
@if $enable-css-vars {
|
||||||
$value: var(#{$css-var-family-name}-#{$shade});
|
$value: var(--#{$css-var-family-name}-#{$shade});
|
||||||
} @else {
|
} @else {
|
||||||
$value: utils.display-color($color-value);
|
$value: utils.display-color($color-value);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -20,7 +20,7 @@
|
|||||||
// Main color
|
// Main color
|
||||||
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
|
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
|
||||||
@if $enable-css-vars {
|
@if $enable-css-vars {
|
||||||
$color-value: var(#{$css-var-family-name});
|
$color-value: var(--#{$css-var-family-name});
|
||||||
} @else {
|
} @else {
|
||||||
$color-value: utils.display-color($color-value);
|
$color-value: utils.display-color($color-value);
|
||||||
}
|
}
|
||||||
@ -35,7 +35,7 @@
|
|||||||
map.get(settings.$palette, "enable-shades")
|
map.get(settings.$palette, "enable-shades")
|
||||||
{
|
{
|
||||||
@if $enable-css-vars {
|
@if $enable-css-vars {
|
||||||
$color-value: var(#{$css-var-family-name}-#{$shade});
|
$color-value: var(--#{$css-var-family-name}-#{$shade});
|
||||||
} @else {
|
} @else {
|
||||||
$color-value: utils.display-color($color-value);
|
$color-value: utils.display-color($color-value);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -19,7 +19,7 @@
|
|||||||
@each $shade, $color-value in $colors {
|
@each $shade, $color-value in $colors {
|
||||||
// Main color
|
// Main color
|
||||||
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
|
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
|
||||||
#{$css-var-family-name}: #{utils.display-color($color-value)};
|
--#{$css-var-family-name}: #{utils.display-color($color-value)};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Shades
|
// Shades
|
||||||
@ -27,7 +27,7 @@
|
|||||||
index(map.get(settings.$palette, "shades"), $shade) and
|
index(map.get(settings.$palette, "shades"), $shade) and
|
||||||
map.get(settings.$palette, "enable-shades")
|
map.get(settings.$palette, "enable-shades")
|
||||||
{
|
{
|
||||||
#{$css-var-family-name}-#{$shade}: #{utils.display-color($color-value)};
|
--#{$css-var-family-name}-#{$shade}: #{utils.display-color($color-value)};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -35,16 +35,16 @@
|
|||||||
|
|
||||||
// Black & white
|
// Black & white
|
||||||
@if map.get(settings.$palette, "enable-black-and-white") {
|
@if map.get(settings.$palette, "enable-black-and-white") {
|
||||||
#{$css-var-color-prefix}-black: #{utils.display-color(colors.$black)};
|
--#{$css-var-color-prefix}-black: #{utils.display-color(colors.$black)};
|
||||||
#{$css-var-color-prefix}-white: #{utils.display-color(colors.$white)};
|
--#{$css-var-color-prefix}-white: #{utils.display-color(colors.$white)};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Text color variables
|
// Text color variables
|
||||||
@if map.get(settings.$utilities, "color-for-background-colors") {
|
@if map.get(settings.$utilities, "color-for-background-colors") {
|
||||||
#{$css-var-color-prefix}-light: #{utils.display-color(
|
--#{$css-var-color-prefix}-light: #{utils.display-color(
|
||||||
map.get(settings.$palette, "light-color")
|
map.get(settings.$palette, "light-color")
|
||||||
)};
|
)};
|
||||||
#{$css-var-color-prefix}-dark: #{utils.display-color(
|
--#{$css-var-color-prefix}-dark: #{utils.display-color(
|
||||||
map.get(settings.$palette, "dark-color")
|
map.get(settings.$palette, "dark-color")
|
||||||
)};
|
)};
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,8 +2,8 @@
|
|||||||
@use "../../settings" as pico-settings;
|
@use "../../settings" as pico-settings;
|
||||||
|
|
||||||
// Prefix for CSS variables
|
// Prefix for CSS variables
|
||||||
$css-var-prefix: "--pico-" !default; // Must start with "--"
|
$css-var-prefix: pico-settings.$css-var-prefix !default;
|
||||||
$css-class-prefix: "pico-" !default;
|
$css-class-prefix: pico-settings.$css-var-prefix !default;
|
||||||
|
|
||||||
// Palette
|
// Palette
|
||||||
$palette: () !default;
|
$palette: () !default;
|
||||||
|
|||||||
@ -8,7 +8,7 @@
|
|||||||
|
|
||||||
details {
|
details {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
margin-bottom: var(#{$✨}spacing);
|
||||||
|
|
||||||
summary {
|
summary {
|
||||||
line-height: 1rem;
|
line-height: 1rem;
|
||||||
@ -16,11 +16,11 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:not([role]) {
|
&:not([role]) {
|
||||||
color: var(#{$css-var-prefix}accordion-close-summary-color);
|
color: var(#{$✨}accordion-close-summary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition: color var(#{$css-var-prefix}transition);
|
transition: color var(#{$✨}transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reset marker
|
// Reset marker
|
||||||
@ -41,17 +41,17 @@
|
|||||||
display: block;
|
display: block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
margin-inline-start: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
|
margin-inline-start: calc(var(#{$✨}spacing, 1rem) * 0.5);
|
||||||
float: right;
|
float: right;
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
background-image: var(#{$css-var-prefix}icon-chevron);
|
background-image: var(#{$✨}icon-chevron);
|
||||||
background-position: right center;
|
background-position: right center;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
content: "";
|
content: "";
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition: transform var(#{$css-var-prefix}transition);
|
transition: transform var(#{$✨}transition);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -59,15 +59,15 @@
|
|||||||
outline: none;
|
outline: none;
|
||||||
|
|
||||||
&:not([role]) {
|
&:not([role]) {
|
||||||
color: var(#{$css-var-prefix}accordion-active-summary-color);
|
color: var(#{$✨}accordion-active-summary-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
&:not([role]) {
|
&:not([role]) {
|
||||||
outline: var(#{$css-var-prefix}outline-width) solid var(#{$css-var-prefix}primary-focus);
|
outline: var(#{$✨}outline-width) solid var(#{$✨}primary-focus);
|
||||||
outline-offset: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
|
outline-offset: calc(var(#{$✨}spacing, 1rem) * 0.5);
|
||||||
color: var(#{$css-var-prefix}primary);
|
color: var(#{$✨}primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -78,7 +78,7 @@
|
|||||||
|
|
||||||
// Marker
|
// Marker
|
||||||
&::after {
|
&::after {
|
||||||
height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
|
height: calc(1rem * var(#{$✨}line-height, 1.5));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -86,11 +86,11 @@
|
|||||||
// Open
|
// Open
|
||||||
&[open] {
|
&[open] {
|
||||||
> summary {
|
> summary {
|
||||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
margin-bottom: var(#{$✨}spacing);
|
||||||
|
|
||||||
&:not([role]) {
|
&:not([role]) {
|
||||||
&:not(:focus) {
|
&:not(:focus) {
|
||||||
color: var(#{$css-var-prefix}accordion-open-summary-color);
|
color: var(#{$✨}accordion-open-summary-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -7,40 +7,34 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
article {
|
article {
|
||||||
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
|
margin-bottom: var(#{$✨}block-spacing-vertical);
|
||||||
padding: var(#{$css-var-prefix}block-spacing-vertical)
|
padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
|
||||||
var(#{$css-var-prefix}block-spacing-horizontal);
|
border-radius: var(#{$✨}border-radius);
|
||||||
border-radius: var(#{$css-var-prefix}border-radius);
|
background: var(#{$✨}card-background-color);
|
||||||
background: var(#{$css-var-prefix}card-background-color);
|
box-shadow: var(#{$✨}card-box-shadow);
|
||||||
box-shadow: var(#{$css-var-prefix}card-box-shadow);
|
|
||||||
|
|
||||||
> header,
|
> header,
|
||||||
> footer {
|
> footer {
|
||||||
margin-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
|
margin-right: calc(var(#{$✨}block-spacing-horizontal) * -1);
|
||||||
margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
|
margin-left: calc(var(#{$✨}block-spacing-horizontal) * -1);
|
||||||
padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66)
|
padding: calc(var(#{$✨}block-spacing-vertical) * 0.66) var(#{$✨}block-spacing-horizontal);
|
||||||
var(#{$css-var-prefix}block-spacing-horizontal);
|
background-color: var(#{$✨}card-sectioning-background-color);
|
||||||
background-color: var(#{$css-var-prefix}card-sectioning-background-color);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
> header {
|
> header {
|
||||||
margin-top: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
|
margin-top: calc(var(#{$✨}block-spacing-vertical) * -1);
|
||||||
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
|
margin-bottom: var(#{$✨}block-spacing-vertical);
|
||||||
border-bottom: var(#{$css-var-prefix}border-width)
|
border-bottom: var(#{$✨}border-width) solid var(#{$✨}card-border-color);
|
||||||
solid
|
border-top-right-radius: var(#{$✨}border-radius);
|
||||||
var(#{$css-var-prefix}card-border-color);
|
border-top-left-radius: var(#{$✨}border-radius);
|
||||||
border-top-right-radius: var(#{$css-var-prefix}border-radius);
|
|
||||||
border-top-left-radius: var(#{$css-var-prefix}border-radius);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
> footer {
|
> footer {
|
||||||
margin-top: var(#{$css-var-prefix}block-spacing-vertical);
|
margin-top: var(#{$✨}block-spacing-vertical);
|
||||||
margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
|
margin-bottom: calc(var(#{$✨}block-spacing-vertical) * -1);
|
||||||
border-top: var(#{$css-var-prefix}border-width)
|
border-top: var(#{$✨}border-width) solid var(#{$✨}card-border-color);
|
||||||
solid
|
border-bottom-right-radius: var(#{$✨}border-radius);
|
||||||
var(#{$css-var-prefix}card-border-color);
|
border-bottom-left-radius: var(#{$✨}border-radius);
|
||||||
border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
|
|
||||||
border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -20,13 +20,13 @@
|
|||||||
&::after {
|
&::after {
|
||||||
display: block;
|
display: block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
|
height: calc(1rem * var(#{$✨}line-height, 1.5));
|
||||||
margin-inline-start: 0.25rem;
|
margin-inline-start: 0.25rem;
|
||||||
float: right;
|
float: right;
|
||||||
// TODO: find out why we need this magic number (0.2 rem)
|
// TODO: find out why we need this magic number (0.2 rem)
|
||||||
// for the marker to be aligned with the regular select
|
// for the marker to be aligned with the regular select
|
||||||
transform: rotate(0deg) translateX(0.2rem);
|
transform: rotate(0deg) translateX(0.2rem);
|
||||||
background-image: var(#{$css-var-prefix}icon-chevron);
|
background-image: var(#{$✨}icon-chevron);
|
||||||
background-position: right center;
|
background-position: right center;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
@ -49,44 +49,37 @@
|
|||||||
details.dropdown summary:not([role]) {
|
details.dropdown summary:not([role]) {
|
||||||
height: calc(
|
height: calc(
|
||||||
1rem *
|
1rem *
|
||||||
var(#{$css-var-prefix}line-height) +
|
var(#{$✨}line-height) +
|
||||||
var(#{$css-var-prefix}form-element-spacing-vertical) *
|
var(#{$✨}form-element-spacing-vertical) *
|
||||||
2 +
|
2 +
|
||||||
var(#{$css-var-prefix}border-width) *
|
var(#{$✨}border-width) *
|
||||||
2
|
2
|
||||||
);
|
);
|
||||||
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
|
padding: var(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal);
|
||||||
var(#{$css-var-prefix}form-element-spacing-horizontal);
|
border: var(#{$✨}border-width) solid var(#{$✨}form-element-border-color);
|
||||||
border: var(#{$css-var-prefix}border-width)
|
border-radius: var(#{$✨}border-radius);
|
||||||
solid
|
background-color: var(#{$✨}form-element-background-color);
|
||||||
var(#{$css-var-prefix}form-element-border-color);
|
color: var(#{$✨}form-element-placeholder-color);
|
||||||
border-radius: var(#{$css-var-prefix}border-radius);
|
|
||||||
background-color: var(#{$css-var-prefix}form-element-background-color);
|
|
||||||
color: var(#{$css-var-prefix}form-element-placeholder-color);
|
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition:
|
||||||
background-color var(#{$css-var-prefix}transition),
|
background-color var(#{$✨}transition),
|
||||||
border-color var(#{$css-var-prefix}transition),
|
border-color var(#{$✨}transition),
|
||||||
color var(#{$css-var-prefix}transition),
|
color var(#{$✨}transition),
|
||||||
box-shadow var(#{$css-var-prefix}transition);
|
box-shadow var(#{$✨}transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: var(#{$css-var-prefix}form-element-active-border-color);
|
border-color: var(#{$✨}form-element-active-border-color);
|
||||||
background-color: var(#{$css-var-prefix}form-element-active-background-color);
|
background-color: var(#{$✨}form-element-active-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: 0
|
box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-focus-color);
|
||||||
0
|
|
||||||
0
|
|
||||||
var(#{$css-var-prefix}outline-width)
|
|
||||||
var(#{$css-var-prefix}form-element-focus-color);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reset focus visible from accordion component
|
// Reset focus visible from accordion component
|
||||||
@ -96,27 +89,15 @@
|
|||||||
|
|
||||||
// Aria-invalid
|
// Aria-invalid
|
||||||
&[aria-invalid="false"] {
|
&[aria-invalid="false"] {
|
||||||
#{$css-var-prefix}form-element-border-color: var(
|
#{$✨}form-element-border-color: var(#{$✨}form-element-valid-border-color);
|
||||||
#{$css-var-prefix}form-element-valid-border-color
|
#{$✨}form-element-active-border-color: var(#{$✨}form-element-valid-focus-color);
|
||||||
);
|
#{$✨}form-element-focus-color: var(#{$✨}form-element-valid-focus-color);
|
||||||
#{$css-var-prefix}form-element-active-border-color: var(
|
|
||||||
#{$css-var-prefix}form-element-valid-focus-color
|
|
||||||
);
|
|
||||||
#{$css-var-prefix}form-element-focus-color: var(
|
|
||||||
#{$css-var-prefix}form-element-valid-focus-color
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&[aria-invalid="true"] {
|
&[aria-invalid="true"] {
|
||||||
#{$css-var-prefix}form-element-border-color: var(
|
#{$✨}form-element-border-color: var(#{$✨}form-element-invalid-border-color);
|
||||||
#{$css-var-prefix}form-element-invalid-border-color
|
#{$✨}form-element-active-border-color: var(#{$✨}form-element-invalid-focus-color);
|
||||||
);
|
#{$✨}form-element-focus-color: var(#{$✨}form-element-invalid-focus-color);
|
||||||
#{$css-var-prefix}form-element-active-border-color: var(
|
|
||||||
#{$css-var-prefix}form-element-invalid-focus-color
|
|
||||||
);
|
|
||||||
#{$css-var-prefix}form-element-focus-color: var(
|
|
||||||
#{$css-var-prefix}form-element-invalid-focus-color
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -124,22 +105,16 @@
|
|||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
nav details.dropdown {
|
nav details.dropdown {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(#{$✨}nav-element-spacing-vertical) * -1) 0;
|
||||||
|
|
||||||
summary:not([role]) {
|
summary:not([role]) {
|
||||||
// Override height
|
// Override height
|
||||||
height: calc(
|
height: calc((1rem * var(#{$✨}line-height)) + (var(#{$✨}nav-link-spacing-vertical) * 2));
|
||||||
(1rem * var(#{$css-var-prefix}line-height)) +
|
padding: calc(var(#{$✨}nav-link-spacing-vertical) - (var(#{$✨}border-width) * 2))
|
||||||
(var(#{$css-var-prefix}nav-link-spacing-vertical) * 2)
|
var(#{$✨}nav-link-spacing-horizontal);
|
||||||
);
|
|
||||||
padding: calc(
|
|
||||||
var(#{$css-var-prefix}nav-link-spacing-vertical) -
|
|
||||||
(var(#{$css-var-prefix}border-width) * 2)
|
|
||||||
)
|
|
||||||
var(#{$css-var-prefix}nav-link-spacing-horizontal);
|
|
||||||
|
|
||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
box-shadow: 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
|
box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}primary-focus);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -155,19 +130,19 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: fit-content;
|
min-width: fit-content;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-top: var(#{$css-var-prefix}outline-width);
|
margin-top: var(#{$✨}outline-width);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}dropdown-border-color);
|
border: var(#{$✨}border-width) solid var(#{$✨}dropdown-border-color);
|
||||||
border-radius: var(#{$css-var-prefix}border-radius);
|
border-radius: var(#{$✨}border-radius);
|
||||||
background-color: var(#{$css-var-prefix}dropdown-background-color);
|
background-color: var(#{$✨}dropdown-background-color);
|
||||||
box-shadow: var(#{$css-var-prefix}dropdown-box-shadow);
|
box-shadow: var(#{$✨}dropdown-box-shadow);
|
||||||
color: var(#{$css-var-prefix}dropdown-color);
|
color: var(#{$✨}dropdown-color);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition:
|
||||||
opacity var(#{$css-var-prefix}transition),
|
opacity var(--pico-transition),
|
||||||
transform 0s ease-in-out 1s;
|
transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -179,27 +154,27 @@
|
|||||||
li {
|
li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
|
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
|
||||||
var(#{$css-var-prefix}form-element-spacing-horizontal);
|
var(#{$✨}form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
margin-top: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(#{$✨}form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-of-type {
|
&:last-of-type {
|
||||||
margin-bottom: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(#{$✨}form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * -0.5)
|
margin: calc(var(#{$✨}form-element-spacing-vertical) * -0.5)
|
||||||
calc(var(#{$css-var-prefix}form-element-spacing-horizontal) * -1);
|
calc(var(#{$✨}form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
|
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
|
||||||
var(#{$css-var-prefix}form-element-spacing-horizontal);
|
var(#{$✨}form-element-spacing-horizontal);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
color: var(#{$css-var-prefix}dropdown-color);
|
color: var(#{$✨}dropdown-color);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
@ -207,8 +182,8 @@
|
|||||||
&:focus,
|
&:focus,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus-visible,
|
&:focus-visible,
|
||||||
&[aria-current]:not([aria-current="false"]) {
|
&[aria-current] {
|
||||||
background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
|
background-color: var(#{$✨}dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -218,7 +193,7 @@
|
|||||||
|
|
||||||
// Not working in Firefox, which doesn't support the `:has()` pseudo-class
|
// Not working in Firefox, which doesn't support the `:has()` pseudo-class
|
||||||
&:has(label):hover {
|
&:has(label):hover {
|
||||||
background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
|
background-color: var(#{$✨}dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -240,7 +215,7 @@
|
|||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition:
|
||||||
opacity var(#{$css-var-prefix}transition),
|
opacity var(--pico-transition),
|
||||||
transform 0s ease-in-out 0s;
|
transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -265,6 +240,6 @@
|
|||||||
// Label
|
// Label
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
label > details.dropdown {
|
label > details.dropdown {
|
||||||
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
|
margin-top: calc(var(#{$✨}spacing) * 0.25);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -31,11 +31,11 @@
|
|||||||
[role="group"] {
|
[role="group"] {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
margin-bottom: var(#{$✨}spacing);
|
||||||
border-radius: var(#{$css-var-prefix}border-radius);
|
border-radius: var(#{$✨}border-radius);
|
||||||
box-shadow: var(#{$css-var-prefix}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
box-shadow: var(#{$✨}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
transition: box-shadow var(#{$css-var-prefix}transition);
|
transition: box-shadow var(#{$✨}transition);
|
||||||
|
|
||||||
> *,
|
> *,
|
||||||
input:not([type="checkbox"], [type="radio"]),
|
input:not([type="checkbox"], [type="radio"]),
|
||||||
@ -68,7 +68,7 @@
|
|||||||
input:not([type="checkbox"], [type="radio"]),
|
input:not([type="checkbox"], [type="radio"]),
|
||||||
select {
|
select {
|
||||||
&:not(:first-child) {
|
&:not(:first-child) {
|
||||||
margin-left: calc(var(#{$css-var-prefix}border-width) * -1);
|
margin-left: calc(var(#{$✨}border-width) * -1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -83,9 +83,7 @@
|
|||||||
@supports selector(:has(*)) {
|
@supports selector(:has(*)) {
|
||||||
// Group box shadow when a button is focused
|
// Group box shadow when a button is focused
|
||||||
&:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
|
&:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
|
||||||
#{$css-var-prefix}group-box-shadow: var(
|
#{$✨}group-box-shadow: var(#{$✨}group-box-shadow-focus-with-button);
|
||||||
#{$css-var-prefix}group-box-shadow-focus-with-button
|
|
||||||
);
|
|
||||||
|
|
||||||
input:not([type="checkbox"], [type="radio"]),
|
input:not([type="checkbox"], [type="radio"]),
|
||||||
select {
|
select {
|
||||||
@ -95,19 +93,16 @@
|
|||||||
|
|
||||||
// Group box shadow when an input is focused
|
// Group box shadow when an input is focused
|
||||||
&:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
|
&:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
|
||||||
#{$css-var-prefix}group-box-shadow: var(
|
#{$✨}group-box-shadow: var(#{$✨}group-box-shadow-focus-with-input);
|
||||||
#{$css-var-prefix}group-box-shadow-focus-with-input
|
|
||||||
);
|
|
||||||
|
|
||||||
// Adapt box shadow for buttons
|
// Adapt box shadow for buttons
|
||||||
button,
|
button,
|
||||||
[type="submit"],
|
[type="submit"],
|
||||||
[type="button"],
|
[type="button"],
|
||||||
[role="button"] {
|
[role="button"] {
|
||||||
#{$css-var-prefix}button-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
|
#{$✨}button-box-shadow: 0 0 0 var(#{$✨}border-width) var(#{$✨}primary-border);
|
||||||
var(#{$css-var-prefix}primary-border);
|
#{$✨}button-hover-box-shadow: 0 0 0 var(#{$✨}border-width)
|
||||||
#{$css-var-prefix}button-hover-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
|
var(#{$✨}primary-hover-border);
|
||||||
var(#{$css-var-prefix}primary-hover-border);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -14,7 +14,7 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1em;
|
width: 1em;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
background-image: var(#{$css-var-prefix}icon-loading);
|
background-image: var(#{$✨}icon-loading);
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
content: "";
|
content: "";
|
||||||
@ -23,7 +23,7 @@
|
|||||||
|
|
||||||
&:not(:empty) {
|
&:not(:empty) {
|
||||||
&::before {
|
&::before {
|
||||||
margin-inline-end: calc(var(#{$css-var-prefix}spacing) * 0.5);
|
margin-inline-end: calc(var(#{$✨}spacing) * 0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -7,7 +7,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
#{$css-var-prefix}scrollbar-width: 0px;
|
#{$✨}scrollbar-width: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
dialog {
|
dialog {
|
||||||
@ -25,16 +25,15 @@
|
|||||||
height: inherit;
|
height: inherit;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
border: 0;
|
border: 0;
|
||||||
backdrop-filter: var(#{$css-var-prefix}modal-overlay-backdrop-filter);
|
backdrop-filter: var(#{$✨}modal-overlay-backdrop-filter);
|
||||||
background-color: var(#{$css-var-prefix}modal-overlay-background-color);
|
background-color: var(#{$✨}modal-overlay-background-color);
|
||||||
color: var(#{$css-var-prefix}color);
|
color: var(#{$✨}color);
|
||||||
|
|
||||||
// Content
|
// Content
|
||||||
article {
|
article {
|
||||||
$close-selector: if($enable-classes, ".close, a[rel='prev']", "a[rel='prev']");
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: calc(100vh - var(#{$css-var-prefix}spacing) * 2);
|
max-height: calc(100vh - var(#{$✨}spacing) * 2);
|
||||||
margin: var(#{$css-var-prefix}spacing);
|
margin: var(#{$✨}spacing);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
@if map.get($breakpoints, "sm") {
|
@if map.get($breakpoints, "sm") {
|
||||||
@ -51,18 +50,13 @@
|
|||||||
|
|
||||||
> header,
|
> header,
|
||||||
> footer {
|
> footer {
|
||||||
padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.5)
|
padding: calc(var(#{$✨}block-spacing-vertical) * 0.5) var(#{$✨}block-spacing-horizontal);
|
||||||
var(#{$css-var-prefix}block-spacing-horizontal);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
> header {
|
> header {
|
||||||
> * {
|
.close {
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#{$close-selector} {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-left: var(#{$css-var-prefix}spacing);
|
margin-left: var(#{$✨}spacing);
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -75,34 +69,36 @@
|
|||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
||||||
&:not(:first-of-type) {
|
&:not(:first-of-type) {
|
||||||
margin-left: calc(var(#{$css-var-prefix}spacing) * 0.5);
|
margin-left: calc(var(#{$✨}spacing) * 0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Close icon
|
// Close icon
|
||||||
#{$close-selector} {
|
@if $enable-classes {
|
||||||
|
.close {
|
||||||
display: block;
|
display: block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
margin-top: calc(var(#{$css-var-prefix}spacing) * -1);
|
margin-top: calc(var(#{$✨}spacing) * -1);
|
||||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
margin-bottom: var(#{$✨}spacing);
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
background-image: var(#{$css-var-prefix}icon-close);
|
background-image: var(#{$✨}icon-close);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: auto 1rem;
|
background-size: auto 1rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition: opacity var(#{$css-var-prefix}transition);
|
transition: opacity var(#{$✨}transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Closed state
|
// Closed state
|
||||||
&:not([open]),
|
&:not([open]),
|
||||||
@ -114,7 +110,7 @@
|
|||||||
// Utilities
|
// Utilities
|
||||||
@if $enable-classes {
|
@if $enable-classes {
|
||||||
.modal-is-open {
|
.modal-is-open {
|
||||||
padding-right: var(#{$css-var-prefix}scrollbar-width, 0px);
|
padding-right: var(#{$✨}scrollbar-width, 0px);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
|
|||||||
@ -34,26 +34,24 @@
|
|||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
margin-left: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
|
margin-left: calc(var(#{$✨}nav-element-spacing-horizontal) * -1);
|
||||||
}
|
}
|
||||||
&:last-of-type {
|
&:last-of-type {
|
||||||
margin-right: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
|
margin-right: calc(var(#{$✨}nav-element-spacing-horizontal) * -1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: var(#{$css-var-prefix}nav-element-spacing-vertical)
|
padding: var(#{$✨}nav-element-spacing-vertical) var(#{$✨}nav-element-spacing-horizontal);
|
||||||
var(#{$css-var-prefix}nav-element-spacing-horizontal);
|
|
||||||
|
|
||||||
:where(a, [role="link"]) {
|
:where(a, [role="link"]) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1)
|
margin: calc(var(#{$✨}nav-link-spacing-vertical) * -1)
|
||||||
calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
|
calc(var(#{$✨}nav-link-spacing-horizontal) * -1);
|
||||||
padding: var(#{$css-var-prefix}nav-link-spacing-vertical)
|
padding: var(#{$✨}nav-link-spacing-vertical) var(#{$✨}nav-link-spacing-horizontal);
|
||||||
var(#{$css-var-prefix}nav-link-spacing-horizontal);
|
border-radius: var(#{$✨}border-radius);
|
||||||
border-radius: var(#{$css-var-prefix}border-radius);
|
|
||||||
|
|
||||||
&:not(:hover) {
|
&:not(:hover) {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@ -69,11 +67,8 @@
|
|||||||
margin-right: inherit;
|
margin-right: inherit;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
margin-left: inherit;
|
margin-left: inherit;
|
||||||
padding: calc(
|
padding: calc(var(#{$✨}nav-link-spacing-vertical) - (var(#{$✨}border-width) * 2))
|
||||||
var(#{$css-var-prefix}nav-link-spacing-vertical) -
|
var(#{$✨}nav-link-spacing-horizontal);
|
||||||
(var(#{$css-var-prefix}border-width) * 2)
|
|
||||||
)
|
|
||||||
var(#{$css-var-prefix}nav-link-spacing-horizontal);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -84,31 +79,24 @@
|
|||||||
|
|
||||||
& ul li {
|
& ul li {
|
||||||
&:not(:first-child) {
|
&:not(:first-child) {
|
||||||
margin-inline-start: var(#{$css-var-prefix}nav-link-spacing-horizontal);
|
margin-inline-start: var(#{$✨}nav-link-spacing-horizontal);
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1) 0;
|
|
||||||
margin-inline-start: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
&::after {
|
&::after {
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 4);
|
width: calc(var(#{$✨}nav-link-spacing-horizontal) * 2);
|
||||||
margin: 0 calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
|
margin-inline-start: calc(var(#{$✨}nav-link-spacing-horizontal) / 2);
|
||||||
content: var(#{$css-var-prefix}nav-breadcrumb-divider);
|
content: var(#{$✨}nav-breadcrumb-divider);
|
||||||
color: var(#{$css-var-prefix}muted-color);
|
color: var(#{$✨}muted-color);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Minimal support for aria-current
|
// Minimal support for aria-current
|
||||||
& a[aria-current]:not([aria-current="false"]) {
|
& a[aria-current] {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@ -127,8 +115,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
padding: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * 0.5)
|
padding: calc(var(#{$✨}nav-element-spacing-vertical) * 0.5)
|
||||||
var(#{$css-var-prefix}nav-element-spacing-horizontal);
|
var(#{$✨}nav-element-spacing-horizontal);
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
|
|||||||
@ -31,42 +31,42 @@
|
|||||||
appearance: none;
|
appearance: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 0.5rem;
|
height: 0.5rem;
|
||||||
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
|
margin-bottom: calc(var(#{$✨}spacing) * 0.5);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
// Remove Firefox and Opera border
|
// Remove Firefox and Opera border
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: var(#{$css-var-prefix}border-radius);
|
border-radius: var(#{$✨}border-radius);
|
||||||
background-color: var(#{$css-var-prefix}progress-background-color);
|
background-color: var(#{$✨}progress-background-color);
|
||||||
|
|
||||||
// IE10 uses `color` to set the bar background-color
|
// IE10 uses `color` to set the bar background-color
|
||||||
color: var(#{$css-var-prefix}progress-color);
|
color: var(#{$✨}progress-color);
|
||||||
|
|
||||||
&::-webkit-progress-bar {
|
&::-webkit-progress-bar {
|
||||||
border-radius: var(#{$css-var-prefix}border-radius);
|
border-radius: var(#{$✨}border-radius);
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[value]::-webkit-progress-value {
|
&[value]::-webkit-progress-value {
|
||||||
background-color: var(#{$css-var-prefix}progress-color);
|
background-color: var(#{$✨}progress-color);
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition: inline-size var(#{$css-var-prefix}transition);
|
transition: inline-size var(#{$✨}transition);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-moz-progress-bar {
|
&::-moz-progress-bar {
|
||||||
background-color: var(#{$css-var-prefix}progress-color);
|
background-color: var(#{$✨}progress-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Indeterminate state
|
// Indeterminate state
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
&:indeterminate {
|
&:indeterminate {
|
||||||
background: var(#{$css-var-prefix}progress-background-color)
|
background: var(#{$✨}progress-background-color)
|
||||||
linear-gradient(
|
linear-gradient(
|
||||||
to right,
|
to right,
|
||||||
var(#{$css-var-prefix}progress-color) 30%,
|
var(#{$✨}progress-color) 30%,
|
||||||
var(#{$css-var-prefix}progress-background-color) 30%
|
var(#{$✨}progress-background-color) 30%
|
||||||
)
|
)
|
||||||
top left / 150% 150% no-repeat;
|
top left / 150% 150% no-repeat;
|
||||||
animation: progress-indeterminate 1s linear infinite;
|
animation: progress-indeterminate 1s linear infinite;
|
||||||
|
|||||||
@ -27,12 +27,12 @@
|
|||||||
padding: 0.25rem 0.5rem;
|
padding: 0.25rem 0.5rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transform: translate(-50%, -0.25rem);
|
transform: translate(-50%, -0.25rem);
|
||||||
border-radius: var(#{$css-var-prefix}border-radius);
|
border-radius: var(#{$✨}border-radius);
|
||||||
background: var(#{$css-var-prefix}tooltip-background-color);
|
background: var(#{$✨}tooltip-background-color);
|
||||||
content: attr(data-tooltip);
|
content: attr(data-tooltip);
|
||||||
color: var(#{$css-var-prefix}tooltip-color);
|
color: var(#{$✨}tooltip-color);
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: var(#{$css-var-prefix}font-weight);
|
font-weight: var(#{$✨}font-weight);
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@ -52,7 +52,7 @@
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
content: "";
|
content: "";
|
||||||
color: var(#{$css-var-prefix}tooltip-background-color);
|
color: var(#{$✨}tooltip-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-placement="bottom"] {
|
&[data-placement="bottom"] {
|
||||||
@ -121,7 +121,7 @@
|
|||||||
&:hover {
|
&:hover {
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
#{$css-var-prefix}tooltip-slide-to: translate(-50%, -0.25rem);
|
#{$✨}tooltip-slide-to: translate(-50%, -0.25rem);
|
||||||
transform: translate(-50%, 0.75rem);
|
transform: translate(-50%, 0.75rem);
|
||||||
animation-duration: 0.2s;
|
animation-duration: 0.2s;
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
@ -130,7 +130,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
#{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, 0rem);
|
#{$✨}tooltip-caret-slide-to: translate(-50%, 0rem);
|
||||||
transform: translate(-50%, -0.25rem);
|
transform: translate(-50%, -0.25rem);
|
||||||
animation-name: tooltip-caret-slide;
|
animation-name: tooltip-caret-slide;
|
||||||
}
|
}
|
||||||
@ -142,13 +142,13 @@
|
|||||||
&:hover {
|
&:hover {
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
#{$css-var-prefix}tooltip-slide-to: translate(-50%, 0.25rem);
|
#{$✨}tooltip-slide-to: translate(-50%, 0.25rem);
|
||||||
transform: translate(-50%, -0.75rem);
|
transform: translate(-50%, -0.75rem);
|
||||||
animation-name: tooltip-slide;
|
animation-name: tooltip-slide;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
#{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, -0.3rem);
|
#{$✨}tooltip-caret-slide-to: translate(-50%, -0.3rem);
|
||||||
transform: translate(-50%, -0.5rem);
|
transform: translate(-50%, -0.5rem);
|
||||||
animation-name: tooltip-caret-slide;
|
animation-name: tooltip-caret-slide;
|
||||||
}
|
}
|
||||||
@ -161,13 +161,13 @@
|
|||||||
&:hover {
|
&:hover {
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
#{$css-var-prefix}tooltip-slide-to: translate(-0.25rem, -50%);
|
#{$✨}tooltip-slide-to: translate(-0.25rem, -50%);
|
||||||
transform: translate(0.75rem, -50%);
|
transform: translate(0.75rem, -50%);
|
||||||
animation-name: tooltip-slide;
|
animation-name: tooltip-slide;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
#{$css-var-prefix}tooltip-caret-slide-to: translate(0.3rem, -50%);
|
#{$✨}tooltip-caret-slide-to: translate(0.3rem, -50%);
|
||||||
transform: translate(0.05rem, -50%);
|
transform: translate(0.05rem, -50%);
|
||||||
animation-name: tooltip-caret-slide;
|
animation-name: tooltip-caret-slide;
|
||||||
}
|
}
|
||||||
@ -180,13 +180,13 @@
|
|||||||
&:hover {
|
&:hover {
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
#{$css-var-prefix}tooltip-slide-to: translate(0.25rem, -50%);
|
#{$✨}tooltip-slide-to: translate(0.25rem, -50%);
|
||||||
transform: translate(-0.75rem, -50%);
|
transform: translate(-0.75rem, -50%);
|
||||||
animation-name: tooltip-slide;
|
animation-name: tooltip-slide;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
#{$css-var-prefix}tooltip-caret-slide-to: translate(-0.3rem, -50%);
|
#{$✨}tooltip-caret-slide-to: translate(-0.3rem, -50%);
|
||||||
transform: translate(-0.05rem, -50%);
|
transform: translate(-0.05rem, -50%);
|
||||||
animation-name: tooltip-caret-slide;
|
animation-name: tooltip-caret-slide;
|
||||||
}
|
}
|
||||||
@ -196,7 +196,7 @@
|
|||||||
|
|
||||||
@keyframes tooltip-slide {
|
@keyframes tooltip-slide {
|
||||||
to {
|
to {
|
||||||
transform: var(#{$css-var-prefix}tooltip-slide-to);
|
transform: var(#{$✨}tooltip-slide-to);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -206,7 +206,7 @@
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
transform: var(#{$css-var-prefix}tooltip-caret-slide-to);
|
transform: var(#{$✨}tooltip-caret-slide-to);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -38,21 +38,20 @@
|
|||||||
[type="button"],
|
[type="button"],
|
||||||
[type="file"]::file-selector-button,
|
[type="file"]::file-selector-button,
|
||||||
[role="button"] {
|
[role="button"] {
|
||||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
|
#{$✨}background-color: var(#{$✨}primary-background);
|
||||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
|
#{$✨}border-color: var(#{$✨}primary-border);
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
|
#{$✨}color: var(#{$✨}primary-inverse);
|
||||||
#{$css-var-prefix}box-shadow: var(#{$css-var-prefix}button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
#{$✨}box-shadow: var(#{$✨}button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||||
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
|
padding: var(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal);
|
||||||
var(#{$css-var-prefix}form-element-spacing-horizontal);
|
border: var(#{$✨}border-width) solid var(#{$✨}border-color);
|
||||||
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
|
border-radius: var(#{$✨}border-radius);
|
||||||
border-radius: var(#{$css-var-prefix}border-radius);
|
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: var(#{$css-var-prefix}background-color);
|
background-color: var(#{$✨}background-color);
|
||||||
box-shadow: var(#{$css-var-prefix}box-shadow);
|
box-shadow: var(#{$✨}box-shadow);
|
||||||
color: var(#{$css-var-prefix}color);
|
color: var(#{$✨}color);
|
||||||
font-weight: var(#{$css-var-prefix}font-weight);
|
font-weight: var(#{$✨}font-weight);
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: var(#{$css-var-prefix}line-height);
|
line-height: var(#{$✨}line-height);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -60,33 +59,30 @@
|
|||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition:
|
||||||
background-color var(#{$css-var-prefix}transition),
|
background-color var(#{$✨}transition),
|
||||||
border-color var(#{$css-var-prefix}transition),
|
border-color var(#{$✨}transition),
|
||||||
color var(#{$css-var-prefix}transition),
|
color var(#{$✨}transition),
|
||||||
box-shadow var(#{$css-var-prefix}transition);
|
box-shadow var(#{$✨}transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-hover-background);
|
#{$✨}background-color: var(#{$✨}primary-hover-background);
|
||||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover-border);
|
#{$✨}border-color: var(#{$✨}primary-hover-border);
|
||||||
#{$css-var-prefix}box-shadow: var(
|
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||||
#{$css-var-prefix}button-hover-box-shadow,
|
#{$✨}color: var(#{$✨}primary-inverse);
|
||||||
0 0 0 rgba(0, 0, 0, 0)
|
|
||||||
);
|
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
#{$css-var-prefix}box-shadow:
|
#{$✨}box-shadow:
|
||||||
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||||
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
|
0 0 0 var(#{$✨}outline-width) var(#{$✨}primary-focus);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="submit"],
|
[type="submit"],
|
||||||
[type="reset"],
|
[type="reset"],
|
||||||
[type="button"] {
|
[type="button"] {
|
||||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
margin-bottom: var(#{$✨}spacing);
|
||||||
}
|
}
|
||||||
|
|
||||||
// .secondary, .contrast & .outline
|
// .secondary, .contrast & .outline
|
||||||
@ -95,93 +91,93 @@
|
|||||||
:is(button, [type="submit"], [type="button"], [role="button"]).secondary,
|
:is(button, [type="submit"], [type="button"], [role="button"]).secondary,
|
||||||
[type="reset"],
|
[type="reset"],
|
||||||
[type="file"]::file-selector-button {
|
[type="file"]::file-selector-button {
|
||||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
|
#{$✨}background-color: var(#{$✨}secondary-background);
|
||||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
|
#{$✨}border-color: var(#{$✨}secondary-border);
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
|
#{$✨}color: var(#{$✨}secondary-inverse);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
|
#{$✨}background-color: var(#{$✨}secondary-hover-background);
|
||||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
|
#{$✨}border-color: var(#{$✨}secondary-hover-border);
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
|
#{$✨}color: var(#{$✨}secondary-inverse);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
#{$css-var-prefix}box-shadow:
|
#{$✨}box-shadow:
|
||||||
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||||
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
|
0 0 0 var(#{$✨}outline-width) var(#{$✨}secondary-focus);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Contrast
|
// Contrast
|
||||||
:is(button, [type="submit"], [type="button"], [role="button"]).contrast {
|
:is(button, [type="submit"], [type="button"], [role="button"]).contrast {
|
||||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-background);
|
#{$✨}background-color: var(#{$✨}contrast-background);
|
||||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-border);
|
#{$✨}border-color: var(#{$✨}contrast-border);
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
|
#{$✨}color: var(#{$✨}contrast-inverse);
|
||||||
|
|
||||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-hover-background);
|
#{$✨}background-color: var(#{$✨}contrast-hover-background);
|
||||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover-border);
|
#{$✨}border-color: var(#{$✨}contrast-hover-border);
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
|
#{$✨}color: var(#{$✨}contrast-inverse);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
#{$css-var-prefix}box-shadow:
|
#{$✨}box-shadow:
|
||||||
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||||
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}contrast-focus);
|
0 0 0 var(#{$✨}outline-width) var(#{$✨}contrast-focus);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Outline (primary)
|
// Outline (primary)
|
||||||
:is(button, [type="submit"], [type="button"], [role="button"]).outline,
|
:is(button, [type="submit"], [type="button"], [role="button"]).outline,
|
||||||
[type="reset"].outline {
|
[type="reset"].outline {
|
||||||
#{$css-var-prefix}background-color: transparent;
|
#{$✨}background-color: transparent;
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary);
|
#{$✨}color: var(#{$✨}primary);
|
||||||
#{$css-var-prefix}border-color: currentColor;
|
#{$✨}border-color: currentColor;
|
||||||
|
|
||||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
#{$css-var-prefix}background-color: transparent;
|
#{$✨}background-color: transparent;
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
|
#{$✨}color: var(#{$✨}primary-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Outline (secondary)
|
// Outline (secondary)
|
||||||
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
|
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
|
||||||
[type="reset"].outline {
|
[type="reset"].outline {
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
|
#{$✨}color: var(#{$✨}secondary);
|
||||||
#{$css-var-prefix}border-color: currentColor;
|
#{$✨}border-color: currentColor;
|
||||||
|
|
||||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
|
#{$✨}color: var(#{$✨}secondary-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Outline (contrast)
|
// Outline (contrast)
|
||||||
:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
|
:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
|
#{$✨}color: var(#{$✨}contrast);
|
||||||
|
|
||||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
|
#{$✨}color: var(#{$✨}contrast-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
// Secondary button without .class
|
// Secondary button without .class
|
||||||
[type="reset"],
|
[type="reset"],
|
||||||
[type="file"]::file-selector-button {
|
[type="file"]::file-selector-button {
|
||||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary);
|
#{$✨}background-color: var(#{$✨}secondary);
|
||||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary);
|
#{$✨}border-color: var(#{$✨}secondary);
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
|
#{$✨}color: var(#{$✨}secondary-inverse);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover);
|
#{$✨}background-color: var(#{$✨}secondary-hover);
|
||||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover);
|
#{$✨}border-color: var(#{$✨}secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
#{$css-var-prefix}box-shadow:
|
#{$✨}box-shadow:
|
||||||
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||||
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
|
0 0 0 var(#{$✨}outline-width) var(#{$✨}secondary-focus);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -18,7 +18,7 @@
|
|||||||
kbd,
|
kbd,
|
||||||
samp {
|
samp {
|
||||||
font-size: 0.875em; // 2
|
font-size: 0.875em; // 2
|
||||||
font-family: var(#{$css-var-prefix}font-family); // 1
|
font-family: var(#{$✨}font-family); // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
pre code {
|
pre code {
|
||||||
@ -38,10 +38,10 @@
|
|||||||
pre,
|
pre,
|
||||||
code,
|
code,
|
||||||
kbd {
|
kbd {
|
||||||
border-radius: var(#{$css-var-prefix}border-radius);
|
border-radius: var(#{$✨}border-radius);
|
||||||
background: var(#{$css-var-prefix}code-background-color);
|
background: var(#{$✨}code-background-color);
|
||||||
color: var(#{$css-var-prefix}code-color);
|
color: var(#{$✨}code-color);
|
||||||
font-weight: var(#{$css-var-prefix}font-weight);
|
font-weight: var(#{$✨}font-weight);
|
||||||
line-height: initial;
|
line-height: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -53,21 +53,21 @@
|
|||||||
|
|
||||||
pre {
|
pre {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
margin-bottom: var(#{$✨}spacing);
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
|
|
||||||
> code {
|
> code {
|
||||||
display: block;
|
display: block;
|
||||||
padding: var(#{$css-var-prefix}spacing);
|
padding: var(#{$✨}spacing);
|
||||||
background: none;
|
background: none;
|
||||||
line-height: var(#{$css-var-prefix}line-height);
|
line-height: var(#{$✨}line-height);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// kbd
|
// kbd
|
||||||
kbd {
|
kbd {
|
||||||
background-color: var(#{$css-var-prefix}code-kbd-background-color);
|
background-color: var(#{$✨}code-kbd-background-color);
|
||||||
color: var(#{$css-var-prefix}code-kbd-color);
|
color: var(#{$✨}code-kbd-color);
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,54 +8,54 @@
|
|||||||
|
|
||||||
a,
|
a,
|
||||||
[role="link"] {
|
[role="link"] {
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary);
|
#{$✨}color: var(#{$✨}primary);
|
||||||
#{$css-var-prefix}background-color: transparent;
|
#{$✨}background-color: transparent;
|
||||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}primary-underline);
|
#{$✨}underline: var(#{$✨}primary-underline);
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: var(#{$css-var-prefix}background-color); // 1
|
background-color: var(#{$✨}background-color); // 1
|
||||||
color: var(#{$css-var-prefix}color);
|
color: var(#{$✨}color);
|
||||||
text-decoration: var(#{$css-var-prefix}text-decoration);
|
text-decoration: var(#{$✨}text-decoration);
|
||||||
text-decoration-color: var(#{$css-var-prefix}underline);
|
text-decoration-color: var(#{$✨}underline);
|
||||||
text-underline-offset: 0.125em;
|
text-underline-offset: 0.125em;
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition:
|
||||||
background-color var(#{$css-var-prefix}transition),
|
background-color var(#{$✨}transition),
|
||||||
color var(#{$css-var-prefix}transition),
|
color var(#{$✨}transition),
|
||||||
text-decoration var(#{$css-var-prefix}transition),
|
text-decoration var(#{$✨}transition),
|
||||||
box-shadow var(#{$css-var-prefix}transition);
|
box-shadow var(#{$✨}transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
|
#{$✨}color: var(#{$✨}primary-hover);
|
||||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}primary-hover-underline);
|
#{$✨}underline: var(#{$✨}primary-hover-underline);
|
||||||
#{$css-var-prefix}text-decoration: underline;
|
#{$✨}text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
box-shadow: 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
|
box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $enable-classes {
|
@if $enable-classes {
|
||||||
// Secondary
|
// Secondary
|
||||||
&.secondary {
|
&.secondary {
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
|
#{$✨}color: var(#{$✨}secondary);
|
||||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-underline);
|
#{$✨}underline: var(#{$✨}secondary-underline);
|
||||||
|
|
||||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
|
#{$✨}color: var(#{$✨}secondary-hover);
|
||||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-hover-underline);
|
#{$✨}underline: var(#{$✨}secondary-hover-underline);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Contrast
|
// Contrast
|
||||||
&.contrast {
|
&.contrast {
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
|
#{$✨}color: var(#{$✨}contrast);
|
||||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-underline);
|
#{$✨}underline: var(#{$✨}contrast-underline);
|
||||||
|
|
||||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
|
#{$✨}color: var(#{$✨}contrast-hover);
|
||||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-hover-underline);
|
#{$✨}underline: var(#{$✨}contrast-hover-underline);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -15,9 +15,9 @@
|
|||||||
// 2. Add the correct box sizing in Firefox
|
// 2. Add the correct box sizing in Firefox
|
||||||
hr {
|
hr {
|
||||||
height: 0; // 2
|
height: 0; // 2
|
||||||
margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
|
margin: var(#{$✨}typography-spacing-vertical) 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-top: 1px solid var(#{$css-var-prefix}muted-border-color);
|
border-top: 1px solid var(#{$✨}muted-border-color);
|
||||||
color: inherit; // 1
|
color: inherit; // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -26,13 +26,11 @@
|
|||||||
// Cells
|
// Cells
|
||||||
th,
|
th,
|
||||||
td {
|
td {
|
||||||
padding: calc(var(#{$css-var-prefix}spacing) / 2) var(#{$css-var-prefix}spacing);
|
padding: calc(var(#{$✨}spacing) / 2) var(#{$✨}spacing);
|
||||||
border-bottom: var(#{$css-var-prefix}border-width)
|
border-bottom: var(#{$✨}border-width) solid var(#{$✨}table-border-color);
|
||||||
solid
|
background-color: var(#{$✨}background-color);
|
||||||
var(#{$css-var-prefix}table-border-color);
|
color: var(#{$✨}color);
|
||||||
background-color: var(#{$css-var-prefix}background-color);
|
font-weight: var(#{$✨}font-weight);
|
||||||
color: var(#{$css-var-prefix}color);
|
|
||||||
font-weight: var(#{$css-var-prefix}font-weight);
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
text-align: start;
|
text-align: start;
|
||||||
}
|
}
|
||||||
@ -41,9 +39,7 @@
|
|||||||
tfoot {
|
tfoot {
|
||||||
th,
|
th,
|
||||||
td {
|
td {
|
||||||
border-top: var(#{$css-var-prefix}border-width)
|
border-top: var(#{$✨}border-width) solid var(#{$✨}table-border-color);
|
||||||
solid
|
|
||||||
var(#{$css-var-prefix}table-border-color);
|
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -54,7 +50,7 @@
|
|||||||
&.striped {
|
&.striped {
|
||||||
tbody tr:nth-child(odd) th,
|
tbody tr:nth-child(odd) th,
|
||||||
tbody tr:nth-child(odd) td {
|
tbody tr:nth-child(odd) td {
|
||||||
background-color: var(#{$css-var-prefix}table-row-stripped-background-color);
|
background-color: var(#{$✨}table-row-stripped-background-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -44,10 +44,10 @@
|
|||||||
table,
|
table,
|
||||||
ul {
|
ul {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
|
margin-bottom: var(#{$✨}typography-spacing-vertical);
|
||||||
color: var(#{$css-var-prefix}color);
|
color: var(#{$✨}color);
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: var(#{$css-var-prefix}font-weight);
|
font-weight: var(#{$✨}font-weight);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Headings
|
// Headings
|
||||||
@ -58,48 +58,48 @@
|
|||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
|
margin-bottom: var(#{$✨}typography-spacing-vertical);
|
||||||
color: var(#{$css-var-prefix}color);
|
color: var(#{$✨}color);
|
||||||
font-weight: var(#{$css-var-prefix}font-weight);
|
font-weight: var(#{$✨}font-weight);
|
||||||
font-size: var(#{$css-var-prefix}font-size);
|
font-size: var(#{$✨}font-size);
|
||||||
line-height: var(#{$css-var-prefix}line-height);
|
line-height: var(#{$✨}line-height);
|
||||||
font-family: var(#{$css-var-prefix}font-family);
|
font-family: var(#{$✨}font-family);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h1-color);
|
#{$✨}color: var(#{$✨}h1-color);
|
||||||
}
|
}
|
||||||
h2 {
|
h2 {
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h2-color);
|
#{$✨}color: var(#{$✨}h2-color);
|
||||||
}
|
}
|
||||||
h3 {
|
h3 {
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h3-color);
|
#{$✨}color: var(#{$✨}h3-color);
|
||||||
}
|
}
|
||||||
h4 {
|
h4 {
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h4-color);
|
#{$✨}color: var(#{$✨}h4-color);
|
||||||
}
|
}
|
||||||
h5 {
|
h5 {
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h5-color);
|
#{$✨}color: var(#{$✨}h5-color);
|
||||||
}
|
}
|
||||||
h6 {
|
h6 {
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h6-color);
|
#{$✨}color: var(#{$✨}h6-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Margin-top for headings after a block
|
// Margin-top for headings after a block
|
||||||
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
|
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
|
||||||
~ :is(h1, h2, h3, h4, h5, h6) {
|
~ :is(h1, h2, h3, h4, h5, h6) {
|
||||||
margin-top: var(#{$css-var-prefix}typography-spacing-top);
|
margin-top: var(#{$✨}typography-spacing-top);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Paragraphs
|
// Paragraphs
|
||||||
p {
|
p {
|
||||||
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
|
margin-bottom: var(#{$✨}typography-spacing-vertical);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Heading group
|
// Heading group
|
||||||
hgroup {
|
hgroup {
|
||||||
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
|
margin-bottom: var(#{$✨}typography-spacing-vertical);
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
@ -107,8 +107,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
> *:not(:first-child):last-child {
|
> *:not(:first-child):last-child {
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
|
#{$✨}color: var(#{$✨}muted-color);
|
||||||
#{$css-var-prefix}font-weight: unset;
|
#{$✨}font-weight: unset;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-family: unset;
|
font-family: unset;
|
||||||
}
|
}
|
||||||
@ -117,7 +117,7 @@
|
|||||||
// Lists
|
// Lists
|
||||||
:where(ol, ul) {
|
:where(ol, ul) {
|
||||||
li {
|
li {
|
||||||
margin-bottom: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
|
margin-bottom: calc(var(#{$✨}typography-spacing-vertical) * 0.25);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -125,7 +125,7 @@
|
|||||||
// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
|
// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
|
||||||
:where(dl, ol, ul) :where(dl, ol, ul) {
|
:where(dl, ol, ul) :where(dl, ol, ul) {
|
||||||
margin: 0; // 1
|
margin: 0; // 1
|
||||||
margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
|
margin-top: calc(var(#{$✨}typography-spacing-vertical) * 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
ul li {
|
ul li {
|
||||||
@ -135,24 +135,24 @@
|
|||||||
// Highlighted text
|
// Highlighted text
|
||||||
mark {
|
mark {
|
||||||
padding: 0.125rem 0.25rem;
|
padding: 0.125rem 0.25rem;
|
||||||
background-color: var(#{$css-var-prefix}mark-background-color);
|
background-color: var(#{$✨}mark-background-color);
|
||||||
color: var(#{$css-var-prefix}mark-color);
|
color: var(#{$✨}mark-color);
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Blockquote
|
// Blockquote
|
||||||
blockquote {
|
blockquote {
|
||||||
display: block;
|
display: block;
|
||||||
margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
|
margin: var(#{$✨}typography-spacing-vertical) 0;
|
||||||
padding: var(#{$css-var-prefix}spacing);
|
padding: var(#{$✨}spacing);
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-left: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
|
border-left: 0.25rem solid var(#{$✨}blockquote-border-color);
|
||||||
border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
|
border-inline-start: 0.25rem solid var(#{$✨}blockquote-border-color);
|
||||||
border-inline-end: none;
|
border-inline-end: none;
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.5);
|
margin-top: calc(var(#{$✨}typography-spacing-vertical) * 0.5);
|
||||||
color: var(#{$css-var-prefix}blockquote-footer-color);
|
color: var(#{$✨}blockquote-footer-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -166,17 +166,17 @@
|
|||||||
|
|
||||||
// Ins
|
// Ins
|
||||||
ins {
|
ins {
|
||||||
color: var(#{$css-var-prefix}ins-color);
|
color: var(#{$✨}ins-color);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// del
|
// del
|
||||||
del {
|
del {
|
||||||
color: var(#{$css-var-prefix}del-color);
|
color: var(#{$✨}del-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
// selection
|
// selection
|
||||||
::selection {
|
::selection {
|
||||||
background-color: var(#{$css-var-prefix}text-selection-color);
|
background-color: var(#{$✨}text-selection-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -21,7 +21,7 @@
|
|||||||
textarea {
|
textarea {
|
||||||
margin: 0; // 2
|
margin: 0; // 2
|
||||||
font-size: 1rem; // 1
|
font-size: 1rem; // 1
|
||||||
line-height: var(#{$css-var-prefix}line-height); // 1
|
line-height: var(#{$✨}line-height); // 1
|
||||||
font-family: inherit; // 1
|
font-family: inherit; // 1
|
||||||
letter-spacing: inherit; // 2
|
letter-spacing: inherit; // 2
|
||||||
}
|
}
|
||||||
@ -117,16 +117,16 @@
|
|||||||
// Force height for alternatives input types
|
// Force height for alternatives input types
|
||||||
input:not([type="checkbox"], [type="radio"], [type="range"]) {
|
input:not([type="checkbox"], [type="radio"], [type="range"]) {
|
||||||
height: calc(
|
height: calc(
|
||||||
(1rem * var(#{$css-var-prefix}line-height)) +
|
(1rem * var(#{$✨}line-height)) +
|
||||||
(var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
|
(var(#{$✨}form-element-spacing-vertical) * 2) +
|
||||||
(var(#{$css-var-prefix}border-width) * 2)
|
(var(#{$✨}border-width) * 2)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fieldset
|
// Fieldset
|
||||||
fieldset {
|
fieldset {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
margin-bottom: var(#{$✨}spacing);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
@ -135,12 +135,12 @@
|
|||||||
label,
|
label,
|
||||||
fieldset legend {
|
fieldset legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.375);
|
margin-bottom: calc(var(#{$✨}spacing) * 0.375);
|
||||||
font-weight: var(#{$css-var-prefix}form-label-font-weight, var(#{$css-var-prefix}font-weight));
|
font-weight: var(#{$✨}form-label-font-weight, var(#{$✨}font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset legend {
|
||||||
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
|
margin-bottom: calc(var(#{$✨}spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Blocks, 100%
|
// Blocks, 100%
|
||||||
@ -156,32 +156,31 @@
|
|||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
|
padding: var(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal);
|
||||||
var(#{$css-var-prefix}form-element-spacing-horizontal);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Commons styles
|
// Commons styles
|
||||||
input,
|
input,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-background-color);
|
#{$✨}background-color: var(#{$✨}form-element-background-color);
|
||||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-border-color);
|
#{$✨}border-color: var(#{$✨}form-element-border-color);
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}form-element-color);
|
#{$✨}color: var(#{$✨}form-element-color);
|
||||||
#{$css-var-prefix}box-shadow: none;
|
#{$✨}box-shadow: none;
|
||||||
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
|
border: var(#{$✨}border-width) solid var(#{$✨}border-color);
|
||||||
border-radius: var(#{$css-var-prefix}border-radius);
|
border-radius: var(#{$✨}border-radius);
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: var(#{$css-var-prefix}background-color);
|
background-color: var(#{$✨}background-color);
|
||||||
box-shadow: var(#{$css-var-prefix}box-shadow);
|
box-shadow: var(#{$✨}box-shadow);
|
||||||
color: var(#{$css-var-prefix}color);
|
color: var(#{$✨}color);
|
||||||
font-weight: var(#{$css-var-prefix}font-weight);
|
font-weight: var(#{$✨}font-weight);
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition:
|
||||||
background-color var(#{$css-var-prefix}transition),
|
background-color var(#{$✨}transition),
|
||||||
border-color var(#{$css-var-prefix}transition),
|
border-color var(#{$✨}transition),
|
||||||
color var(#{$css-var-prefix}transition),
|
color var(#{$✨}transition),
|
||||||
box-shadow var(#{$css-var-prefix}transition);
|
box-shadow var(#{$✨}transition);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -196,9 +195,7 @@
|
|||||||
),
|
),
|
||||||
:where(select, textarea) {
|
:where(select, textarea) {
|
||||||
&:is(:active, :focus) {
|
&:is(:active, :focus) {
|
||||||
#{$css-var-prefix}background-color: var(
|
#{$✨}background-color: var(#{$✨}form-element-active-background-color);
|
||||||
#{$css-var-prefix}form-element-active-background-color
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -206,7 +203,7 @@
|
|||||||
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
|
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
|
||||||
:where(select, textarea) {
|
:where(select, textarea) {
|
||||||
&:is(:active, :focus) {
|
&:is(:active, :focus) {
|
||||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-active-border-color);
|
#{$✨}border-color: var(#{$✨}form-element-active-border-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -221,11 +218,7 @@
|
|||||||
),
|
),
|
||||||
:where(select, textarea) {
|
:where(select, textarea) {
|
||||||
&:focus {
|
&:focus {
|
||||||
#{$css-var-prefix}box-shadow: 0
|
#{$✨}box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-focus-color);
|
||||||
0
|
|
||||||
0
|
|
||||||
var(#{$css-var-prefix}outline-width)
|
|
||||||
var(#{$css-var-prefix}form-element-focus-color);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -236,11 +229,9 @@
|
|||||||
label[aria-disabled="true"],
|
label[aria-disabled="true"],
|
||||||
:where(fieldset[disabled])
|
:where(fieldset[disabled])
|
||||||
:is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
|
:is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
|
||||||
#{$css-var-prefix}background-color: var(
|
#{$✨}background-color: var(#{$✨}form-element-disabled-background-color);
|
||||||
#{$css-var-prefix}form-element-disabled-background-color
|
#{$✨}border-color: var(#{$✨}form-element-disabled-border-color);
|
||||||
);
|
opacity: var(#{$✨}form-element-disabled-opacity);
|
||||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-disabled-border-color);
|
|
||||||
opacity: var(#{$css-var-prefix}form-element-disabled-opacity);
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -262,19 +253,15 @@
|
|||||||
) {
|
) {
|
||||||
&[aria-invalid] {
|
&[aria-invalid] {
|
||||||
@if $enable-important {
|
@if $enable-important {
|
||||||
padding-right: calc(
|
padding-right: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem) !important;
|
||||||
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
|
padding-left: var(#{$✨}form-element-spacing-horizontal);
|
||||||
) !important;
|
padding-inline-start: var(#{$✨}form-element-spacing-horizontal) !important;
|
||||||
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
|
padding-inline-end: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem) !important;
|
||||||
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
|
|
||||||
padding-inline-end: calc(
|
|
||||||
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
|
|
||||||
) !important;
|
|
||||||
} @else {
|
} @else {
|
||||||
padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
|
padding-right: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem);
|
||||||
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
|
padding-left: var(#{$✨}form-element-spacing-horizontal);
|
||||||
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
|
padding-inline-start: var(#{$✨}form-element-spacing-horizontal);
|
||||||
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
|
padding-inline-end: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem);
|
||||||
}
|
}
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
@ -282,73 +269,65 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&[aria-invalid="false"]:not(select) {
|
&[aria-invalid="false"]:not(select) {
|
||||||
background-image: var(#{$css-var-prefix}icon-valid);
|
background-image: var(#{$✨}icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
&[aria-invalid="true"]:not(select) {
|
&[aria-invalid="true"]:not(select) {
|
||||||
background-image: var(#{$css-var-prefix}icon-invalid);
|
background-image: var(#{$✨}icon-invalid);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&[aria-invalid="false"] {
|
&[aria-invalid="false"] {
|
||||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color);
|
#{$✨}border-color: var(#{$✨}form-element-valid-border-color);
|
||||||
|
|
||||||
&:is(:active, :focus) {
|
&:is(:active, :focus) {
|
||||||
@if $enable-important {
|
@if $enable-important {
|
||||||
#{$css-var-prefix}border-color: var(
|
#{$✨}border-color: var(#{$✨}form-element-valid-active-border-color) !important;
|
||||||
#{$css-var-prefix}form-element-valid-active-border-color
|
|
||||||
) !important;
|
|
||||||
|
|
||||||
&:not([type="checkbox"], [type="radio"]) {
|
&:not([type="checkbox"], [type="radio"]) {
|
||||||
#{$css-var-prefix}box-shadow: 0
|
#{$✨}box-shadow: 0
|
||||||
0
|
0
|
||||||
0
|
0
|
||||||
var(#{$css-var-prefix}outline-width)
|
var(#{$✨}outline-width)
|
||||||
var(#{$css-var-prefix}form-element-valid-focus-color) !important;
|
var(#{$✨}form-element-valid-focus-color) !important;
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
#{$css-var-prefix}border-color: var(
|
#{$✨}border-color: var(#{$✨}form-element-valid-active-border-color);
|
||||||
#{$css-var-prefix}form-element-valid-active-border-color
|
|
||||||
);
|
|
||||||
|
|
||||||
&:not([type="checkbox"], [type="radio"]) {
|
&:not([type="checkbox"], [type="radio"]) {
|
||||||
#{$css-var-prefix}box-shadow: 0
|
#{$✨}box-shadow: 0
|
||||||
0
|
0
|
||||||
0
|
0
|
||||||
var(#{$css-var-prefix}outline-width)
|
var(#{$✨}outline-width)
|
||||||
var(#{$css-var-prefix}form-element-valid-focus-color);
|
var(#{$✨}form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&[aria-invalid="true"] {
|
&[aria-invalid="true"] {
|
||||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
|
#{$✨}border-color: var(#{$✨}form-element-invalid-border-color);
|
||||||
|
|
||||||
&:is(:active, :focus) {
|
&:is(:active, :focus) {
|
||||||
@if $enable-important {
|
@if $enable-important {
|
||||||
#{$css-var-prefix}border-color: var(
|
#{$✨}border-color: var(#{$✨}form-element-invalid-active-border-color) !important;
|
||||||
#{$css-var-prefix}form-element-invalid-active-border-color
|
|
||||||
) !important;
|
|
||||||
|
|
||||||
&:not([type="checkbox"], [type="radio"]) {
|
&:not([type="checkbox"], [type="radio"]) {
|
||||||
#{$css-var-prefix}box-shadow: 0
|
#{$✨}box-shadow: 0
|
||||||
0
|
0
|
||||||
0
|
0
|
||||||
var(#{$css-var-prefix}outline-width)
|
var(#{$✨}outline-width)
|
||||||
var(#{$css-var-prefix}form-element-invalid-focus-color) !important;
|
var(#{$✨}form-element-invalid-focus-color) !important;
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
#{$css-var-prefix}border-color: var(
|
#{$✨}border-color: var(#{$✨}form-element-invalid-active-border-color);
|
||||||
#{$css-var-prefix}form-element-invalid-active-border-color
|
|
||||||
);
|
|
||||||
|
|
||||||
&:not([type="checkbox"], [type="radio"]) {
|
&:not([type="checkbox"], [type="radio"]) {
|
||||||
#{$css-var-prefix}box-shadow: 0
|
#{$✨}box-shadow: 0
|
||||||
0
|
0
|
||||||
0
|
0
|
||||||
var(#{$css-var-prefix}outline-width)
|
var(#{$✨}outline-width)
|
||||||
var(#{$css-var-prefix}form-element-invalid-focus-color);
|
var(#{$✨}form-element-invalid-focus-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -371,7 +350,7 @@
|
|||||||
textarea::placeholder,
|
textarea::placeholder,
|
||||||
textarea::-webkit-input-placeholder,
|
textarea::-webkit-input-placeholder,
|
||||||
select:invalid {
|
select:invalid {
|
||||||
color: var(#{$css-var-prefix}form-element-placeholder-color);
|
color: var(#{$✨}form-element-placeholder-color);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -379,7 +358,7 @@
|
|||||||
input:not([type="checkbox"], [type="radio"]),
|
input:not([type="checkbox"], [type="radio"]),
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
margin-bottom: var(#{$✨}spacing);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Select
|
// Select
|
||||||
@ -391,11 +370,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:not([multiple], [size]) {
|
&:not([multiple], [size]) {
|
||||||
padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
|
padding-right: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem);
|
||||||
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
|
padding-left: var(#{$✨}form-element-spacing-horizontal);
|
||||||
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
|
padding-inline-start: var(#{$✨}form-element-spacing-horizontal);
|
||||||
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
|
padding-inline-end: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem);
|
||||||
background-image: var(#{$css-var-prefix}icon-chevron);
|
background-image: var(#{$✨}icon-chevron);
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
@ -404,7 +383,7 @@
|
|||||||
&[multiple] {
|
&[multiple] {
|
||||||
option {
|
option {
|
||||||
&:checked {
|
&:checked {
|
||||||
background: var(#{$css-var-prefix}form-element-selected-background-color);
|
background: var(#{$✨}form-element-selected-background-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -425,13 +404,13 @@
|
|||||||
|
|
||||||
&[aria-invalid] {
|
&[aria-invalid] {
|
||||||
@if $enable-important {
|
@if $enable-important {
|
||||||
#{$css-var-prefix}icon-height: calc(
|
#{$✨}icon-height: calc(
|
||||||
(1rem * var(#{$css-var-prefix}line-height)) +
|
(1rem * var(#{$✨}line-height)) +
|
||||||
(var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
|
(var(#{$✨}form-element-spacing-vertical) * 2) +
|
||||||
(var(#{$css-var-prefix}border-width) * 2)
|
(var(#{$✨}border-width) * 2)
|
||||||
);
|
);
|
||||||
background-position: top right 0.75rem !important;
|
background-position: top right 0.75rem !important;
|
||||||
background-size: 1rem var(#{$css-var-prefix}icon-height) !important;
|
background-size: 1rem var(#{$✨}icon-height) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -443,18 +422,18 @@
|
|||||||
+ small {
|
+ small {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: calc(var(#{$css-var-prefix}spacing) * -0.75);
|
margin-top: calc(var(#{$✨}spacing) * -0.75);
|
||||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
margin-bottom: var(#{$✨}spacing);
|
||||||
color: var(#{$css-var-prefix}muted-color);
|
color: var(#{$✨}muted-color);
|
||||||
}
|
}
|
||||||
&[aria-invalid="false"] {
|
&[aria-invalid="false"] {
|
||||||
+ small {
|
+ small {
|
||||||
color: var(#{$css-var-prefix}ins-color);
|
color: var(#{$✨}ins-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&[aria-invalid="true"] {
|
&[aria-invalid="true"] {
|
||||||
+ small {
|
+ small {
|
||||||
color: var(#{$css-var-prefix}del-color);
|
color: var(#{$✨}del-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -462,7 +441,7 @@
|
|||||||
// Styles for Input inside a label
|
// Styles for Input inside a label
|
||||||
label {
|
label {
|
||||||
> :where(input, select, textarea) {
|
> :where(input, select, textarea) {
|
||||||
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
|
margin-top: calc(var(#{$✨}spacing) * 0.25);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -24,7 +24,7 @@
|
|||||||
height: 1.25em;
|
height: 1.25em;
|
||||||
margin-top: -0.125em;
|
margin-top: -0.125em;
|
||||||
margin-inline-end: 0.5em;
|
margin-inline-end: 0.5em;
|
||||||
border-width: var(#{$css-var-prefix}border-width);
|
border-width: var(#{$✨}border-width);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
@ -35,9 +35,9 @@
|
|||||||
&:checked,
|
&:checked,
|
||||||
&:checked:active,
|
&:checked:active,
|
||||||
&:checked:focus {
|
&:checked:focus {
|
||||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
|
#{$✨}background-color: var(#{$✨}primary-background);
|
||||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
|
#{$✨}border-color: var(#{$✨}primary-border);
|
||||||
background-image: var(#{$css-var-prefix}icon-checkbox);
|
background-image: var(#{$✨}icon-checkbox);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: 0.75em auto;
|
background-size: 0.75em auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
@ -57,9 +57,9 @@
|
|||||||
// Checkboxes
|
// Checkboxes
|
||||||
[type="checkbox"] {
|
[type="checkbox"] {
|
||||||
&:indeterminate {
|
&:indeterminate {
|
||||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
|
#{$✨}background-color: var(#{$✨}primary-background);
|
||||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
|
#{$✨}border-color: var(#{$✨}primary-border);
|
||||||
background-image: var(#{$css-var-prefix}icon-minus);
|
background-image: var(#{$✨}icon-minus);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: 0.75em auto;
|
background-size: 0.75em auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
@ -73,7 +73,7 @@
|
|||||||
&:checked,
|
&:checked,
|
||||||
&:checked:active,
|
&:checked:active,
|
||||||
&:checked:focus {
|
&:checked:focus {
|
||||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-inverse);
|
#{$✨}background-color: var(#{$✨}primary-inverse);
|
||||||
border-width: 0.35em;
|
border-width: 0.35em;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
@ -81,8 +81,8 @@
|
|||||||
|
|
||||||
// Switchs
|
// Switchs
|
||||||
[type="checkbox"][role="switch"] {
|
[type="checkbox"][role="switch"] {
|
||||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
|
#{$✨}background-color: var(#{$✨}switch-background-color);
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}switch-color);
|
#{$✨}color: var(#{$✨}switch-color);
|
||||||
|
|
||||||
// Config
|
// Config
|
||||||
$switch-height: 1.25em;
|
$switch-height: 1.25em;
|
||||||
@ -92,21 +92,21 @@
|
|||||||
// Styles
|
// Styles
|
||||||
width: $switch-width;
|
width: $switch-width;
|
||||||
height: $switch-height;
|
height: $switch-height;
|
||||||
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
|
border: var(#{$✨}border-width) solid var(#{$✨}border-color);
|
||||||
border-radius: $switch-height;
|
border-radius: $switch-height;
|
||||||
background-color: var(#{$css-var-prefix}background-color);
|
background-color: var(#{$✨}background-color);
|
||||||
line-height: $switch-height;
|
line-height: $switch-height;
|
||||||
|
|
||||||
&:not([aria-invalid]) {
|
&:not([aria-invalid]) {
|
||||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
|
#{$✨}border-color: var(#{$✨}switch-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
display: block;
|
display: block;
|
||||||
width: calc(#{$switch-height} - (var(#{$css-var-prefix}border-width) * 2));
|
width: calc(#{$switch-height} - (var(#{$✨}border-width) * 2));
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: var(#{$css-var-prefix}color);
|
background-color: var(#{$✨}color);
|
||||||
content: "";
|
content: "";
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
@ -115,22 +115,22 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
|
#{$✨}background-color: var(#{$✨}switch-background-color);
|
||||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
|
#{$✨}border-color: var(#{$✨}switch-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:checked {
|
&:checked {
|
||||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-checked-background-color);
|
#{$✨}background-color: var(#{$✨}switch-checked-background-color);
|
||||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-checked-background-color);
|
#{$✨}border-color: var(#{$✨}switch-checked-background-color);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
margin-inline-start: calc(#{$switch-width * 0.5} - var(#{$css-var-prefix}border-width));
|
margin-inline-start: calc(#{$switch-width * 0.5} - var(#{$✨}border-width));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}border-color);
|
#{$✨}background-color: var(#{$✨}border-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -141,16 +141,14 @@
|
|||||||
&:checked,
|
&:checked,
|
||||||
&:checked:active,
|
&:checked:active,
|
||||||
&:checked:focus {
|
&:checked:focus {
|
||||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-valid-border-color);
|
#{$✨}background-color: var(#{$✨}form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:checked,
|
&:checked,
|
||||||
&:checked:active,
|
&:checked:active,
|
||||||
&:checked:focus {
|
&:checked:focus {
|
||||||
&[aria-invalid="true"] {
|
&[aria-invalid="true"] {
|
||||||
#{$css-var-prefix}background-color: var(
|
#{$✨}background-color: var(#{$✨}form-element-invalid-border-color);
|
||||||
#{$css-var-prefix}form-element-invalid-border-color
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -162,14 +160,14 @@
|
|||||||
&:checked,
|
&:checked,
|
||||||
&:checked:active,
|
&:checked:active,
|
||||||
&:checked:focus {
|
&:checked:focus {
|
||||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color);
|
#{$✨}border-color: var(#{$✨}form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:checked,
|
&:checked,
|
||||||
&:checked:active,
|
&:checked:active,
|
||||||
&:checked:focus {
|
&:checked:focus {
|
||||||
&[aria-invalid="true"] {
|
&[aria-invalid="true"] {
|
||||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
|
#{$✨}border-color: var(#{$✨}form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -9,7 +9,7 @@
|
|||||||
// Swatch
|
// Swatch
|
||||||
@mixin color-swatch {
|
@mixin color-swatch {
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: calc(var(#{$css-var-prefix}border-radius) * 0.5);
|
border-radius: calc(var(#{$✨}border-radius) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map.get($modules, "forms/input-color") {
|
@if map.get($modules, "forms/input-color") {
|
||||||
|
|||||||
@ -9,18 +9,18 @@
|
|||||||
// :not() are needed to add Specificity and avoid !important on padding
|
// :not() are needed to add Specificity and avoid !important on padding
|
||||||
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||||
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||||
#{$css-var-prefix}icon-position: 0.75rem;
|
#{$✨}icon-position: 0.75rem;
|
||||||
#{$css-var-prefix}icon-width: 1rem;
|
#{$✨}icon-width: 1rem;
|
||||||
padding-right: calc(var(#{$css-var-prefix}icon-width) + var(#{$css-var-prefix}icon-position));
|
padding-right: calc(var(#{$✨}icon-width) + var(#{$✨}icon-position));
|
||||||
background-image: var(#{$css-var-prefix}icon-date);
|
background-image: var(#{$✨}icon-date);
|
||||||
background-position: center right var(#{$css-var-prefix}icon-position);
|
background-position: center right var(#{$✨}icon-position);
|
||||||
background-size: var(#{$css-var-prefix}icon-width) auto;
|
background-size: var(#{$✨}icon-width) auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Time
|
// Time
|
||||||
&[type="time"] {
|
&[type="time"] {
|
||||||
background-image: var(#{$css-var-prefix}icon-time);
|
background-image: var(#{$✨}icon-time);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -31,9 +31,9 @@
|
|||||||
[type="time"],
|
[type="time"],
|
||||||
[type="week"] {
|
[type="week"] {
|
||||||
&::-webkit-calendar-picker-indicator {
|
&::-webkit-calendar-picker-indicator {
|
||||||
width: var(#{$css-var-prefix}icon-width);
|
width: var(#{$✨}icon-width);
|
||||||
margin-right: calc(var(#{$css-var-prefix}icon-width) * -1);
|
margin-right: calc(var(#{$✨}icon-width) * -1);
|
||||||
margin-left: var(#{$css-var-prefix}icon-position);
|
margin-left: var(#{$✨}icon-position);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -46,7 +46,7 @@
|
|||||||
[type="month"],
|
[type="month"],
|
||||||
[type="time"],
|
[type="time"],
|
||||||
[type="week"] {
|
[type="week"] {
|
||||||
padding-right: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
|
padding-right: var(#{$✨}form-element-spacing-horizontal) !important;
|
||||||
background-image: none !important;
|
background-image: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -9,32 +9,32 @@
|
|||||||
// 1. Hack to display the outline on the focused file selector button
|
// 1. Hack to display the outline on the focused file selector button
|
||||||
// with the forced overflow hidden on the input[type="file"] element.
|
// with the forced overflow hidden on the input[type="file"] element.
|
||||||
[type="file"] {
|
[type="file"] {
|
||||||
#{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
|
#{$✨}color: var(#{$✨}muted-color);
|
||||||
margin-left: calc(var(#{$css-var-prefix}outline-width) * -1); // 1
|
margin-left: calc(var(#{$✨}outline-width) * -1); // 1
|
||||||
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) 0;
|
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5) 0;
|
||||||
padding-left: var(#{$css-var-prefix}outline-width); // 1
|
padding-left: var(#{$✨}outline-width); // 1
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background: none;
|
background: none;
|
||||||
|
|
||||||
&::file-selector-button {
|
&::file-selector-button {
|
||||||
margin-right: calc(var(#{$css-var-prefix}spacing) / 2);
|
margin-right: calc(var(#{$✨}spacing) / 2);
|
||||||
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
|
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
|
||||||
var(#{$css-var-prefix}form-element-spacing-horizontal);
|
var(#{$✨}form-element-spacing-horizontal);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:is(:hover, :active, :focus) {
|
&:is(:hover, :active, :focus) {
|
||||||
&::file-selector-button {
|
&::file-selector-button {
|
||||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
|
#{$✨}background-color: var(#{$✨}secondary-hover-background);
|
||||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
|
#{$✨}border-color: var(#{$✨}secondary-hover-border);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
&::file-selector-button {
|
&::file-selector-button {
|
||||||
#{$css-var-prefix}box-shadow:
|
#{$✨}box-shadow:
|
||||||
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||||
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
|
0 0 0 var(#{$✨}outline-width) var(#{$✨}secondary-focus);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -10,13 +10,13 @@ $border-thumb: 2px;
|
|||||||
@mixin slider-track {
|
@mixin slider-track {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: $height-track;
|
height: $height-track;
|
||||||
border-radius: var(#{$css-var-prefix}border-radius);
|
border-radius: var(#{$✨}border-radius);
|
||||||
background-color: var(#{$css-var-prefix}range-border-color);
|
background-color: var(#{$✨}range-border-color);
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition:
|
||||||
background-color var(#{$css-var-prefix}transition),
|
background-color var(#{$✨}transition),
|
||||||
box-shadow var(#{$css-var-prefix}transition);
|
box-shadow var(#{$✨}transition);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -26,15 +26,15 @@ $border-thumb: 2px;
|
|||||||
width: $height-thumb;
|
width: $height-thumb;
|
||||||
height: $height-thumb;
|
height: $height-thumb;
|
||||||
margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
|
margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
|
||||||
border: $border-thumb solid var(#{$css-var-prefix}range-thumb-border-color);
|
border: $border-thumb solid var(#{$✨}range-thumb-border-color);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: var(#{$css-var-prefix}range-thumb-color);
|
background-color: var(#{$✨}range-thumb-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition:
|
||||||
background-color var(#{$css-var-prefix}transition),
|
background-color var(#{$✨}transition),
|
||||||
transform var(#{$css-var-prefix}transition);
|
transform var(#{$✨}transition);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -78,8 +78,8 @@ $border-thumb: 2px;
|
|||||||
|
|
||||||
&:active,
|
&:active,
|
||||||
&:focus-within {
|
&:focus-within {
|
||||||
#{$css-var-prefix}range-border-color: var(#{$css-var-prefix}range-active-border-color);
|
#{$✨}range-border-color: var(#{$✨}range-active-border-color);
|
||||||
#{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}range-thumb-active-color);
|
#{$✨}range-thumb-color: var(#{$✨}range-thumb-active-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
|
|||||||
@ -9,8 +9,8 @@
|
|||||||
// :not() are needed to add Specificity and avoid !important on padding
|
// :not() are needed to add Specificity and avoid !important on padding
|
||||||
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||||
&[type="search"] {
|
&[type="search"] {
|
||||||
padding-inline-start: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem);
|
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem);
|
||||||
background-image: var(#{$css-var-prefix}icon-search);
|
background-image: var(#{$✨}icon-search);
|
||||||
background-position: center left 1.125rem;
|
background-position: center left 1.125rem;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
@ -18,12 +18,10 @@
|
|||||||
&[aria-invalid] {
|
&[aria-invalid] {
|
||||||
@if $enable-important {
|
@if $enable-important {
|
||||||
padding-inline-start: calc(
|
padding-inline-start: calc(
|
||||||
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem
|
var(#{$✨}form-element-spacing-horizontal) + 1.75rem
|
||||||
) !important;
|
) !important;
|
||||||
} @else {
|
} @else {
|
||||||
padding-inline-start: calc(
|
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem);
|
||||||
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
background-position:
|
background-position:
|
||||||
center left 1.125rem,
|
center left 1.125rem,
|
||||||
@ -31,11 +29,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&[aria-invalid="false"] {
|
&[aria-invalid="false"] {
|
||||||
background-image: var(#{$css-var-prefix}icon-search), var(#{$css-var-prefix}icon-valid);
|
background-image: var(#{$✨}icon-search), var(#{$✨}icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
&[aria-invalid="true"] {
|
&[aria-invalid="true"] {
|
||||||
background-image: var(#{$css-var-prefix}icon-search), var(#{$css-var-prefix}icon-invalid);
|
background-image: var(#{$✨}icon-search), var(#{$✨}icon-invalid);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -11,8 +11,8 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
padding-right: var(#{$css-var-prefix}spacing);
|
padding-right: var(#{$✨}spacing);
|
||||||
padding-left: var(#{$css-var-prefix}spacing);
|
padding-left: var(#{$✨}spacing);
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
|||||||
@ -39,13 +39,13 @@
|
|||||||
-webkit-tap-highlight-color: transparent; // 5
|
-webkit-tap-highlight-color: transparent; // 5
|
||||||
-webkit-text-size-adjust: 100%; // 6
|
-webkit-text-size-adjust: 100%; // 6
|
||||||
text-size-adjust: 100%; // 6
|
text-size-adjust: 100%; // 6
|
||||||
background-color: var(#{$css-var-prefix}background-color);
|
background-color: var(#{$✨}background-color);
|
||||||
color: var(#{$css-var-prefix}color);
|
color: var(#{$✨}color);
|
||||||
font-weight: var(#{$css-var-prefix}font-weight);
|
font-weight: var(#{$✨}font-weight);
|
||||||
font-size: var(#{$css-var-prefix}font-size);
|
font-size: var(#{$✨}font-size);
|
||||||
line-height: var(#{$css-var-prefix}line-height); // 2
|
line-height: var(#{$✨}line-height); // 2
|
||||||
font-family: var(#{$css-var-prefix}font-family);
|
font-family: var(#{$✨}font-family);
|
||||||
text-underline-offset: var(#{$css-var-prefix}text-underline-offset);
|
text-underline-offset: var(#{$✨}text-underline-offset);
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
overflow-wrap: break-word; // 3
|
overflow-wrap: break-word; // 3
|
||||||
cursor: default; // 1
|
cursor: default; // 1
|
||||||
|
|||||||
@ -8,8 +8,8 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
.grid {
|
.grid {
|
||||||
grid-column-gap: var(#{$css-var-prefix}grid-column-gap);
|
grid-column-gap: var(#{$✨}grid-column-gap);
|
||||||
grid-row-gap: var(#{$css-var-prefix}grid-row-gap);
|
grid-row-gap: var(#{$✨}grid-row-gap);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
@ -34,8 +34,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
padding: var(#{$css-var-prefix}block-spacing-vertical)
|
padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
|
||||||
var(#{$css-var-prefix}block-spacing-horizontal);
|
|
||||||
|
|
||||||
@if $enable-viewport {
|
@if $enable-viewport {
|
||||||
@each $key, $values in $breakpoints {
|
@each $key, $values in $breakpoints {
|
||||||
@ -55,7 +54,7 @@
|
|||||||
|
|
||||||
// Regular vertical spacings for <header>, <main>, <footer>
|
// Regular vertical spacings for <header>, <main>, <footer>
|
||||||
@else {
|
@else {
|
||||||
padding: var(#{$css-var-prefix}block-spacing-vertical) 0;
|
padding: var(#{$✨}block-spacing-vertical) 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -14,8 +14,8 @@
|
|||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
|
|
||||||
figcaption {
|
figcaption {
|
||||||
padding: calc(var(#{$css-var-prefix}spacing) * 0.5) 0;
|
padding: calc(var(#{$✨}spacing) * 0.5) 0;
|
||||||
color: var(#{$css-var-prefix}muted-color);
|
color: var(#{$✨}muted-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,6 +7,6 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
section {
|
section {
|
||||||
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
|
margin-bottom: var(#{$✨}block-spacing-vertical);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,129 +6,121 @@
|
|||||||
|
|
||||||
// Default: Dark theme
|
// Default: Dark theme
|
||||||
@mixin theme {
|
@mixin theme {
|
||||||
#{$css-var-prefix}background-color: #{mix($slate-950, $slate-900)};
|
#{$✨}background-color: #{mix($slate-950, $slate-900)};
|
||||||
|
|
||||||
// Text color
|
// Text color
|
||||||
#{$css-var-prefix}color: #{$zinc-200};
|
#{$✨}color: #{$zinc-200};
|
||||||
|
|
||||||
// Text selection color
|
// Text selection color
|
||||||
#{$css-var-prefix}text-selection-color: #{rgba($azure-350, 0.1875)};
|
#{$✨}text-selection-color: #{rgba($azure-350, 0.1875)};
|
||||||
|
|
||||||
// Muted colors
|
// Muted colors
|
||||||
#{$css-var-prefix}muted-color: #{$zinc-450};
|
#{$✨}muted-color: #{$zinc-450};
|
||||||
#{$css-var-prefix}muted-border-color: #{$slate-850};
|
#{$✨}muted-border-color: #{$slate-850};
|
||||||
|
|
||||||
// Primary colors
|
// Primary colors
|
||||||
#{$css-var-prefix}primary: #{$azure-350};
|
#{$✨}primary: #{$azure-350};
|
||||||
#{$css-var-prefix}primary-background: #{$azure-550};
|
#{$✨}primary-background: #{$azure-550};
|
||||||
#{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
|
#{$✨}primary-border: var(#{$✨}primary-background);
|
||||||
#{$css-var-prefix}primary-underline: #{rgba($azure-350, 0.5)};
|
#{$✨}primary-underline: #{rgba($azure-350, 0.5)};
|
||||||
#{$css-var-prefix}primary-hover: #{$azure-250};
|
#{$✨}primary-hover: #{$azure-250};
|
||||||
#{$css-var-prefix}primary-hover-background: #{$azure-500};
|
#{$✨}primary-hover-background: #{$azure-500};
|
||||||
#{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
|
#{$✨}primary-hover-border: var(#{$✨}primary-hover-background);
|
||||||
#{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
|
#{$✨}primary-hover-underline: var(#{$✨}primary-hover);
|
||||||
#{$css-var-prefix}primary-focus: #{rgba($azure-350, 0.375)};
|
#{$✨}primary-focus: #{rgba($azure-350, 0.375)};
|
||||||
#{$css-var-prefix}primary-inverse: #{$white};
|
#{$✨}primary-inverse: #{$white};
|
||||||
|
|
||||||
// Secondary colors
|
// Secondary colors
|
||||||
#{$css-var-prefix}secondary: #{$zinc-350};
|
#{$✨}secondary: #{$zinc-350};
|
||||||
#{$css-var-prefix}secondary-background: #{$slate-600};
|
#{$✨}secondary-background: #{$slate-600};
|
||||||
#{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
|
#{$✨}secondary-border: var(#{$✨}secondary-background);
|
||||||
#{$css-var-prefix}secondary-underline: #{rgba($zinc-350, 0.5)};
|
#{$✨}secondary-underline: #{rgba($zinc-350, 0.5)};
|
||||||
#{$css-var-prefix}secondary-hover: #{$zinc-250};
|
#{$✨}secondary-hover: #{$zinc-250};
|
||||||
#{$css-var-prefix}secondary-hover-background: #{$slate-550};
|
#{$✨}secondary-hover-background: #{$slate-550};
|
||||||
#{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
|
#{$✨}secondary-hover-border: var(#{$✨}secondary-hover-background);
|
||||||
#{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
|
#{$✨}secondary-hover-underline: var(#{$✨}secondary-hover);
|
||||||
#{$css-var-prefix}secondary-focus: #{rgba($slate-350, 0.25)};
|
#{$✨}secondary-focus: #{rgba($slate-350, 0.25)};
|
||||||
#{$css-var-prefix}secondary-inverse: #{$white};
|
#{$✨}secondary-inverse: #{$white};
|
||||||
|
|
||||||
// Contrast colors
|
// Contrast colors
|
||||||
#{$css-var-prefix}contrast: #{$slate-100};
|
#{$✨}contrast: #{$slate-100};
|
||||||
#{$css-var-prefix}contrast-background: #{$slate-50};
|
#{$✨}contrast-background: #{$slate-50};
|
||||||
#{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
|
#{$✨}contrast-border: var(#{$✨}contrast-background);
|
||||||
#{$css-var-prefix}contrast-underline: #{rgba($slate-100, 0.5)};
|
#{$✨}contrast-underline: #{rgba($slate-100, 0.5)};
|
||||||
#{$css-var-prefix}contrast-hover: #{$white};
|
#{$✨}contrast-hover: #{$white};
|
||||||
#{$css-var-prefix}contrast-hover-background: #{$white};
|
#{$✨}contrast-hover-background: #{$white};
|
||||||
#{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
|
#{$✨}contrast-hover-border: var(#{$✨}contrast-hover-background);
|
||||||
#{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}contrast-hover);
|
#{$✨}contrast-hover-underline: var(#{$✨}contrast-hover);
|
||||||
#{$css-var-prefix}contrast-focus: #{rgba($slate-150, 0.25)};
|
#{$✨}contrast-focus: #{rgba($slate-150, 0.25)};
|
||||||
#{$css-var-prefix}contrast-inverse: #{$black};
|
#{$✨}contrast-inverse: #{$black};
|
||||||
|
|
||||||
// Box shadow
|
// Box shadow
|
||||||
#{$css-var-prefix}box-shadow: box-shadow.shadow($black);
|
#{$✨}box-shadow: box-shadow.shadow($black);
|
||||||
|
|
||||||
// Typography
|
// Typography
|
||||||
@if map.get($modules, "content/typography") {
|
@if map.get($modules, "content/typography") {
|
||||||
// Headings colors
|
// Headings colors
|
||||||
#{$css-var-prefix}h1-color: #{$zinc-50};
|
#{$✨}h1-color: #{$zinc-50};
|
||||||
#{$css-var-prefix}h2-color: #{$zinc-100};
|
#{$✨}h2-color: #{$zinc-100};
|
||||||
#{$css-var-prefix}h3-color: #{$zinc-200};
|
#{$✨}h3-color: #{$zinc-200};
|
||||||
#{$css-var-prefix}h4-color: #{$zinc-250};
|
#{$✨}h4-color: #{$zinc-250};
|
||||||
#{$css-var-prefix}h5-color: #{$zinc-300};
|
#{$✨}h5-color: #{$zinc-300};
|
||||||
#{$css-var-prefix}h6-color: #{$zinc-400};
|
#{$✨}h6-color: #{$zinc-400};
|
||||||
|
|
||||||
// Highlighted text (<mark>)
|
// Highlighted text (<mark>)
|
||||||
#{$css-var-prefix}mark-background-color: #{$azure-750};
|
#{$✨}mark-background-color: #{$azure-750};
|
||||||
#{$css-var-prefix}mark-color: #{$white};
|
#{$✨}mark-color: #{$white};
|
||||||
|
|
||||||
// Inserted (<ins>) & Deleted (<del>)
|
// Inserted (<ins>) & Deleted (<del>)
|
||||||
#{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-200)};
|
#{$✨}ins-color: #{mix($jade-450, $zinc-200)};
|
||||||
#{$css-var-prefix}del-color: #{mix($red-500, $zinc-200)};
|
#{$✨}del-color: #{mix($red-500, $zinc-200)};
|
||||||
|
|
||||||
// Blockquote
|
// Blockquote
|
||||||
#{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
|
#{$✨}blockquote-border-color: var(#{$✨}muted-border-color);
|
||||||
#{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color);
|
#{$✨}blockquote-footer-color: var(#{$✨}muted-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Button
|
// Button
|
||||||
@if map.get($modules, "content/button") {
|
@if map.get($modules, "content/button") {
|
||||||
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
|
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
|
||||||
// Don't use, 'none, 'false, 'null', '0', etc.
|
// Don't use, 'none, 'false, 'null', '0', etc.
|
||||||
#{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
#{$✨}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
#{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
#{$✨}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Table
|
// Table
|
||||||
@if map.get($modules, "content/table") {
|
@if map.get($modules, "content/table") {
|
||||||
#{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
|
#{$✨}table-border-color: var(#{$✨}muted-border-color);
|
||||||
#{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
|
#{$✨}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Code
|
// Code
|
||||||
@if map.get($modules, "content/code") {
|
@if map.get($modules, "content/code") {
|
||||||
#{$css-var-prefix}code-background-color: #{mix($slate-900, $slate-850, 75%)};
|
#{$✨}code-background-color: #{mix($slate-900, $slate-850, 75%)};
|
||||||
#{$css-var-prefix}code-color: #{$zinc-400};
|
#{$✨}code-color: #{$zinc-400};
|
||||||
#{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
|
#{$✨}code-kbd-background-color: var(#{$✨}color);
|
||||||
#{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
|
#{$✨}code-kbd-color: var(#{$✨}background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Form elements
|
// Form elements
|
||||||
@if map.get($modules, "forms/basics") {
|
@if map.get($modules, "forms/basics") {
|
||||||
#{$css-var-prefix}form-element-background-color: #{mix($slate-900, $slate-850)};
|
#{$✨}form-element-background-color: #{mix($slate-900, $slate-850)};
|
||||||
#{$css-var-prefix}form-element-selected-background-color: #{$slate-800};
|
#{$✨}form-element-selected-background-color: #{$slate-800};
|
||||||
#{$css-var-prefix}form-element-border-color: #{$slate-800};
|
#{$✨}form-element-border-color: #{$slate-800};
|
||||||
#{$css-var-prefix}form-element-color: #{$zinc-100};
|
#{$✨}form-element-color: #{$zinc-100};
|
||||||
#{$css-var-prefix}form-element-placeholder-color: #{$zinc-400};
|
#{$✨}form-element-placeholder-color: #{$zinc-400};
|
||||||
#{$css-var-prefix}form-element-active-background-color: #{mix($slate-900, $slate-850, 75%)};
|
#{$✨}form-element-active-background-color: #{mix($slate-900, $slate-850, 75%)};
|
||||||
#{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
|
#{$✨}form-element-active-border-color: var(#{$✨}primary-border);
|
||||||
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
|
#{$✨}form-element-focus-color: var(#{$✨}primary-border);
|
||||||
#{$css-var-prefix}form-element-disabled-background-color: var(
|
#{$✨}form-element-disabled-background-color: var(#{$✨}form-element-background-color);
|
||||||
#{$css-var-prefix}form-element-background-color
|
#{$✨}form-element-disabled-border-color: var(#{$✨}form-element-border-color);
|
||||||
);
|
#{$✨}form-element-disabled-opacity: 0.5;
|
||||||
#{$css-var-prefix}form-element-disabled-border-color: var(
|
#{$✨}form-element-invalid-border-color: #{mix($red-500, $slate-600)};
|
||||||
#{$css-var-prefix}form-element-border-color
|
#{$✨}form-element-invalid-active-border-color: #{mix($red-500, $slate-600, 75%)};
|
||||||
);
|
#{$✨}form-element-invalid-focus-color: var(#{$✨}form-element-invalid-active-border-color);
|
||||||
#{$css-var-prefix}form-element-disabled-opacity: 0.5;
|
#{$✨}form-element-valid-border-color: #{mix($jade-450, $slate-600)};
|
||||||
#{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $slate-600)};
|
#{$✨}form-element-valid-active-border-color: #{mix($jade-450, $slate-600, 75%)};
|
||||||
#{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $slate-600, 75%)};
|
#{$✨}form-element-valid-focus-color: var(#{$✨}form-element-valid-active-border-color);
|
||||||
#{$css-var-prefix}form-element-invalid-focus-color: var(
|
|
||||||
#{$css-var-prefix}form-element-invalid-active-border-color
|
|
||||||
);
|
|
||||||
#{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $slate-600)};
|
|
||||||
#{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $slate-600, 75%)};
|
|
||||||
#{$css-var-prefix}form-element-valid-focus-color: var(
|
|
||||||
#{$css-var-prefix}form-element-valid-active-border-color
|
|
||||||
);
|
|
||||||
|
|
||||||
// Focus for buttons, radio and select
|
// Focus for buttons, radio and select
|
||||||
input:is(
|
input:is(
|
||||||
@ -139,71 +131,71 @@
|
|||||||
[type="radio"],
|
[type="radio"],
|
||||||
[type="file"]
|
[type="file"]
|
||||||
) {
|
) {
|
||||||
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
|
#{$✨}form-element-focus-color: var(#{$✨}primary-focus);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Switch (input[type="checkbox"][role="switch"])
|
// Switch (input[type="checkbox"][role="switch"])
|
||||||
@if map.get($modules, "forms/checkbox-radio-switch") {
|
@if map.get($modules, "forms/checkbox-radio-switch") {
|
||||||
#{$css-var-prefix}switch-background-color: #{$slate-750};
|
#{$✨}switch-background-color: #{$slate-750};
|
||||||
#{$css-var-prefix}switch-color: var(#{$css-var-prefix}primary-inverse);
|
#{$✨}switch-color: var(#{$✨}primary-inverse);
|
||||||
#{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
|
#{$✨}switch-checked-background-color: var(#{$✨}primary-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Range (input[type="range"])
|
// Range (input[type="range"])
|
||||||
@if map.get($modules, "forms/input-range") {
|
@if map.get($modules, "forms/input-range") {
|
||||||
#{$css-var-prefix}range-border-color: #{$slate-850};
|
#{$✨}range-border-color: #{$slate-850};
|
||||||
#{$css-var-prefix}range-active-border-color: #{$slate-800};
|
#{$✨}range-active-border-color: #{$slate-800};
|
||||||
#{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
|
#{$✨}range-thumb-border-color: var(#{$✨}background-color);
|
||||||
#{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
|
#{$✨}range-thumb-color: var(#{$✨}secondary-background);
|
||||||
#{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background);
|
#{$✨}range-thumb-active-color: var(#{$✨}primary-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Accordion (<details>)
|
// Accordion (<details>)
|
||||||
@if map.get($modules, "components/accordion") {
|
@if map.get($modules, "components/accordion") {
|
||||||
#{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
|
#{$✨}accordion-border-color: var(#{$✨}muted-border-color);
|
||||||
#{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
|
#{$✨}accordion-active-summary-color: var(#{$✨}primary-hover);
|
||||||
#{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
|
#{$✨}accordion-close-summary-color: var(#{$✨}color);
|
||||||
#{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color);
|
#{$✨}accordion-open-summary-color: var(#{$✨}muted-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Card (<article>)
|
// Card (<article>)
|
||||||
@if map.get($modules, "components/card") {
|
@if map.get($modules, "components/card") {
|
||||||
#{$css-var-prefix}card-background-color: #{$slate-900};
|
#{$✨}card-background-color: #{$slate-900};
|
||||||
#{$css-var-prefix}card-border-color: var(#{$css-var-prefix}card-background-color);
|
#{$✨}card-border-color: var(#{$✨}card-background-color);
|
||||||
#{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
|
#{$✨}card-box-shadow: var(#{$✨}box-shadow);
|
||||||
#{$css-var-prefix}card-sectioning-background-color: #{mix($slate-900, $slate-850, 75%)};
|
#{$✨}card-sectioning-background-color: #{mix($slate-900, $slate-850, 75%)};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Dropdown (details.dropdown)
|
// Dropdown (details.dropdown)
|
||||||
@if map.get($modules, "components/dropdown") and $enable-classes {
|
@if map.get($modules, "components/dropdown") and $enable-classes {
|
||||||
#{$css-var-prefix}dropdown-background-color: #{$slate-900};
|
#{$✨}dropdown-background-color: #{$slate-900};
|
||||||
#{$css-var-prefix}dropdown-border-color: #{$slate-850};
|
#{$✨}dropdown-border-color: #{$slate-850};
|
||||||
#{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
|
#{$✨}dropdown-box-shadow: var(#{$✨}box-shadow);
|
||||||
#{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
|
#{$✨}dropdown-color: var(#{$✨}color);
|
||||||
#{$css-var-prefix}dropdown-hover-background-color: #{$slate-850};
|
#{$✨}dropdown-hover-background-color: #{$slate-850};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Loading ([aria-busy=true])
|
// Loading ([aria-busy=true])
|
||||||
@if map.get($modules, "components/loading") {
|
@if map.get($modules, "components/loading") {
|
||||||
#{$css-var-prefix}loading-spinner-opacity: 0.5;
|
#{$✨}loading-spinner-opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Modal (<dialog>)
|
// Modal (<dialog>)
|
||||||
@if map.get($modules, "components/modal") {
|
@if map.get($modules, "components/modal") {
|
||||||
#{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($black, $zinc-950), 0.75)};
|
#{$✨}modal-overlay-background-color: #{rgba(mix($black, $zinc-950), 0.75)};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Progress
|
// Progress
|
||||||
@if map.get($modules, "components/progress") {
|
@if map.get($modules, "components/progress") {
|
||||||
#{$css-var-prefix}progress-background-color: #{$slate-850};
|
#{$✨}progress-background-color: #{$slate-850};
|
||||||
#{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background);
|
#{$✨}progress-color: var(#{$✨}primary-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tooltip ([data-tooltip])
|
// Tooltip ([data-tooltip])
|
||||||
@if map.get($modules, "components/tooltip") {
|
@if map.get($modules, "components/tooltip") {
|
||||||
#{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
|
#{$✨}tooltip-background-color: var(#{$✨}contrast-background);
|
||||||
#{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
|
#{$✨}tooltip-color: var(#{$✨}contrast-inverse);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Chevron icons
|
// Chevron icons
|
||||||
@ -224,8 +216,8 @@
|
|||||||
|
|
||||||
// Form validation icons
|
// Form validation icons
|
||||||
@if map.get($modules, "forms/basics") {
|
@if map.get($modules, "forms/basics") {
|
||||||
#{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
#{$✨}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
#{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($red-500, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
#{$✨}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($red-500, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||||
}
|
}
|
||||||
|
|
||||||
// Loading icon (animated)
|
// Loading icon (animated)
|
||||||
|
|||||||
@ -6,129 +6,121 @@
|
|||||||
|
|
||||||
// Default: Light theme
|
// Default: Light theme
|
||||||
@mixin theme {
|
@mixin theme {
|
||||||
#{$css-var-prefix}background-color: #{$white};
|
#{$✨}background-color: #{$white};
|
||||||
|
|
||||||
// Text color
|
// Text color
|
||||||
#{$css-var-prefix}color: #{$zinc-750};
|
#{$✨}color: #{$zinc-750};
|
||||||
|
|
||||||
// Text selection color
|
// Text selection color
|
||||||
#{$css-var-prefix}text-selection-color: #{rgba($azure-400, 0.25)};
|
#{$✨}text-selection-color: #{rgba($azure-400, 0.25)};
|
||||||
|
|
||||||
// Muted colors
|
// Muted colors
|
||||||
#{$css-var-prefix}muted-color: #{$zinc-550};
|
#{$✨}muted-color: #{$zinc-550};
|
||||||
#{$css-var-prefix}muted-border-color: #{mix($slate-100, $slate-50)};
|
#{$✨}muted-border-color: #{mix($slate-100, $slate-50)};
|
||||||
|
|
||||||
// Primary colors
|
// Primary colors
|
||||||
#{$css-var-prefix}primary: #{$azure-550};
|
#{$✨}primary: #{$azure-550};
|
||||||
#{$css-var-prefix}primary-background: #{$azure-550};
|
#{$✨}primary-background: #{$azure-550};
|
||||||
#{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
|
#{$✨}primary-border: var(#{$✨}primary-background);
|
||||||
#{$css-var-prefix}primary-underline: #{rgba($azure-550, 0.5)};
|
#{$✨}primary-underline: #{rgba($azure-550, 0.5)};
|
||||||
#{$css-var-prefix}primary-hover: #{$azure-650};
|
#{$✨}primary-hover: #{$azure-650};
|
||||||
#{$css-var-prefix}primary-hover-background: #{$azure-600};
|
#{$✨}primary-hover-background: #{$azure-600};
|
||||||
#{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
|
#{$✨}primary-hover-border: var(#{$✨}primary-hover-background);
|
||||||
#{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
|
#{$✨}primary-hover-underline: var(#{$✨}primary-hover);
|
||||||
#{$css-var-prefix}primary-focus: #{rgba($azure-400, 0.5)};
|
#{$✨}primary-focus: #{rgba($azure-400, 0.5)};
|
||||||
#{$css-var-prefix}primary-inverse: #{$white};
|
#{$✨}primary-inverse: #{$white};
|
||||||
|
|
||||||
// Secondary colors
|
// Secondary colors
|
||||||
#{$css-var-prefix}secondary: #{$slate-550};
|
#{$✨}secondary: #{$slate-550};
|
||||||
#{$css-var-prefix}secondary-background: #{$slate-600};
|
#{$✨}secondary-background: #{$slate-600};
|
||||||
#{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
|
#{$✨}secondary-border: var(#{$✨}secondary-background);
|
||||||
#{$css-var-prefix}secondary-underline: #{rgba($slate-550, 0.5)};
|
#{$✨}secondary-underline: #{rgba($slate-550, 0.5)};
|
||||||
#{$css-var-prefix}secondary-hover: #{$slate-650};
|
#{$✨}secondary-hover: #{$slate-650};
|
||||||
#{$css-var-prefix}secondary-hover-background: #{$slate-650};
|
#{$✨}secondary-hover-background: #{$slate-650};
|
||||||
#{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
|
#{$✨}secondary-hover-border: var(#{$✨}secondary-hover-background);
|
||||||
#{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
|
#{$✨}secondary-hover-underline: var(#{$✨}secondary-hover);
|
||||||
#{$css-var-prefix}secondary-focus: #{rgba($slate-550, 0.25)};
|
#{$✨}secondary-focus: #{rgba($slate-550, 0.25)};
|
||||||
#{$css-var-prefix}secondary-inverse: #{$white};
|
#{$✨}secondary-inverse: #{$white};
|
||||||
|
|
||||||
// Contrast colors
|
// Contrast colors
|
||||||
#{$css-var-prefix}contrast: #{$slate-900};
|
#{$✨}contrast: #{$slate-900};
|
||||||
#{$css-var-prefix}contrast-background: #{$slate-900};
|
#{$✨}contrast-background: #{$slate-900};
|
||||||
#{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
|
#{$✨}contrast-border: var(#{$✨}contrast-background);
|
||||||
#{$css-var-prefix}contrast-underline: #{rgba($slate-900, 0.5)};
|
#{$✨}contrast-underline: #{rgba($slate-900, 0.5)};
|
||||||
#{$css-var-prefix}contrast-hover: #{$black};
|
#{$✨}contrast-hover: #{$black};
|
||||||
#{$css-var-prefix}contrast-hover-background: #{$black};
|
#{$✨}contrast-hover-background: #{$black};
|
||||||
#{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
|
#{$✨}contrast-hover-border: var(#{$✨}contrast-hover-background);
|
||||||
#{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}secondary-hover);
|
#{$✨}contrast-hover-underline: var(#{$✨}secondary-hover);
|
||||||
#{$css-var-prefix}contrast-focus: #{rgba($slate-550, 0.25)};
|
#{$✨}contrast-focus: #{rgba($slate-550, 0.25)};
|
||||||
#{$css-var-prefix}contrast-inverse: #{$white};
|
#{$✨}contrast-inverse: #{$white};
|
||||||
|
|
||||||
// Box shadow
|
// Box shadow
|
||||||
#{$css-var-prefix}box-shadow: box-shadow.shadow($slate-500);
|
#{$✨}box-shadow: box-shadow.shadow($slate-500);
|
||||||
|
|
||||||
// Typography
|
// Typography
|
||||||
@if map.get($modules, "content/typography") {
|
@if map.get($modules, "content/typography") {
|
||||||
// Headings colors
|
// Headings colors
|
||||||
#{$css-var-prefix}h1-color: #{$zinc-800};
|
#{$✨}h1-color: #{$zinc-800};
|
||||||
#{$css-var-prefix}h2-color: #{$zinc-750};
|
#{$✨}h2-color: #{$zinc-750};
|
||||||
#{$css-var-prefix}h3-color: #{$zinc-700};
|
#{$✨}h3-color: #{$zinc-700};
|
||||||
#{$css-var-prefix}h4-color: #{$zinc-650};
|
#{$✨}h4-color: #{$zinc-650};
|
||||||
#{$css-var-prefix}h5-color: #{$zinc-600};
|
#{$✨}h5-color: #{$zinc-600};
|
||||||
#{$css-var-prefix}h6-color: #{$zinc-550};
|
#{$✨}h6-color: #{$zinc-550};
|
||||||
|
|
||||||
// Highlighted text (<mark>)
|
// Highlighted text (<mark>)
|
||||||
#{$css-var-prefix}mark-background-color: #{mix($amber-100, $amber-50)};
|
#{$✨}mark-background-color: #{mix($amber-100, $amber-50)};
|
||||||
#{$css-var-prefix}mark-color: #{$zinc-950};
|
#{$✨}mark-color: #{$zinc-950};
|
||||||
|
|
||||||
// Inserted (<ins>) & Deleted (<del>)
|
// Inserted (<ins>) & Deleted (<del>)
|
||||||
#{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-750)};
|
#{$✨}ins-color: #{mix($jade-450, $zinc-750)};
|
||||||
#{$css-var-prefix}del-color: #{mix($red-500, $zinc-750)};
|
#{$✨}del-color: #{mix($red-500, $zinc-750)};
|
||||||
|
|
||||||
// Blockquote
|
// Blockquote
|
||||||
#{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
|
#{$✨}blockquote-border-color: var(#{$✨}muted-border-color);
|
||||||
#{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color);
|
#{$✨}blockquote-footer-color: var(#{$✨}muted-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Button
|
// Button
|
||||||
@if map.get($modules, "content/button") {
|
@if map.get($modules, "content/button") {
|
||||||
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
|
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
|
||||||
// Don't use, 'none, 'false, 'null', '0', etc.
|
// Don't use, 'none, 'false, 'null', '0', etc.
|
||||||
#{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
#{$✨}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
#{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
#{$✨}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Table
|
// Table
|
||||||
@if map.get($modules, "content/table") {
|
@if map.get($modules, "content/table") {
|
||||||
#{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
|
#{$✨}table-border-color: var(#{$✨}muted-border-color);
|
||||||
#{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
|
#{$✨}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Code
|
// Code
|
||||||
@if map.get($modules, "content/code") {
|
@if map.get($modules, "content/code") {
|
||||||
#{$css-var-prefix}code-background-color: #{mix($slate-50, $white, 75%)};
|
#{$✨}code-background-color: #{mix($slate-50, $white, 75%)};
|
||||||
#{$css-var-prefix}code-color: #{$zinc-550};
|
#{$✨}code-color: #{$zinc-550};
|
||||||
#{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
|
#{$✨}code-kbd-background-color: var(#{$✨}color);
|
||||||
#{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
|
#{$✨}code-kbd-color: var(#{$✨}background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Form elements
|
// Form elements
|
||||||
@if map.get($modules, "forms/basics") {
|
@if map.get($modules, "forms/basics") {
|
||||||
#{$css-var-prefix}form-element-background-color: #{mix($slate-50, $white, 25%)};
|
#{$✨}form-element-background-color: #{mix($slate-50, $white, 25%)};
|
||||||
#{$css-var-prefix}form-element-selected-background-color: #{$slate-100};
|
#{$✨}form-element-selected-background-color: #{$slate-100};
|
||||||
#{$css-var-prefix}form-element-border-color: #{$slate-150};
|
#{$✨}form-element-border-color: #{$slate-150};
|
||||||
#{$css-var-prefix}form-element-color: #{$zinc-850};
|
#{$✨}form-element-color: #{$zinc-850};
|
||||||
#{$css-var-prefix}form-element-placeholder-color: var(#{$css-var-prefix}muted-color);
|
#{$✨}form-element-placeholder-color: var(#{$✨}muted-color);
|
||||||
#{$css-var-prefix}form-element-active-background-color: #{$white};
|
#{$✨}form-element-active-background-color: #{$white};
|
||||||
#{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
|
#{$✨}form-element-active-border-color: var(#{$✨}primary-border);
|
||||||
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
|
#{$✨}form-element-focus-color: var(#{$✨}primary-border);
|
||||||
#{$css-var-prefix}form-element-disabled-background-color: var(
|
#{$✨}form-element-disabled-background-color: var(#{$✨}form-element-background-color);
|
||||||
#{$css-var-prefix}form-element-background-color
|
#{$✨}form-element-disabled-border-color: var(#{$✨}form-element-border-color);
|
||||||
);
|
#{$✨}form-element-disabled-opacity: 0.5;
|
||||||
#{$css-var-prefix}form-element-disabled-border-color: var(
|
#{$✨}form-element-invalid-border-color: #{mix($red-500, $zinc-350)};
|
||||||
#{$css-var-prefix}form-element-border-color
|
#{$✨}form-element-invalid-active-border-color: #{mix($red-500, $zinc-350, 75%)};
|
||||||
);
|
#{$✨}form-element-invalid-focus-color: var(#{$✨}form-element-invalid-active-border-color);
|
||||||
#{$css-var-prefix}form-element-disabled-opacity: 0.5;
|
#{$✨}form-element-valid-border-color: #{mix($jade-450, $zinc-350)};
|
||||||
#{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $zinc-350)};
|
#{$✨}form-element-valid-active-border-color: #{mix($jade-450, $zinc-350, 75%)};
|
||||||
#{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $zinc-350, 75%)};
|
#{$✨}form-element-valid-focus-color: var(#{$✨}form-element-valid-active-border-color);
|
||||||
#{$css-var-prefix}form-element-invalid-focus-color: var(
|
|
||||||
#{$css-var-prefix}form-element-invalid-active-border-color
|
|
||||||
);
|
|
||||||
#{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $zinc-350)};
|
|
||||||
#{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $zinc-350, 75%)};
|
|
||||||
#{$css-var-prefix}form-element-valid-focus-color: var(
|
|
||||||
#{$css-var-prefix}form-element-valid-active-border-color
|
|
||||||
);
|
|
||||||
|
|
||||||
// Focus for buttons, radio and select
|
// Focus for buttons, radio and select
|
||||||
input:is(
|
input:is(
|
||||||
@ -139,77 +131,77 @@
|
|||||||
[type="radio"],
|
[type="radio"],
|
||||||
[type="file"]
|
[type="file"]
|
||||||
) {
|
) {
|
||||||
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
|
#{$✨}form-element-focus-color: var(#{$✨}primary-focus);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Switch (input[type="checkbox"][role="switch"])
|
// Switch (input[type="checkbox"][role="switch"])
|
||||||
@if map.get($modules, "forms/checkbox-radio-switch") {
|
@if map.get($modules, "forms/checkbox-radio-switch") {
|
||||||
#{$css-var-prefix}switch-background-color: #{$slate-200};
|
#{$✨}switch-background-color: #{$slate-200};
|
||||||
#{$css-var-prefix}switch-color: var(#{$css-var-prefix}primary-inverse);
|
#{$✨}switch-color: var(#{$✨}primary-inverse);
|
||||||
#{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
|
#{$✨}switch-checked-background-color: var(#{$✨}primary-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Range (input[type="range"])
|
// Range (input[type="range"])
|
||||||
@if map.get($modules, "forms/input-range") {
|
@if map.get($modules, "forms/input-range") {
|
||||||
#{$css-var-prefix}range-border-color: #{$slate-100};
|
#{$✨}range-border-color: #{$slate-100};
|
||||||
#{$css-var-prefix}range-active-border-color: #{$slate-200};
|
#{$✨}range-active-border-color: #{$slate-200};
|
||||||
#{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
|
#{$✨}range-thumb-border-color: var(#{$✨}background-color);
|
||||||
#{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
|
#{$✨}range-thumb-color: var(#{$✨}secondary-background);
|
||||||
#{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background);
|
#{$✨}range-thumb-active-color: var(#{$✨}primary-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Accordion (<details>)
|
// Accordion (<details>)
|
||||||
@if map.get($modules, "components/accordion") {
|
@if map.get($modules, "components/accordion") {
|
||||||
#{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
|
#{$✨}accordion-border-color: var(#{$✨}muted-border-color);
|
||||||
#{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
|
#{$✨}accordion-active-summary-color: var(#{$✨}primary-hover);
|
||||||
#{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
|
#{$✨}accordion-close-summary-color: var(#{$✨}color);
|
||||||
#{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color);
|
#{$✨}accordion-open-summary-color: var(#{$✨}muted-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Card (<article>)
|
// Card (<article>)
|
||||||
@if map.get($modules, "components/card") {
|
@if map.get($modules, "components/card") {
|
||||||
#{$css-var-prefix}card-background-color: var(#{$css-var-prefix}background-color);
|
#{$✨}card-background-color: var(#{$✨}background-color);
|
||||||
#{$css-var-prefix}card-border-color: var(#{$css-var-prefix}muted-border-color);
|
#{$✨}card-border-color: var(#{$✨}muted-border-color);
|
||||||
#{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
|
#{$✨}card-box-shadow: var(#{$✨}box-shadow);
|
||||||
#{$css-var-prefix}card-sectioning-background-color: #{mix($slate-50, $white, 25%)};
|
#{$✨}card-sectioning-background-color: #{mix($slate-50, $white, 25%)};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Dropdown (details.dropdown)
|
// Dropdown (details.dropdown)
|
||||||
@if map.get($modules, "components/dropdown") and $enable-classes {
|
@if map.get($modules, "components/dropdown") and $enable-classes {
|
||||||
#{$css-var-prefix}dropdown-background-color: #{$white};
|
#{$✨}dropdown-background-color: #{$white};
|
||||||
#{$css-var-prefix}dropdown-border-color: #{$slate-50};
|
#{$✨}dropdown-border-color: #{$slate-50};
|
||||||
#{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
|
#{$✨}dropdown-box-shadow: var(#{$✨}box-shadow);
|
||||||
#{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
|
#{$✨}dropdown-color: var(#{$✨}color);
|
||||||
#{$css-var-prefix}dropdown-hover-background-color: #{$slate-50};
|
#{$✨}dropdown-hover-background-color: #{$slate-50};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Loading ([aria-busy=true])
|
// Loading ([aria-busy=true])
|
||||||
@if map.get($modules, "components/loading") {
|
@if map.get($modules, "components/loading") {
|
||||||
#{$css-var-prefix}loading-spinner-opacity: 0.5;
|
#{$✨}loading-spinner-opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Modal (<dialog>)
|
// Modal (<dialog>)
|
||||||
@if map.get($modules, "components/modal") {
|
@if map.get($modules, "components/modal") {
|
||||||
#{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($zinc-100, $zinc-50), 0.75)};
|
#{$✨}modal-overlay-background-color: #{rgba(mix($zinc-100, $zinc-50), 0.75)};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Progress
|
// Progress
|
||||||
@if map.get($modules, "components/progress") {
|
@if map.get($modules, "components/progress") {
|
||||||
#{$css-var-prefix}progress-background-color: #{$slate-100};
|
#{$✨}progress-background-color: #{$slate-100};
|
||||||
#{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background);
|
#{$✨}progress-color: var(#{$✨}primary-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tooltip ([data-tooltip])
|
// Tooltip ([data-tooltip])
|
||||||
@if map.get($modules, "components/tooltip") {
|
@if map.get($modules, "components/tooltip") {
|
||||||
#{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
|
#{$✨}tooltip-background-color: var(#{$✨}contrast-background);
|
||||||
#{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
|
#{$✨}tooltip-color: var(#{$✨}contrast-inverse);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Form validation icons
|
// Form validation icons
|
||||||
@if map.get($modules, "forms/basics") {
|
@if map.get($modules, "forms/basics") {
|
||||||
#{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($jade-450, $zinc-350))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
#{$✨}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($jade-450, $zinc-350))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
#{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($red-500, $zinc-350, 75%))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
#{$✨}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($red-500, $zinc-350, 75%))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||||
}
|
}
|
||||||
|
|
||||||
// Document
|
// Document
|
||||||
|
|||||||
@ -34,6 +34,6 @@
|
|||||||
[type="checkbox"],
|
[type="checkbox"],
|
||||||
[type="radio"],
|
[type="radio"],
|
||||||
[type="range"] {
|
[type="range"] {
|
||||||
accent-color: var(#{$css-var-prefix}primary);
|
accent-color: var(#{$✨}primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -10,43 +10,43 @@
|
|||||||
|
|
||||||
:root {
|
:root {
|
||||||
// Typography
|
// Typography
|
||||||
#{$css-var-prefix}font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
#{$✨}font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||||
"Noto Color Emoji";
|
"Noto Color Emoji";
|
||||||
#{$css-var-prefix}font-family-sans-serif: system-ui, "Segoe UI", Roboto, Helvetica, Arial,
|
#{$✨}font-family-sans-serif: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
|
||||||
sans-serif, var(#{$css-var-prefix}font-family-emoji);
|
var(#{$✨}font-family-emoji);
|
||||||
#{$css-var-prefix}font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
|
#{$✨}font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
|
||||||
Consolas, "Liberation Mono", monospace, var(#{$css-var-prefix}font-family-emoji);
|
"Liberation Mono", monospace, var(#{$✨}font-family-emoji);
|
||||||
#{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-sans-serif);
|
#{$✨}font-family: var(#{$✨}font-family-sans-serif);
|
||||||
#{$css-var-prefix}line-height: 1.5;
|
#{$✨}line-height: 1.5;
|
||||||
#{$css-var-prefix}font-weight: 400;
|
#{$✨}font-weight: 400;
|
||||||
#{$css-var-prefix}font-size: 100%;
|
#{$✨}font-size: 100%;
|
||||||
#{$css-var-prefix}text-underline-offset: 0.1rem;
|
#{$✨}text-underline-offset: 0.1rem;
|
||||||
|
|
||||||
// Responsive root font size
|
// Responsive root font size
|
||||||
@if $enable-responsive-typography {
|
@if $enable-responsive-typography {
|
||||||
@each $key, $values in $breakpoints {
|
@each $key, $values in $breakpoints {
|
||||||
@if $values {
|
@if $values {
|
||||||
@media (min-width: map.get($values, "breakpoint")) {
|
@media (min-width: map.get($values, "breakpoint")) {
|
||||||
#{$css-var-prefix}font-size: map.get($values, "root-font-size");
|
#{$✨}font-size: map.get($values, "root-font-size");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Borders
|
// Borders
|
||||||
#{$css-var-prefix}border-radius: 0.25rem;
|
#{$✨}border-radius: 0.25rem;
|
||||||
#{$css-var-prefix}border-width: 0.0625rem;
|
#{$✨}border-width: 0.0625rem;
|
||||||
#{$css-var-prefix}outline-width: 0.125rem;
|
#{$✨}outline-width: 0.125rem;
|
||||||
|
|
||||||
// Transitions
|
// Transitions
|
||||||
#{$css-var-prefix}transition: 0.2s ease-in-out;
|
#{$✨}transition: 0.2s ease-in-out;
|
||||||
|
|
||||||
// Spacings
|
// Spacings
|
||||||
#{$css-var-prefix}spacing: 1rem;
|
#{$✨}spacing: 1rem;
|
||||||
|
|
||||||
// Spacings for typography elements
|
// Spacings for typography elements
|
||||||
@if map.get($modules, "content/typography") {
|
@if map.get($modules, "content/typography") {
|
||||||
#{$css-var-prefix}typography-spacing-vertical: 1rem;
|
#{$✨}typography-spacing-vertical: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Spacings for body > header, body > main, body > footer, section, article
|
// Spacings for body > header, body > main, body > footer, section, article
|
||||||
@ -55,59 +55,55 @@
|
|||||||
map.get($modules, "components/card") or
|
map.get($modules, "components/card") or
|
||||||
map.get($modules, "components/modal")
|
map.get($modules, "components/modal")
|
||||||
{
|
{
|
||||||
#{$css-var-prefix}block-spacing-vertical: calc(var(#{$css-var-prefix}spacing) * 2);
|
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2);
|
||||||
#{$css-var-prefix}block-spacing-horizontal: var(#{$css-var-prefix}spacing);
|
#{$✨}block-spacing-horizontal: var(#{$✨}spacing);
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map.get($modules, "layout/grid") and $enable-classes {
|
@if map.get($modules, "layout/grid") and $enable-classes {
|
||||||
#{$css-var-prefix}grid-column-gap: var(#{$css-var-prefix}spacing);
|
#{$✨}grid-column-gap: var(#{$✨}spacing);
|
||||||
#{$css-var-prefix}grid-row-gap: var(#{$css-var-prefix}spacing);
|
#{$✨}grid-row-gap: var(#{$✨}spacing);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Spacings for form elements and button
|
// Spacings for form elements and button
|
||||||
@if map.get($modules, "content/button") or map.get($modules, "forms/basic") {
|
@if map.get($modules, "content/button") or map.get($modules, "forms/basic") {
|
||||||
#{$css-var-prefix}form-element-spacing-vertical: 0.75rem;
|
#{$✨}form-element-spacing-vertical: 0.75rem;
|
||||||
#{$css-var-prefix}form-element-spacing-horizontal: 1rem;
|
#{$✨}form-element-spacing-horizontal: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Font weight for form labels & fieldsets legend
|
// Font weight for form labels & fieldsets legend
|
||||||
@if map.get($modules, "forms/basic") {
|
@if map.get($modules, "forms/basic") {
|
||||||
#{$css-var-prefix}form-label-font-weight: var(#{$css-var-prefix}font-weight);
|
#{$✨}form-label-font-weight: var(#{$✨}font-weight);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Group (role="group")
|
// Group (role="group")
|
||||||
@if map.get($modules, "components/group") {
|
@if map.get($modules, "components/group") {
|
||||||
#{$css-var-prefix}group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
#{$✨}group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
#{$css-var-prefix}group-box-shadow-focus-with-button: 0
|
#{$✨}group-box-shadow-focus-with-button: 0
|
||||||
0
|
0
|
||||||
0
|
0
|
||||||
var(#{$css-var-prefix}outline-width)
|
var(#{$✨}outline-width)
|
||||||
var(#{$css-var-prefix}primary-focus);
|
var(#{$✨}primary-focus);
|
||||||
#{$css-var-prefix}group-box-shadow-focus-with-input: 0
|
#{$✨}group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(#{$✨}form-element-border-color);
|
||||||
0
|
|
||||||
0
|
|
||||||
0.0625rem
|
|
||||||
var(#{$css-var-prefix}form-element-border-color);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Modal (<dialog>)
|
// Modal (<dialog>)
|
||||||
@if map.get($modules, "components/modal") {
|
@if map.get($modules, "components/modal") {
|
||||||
#{$css-var-prefix}modal-overlay-backdrop-filter: blur(0.375rem);
|
#{$✨}modal-overlay-backdrop-filter: blur(0.375rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Spacings for nav component
|
// Spacings for nav component
|
||||||
@if map.get($modules, "components/nav") {
|
@if map.get($modules, "components/nav") {
|
||||||
#{$css-var-prefix}nav-element-spacing-vertical: 1rem;
|
#{$✨}nav-element-spacing-vertical: 1rem;
|
||||||
#{$css-var-prefix}nav-element-spacing-horizontal: 0.5rem;
|
#{$✨}nav-element-spacing-horizontal: 0.5rem;
|
||||||
#{$css-var-prefix}nav-link-spacing-vertical: 0.5rem;
|
#{$✨}nav-link-spacing-vertical: 0.5rem;
|
||||||
#{$css-var-prefix}nav-link-spacing-horizontal: 0.5rem;
|
#{$✨}nav-link-spacing-horizontal: 0.5rem;
|
||||||
#{$css-var-prefix}nav-breadcrumb-divider: ">";
|
#{$✨}nav-breadcrumb-divider: ">";
|
||||||
}
|
}
|
||||||
|
|
||||||
// Checkboxes icons
|
// Checkboxes icons
|
||||||
@if map.get($modules, "forms/checkbox-radio-switch") {
|
@if map.get($modules, "forms/checkbox-radio-switch") {
|
||||||
#{$css-var-prefix}icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
#{$✨}icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
#{$css-var-prefix}icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
#{$✨}icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||||
}
|
}
|
||||||
|
|
||||||
// Chevron icons
|
// Chevron icons
|
||||||
@ -115,7 +111,7 @@
|
|||||||
map.get($modules, "components/accordion") or
|
map.get($modules, "components/accordion") or
|
||||||
map.get($modules, "components/dropdown")
|
map.get($modules, "components/dropdown")
|
||||||
{
|
{
|
||||||
#{$css-var-prefix}icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
#{$✨}icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
}
|
}
|
||||||
|
|
||||||
// Chevron icons
|
// Chevron icons
|
||||||
@ -138,24 +134,24 @@
|
|||||||
|
|
||||||
// Datetime icons
|
// Datetime icons
|
||||||
@if map.get($modules, "forms/input-date") {
|
@if map.get($modules, "forms/input-date") {
|
||||||
#{$css-var-prefix}icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
#{$✨}icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||||
#{$css-var-prefix}icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
#{$✨}icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
}
|
}
|
||||||
|
|
||||||
// Search icon
|
// Search icon
|
||||||
@if map.get($modules, "forms/input-search") {
|
@if map.get($modules, "forms/input-search") {
|
||||||
#{$css-var-prefix}icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
#{$✨}icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||||
}
|
}
|
||||||
|
|
||||||
// Close icon
|
// Close icon
|
||||||
@if map.get($modules, "components/modal") {
|
@if map.get($modules, "components/modal") {
|
||||||
#{$css-var-prefix}icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
#{$✨}icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||||
}
|
}
|
||||||
|
|
||||||
// Loading icon (animated)
|
// Loading icon (animated)
|
||||||
@if map.get($modules, "components/loading") {
|
@if map.get($modules, "components/loading") {
|
||||||
// Inspired by https://codepen.io/aleksander351/pen/KzgKPo
|
// Inspired by https://codepen.io/aleksander351/pen/KzgKPo
|
||||||
#{$css-var-prefix}icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
|
#{$✨}icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
|
||||||
|
|
||||||
// Change the icon color to white for buttons
|
// Change the icon color to white for buttons
|
||||||
[aria-busy="true"]:not(input, select, textarea) {
|
[aria-busy="true"]:not(input, select, textarea) {
|
||||||
@ -196,9 +192,7 @@
|
|||||||
$multiplier: 4.5;
|
$multiplier: 4.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
#{$css-var-prefix}block-spacing-vertical: calc(
|
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * $multiplier);
|
||||||
var(#{$css-var-prefix}spacing) * $multiplier
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -224,9 +218,7 @@
|
|||||||
$multiplier: 2.25;
|
$multiplier: 2.25;
|
||||||
}
|
}
|
||||||
|
|
||||||
#{$css-var-prefix}block-spacing-horizontal: calc(
|
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * $multiplier);
|
||||||
var(#{$css-var-prefix}spacing) * $multiplier
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -236,20 +228,20 @@
|
|||||||
// Modal
|
// Modal
|
||||||
@if map.get($modules, "components/modal") {
|
@if map.get($modules, "components/modal") {
|
||||||
dialog > article {
|
dialog > article {
|
||||||
#{$css-var-prefix}block-spacing-vertical: calc(var(#{$css-var-prefix}spacing) * 2);
|
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2);
|
||||||
#{$css-var-prefix}block-spacing-horizontal: var(#{$css-var-prefix}spacing);
|
#{$✨}block-spacing-horizontal: var(#{$✨}spacing);
|
||||||
|
|
||||||
@if map.get($breakpoints, "sm") {
|
@if map.get($breakpoints, "sm") {
|
||||||
@media (min-width: map.get(map.get($breakpoints, "sm"), "breakpoint")) {
|
@media (min-width: map.get(map.get($breakpoints, "sm"), "breakpoint")) {
|
||||||
#{$css-var-prefix}block-spacing-vertical: calc(var(#{$css-var-prefix}spacing) * 2.5);
|
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2.5);
|
||||||
#{$css-var-prefix}block-spacing-horizontal: calc(var(#{$css-var-prefix}spacing) * 1.25);
|
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.25);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map.get($breakpoints, "md") {
|
@if map.get($breakpoints, "md") {
|
||||||
@media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
|
@media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
|
||||||
#{$css-var-prefix}block-spacing-vertical: calc(var(#{$css-var-prefix}spacing) * 3);
|
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 3);
|
||||||
#{$css-var-prefix}block-spacing-horizontal: calc(var(#{$css-var-prefix}spacing) * 1.5);
|
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -259,13 +251,13 @@
|
|||||||
// Link
|
// Link
|
||||||
@if map.get($modules, "content/link") {
|
@if map.get($modules, "content/link") {
|
||||||
a {
|
a {
|
||||||
#{$css-var-prefix}text-decoration: underline;
|
#{$✨}text-decoration: underline;
|
||||||
|
|
||||||
// Secondary & Contrast
|
// Secondary & Contrast
|
||||||
@if enable-classes {
|
@if enable-classes {
|
||||||
&.secondary,
|
&.secondary,
|
||||||
&.contrast {
|
&.contrast {
|
||||||
#{$css-var-prefix}text-decoration: underline;
|
#{$✨}text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -275,7 +267,7 @@
|
|||||||
@if map.get($modules, "content/typography") {
|
@if map.get($modules, "content/typography") {
|
||||||
// Small
|
// Small
|
||||||
small {
|
small {
|
||||||
#{$css-var-prefix}font-size: 0.875em;
|
#{$✨}font-size: 0.875em;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Headings
|
// Headings
|
||||||
@ -285,42 +277,42 @@
|
|||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
#{$css-var-prefix}font-weight: 700;
|
#{$✨}font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
#{$css-var-prefix}font-size: 2rem;
|
#{$✨}font-size: 2rem;
|
||||||
#{$css-var-prefix}line-height: 1.25;
|
#{$✨}line-height: 1.25;
|
||||||
#{$css-var-prefix}typography-spacing-top: 3rem;
|
#{$✨}typography-spacing-top: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
#{$css-var-prefix}font-size: 1.75rem;
|
#{$✨}font-size: 1.75rem;
|
||||||
#{$css-var-prefix}line-height: 1.3;
|
#{$✨}line-height: 1.3;
|
||||||
#{$css-var-prefix}typography-spacing-top: 2.625rem;
|
#{$✨}typography-spacing-top: 2.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
#{$css-var-prefix}font-size: 1.5rem;
|
#{$✨}font-size: 1.5rem;
|
||||||
#{$css-var-prefix}line-height: 1.35;
|
#{$✨}line-height: 1.35;
|
||||||
#{$css-var-prefix}typography-spacing-top: 2.25rem;
|
#{$✨}typography-spacing-top: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
#{$css-var-prefix}font-size: 1.25rem;
|
#{$✨}font-size: 1.25rem;
|
||||||
#{$css-var-prefix}line-height: 1.4;
|
#{$✨}line-height: 1.4;
|
||||||
#{$css-var-prefix}typography-spacing-top: 1.874rem;
|
#{$✨}typography-spacing-top: 1.874rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
#{$css-var-prefix}font-size: 1.125rem;
|
#{$✨}font-size: 1.125rem;
|
||||||
#{$css-var-prefix}line-height: 1.45;
|
#{$✨}line-height: 1.45;
|
||||||
#{$css-var-prefix}typography-spacing-top: 1.6875rem;
|
#{$✨}typography-spacing-top: 1.6875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h6 {
|
h6 {
|
||||||
#{$css-var-prefix}font-size: 1rem;
|
#{$✨}font-size: 1rem;
|
||||||
#{$css-var-prefix}typography-spacing-top: 1.5rem;
|
#{$✨}typography-spacing-top: 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -330,8 +322,8 @@
|
|||||||
tfoot {
|
tfoot {
|
||||||
th,
|
th,
|
||||||
td {
|
td {
|
||||||
#{$css-var-prefix}font-weight: 600;
|
#{$✨}font-weight: 600;
|
||||||
#{$css-var-prefix}border-width: 0.1875rem;
|
#{$✨}border-width: 0.1875rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -342,11 +334,11 @@
|
|||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
samp {
|
samp {
|
||||||
#{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-monospace);
|
#{$✨}font-family: var(#{$✨}font-family-monospace);
|
||||||
}
|
}
|
||||||
|
|
||||||
kbd {
|
kbd {
|
||||||
#{$css-var-prefix}font-weight: bolder;
|
#{$✨}font-weight: bolder;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -360,22 +352,22 @@
|
|||||||
[type="file"]
|
[type="file"]
|
||||||
),
|
),
|
||||||
:where(select, textarea) {
|
:where(select, textarea) {
|
||||||
#{$css-var-prefix}outline-width: 0.0625rem;
|
#{$✨}outline-width: 0.0625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="search"] {
|
[type="search"] {
|
||||||
#{$css-var-prefix}border-radius: 5rem;
|
#{$✨}border-radius: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Checkboxes, Radios and Switches
|
// Checkboxes, Radios and Switches
|
||||||
@if map.get($modules, "forms/checkbox-radio-switch") {
|
@if map.get($modules, "forms/checkbox-radio-switch") {
|
||||||
[type="checkbox"],
|
[type="checkbox"],
|
||||||
[type="radio"] {
|
[type="radio"] {
|
||||||
#{$css-var-prefix}border-width: 0.125rem;
|
#{$✨}border-width: 0.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="checkbox"][role="switch"] {
|
[type="checkbox"][role="switch"] {
|
||||||
#{$css-var-prefix}border-width: 0.1875rem;
|
#{$✨}border-width: 0.1875rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -383,13 +375,13 @@
|
|||||||
@if map.get($modules, "components/dropdown") and $enable-classes {
|
@if map.get($modules, "components/dropdown") and $enable-classes {
|
||||||
details.dropdown {
|
details.dropdown {
|
||||||
summary:not([role="button"]) {
|
summary:not([role="button"]) {
|
||||||
#{$css-var-prefix}outline-width: 0.0625rem;
|
#{$✨}outline-width: 0.0625rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
nav {
|
nav {
|
||||||
details.dropdown {
|
details.dropdown {
|
||||||
summary:focus-visible {
|
summary:focus-visible {
|
||||||
#{$css-var-prefix}outline-width: 0.125rem;
|
#{$✨}outline-width: 0.125rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -398,7 +390,7 @@
|
|||||||
// Group (role="group")
|
// Group (role="group")
|
||||||
@if map.get($modules, "components/group") {
|
@if map.get($modules, "components/group") {
|
||||||
[role="search"] {
|
[role="search"] {
|
||||||
#{$css-var-prefix}border-radius: 5rem;
|
#{$✨}border-radius: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
[role="search"],
|
[role="search"],
|
||||||
@ -410,11 +402,11 @@
|
|||||||
[type="button"].secondary:focus,
|
[type="button"].secondary:focus,
|
||||||
[role="button"].secondary:focus
|
[role="button"].secondary:focus
|
||||||
) {
|
) {
|
||||||
#{$css-var-prefix}group-box-shadow-focus-with-button: 0
|
#{$✨}group-box-shadow-focus-with-button: 0
|
||||||
0
|
0
|
||||||
0
|
0
|
||||||
var(#{$css-var-prefix}outline-width)
|
var(#{$✨}outline-width)
|
||||||
var(#{$css-var-prefix}secondary-focus);
|
var(#{$✨}secondary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:has(
|
&:has(
|
||||||
@ -423,11 +415,11 @@
|
|||||||
[type="button"].contrast:focus,
|
[type="button"].contrast:focus,
|
||||||
[role="button"].contrast:focus
|
[role="button"].contrast:focus
|
||||||
) {
|
) {
|
||||||
#{$css-var-prefix}group-box-shadow-focus-with-button: 0
|
#{$✨}group-box-shadow-focus-with-button: 0
|
||||||
0
|
0
|
||||||
0
|
0
|
||||||
var(#{$css-var-prefix}outline-width)
|
var(#{$✨}outline-width)
|
||||||
var(#{$css-var-prefix}contrast-focus);
|
var(#{$✨}contrast-focus);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -435,7 +427,7 @@
|
|||||||
[type="submit"],
|
[type="submit"],
|
||||||
[type="button"],
|
[type="button"],
|
||||||
[role="button"] {
|
[role="button"] {
|
||||||
#{$css-var-prefix}form-element-spacing-horizontal: 2rem;
|
#{$✨}form-element-spacing-horizontal: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.0.0-rc1 (https://picocss.com)
|
* Pico CSS ✨ v2.0.0-alpha1 (https://picocss.com)
|
||||||
* Copyright 2019-2023 - Licensed under MIT
|
* Copyright 2019-2023 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
|
|||||||
@ -142,12 +142,7 @@ call-bind@^1.0.0, call-bind@^1.0.2, call-bind@^1.0.4, call-bind@^1.0.5:
|
|||||||
get-intrinsic "^1.2.1"
|
get-intrinsic "^1.2.1"
|
||||||
set-function-length "^1.1.1"
|
set-function-length "^1.1.1"
|
||||||
|
|
||||||
caniuse-lite@1.0.30001572:
|
caniuse-lite@1.0.30001571, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001565:
|
||||||
version "1.0.30001572"
|
|
||||||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001572.tgz#1ccf7dc92d2ee2f92ed3a54e11b7b4a3041acfa0"
|
|
||||||
integrity sha512-1Pbh5FLmn5y4+QhNyJE9j3/7dK44dGB83/ZMjv/qJk86TvDbjk0LosiZo0i0WB0Vx607qMX9jYrn1VLHCkN4rw==
|
|
||||||
|
|
||||||
caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001565:
|
|
||||||
version "1.0.30001571"
|
version "1.0.30001571"
|
||||||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001571.tgz#4182e93d696ff42930f4af7eba515ddeb57917ac"
|
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001571.tgz#4182e93d696ff42930f4af7eba515ddeb57917ac"
|
||||||
integrity sha512-tYq/6MoXhdezDLFZuCO/TKboTzuQ/xR5cFdgXPfDtM7/kchBO3b4VWghE/OAi/DV7tTdhmLjZiZBZi1fA/GheQ==
|
integrity sha512-tYq/6MoXhdezDLFZuCO/TKboTzuQ/xR5cFdgXPfDtM7/kchBO3b4VWghE/OAi/DV7tTdhmLjZiZBZi1fA/GheQ==
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user