mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 02:16:15 -04:00
Merge pull request #264 from picocss/ll/prefix-css-vars
Refactor: Prefix CSS vars
This commit is contained in:
Lucas Larroche
GitHub
commit
a092934ae7
40 changed files with 2334 additions and 2329 deletions
File diff suppressed because it is too large
Load diff
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
1568
css/pico.css
1568
css/pico.css
File diff suppressed because it is too large
Load diff
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
|
|
@ -1,6 +1,9 @@
|
|||
// Config
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Prefix for CSS variables
|
||||
$css-var-prefix: "pico-" !default;
|
||||
|
||||
// Set the root element for $enable-semantic-container and $enable-responsive-spacings
|
||||
$semantic-root-element: "body" !default;
|
||||
|
||||
|
|
@ -67,3 +70,6 @@ $viewports: (
|
|||
lg: 920px,
|
||||
xl: 1130px
|
||||
) !default;
|
||||
|
||||
// Shortcut for CSS vars prefix
|
||||
$✨: --#{$css-var-prefix};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use "../settings";
|
||||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
@ -6,9 +6,9 @@
|
|||
|
||||
details {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing);
|
||||
padding-bottom: var(--spacing);
|
||||
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||
margin-bottom: var(#{$✨}spacing);
|
||||
padding-bottom: var(#{$✨}spacing);
|
||||
border-bottom: var(#{$✨}border-width) solid var(#{$✨}accordion-border-color);
|
||||
|
||||
summary {
|
||||
line-height: 1rem;
|
||||
|
|
@ -16,11 +16,11 @@ details {
|
|||
cursor: pointer;
|
||||
|
||||
&:not([role]) {
|
||||
color: var(--accordion-close-summary-color);
|
||||
color: var(#{$✨}accordion-close-summary-color);
|
||||
}
|
||||
|
||||
@if settings.$enable-transitions {
|
||||
transition: color var(--transition);
|
||||
@if $enable-transitions {
|
||||
transition: color var(#{$✨}transition);
|
||||
}
|
||||
|
||||
// Reset marker
|
||||
|
|
@ -41,17 +41,17 @@ details {
|
|||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
|
||||
margin-inline-start: calc(var(#{$✨}spacing, 1rem) * 0.5);
|
||||
float: right;
|
||||
transform: rotate(-90deg);
|
||||
background-image: var(--icon-chevron);
|
||||
background-image: var(#{$✨}icon-chevron);
|
||||
background-position: right center;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
|
||||
@if settings.$enable-transitions {
|
||||
transition: transform var(--transition);
|
||||
@if $enable-transitions {
|
||||
transition: transform var(#{$✨}transition);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -59,7 +59,7 @@ details {
|
|||
outline: none;
|
||||
|
||||
&:not([role="button"]) {
|
||||
color: var(--accordion-active-summary-color);
|
||||
color: var(#{$✨}accordion-active-summary-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -70,16 +70,16 @@ details {
|
|||
|
||||
// Marker
|
||||
&::after {
|
||||
height: calc(1rem * var(--line-height, 1.5));
|
||||
background-image: var(--icon-chevron-button);
|
||||
height: calc(1rem * var(#{$✨}line-height, 1.5));
|
||||
background-image: var(#{$✨}icon-chevron-button);
|
||||
}
|
||||
|
||||
@if settings.$enable-classes {
|
||||
@if $enable-classes {
|
||||
// .contrast
|
||||
&:not(.outline).contrast {
|
||||
// Marker
|
||||
&::after {
|
||||
background-image: var(--icon-chevron-button-inverse);
|
||||
background-image: var(#{$✨}icon-chevron-button-inverse);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -89,11 +89,11 @@ details {
|
|||
// Open
|
||||
&[open] {
|
||||
> summary {
|
||||
margin-bottom: calc(var(--spacing));
|
||||
margin-bottom: calc(var(#{$✨}spacing));
|
||||
|
||||
&:not([role]) {
|
||||
&:not(:focus) {
|
||||
color: var(--accordion-open-summary-color);
|
||||
color: var(#{$✨}accordion-open-summary-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,35 +1,37 @@
|
|||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Card (<article>)
|
||||
*/
|
||||
|
||||
article {
|
||||
margin: var(--block-spacing-vertical) 0;
|
||||
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--card-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
margin: var(#{$✨}block-spacing-vertical) 0;
|
||||
padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
|
||||
border-radius: var(#{$✨}border-radius);
|
||||
background: var(#{$✨}card-background-color);
|
||||
box-shadow: var(#{$✨}card-box-shadow);
|
||||
|
||||
> header,
|
||||
> footer {
|
||||
margin-right: calc(var(--block-spacing-horizontal) * -1);
|
||||
margin-left: calc(var(--block-spacing-horizontal) * -1);
|
||||
padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);
|
||||
background-color: var(--card-sectionning-background-color);
|
||||
margin-right: calc(var(#{$✨}block-spacing-horizontal) * -1);
|
||||
margin-left: calc(var(#{$✨}block-spacing-horizontal) * -1);
|
||||
padding: calc(var(#{$✨}block-spacing-vertical) * 0.66) var(#{$✨}block-spacing-horizontal);
|
||||
background-color: var(#{$✨}card-sectionning-background-color);
|
||||
}
|
||||
|
||||
> header {
|
||||
margin-top: calc(var(--block-spacing-vertical) * -1);
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
border-bottom: var(--border-width) solid var(--card-border-color);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-top-left-radius: var(--border-radius);
|
||||
margin-top: calc(var(#{$✨}block-spacing-vertical) * -1);
|
||||
margin-bottom: var(#{$✨}block-spacing-vertical);
|
||||
border-bottom: var(#{$✨}border-width) solid var(#{$✨}card-border-color);
|
||||
border-top-right-radius: var(#{$✨}border-radius);
|
||||
border-top-left-radius: var(#{$✨}border-radius);
|
||||
}
|
||||
|
||||
> footer {
|
||||
margin-top: var(--block-spacing-vertical);
|
||||
margin-bottom: calc(var(--block-spacing-vertical) * -1);
|
||||
border-top: var(--border-width) solid var(--card-border-color);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
margin-top: var(#{$✨}block-spacing-vertical);
|
||||
margin-bottom: calc(var(#{$✨}block-spacing-vertical) * -1);
|
||||
border-top: var(#{$✨}border-width) solid var(#{$✨}card-border-color);
|
||||
border-bottom-right-radius: var(#{$✨}border-radius);
|
||||
border-bottom-left-radius: var(#{$✨}border-radius);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use "../settings";
|
||||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Dropdown ([role="list"])
|
||||
|
|
@ -21,42 +21,43 @@ li[role="list"] > ul {
|
|||
flex-direction: column;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: var(--border-width) solid var(--dropdown-border-color);
|
||||
border-radius: var(--border-radius);
|
||||
border: var(#{$✨}border-width) solid var(#{$✨}dropdown-border-color);
|
||||
border-radius: var(#{$✨}border-radius);
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
background-color: var(--dropdown-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
color: var(--dropdown-color);
|
||||
background-color: var(#{$✨}dropdown-background-color);
|
||||
box-shadow: var(#{$✨}card-box-shadow);
|
||||
color: var(#{$✨}dropdown-color);
|
||||
white-space: nowrap;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
|
||||
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
|
||||
var(#{$✨}form-element-spacing-horizontal);
|
||||
list-style: none;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||
margin-top: calc(var(#{$✨}form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||
margin-bottom: calc(var(#{$✨}form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin: calc(var(--form-element-spacing-vertical) * -0.5)
|
||||
calc(var(--form-element-spacing-horizontal) * -1);
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||
var(--form-element-spacing-horizontal);
|
||||
margin: calc(var(#{$✨}form-element-spacing-vertical) * -0.5)
|
||||
calc(var(#{$✨}form-element-spacing-horizontal) * -1);
|
||||
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
|
||||
var(#{$✨}form-element-spacing-horizontal);
|
||||
overflow: hidden;
|
||||
color: var(--dropdown-color);
|
||||
color: var(#{$✨}dropdown-color);
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--dropdown-hover-background-color);
|
||||
background-color: var(#{$✨}dropdown-hover-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -68,7 +69,7 @@ li[role="list"] > a {
|
|||
&::after {
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: calc(1rem * var(--line-height, 1.5));
|
||||
height: calc(1rem * var(#{$✨}line-height, 1.5));
|
||||
margin-inline-start: 0.5rem;
|
||||
float: right;
|
||||
transform: rotate(0deg);
|
||||
|
|
@ -90,30 +91,30 @@ details[role="list"] {
|
|||
|
||||
&:not([role]) {
|
||||
height: calc(
|
||||
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) *
|
||||
2
|
||||
1rem * var(#{$✨}line-height) + var(#{$✨}form-element-spacing-vertical) * 2 +
|
||||
var(#{$✨}border-width) * 2
|
||||
);
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
border: var(--border-width) solid var(--form-element-border-color);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--form-element-background-color);
|
||||
color: var(--form-element-placeholder-color);
|
||||
padding: var(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal);
|
||||
border: var(#{$✨}border-width) solid var(#{$✨}form-element-border-color);
|
||||
border-radius: var(#{$✨}border-radius);
|
||||
background-color: var(#{$✨}form-element-background-color);
|
||||
color: var(#{$✨}form-element-placeholder-color);
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
|
||||
@if settings.$enable-transitions {
|
||||
transition: background-color var(--transition), border-color var(--transition),
|
||||
color var(--transition), box-shadow var(--transition);
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(#{$✨}transition), border-color var(#{$✨}transition),
|
||||
color var(#{$✨}transition), box-shadow var(#{$✨}transition);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--form-element-active-border-color);
|
||||
background-color: var(--form-element-active-background-color);
|
||||
border-color: var(#{$✨}form-element-active-border-color);
|
||||
background-color: var(#{$✨}form-element-active-background-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||||
box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-focus-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -148,7 +149,7 @@ nav li[role="list"] a {
|
|||
nav details[role="list"] summary + ul,
|
||||
nav li[role="list"] > ul {
|
||||
min-width: fit-content;
|
||||
border-radius: var(--border-radius);
|
||||
border-radius: var(#{$✨}border-radius);
|
||||
|
||||
li a {
|
||||
border-radius: 0;
|
||||
|
|
@ -160,25 +161,25 @@ nav details[role="list"] {
|
|||
summary,
|
||||
summary:not([role]) {
|
||||
height: auto;
|
||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||
padding: var(#{$✨}nav-link-spacing-vertical) var(#{$✨}nav-link-spacing-horizontal);
|
||||
}
|
||||
|
||||
&[open] summary {
|
||||
border-radius: var(--border-radius);
|
||||
border-radius: var(#{$✨}border-radius);
|
||||
}
|
||||
|
||||
summary + ul {
|
||||
margin-top: var(--outline-width);
|
||||
margin-top: var(#{$✨}outline-width);
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
summary[role="link"] {
|
||||
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
|
||||
line-height: var(--line-height);
|
||||
margin-bottom: calc(var(#{$✨}nav-link-spacing-vertical) * -1);
|
||||
line-height: var(#{$✨}line-height);
|
||||
|
||||
+ ul {
|
||||
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
margin-top: calc(var(#{$✨}nav-link-spacing-vertical) + var(#{$✨}outline-width));
|
||||
margin-inline-start: calc(var(#{$✨}nav-link-spacing-horizontal) * -1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -195,13 +196,13 @@ li[role="list"] {
|
|||
|
||||
> ul {
|
||||
display: none;
|
||||
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||
margin-top: calc(var(#{$✨}nav-link-spacing-vertical) + var(#{$✨}outline-width));
|
||||
margin-inline-start: calc(
|
||||
var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
|
||||
var(#{$✨}nav-element-spacing-horizontal) - var(#{$✨}nav-link-spacing-horizontal)
|
||||
);
|
||||
}
|
||||
|
||||
> a::after {
|
||||
background-image: var(--icon-chevron);
|
||||
background-image: var(#{$✨}icon-chevron);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Loading ([aria-busy=true])
|
||||
*/
|
||||
|
|
@ -20,15 +22,15 @@
|
|||
vertical-align: text-bottom;
|
||||
vertical-align: -0.125em; // Visual alignment
|
||||
animation: spinner 0.75s linear infinite;
|
||||
opacity: var(--loading-spinner-opacity);
|
||||
opacity: var(#{$✨}loading-spinner-opacity);
|
||||
}
|
||||
|
||||
&:not(:empty) {
|
||||
&::before {
|
||||
margin-right: calc(var(--spacing) * 0.5);
|
||||
margin-right: calc(var(#{$✨}spacing) * 0.5);
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: calc(var(--spacing) * 0.5);
|
||||
margin-inline-end: calc(var(#{$✨}spacing) * 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
@use "../settings";
|
||||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Modal (<dialog>)
|
||||
*/
|
||||
|
||||
:root {
|
||||
--scrollbar-width: 0px;
|
||||
#{$✨}scrollbar-width: 0px;
|
||||
}
|
||||
|
||||
dialog {
|
||||
|
|
@ -22,38 +22,38 @@ dialog {
|
|||
min-width: 100%;
|
||||
height: inherit;
|
||||
min-height: 100%;
|
||||
padding: var(--spacing);
|
||||
padding: var(#{$✨}spacing);
|
||||
border: 0;
|
||||
backdrop-filter: var(--modal-overlay-backdrop-filter);
|
||||
background-color: var(--modal-overlay-background-color);
|
||||
color: var(--color);
|
||||
backdrop-filter: var(#{$✨}modal-overlay-backdrop-filter);
|
||||
background-color: var(#{$✨}modal-overlay-background-color);
|
||||
color: var(#{$✨}color);
|
||||
|
||||
// Content
|
||||
article {
|
||||
max-height: calc(100vh - var(--spacing) * 2);
|
||||
max-height: calc(100vh - var(#{$✨}spacing) * 2);
|
||||
overflow: auto;
|
||||
|
||||
@if map-get(settings.$breakpoints, "sm") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "sm")) {
|
||||
max-width: map-get(settings.$viewports, "sm");
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
max-width: map-get($viewports, "sm");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "md") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "md")) {
|
||||
max-width: map-get(settings.$viewports, "md");
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
max-width: map-get($viewports, "md");
|
||||
}
|
||||
}
|
||||
|
||||
> header,
|
||||
> footer {
|
||||
padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
|
||||
padding: calc(var(#{$✨}block-spacing-vertical) * 0.5) var(#{$✨}block-spacing-horizontal);
|
||||
}
|
||||
|
||||
> header {
|
||||
.close {
|
||||
margin: 0;
|
||||
margin-left: var(--spacing);
|
||||
margin-left: var(#{$✨}spacing);
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
|
@ -65,7 +65,7 @@ dialog {
|
|||
margin-bottom: 0;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
margin-left: calc(var(--spacing) * 0.5);
|
||||
margin-left: calc(var(#{$✨}spacing) * 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -77,22 +77,22 @@ dialog {
|
|||
}
|
||||
|
||||
// Close icon
|
||||
@if settings.$enable-classes {
|
||||
@if $enable-classes {
|
||||
.close {
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: calc(var(--block-spacing-vertical) * -0.5);
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
margin-top: calc(var(#{$✨}block-spacing-vertical) * -0.5);
|
||||
margin-bottom: var(#{$✨}typography-spacing-vertical);
|
||||
margin-left: auto;
|
||||
background-image: var(--icon-close);
|
||||
background-image: var(#{$✨}icon-close);
|
||||
background-position: center;
|
||||
background-size: auto 1rem;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.5;
|
||||
|
||||
@if settings.$enable-transitions {
|
||||
transition: opacity var(--transition);
|
||||
@if $enable-transitions {
|
||||
transition: opacity var(#{$✨}transition);
|
||||
}
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
|
|
@ -110,9 +110,9 @@ dialog {
|
|||
}
|
||||
|
||||
// Utilities
|
||||
@if settings.$enable-classes {
|
||||
@if $enable-classes {
|
||||
.modal-is-open {
|
||||
padding-right: var(--scrollbar-width, 0px);
|
||||
padding-right: var(#{$✨}scrollbar-width, 0px);
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
|
||||
|
|
@ -123,7 +123,7 @@ dialog {
|
|||
}
|
||||
|
||||
// Animations
|
||||
@if (settings.$enable-classes and settings.$enable-transitions) {
|
||||
@if ($enable-classes and $enable-transitions) {
|
||||
$animation-duration: 0.2s;
|
||||
|
||||
:where(.modal-is-opening, .modal-is-closing) {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Nav
|
||||
*/
|
||||
|
|
@ -31,30 +33,30 @@ nav {
|
|||
list-style: none;
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
|
||||
margin-left: calc(var(#{$✨}nav-element-spacing-horizontal) * -1);
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
|
||||
margin-right: calc(var(#{$✨}nav-element-spacing-horizontal) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
|
||||
padding: var(#{$✨}nav-element-spacing-vertical) var(#{$✨}nav-element-spacing-horizontal);
|
||||
|
||||
// Minimal support for buttons and forms elements
|
||||
> * {
|
||||
--spacing: 0;
|
||||
#{$✨}spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:where(a, [role="link"]) {
|
||||
display: inline-block;
|
||||
margin: calc(var(--nav-link-spacing-vertical) * -1)
|
||||
calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||
border-radius: var(--border-radius);
|
||||
margin: calc(var(#{$✨}nav-link-spacing-vertical) * -1)
|
||||
calc(var(#{$✨}nav-link-spacing-horizontal) * -1);
|
||||
padding: var(#{$✨}nav-link-spacing-vertical) var(#{$✨}nav-link-spacing-horizontal);
|
||||
border-radius: var(#{$✨}border-radius);
|
||||
text-decoration: none;
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
|
|
@ -69,16 +71,16 @@ nav {
|
|||
|
||||
& ul li {
|
||||
&:not(:first-child) {
|
||||
margin-inline-start: var(--nav-link-spacing-horizontal);
|
||||
margin-inline-start: var(#{$✨}nav-link-spacing-horizontal);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
::after {
|
||||
position: absolute;
|
||||
width: calc(var(--nav-link-spacing-horizontal) * 2);
|
||||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
|
||||
width: calc(var(#{$✨}nav-link-spacing-horizontal) * 2);
|
||||
margin-inline-start: calc(var(#{$✨}nav-link-spacing-horizontal) / 2);
|
||||
content: "/";
|
||||
color: var(--muted-color);
|
||||
color: var(#{$✨}muted-color);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -96,7 +98,7 @@ nav {
|
|||
[role="button"] {
|
||||
margin-right: inherit;
|
||||
margin-left: inherit;
|
||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||
padding: var(#{$✨}nav-link-spacing-vertical) var(#{$✨}nav-link-spacing-horizontal);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -110,7 +112,8 @@ aside {
|
|||
}
|
||||
|
||||
li {
|
||||
padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
|
||||
padding: calc(var(#{$✨}nav-element-spacing-vertical) * 0.5)
|
||||
var(#{$✨}nav-element-spacing-horizontal);
|
||||
|
||||
a {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Progress
|
||||
*/
|
||||
|
|
@ -27,33 +29,37 @@ progress {
|
|||
appearance: none;
|
||||
width: 100%;
|
||||
height: 0.5rem;
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
margin-bottom: calc(var(#{$✨}spacing) * 0.5);
|
||||
overflow: hidden;
|
||||
|
||||
// Remove Firefox and Opera border
|
||||
border: 0;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--progress-background-color);
|
||||
border-radius: var(#{$✨}border-radius);
|
||||
background-color: var(#{$✨}progress-background-color);
|
||||
|
||||
// IE10 uses `color` to set the bar background-color
|
||||
color: var(--progress-color);
|
||||
color: var(#{$✨}progress-color);
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
border-radius: var(--border-radius);
|
||||
border-radius: var(#{$✨}border-radius);
|
||||
background: none;
|
||||
}
|
||||
&[value]::-webkit-progress-value {
|
||||
background-color: var(--progress-color);
|
||||
background-color: var(#{$✨}progress-color);
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
background-color: var(--progress-color);
|
||||
background-color: var(#{$✨}progress-color);
|
||||
}
|
||||
|
||||
// Indeterminate state
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
&:indeterminate {
|
||||
background: var(--progress-background-color)
|
||||
linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%)
|
||||
background: var(#{$✨}progress-background-color)
|
||||
linear-gradient(
|
||||
to right,
|
||||
var(#{$✨}progress-color) 30%,
|
||||
var(#{$✨}progress-background-color) 30%
|
||||
)
|
||||
top left / 150% 150% no-repeat;
|
||||
animation: progress-indeterminate 1s linear infinite;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use "../settings";
|
||||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Tooltip ([data-tooltip])
|
||||
|
|
@ -25,12 +25,12 @@
|
|||
padding: 0.25rem 0.5rem;
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -0.25rem);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--tooltip-background-color);
|
||||
border-radius: var(#{$✨}border-radius);
|
||||
background: var(#{$✨}tooltip-background-color);
|
||||
content: attr(data-tooltip);
|
||||
color: var(--tooltip-color);
|
||||
color: var(#{$✨}tooltip-color);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight);
|
||||
font-weight: var(#{$✨}font-weight);
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
content: "";
|
||||
color: var(--tooltip-background-color);
|
||||
color: var(#{$✨}tooltip-background-color);
|
||||
}
|
||||
|
||||
&[data-placement="bottom"] {
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@if settings.$enable-transitions {
|
||||
@if $enable-transitions {
|
||||
// Animations, excluding touch devices
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
&[data-placement="bottom"]:focus,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use "../settings";
|
||||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Button
|
||||
|
|
@ -33,7 +33,7 @@ button,
|
|||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing);
|
||||
margin-bottom: var(#{$✨}spacing);
|
||||
}
|
||||
|
||||
[role="button"] {
|
||||
|
|
@ -46,127 +46,127 @@ input[type="submit"],
|
|||
input[type="button"],
|
||||
input[type="reset"],
|
||||
[role="button"] {
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
--color: var(--primary-inverse);
|
||||
--box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
#{$✨}background-color: var(#{$✨}primary);
|
||||
#{$✨}border-color: var(#{$✨}primary);
|
||||
#{$✨}color: var(#{$✨}primary-inverse);
|
||||
#{$✨}box-shadow: var(#{$✨}button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
padding: var(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal);
|
||||
border: var(#{$✨}border-width) solid var(#{$✨}border-color);
|
||||
border-radius: var(#{$✨}border-radius);
|
||||
outline: none;
|
||||
background-color: var(--background-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
color: var(--color);
|
||||
font-weight: var(--font-weight);
|
||||
background-color: var(#{$✨}background-color);
|
||||
box-shadow: var(#{$✨}box-shadow);
|
||||
color: var(#{$✨}color);
|
||||
font-weight: var(#{$✨}font-weight);
|
||||
font-size: 1rem;
|
||||
line-height: var(--line-height);
|
||||
line-height: var(#{$✨}line-height);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
@if settings.$enable-transitions {
|
||||
transition: background-color var(--transition), border-color var(--transition),
|
||||
color var(--transition), box-shadow var(--transition);
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(#{$✨}transition), border-color var(#{$✨}transition),
|
||||
color var(#{$✨}transition), box-shadow var(#{$✨}transition);
|
||||
}
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--primary-hover);
|
||||
--border-color: var(--primary-hover);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
--color: var(--primary-inverse);
|
||||
#{$✨}background-color: var(#{$✨}primary-hover);
|
||||
#{$✨}border-color: var(#{$✨}primary-hover);
|
||||
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
#{$✨}color: var(#{$✨}primary-inverse);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--primary-focus);
|
||||
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(#{$✨}outline-width) var(#{$✨}primary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// .secondary, .contrast & .outline
|
||||
@if settings.$enable-classes {
|
||||
@if $enable-classes {
|
||||
// Secondary
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
|
||||
input[type="reset"] {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
#{$✨}background-color: var(#{$✨}secondary);
|
||||
#{$✨}border-color: var(#{$✨}secondary);
|
||||
#{$✨}color: var(#{$✨}secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
--color: var(--secondary-inverse);
|
||||
#{$✨}background-color: var(#{$✨}secondary-hover);
|
||||
#{$✨}border-color: var(#{$✨}secondary-hover);
|
||||
#{$✨}color: var(#{$✨}secondary-inverse);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(#{$✨}outline-width) var(#{$✨}secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Contrast
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).contrast {
|
||||
--background-color: var(--contrast);
|
||||
--border-color: var(--contrast);
|
||||
--color: var(--contrast-inverse);
|
||||
#{$✨}background-color: var(#{$✨}contrast);
|
||||
#{$✨}border-color: var(#{$✨}contrast);
|
||||
#{$✨}color: var(#{$✨}contrast-inverse);
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--contrast-hover);
|
||||
--border-color: var(--contrast-hover);
|
||||
--color: var(--contrast-inverse);
|
||||
#{$✨}background-color: var(#{$✨}contrast-hover);
|
||||
#{$✨}border-color: var(#{$✨}contrast-hover);
|
||||
#{$✨}color: var(#{$✨}contrast-inverse);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--contrast-focus);
|
||||
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(#{$✨}outline-width) var(#{$✨}contrast-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (primary)
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline,
|
||||
input[type="reset"].outline {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary);
|
||||
#{$✨}background-color: transparent;
|
||||
#{$✨}color: var(#{$✨}primary);
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary-hover);
|
||||
#{$✨}background-color: transparent;
|
||||
#{$✨}color: var(#{$✨}primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (secondary)
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.secondary,
|
||||
input[type="reset"].outline {
|
||||
--color: var(--secondary);
|
||||
#{$✨}color: var(#{$✨}secondary);
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--secondary-hover);
|
||||
#{$✨}color: var(#{$✨}secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (contrast)
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.contrast {
|
||||
--color: var(--contrast);
|
||||
#{$✨}color: var(#{$✨}contrast);
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--contrast-hover);
|
||||
#{$✨}color: var(#{$✨}contrast-hover);
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
// Secondary button without .class
|
||||
input[type="reset"] {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
#{$✨}background-color: var(#{$✨}secondary);
|
||||
#{$✨}border-color: var(#{$✨}secondary);
|
||||
#{$✨}color: var(#{$✨}secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
#{$✨}background-color: var(#{$✨}secondary-hover);
|
||||
#{$✨}border-color: var(#{$✨}secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(#{$✨}outline-width) var(#{$✨}secondary-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Code
|
||||
*/
|
||||
|
|
@ -14,7 +16,7 @@ code,
|
|||
kbd,
|
||||
samp {
|
||||
font-size: 0.875em; // 2
|
||||
font-family: var(--font-family); // 1
|
||||
font-family: var(#{$✨}font-family); // 1
|
||||
}
|
||||
|
||||
// Prevent overflow of the container in all browsers (opinionated)
|
||||
|
|
@ -29,10 +31,10 @@ pre {
|
|||
pre,
|
||||
code,
|
||||
kbd {
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--code-background-color);
|
||||
color: var(--code-color);
|
||||
font-weight: var(--font-weight);
|
||||
border-radius: var(#{$✨}border-radius);
|
||||
background: var(#{$✨}code-background-color);
|
||||
color: var(#{$✨}code-color);
|
||||
font-weight: var(#{$✨}font-weight);
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
|
|
@ -44,15 +46,15 @@ kbd {
|
|||
|
||||
pre {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing);
|
||||
margin-bottom: var(#{$✨}spacing);
|
||||
overflow-x: auto;
|
||||
|
||||
> code {
|
||||
display: block;
|
||||
padding: var(--spacing);
|
||||
padding: var(#{$✨}spacing);
|
||||
background: none;
|
||||
font-size: 14px;
|
||||
line-height: var(--line-height);
|
||||
line-height: var(#{$✨}line-height);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -60,32 +62,32 @@ pre {
|
|||
code {
|
||||
// Tags
|
||||
b {
|
||||
color: var(--code-tag-color);
|
||||
font-weight: var(--font-weight);
|
||||
color: var(#{$✨}code-tag-color);
|
||||
font-weight: var(#{$✨}font-weight);
|
||||
}
|
||||
|
||||
// Properties
|
||||
i {
|
||||
color: var(--code-property-color);
|
||||
color: var(#{$✨}code-property-color);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// Values
|
||||
u {
|
||||
color: var(--code-value-color);
|
||||
color: var(#{$✨}code-value-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Comments
|
||||
em {
|
||||
color: var(--code-comment-color);
|
||||
color: var(#{$✨}code-comment-color);
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// kbd
|
||||
kbd {
|
||||
background-color: var(--code-kbd-background-color);
|
||||
color: var(--code-kbd-color);
|
||||
background-color: var(#{$✨}code-kbd-background-color);
|
||||
color: var(#{$✨}code-kbd-color);
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Embedded content
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use "../settings";
|
||||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Miscs
|
||||
|
|
@ -14,14 +14,14 @@
|
|||
hr {
|
||||
height: 0; // 2
|
||||
border: 0;
|
||||
border-top: 1px solid var(--muted-border-color);
|
||||
border-top: 1px solid var(#{$✨}muted-border-color);
|
||||
color: inherit; // 1
|
||||
}
|
||||
|
||||
// Add the correct display in IE 10+
|
||||
[hidden],
|
||||
template {
|
||||
@if settings.$enable-important {
|
||||
@if $enable-important {
|
||||
display: none !important;
|
||||
} @else {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Table
|
||||
*/
|
||||
|
|
@ -22,11 +24,11 @@
|
|||
// Cells
|
||||
th,
|
||||
td {
|
||||
padding: calc(var(--spacing) / 2) var(--spacing);
|
||||
border-bottom: var(--border-width) solid var(--table-border-color);
|
||||
color: var(--color);
|
||||
font-weight: var(--font-weight);
|
||||
font-size: var(--font-size);
|
||||
padding: calc(var(#{$✨}spacing) / 2) var(#{$✨}spacing);
|
||||
border-bottom: var(#{$✨}border-width) solid var(#{$✨}table-border-color);
|
||||
color: var(#{$✨}color);
|
||||
font-weight: var(#{$✨}font-weight);
|
||||
font-size: var(#{$✨}font-size);
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
|
@ -35,7 +37,7 @@ td {
|
|||
tfoot {
|
||||
th,
|
||||
td {
|
||||
border-top: var(--border-width) solid var(--table-border-color);
|
||||
border-top: var(#{$✨}border-width) solid var(#{$✨}table-border-color);
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -44,7 +46,7 @@ tfoot {
|
|||
table {
|
||||
&[role="grid"] {
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: var(--table-row-stripped-background-color);
|
||||
background-color: var(#{$✨}table-row-stripped-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use "../settings";
|
||||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Typography
|
||||
|
|
@ -44,62 +44,62 @@ pre,
|
|||
table,
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
color: var(--color);
|
||||
margin-bottom: var(#{$✨}typography-spacing-vertical);
|
||||
color: var(#{$✨}color);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(#{$✨}font-weight);
|
||||
font-size: var(#{$✨}font-size);
|
||||
}
|
||||
|
||||
// Links
|
||||
// 1. Remove the gray background on active links in IE 10
|
||||
a,
|
||||
[role="link"] {
|
||||
--color: var(--primary);
|
||||
--background-color: transparent;
|
||||
#{$✨}color: var(#{$✨}primary);
|
||||
#{$✨}background-color: transparent;
|
||||
outline: none;
|
||||
background-color: var(--background-color); // 1
|
||||
color: var(--color);
|
||||
text-decoration: var(--text-decoration);
|
||||
background-color: var(#{$✨}background-color); // 1
|
||||
color: var(#{$✨}color);
|
||||
text-decoration: var(#{$✨}text-decoration);
|
||||
|
||||
@if settings.$enable-transitions {
|
||||
transition: background-color var(--transition), color var(--transition),
|
||||
text-decoration var(--transition), box-shadow var(--transition);
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(#{$✨}transition), color var(#{$✨}transition),
|
||||
text-decoration var(#{$✨}transition), box-shadow var(#{$✨}transition);
|
||||
}
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--primary-hover);
|
||||
--text-decoration: underline;
|
||||
#{$✨}color: var(#{$✨}primary-hover);
|
||||
#{$✨}text-decoration: underline;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--background-color: var(--primary-focus);
|
||||
#{$✨}background-color: var(#{$✨}primary-focus);
|
||||
}
|
||||
|
||||
@if settings.$enable-classes {
|
||||
@if $enable-classes {
|
||||
// Secondary
|
||||
&.secondary {
|
||||
--color: var(--secondary);
|
||||
#{$✨}color: var(#{$✨}secondary);
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--secondary-hover);
|
||||
#{$✨}color: var(#{$✨}secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--background-color: var(--secondary-focus);
|
||||
#{$✨}background-color: var(#{$✨}secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Contrast
|
||||
&.contrast {
|
||||
--color: var(--contrast);
|
||||
#{$✨}color: var(#{$✨}contrast);
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--contrast-hover);
|
||||
#{$✨}color: var(#{$✨}contrast-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--background-color: var(--contrast-focus);
|
||||
#{$✨}background-color: var(#{$✨}contrast-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -113,69 +113,69 @@ h4,
|
|||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
color: var(--color);
|
||||
font-weight: var(--font-weight);
|
||||
font-size: var(--font-size);
|
||||
font-family: var(--font-family);
|
||||
margin-bottom: var(#{$✨}typography-spacing-vertical);
|
||||
color: var(#{$✨}color);
|
||||
font-weight: var(#{$✨}font-weight);
|
||||
font-size: var(#{$✨}font-size);
|
||||
font-family: var(#{$✨}font-family);
|
||||
}
|
||||
|
||||
h1 {
|
||||
--color: var(--h1-color);
|
||||
#{$✨}color: var(#{$✨}h1-color);
|
||||
}
|
||||
h2 {
|
||||
--color: var(--h2-color);
|
||||
#{$✨}color: var(#{$✨}h2-color);
|
||||
}
|
||||
h3 {
|
||||
--color: var(--h3-color);
|
||||
#{$✨}color: var(#{$✨}h3-color);
|
||||
}
|
||||
h4 {
|
||||
--color: var(--h4-color);
|
||||
#{$✨}color: var(#{$✨}h4-color);
|
||||
}
|
||||
h5 {
|
||||
--color: var(--h5-color);
|
||||
#{$✨}color: var(#{$✨}h5-color);
|
||||
}
|
||||
h6 {
|
||||
--color: var(--h6-color);
|
||||
#{$✨}color: var(#{$✨}h6-color);
|
||||
}
|
||||
|
||||
// Margin-top for headings after a typography block
|
||||
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
|
||||
~ :is(h1, h2, h3, h4, h5, h6) {
|
||||
margin-top: var(--typography-spacing-vertical);
|
||||
margin-top: var(#{$✨}typography-spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
// Heading group
|
||||
@if settings.$enable-classes == false {
|
||||
@if $enable-classes == false {
|
||||
hgroup {
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
margin-bottom: var(#{$✨}typography-spacing-vertical);
|
||||
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
--color: var(--muted-color);
|
||||
--font-weight: unset;
|
||||
#{$✨}color: var(#{$✨}muted-color);
|
||||
#{$✨}font-weight: unset;
|
||||
font-size: 1rem;
|
||||
font-family: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if settings.$enable-classes {
|
||||
@if $enable-classes {
|
||||
hgroup,
|
||||
.headings {
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
margin-bottom: var(#{$✨}typography-spacing-vertical);
|
||||
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
--color: var(--muted-color);
|
||||
--font-weight: unset;
|
||||
#{$✨}color: var(#{$✨}muted-color);
|
||||
#{$✨}font-weight: unset;
|
||||
font-size: 1rem;
|
||||
font-family: unset;
|
||||
}
|
||||
|
|
@ -184,23 +184,23 @@ h6 {
|
|||
|
||||
// Paragraphs
|
||||
p {
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
margin-bottom: var(#{$✨}typography-spacing-vertical);
|
||||
}
|
||||
|
||||
// Small
|
||||
small {
|
||||
font-size: var(--font-size);
|
||||
font-size: var(#{$✨}font-size);
|
||||
}
|
||||
|
||||
// Lists
|
||||
:where(dl, ol, ul) {
|
||||
padding-right: 0;
|
||||
padding-left: var(--spacing);
|
||||
padding-inline-start: var(--spacing);
|
||||
padding-left: var(#{$✨}spacing);
|
||||
padding-inline-start: var(#{$✨}spacing);
|
||||
padding-inline-end: 0;
|
||||
|
||||
li {
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
|
||||
margin-bottom: calc(var(#{$✨}typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -209,7 +209,7 @@ small {
|
|||
:where(dl, ol, ul) {
|
||||
:is(dl, ol, ul) {
|
||||
margin: 0; // 1
|
||||
margin-top: calc(var(--typography-spacing-vertical) * 0.25);
|
||||
margin-top: calc(var(#{$✨}typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -220,24 +220,24 @@ ul li {
|
|||
// Highlighted text
|
||||
mark {
|
||||
padding: 0.125rem 0.25rem;
|
||||
background-color: var(--mark-background-color);
|
||||
color: var(--mark-color);
|
||||
background-color: var(#{$✨}mark-background-color);
|
||||
color: var(#{$✨}mark-color);
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
// Blockquote
|
||||
blockquote {
|
||||
display: block;
|
||||
margin: var(--typography-spacing-vertical) 0;
|
||||
padding: var(--spacing);
|
||||
margin: var(#{$✨}typography-spacing-vertical) 0;
|
||||
padding: var(#{$✨}spacing);
|
||||
border-right: none;
|
||||
border-left: 0.25rem solid var(--blockquote-border-color);
|
||||
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
||||
border-left: 0.25rem solid var(#{$✨}blockquote-border-color);
|
||||
border-inline-start: 0.25rem solid var(#{$✨}blockquote-border-color);
|
||||
border-inline-end: none;
|
||||
|
||||
footer {
|
||||
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
|
||||
color: var(--blockquote-footer-color);
|
||||
margin-top: calc(var(#{$✨}typography-spacing-vertical) * 0.5);
|
||||
color: var(#{$✨}blockquote-footer-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -251,16 +251,16 @@ abbr[title] {
|
|||
|
||||
// Ins
|
||||
ins {
|
||||
color: var(--ins-color);
|
||||
color: var(#{$✨}ins-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// del
|
||||
del {
|
||||
color: var(--del-color);
|
||||
color: var(#{$✨}del-color);
|
||||
}
|
||||
|
||||
// selection
|
||||
::selection {
|
||||
background-color: var(--primary-focus);
|
||||
background-color: var(#{$✨}primary-focus);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use "../settings";
|
||||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Basics form elements
|
||||
|
|
@ -17,7 +17,7 @@ select,
|
|||
textarea {
|
||||
margin: 0; // 2
|
||||
font-size: 1rem; // 1
|
||||
line-height: var(--line-height); // 1
|
||||
line-height: var(#{$✨}line-height); // 1
|
||||
font-family: inherit; // 1
|
||||
letter-spacing: inherit; // 2
|
||||
}
|
||||
|
|
@ -113,15 +113,15 @@ textarea {
|
|||
// Force height for alternatives input types
|
||||
input:not([type="checkbox"], [type="radio"], [type="range"]) {
|
||||
height: calc(
|
||||
(1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) +
|
||||
(var(--border-width) * 2)
|
||||
(1rem * var(#{$✨}line-height)) + (var(#{$✨}form-element-spacing-vertical) * 2) +
|
||||
(var(#{$✨}border-width) * 2)
|
||||
);
|
||||
}
|
||||
|
||||
// Fieldset
|
||||
fieldset {
|
||||
margin: 0;
|
||||
margin-bottom: var(--spacing);
|
||||
margin-bottom: var(#{$✨}spacing);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -130,8 +130,8 @@ fieldset {
|
|||
label,
|
||||
fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
font-weight: var(--form-label-font-weight, var(--font-weight));
|
||||
margin-bottom: calc(var(#{$✨}spacing) * 0.25);
|
||||
font-weight: var(#{$✨}form-label-font-weight, var(#{$✨}font-weight));
|
||||
}
|
||||
|
||||
// Blocks, 100%
|
||||
|
|
@ -146,28 +146,28 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
|
|||
select,
|
||||
textarea {
|
||||
appearance: none;
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
padding: var(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal);
|
||||
}
|
||||
|
||||
// Commons styles
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
--background-color: var(--form-element-background-color);
|
||||
--border-color: var(--form-element-border-color);
|
||||
--color: var(--form-element-color);
|
||||
--box-shadow: none;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
#{$✨}background-color: var(#{$✨}form-element-background-color);
|
||||
#{$✨}border-color: var(#{$✨}form-element-border-color);
|
||||
#{$✨}color: var(#{$✨}form-element-color);
|
||||
#{$✨}box-shadow: none;
|
||||
border: var(#{$✨}border-width) solid var(#{$✨}border-color);
|
||||
border-radius: var(#{$✨}border-radius);
|
||||
outline: none;
|
||||
background-color: var(--background-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
color: var(--color);
|
||||
font-weight: var(--font-weight);
|
||||
background-color: var(#{$✨}background-color);
|
||||
box-shadow: var(#{$✨}box-shadow);
|
||||
color: var(#{$✨}color);
|
||||
font-weight: var(#{$✨}font-weight);
|
||||
|
||||
@if settings.$enable-transitions {
|
||||
transition: background-color var(--transition), border-color var(--transition),
|
||||
color var(--transition), box-shadow var(--transition);
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(#{$✨}transition), border-color var(#{$✨}transition),
|
||||
color var(#{$✨}transition), box-shadow var(#{$✨}transition);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -175,7 +175,7 @@ textarea {
|
|||
input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]),
|
||||
:where(select, textarea) {
|
||||
&:is(:active, :focus) {
|
||||
--background-color: var(--form-element-active-background-color);
|
||||
#{$✨}background-color: var(#{$✨}form-element-active-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -183,7 +183,7 @@ input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [
|
|||
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
|
||||
:where(select, textarea) {
|
||||
&:is(:active, :focus) {
|
||||
--border-color: var(--form-element-active-border-color);
|
||||
#{$✨}border-color: var(#{$✨}form-element-active-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -192,7 +192,7 @@ input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [typ
|
|||
select,
|
||||
textarea {
|
||||
&:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||||
#{$✨}box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-focus-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -202,9 +202,9 @@ select[disabled],
|
|||
textarea[disabled],
|
||||
:where(fieldset[disabled])
|
||||
:is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
|
||||
--background-color: var(--form-element-disabled-background-color);
|
||||
--border-color: var(--form-element-disabled-border-color);
|
||||
opacity: var(--form-element-disabled-opacity);
|
||||
#{$✨}background-color: var(#{$✨}form-element-disabled-background-color);
|
||||
#{$✨}border-color: var(#{$✨}form-element-disabled-border-color);
|
||||
opacity: var(#{$✨}form-element-disabled-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -212,16 +212,16 @@ textarea[disabled],
|
|||
:where(input, select, textarea) {
|
||||
&:not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||
&[aria-invalid] {
|
||||
@if settings.$enable-important {
|
||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||
padding-left: var(--form-element-spacing-horizontal);
|
||||
padding-inline-start: var(--form-element-spacing-horizontal) !important;
|
||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||
@if $enable-important {
|
||||
padding-right: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem) !important;
|
||||
padding-left: var(#{$✨}form-element-spacing-horizontal);
|
||||
padding-inline-start: var(#{$✨}form-element-spacing-horizontal) !important;
|
||||
padding-inline-end: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem) !important;
|
||||
} @else {
|
||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
padding-left: var(--form-element-spacing-horizontal);
|
||||
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
padding-right: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem);
|
||||
padding-left: var(#{$✨}form-element-spacing-horizontal);
|
||||
padding-inline-start: var(#{$✨}form-element-spacing-horizontal);
|
||||
padding-inline-end: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem);
|
||||
}
|
||||
background-position: center right 0.75rem;
|
||||
background-size: 1rem auto;
|
||||
|
|
@ -229,38 +229,50 @@ textarea[disabled],
|
|||
}
|
||||
|
||||
&[aria-invalid="false"] {
|
||||
background-image: var(--icon-valid);
|
||||
background-image: var(#{$✨}icon-valid);
|
||||
}
|
||||
|
||||
&[aria-invalid="true"] {
|
||||
background-image: var(--icon-invalid);
|
||||
background-image: var(#{$✨}icon-invalid);
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-invalid="false"] {
|
||||
--border-color: var(--form-element-valid-border-color);
|
||||
#{$✨}border-color: var(#{$✨}form-element-valid-border-color);
|
||||
|
||||
&:is(:active, :focus) {
|
||||
@if settings.$enable-important {
|
||||
--border-color: var(--form-element-valid-active-border-color) !important;
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
|
||||
@if $enable-important {
|
||||
#{$✨}border-color: var(#{$✨}form-element-valid-active-border-color) !important;
|
||||
#{$✨}box-shadow: 0
|
||||
0
|
||||
0
|
||||
var(#{$✨}outline-width)
|
||||
var(#{$✨}form-element-valid-focus-color) !important;
|
||||
} @else {
|
||||
--border-color: var(--form-element-valid-active-border-color);
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
|
||||
#{$✨}border-color: var(#{$✨}form-element-valid-active-border-color);
|
||||
#{$✨}box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-valid-focus-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-invalid="true"] {
|
||||
--border-color: var(--form-element-invalid-border-color);
|
||||
#{$✨}border-color: var(#{$✨}form-element-invalid-border-color);
|
||||
|
||||
&:is(:active, :focus) {
|
||||
@if settings.$enable-important {
|
||||
--border-color: var(--form-element-invalid-active-border-color) !important;
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
|
||||
@if $enable-important {
|
||||
#{$✨}border-color: var(#{$✨}form-element-invalid-active-border-color) !important;
|
||||
#{$✨}box-shadow: 0
|
||||
0
|
||||
0
|
||||
var(#{$✨}outline-width)
|
||||
var(#{$✨}form-element-invalid-focus-color) !important;
|
||||
} @else {
|
||||
--border-color: var(--form-element-invalid-active-border-color);
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
|
||||
#{$✨}border-color: var(#{$✨}form-element-invalid-active-border-color);
|
||||
#{$✨}box-shadow: 0
|
||||
0
|
||||
0
|
||||
var(#{$✨}outline-width)
|
||||
var(#{$✨}form-element-invalid-focus-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -282,7 +294,7 @@ input::-webkit-input-placeholder,
|
|||
textarea::placeholder,
|
||||
textarea::-webkit-input-placeholder,
|
||||
select:invalid {
|
||||
color: var(--form-element-placeholder-color);
|
||||
color: var(#{$✨}form-element-placeholder-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -290,7 +302,7 @@ select:invalid {
|
|||
input:not([type="checkbox"], [type="radio"]),
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: var(--spacing);
|
||||
margin-bottom: var(#{$✨}spacing);
|
||||
}
|
||||
|
||||
// Select
|
||||
|
|
@ -302,11 +314,11 @@ select {
|
|||
}
|
||||
|
||||
&:not([multiple], [size]) {
|
||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
padding-left: var(--form-element-spacing-horizontal);
|
||||
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
background-image: var(--icon-chevron);
|
||||
padding-right: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem);
|
||||
padding-left: var(#{$✨}form-element-spacing-horizontal);
|
||||
padding-inline-start: var(#{$✨}form-element-spacing-horizontal);
|
||||
padding-inline-end: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem);
|
||||
background-image: var(#{$✨}icon-chevron);
|
||||
background-position: center right 0.75rem;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -326,15 +338,15 @@ select {
|
|||
+ small {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: calc(var(--spacing) * -0.75);
|
||||
margin-bottom: var(--spacing);
|
||||
color: var(--muted-color);
|
||||
margin-top: calc(var(#{$✨}spacing) * -0.75);
|
||||
margin-bottom: var(#{$✨}spacing);
|
||||
color: var(#{$✨}muted-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Styles for Input inside a label
|
||||
label {
|
||||
> :where(input, select, textarea) {
|
||||
margin-top: calc(var(--spacing) * 0.25);
|
||||
margin-top: calc(var(#{$✨}spacing) * 0.25);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use "../settings";
|
||||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Checkboxes, Radios and Switches
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0.375em;
|
||||
border-width: var(--border-width);
|
||||
border-width: var(#{$✨}border-width);
|
||||
font-size: inherit;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
|
@ -28,9 +28,9 @@
|
|||
&:checked,
|
||||
&:checked:active,
|
||||
&:checked:focus {
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
background-image: var(--icon-checkbox);
|
||||
#{$✨}background-color: var(#{$✨}primary);
|
||||
#{$✨}border-color: var(#{$✨}primary);
|
||||
background-image: var(#{$✨}icon-checkbox);
|
||||
background-position: center;
|
||||
background-size: 0.75em auto;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -47,9 +47,9 @@
|
|||
// Checkboxes
|
||||
[type="checkbox"] {
|
||||
&:indeterminate {
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
background-image: var(--icon-minus);
|
||||
#{$✨}background-color: var(#{$✨}primary);
|
||||
#{$✨}border-color: var(#{$✨}primary);
|
||||
background-image: var(#{$✨}icon-minus);
|
||||
background-position: center;
|
||||
background-size: 0.75em auto;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
&:checked,
|
||||
&:checked:active,
|
||||
&:checked:focus {
|
||||
--background-color: var(--primary-inverse);
|
||||
#{$✨}background-color: var(#{$✨}primary-inverse);
|
||||
border-width: 0.35em;
|
||||
background-image: none;
|
||||
}
|
||||
|
|
@ -71,9 +71,9 @@
|
|||
|
||||
// Switchs
|
||||
[type="checkbox"][role="switch"] {
|
||||
--background-color: var(--switch-background-color);
|
||||
--border-color: var(--switch-background-color);
|
||||
--color: var(--switch-color);
|
||||
#{$✨}background-color: var(#{$✨}switch-background-color);
|
||||
#{$✨}border-color: var(#{$✨}switch-background-color);
|
||||
#{$✨}color: var(#{$✨}switch-color);
|
||||
|
||||
// Config
|
||||
$switch-height: 1.25em;
|
||||
|
|
@ -83,30 +83,30 @@
|
|||
// Styles
|
||||
width: $switch-width;
|
||||
height: $switch-height;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border: var(#{$✨}border-width) solid var(#{$✨}border-color);
|
||||
border-radius: $switch-height;
|
||||
background-color: var(--background-color);
|
||||
background-color: var(#{$✨}background-color);
|
||||
line-height: $switch-height;
|
||||
|
||||
&:focus {
|
||||
--background-color: var(--switch-background-color);
|
||||
--border-color: var(--switch-background-color);
|
||||
#{$✨}background-color: var(#{$✨}switch-background-color);
|
||||
#{$✨}border-color: var(#{$✨}switch-background-color);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
--background-color: var(--switch-checked-background-color);
|
||||
--border-color: var(--switch-checked-background-color);
|
||||
#{$✨}background-color: var(#{$✨}switch-checked-background-color);
|
||||
#{$✨}border-color: var(#{$✨}switch-checked-background-color);
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
width: calc(#{$switch-height} - (var(--border-width) * 2));
|
||||
width: calc(#{$switch-height} - (var(#{$✨}border-width) * 2));
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color);
|
||||
background-color: var(#{$✨}color);
|
||||
content: "";
|
||||
|
||||
@if settings.$enable-transitions {
|
||||
@if $enable-transitions {
|
||||
transition: margin $switch-transition;
|
||||
}
|
||||
}
|
||||
|
|
@ -115,8 +115,8 @@
|
|||
background-image: none;
|
||||
|
||||
&::before {
|
||||
margin-left: calc(#{$switch-width * 0.5} - var(--border-width));
|
||||
margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
|
||||
margin-left: calc(#{$switch-width * 0.5} - var(#{$✨}border-width));
|
||||
margin-inline-start: calc(#{$switch-width * 0.5} - var(#{$✨}border-width));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -129,10 +129,10 @@
|
|||
[type="checkbox"][role="switch"],
|
||||
[type="checkbox"][role="switch"]:checked {
|
||||
&[aria-invalid="false"] {
|
||||
--border-color: var(--form-element-valid-border-color);
|
||||
#{$✨}border-color: var(#{$✨}form-element-valid-border-color);
|
||||
}
|
||||
|
||||
&[aria-invalid="true"] {
|
||||
--border-color: var(--form-element-invalid-border-color);
|
||||
#{$✨}border-color: var(#{$✨}form-element-invalid-border-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Input type color
|
||||
*/
|
||||
|
|
@ -19,7 +21,7 @@
|
|||
// Swatch
|
||||
@mixin color-swatch {
|
||||
border: 0;
|
||||
border-radius: calc(var(--border-radius) * 0.5);
|
||||
border-radius: calc(var(#{$✨}border-radius) * 0.5);
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Input type datetime
|
||||
*/
|
||||
|
|
@ -5,18 +7,18 @@
|
|||
// :not() are needed to add Specificity and avoid !important on padding
|
||||
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||
--icon-position: 0.75rem;
|
||||
--icon-width: 1rem;
|
||||
padding-right: calc(var(--icon-width) + var(--icon-position));
|
||||
background-image: var(--icon-date);
|
||||
background-position: center right var(--icon-position);
|
||||
background-size: var(--icon-width) auto;
|
||||
#{$✨}icon-position: 0.75rem;
|
||||
#{$✨}icon-width: 1rem;
|
||||
padding-right: calc(var(#{$✨}icon-width) + var(#{$✨}icon-position));
|
||||
background-image: var(#{$✨}icon-date);
|
||||
background-position: center right var(#{$✨}icon-position);
|
||||
background-size: var(#{$✨}icon-width) auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
// Time
|
||||
&[type="time"] {
|
||||
background-image: var(--icon-time);
|
||||
background-image: var(#{$✨}icon-time);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -27,9 +29,9 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
|||
[type="time"],
|
||||
[type="week"] {
|
||||
&::-webkit-calendar-picker-indicator {
|
||||
width: var(--icon-width);
|
||||
margin-right: calc(var(--icon-width) * -1);
|
||||
margin-left: var(--icon-position);
|
||||
width: var(#{$✨}icon-width);
|
||||
margin-right: calc(var(#{$✨}icon-width) * -1);
|
||||
margin-left: var(#{$✨}icon-position);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,46 +1,46 @@
|
|||
@use "../settings";
|
||||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Input type file
|
||||
*/
|
||||
|
||||
[type="file"] {
|
||||
--color: var(--muted-color);
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
|
||||
#{$✨}color: var(#{$✨}muted-color);
|
||||
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5) 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
|
||||
@mixin file-selector-button {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
margin-right: calc(var(--spacing) / 2);
|
||||
#{$✨}background-color: var(#{$✨}secondary);
|
||||
#{$✨}border-color: var(#{$✨}secondary);
|
||||
#{$✨}color: var(#{$✨}secondary-inverse);
|
||||
margin-right: calc(var(#{$✨}spacing) / 2);
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: calc(var(--spacing) / 2);
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||
calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
margin-inline-end: calc(var(#{$✨}spacing) / 2);
|
||||
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
|
||||
calc(var(#{$✨}form-element-spacing-horizontal) * 0.5);
|
||||
border: var(#{$✨}border-width) solid var(#{$✨}border-color);
|
||||
border-radius: var(#{$✨}border-radius);
|
||||
outline: none;
|
||||
background-color: var(--background-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
color: var(--color);
|
||||
font-weight: var(--font-weight);
|
||||
background-color: var(#{$✨}background-color);
|
||||
box-shadow: var(#{$✨}box-shadow);
|
||||
color: var(#{$✨}color);
|
||||
font-weight: var(#{$✨}font-weight);
|
||||
font-size: 1rem;
|
||||
line-height: var(--line-height);
|
||||
line-height: var(#{$✨}line-height);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
@if settings.$enable-transitions {
|
||||
transition: background-color var(--transition), border-color var(--transition),
|
||||
color var(--transition), box-shadow var(--transition);
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(#{$✨}transition), border-color var(#{$✨}transition),
|
||||
color var(#{$✨}transition), box-shadow var(#{$✨}transition);
|
||||
}
|
||||
|
||||
&:is(:hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
#{$✨}background-color: var(#{$✨}secondary-hover);
|
||||
#{$✨}border-color: var(#{$✨}secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use "../settings";
|
||||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Input type range
|
||||
|
|
@ -22,11 +22,11 @@
|
|||
@mixin slider-track {
|
||||
width: 100%;
|
||||
height: $height-track;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--range-border-color);
|
||||
border-radius: var(#{$✨}border-radius);
|
||||
background-color: var(#{$✨}range-border-color);
|
||||
|
||||
@if settings.$enable-transitions {
|
||||
transition: background-color var(--transition), box-shadow var(--transition);
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(#{$✨}transition), box-shadow var(#{$✨}transition);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -48,13 +48,13 @@
|
|||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
|
||||
border: $border-thumb solid var(--range-thumb-border-color);
|
||||
border: $border-thumb solid var(#{$✨}range-thumb-border-color);
|
||||
border-radius: 50%;
|
||||
background-color: var(--range-thumb-color);
|
||||
background-color: var(#{$✨}range-thumb-color);
|
||||
cursor: pointer;
|
||||
|
||||
@if settings.$enable-transitions {
|
||||
transition: background-color var(--transition), transform var(--transition);
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(#{$✨}transition), transform var(#{$✨}transition);
|
||||
}
|
||||
}
|
||||
&::-webkit-slider-thumb {
|
||||
|
|
@ -71,12 +71,12 @@
|
|||
|
||||
&:hover,
|
||||
&:focus {
|
||||
--range-border-color: var(--range-active-border-color);
|
||||
--range-thumb-color: var(--range-thumb-hover-color);
|
||||
#{$✨}range-border-color: var(#{$✨}range-active-border-color);
|
||||
#{$✨}range-thumb-color: var(#{$✨}range-thumb-hover-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
--range-thumb-color: var(--range-thumb-active-color);
|
||||
#{$✨}range-thumb-color: var(#{$✨}range-thumb-active-color);
|
||||
|
||||
// Slider Thumb
|
||||
&::-webkit-slider-thumb {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use "../settings";
|
||||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Input type search
|
||||
|
|
@ -7,28 +7,28 @@
|
|||
// :not() are needed to add Specificity and avoid !important on padding
|
||||
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||
&[type="search"] {
|
||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem);
|
||||
border-radius: 5rem;
|
||||
background-image: var(--icon-search);
|
||||
background-image: var(#{$✨}icon-search);
|
||||
background-position: center left 1.125rem;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&[aria-invalid] {
|
||||
@if settings.$enable-important {
|
||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||
@if $enable-important {
|
||||
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem) !important;
|
||||
} @else {
|
||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem);
|
||||
}
|
||||
background-position: center left 1.125rem, center right 0.75rem;
|
||||
}
|
||||
|
||||
&[aria-invalid="false"] {
|
||||
background-image: var(--icon-search), var(--icon-valid);
|
||||
background-image: var(#{$✨}icon-search), var(#{$✨}icon-valid);
|
||||
}
|
||||
|
||||
&[aria-invalid="true"] {
|
||||
background-image: var(--icon-search), var(--icon-invalid);
|
||||
background-image: var(#{$✨}icon-search), var(#{$✨}icon-invalid);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@use "../settings";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if (settings.$enable-class-container and settings.$enable-classes) {
|
||||
@if ($enable-class-container and $enable-classes) {
|
||||
/**
|
||||
* Container
|
||||
*/
|
||||
|
|
@ -10,34 +10,34 @@
|
|||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: var(--spacing);
|
||||
padding-left: var(--spacing);
|
||||
padding-right: var(#{$✨}spacing);
|
||||
padding-left: var(#{$✨}spacing);
|
||||
}
|
||||
|
||||
.container {
|
||||
@if map-get(settings.$breakpoints, "sm") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "sm")) {
|
||||
max-width: map-get(settings.$viewports, "sm");
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
max-width: map-get($viewports, "sm");
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "md") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "md")) {
|
||||
max-width: map-get(settings.$viewports, "md");
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
max-width: map-get($viewports, "md");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "lg") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "lg")) {
|
||||
max-width: map-get(settings.$viewports, "lg");
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
max-width: map-get($viewports, "lg");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "xl") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "xl")) {
|
||||
max-width: map-get(settings.$viewports, "xl");
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
max-width: map-get($viewports, "xl");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Document
|
||||
* Content-box & Responsive typography
|
||||
|
|
@ -35,12 +37,12 @@
|
|||
-webkit-tap-highlight-color: transparent; // 5
|
||||
-webkit-text-size-adjust: 100%; // 6
|
||||
text-size-adjust: 100%; // 6
|
||||
background-color: var(--background-color);
|
||||
color: var(--color);
|
||||
font-weight: var(--font-weight);
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--line-height); // 2
|
||||
font-family: var(--font-family);
|
||||
background-color: var(#{$✨}background-color);
|
||||
color: var(#{$✨}color);
|
||||
font-weight: var(#{$✨}font-weight);
|
||||
font-size: var(#{$✨}font-size);
|
||||
line-height: var(#{$✨}line-height); // 2
|
||||
font-family: var(#{$✨}font-family);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word; // 3
|
||||
cursor: default; // 1
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
@use "../settings";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if (settings.$enable-classes and settings.$enable-grid) {
|
||||
@if ($enable-classes and $enable-grid) {
|
||||
/**
|
||||
* Grid
|
||||
* Minimal grid system with auto-layout columns
|
||||
*/
|
||||
|
||||
.grid {
|
||||
grid-column-gap: var(--grid-spacing-horizontal);
|
||||
grid-row-gap: var(--grid-spacing-vertical);
|
||||
grid-column-gap: var(#{$✨}grid-spacing-horizontal);
|
||||
grid-row-gap: var(#{$✨}grid-spacing-vertical);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
margin: 0;
|
||||
|
||||
@if map-get(settings.$breakpoints, "lg") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "lg")) {
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Horizontal scroller (<figure>)
|
||||
*/
|
||||
|
|
@ -10,7 +12,7 @@ figure {
|
|||
overflow-x: auto;
|
||||
|
||||
figcaption {
|
||||
padding: calc(var(--spacing) * 0.5) 0;
|
||||
color: var(--muted-color);
|
||||
padding: calc(var(#{$✨}spacing) * 0.5) 0;
|
||||
color: var(#{$✨}muted-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Section
|
||||
* Responsive spacings for section
|
||||
*/
|
||||
|
||||
section {
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
margin-bottom: var(#{$✨}block-spacing-vertical);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use "../settings";
|
||||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Sectioning
|
||||
|
|
@ -19,7 +19,7 @@ main {
|
|||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Remove the margin in all browsers (opinionated)
|
||||
#{settings.$semantic-root-element} {
|
||||
#{$semantic-root-element} {
|
||||
width: 100%;
|
||||
margin: 0; // 1
|
||||
|
||||
|
|
@ -31,34 +31,34 @@ main {
|
|||
margin-left: auto;
|
||||
|
||||
// Semantic container
|
||||
@if settings.$enable-semantic-container {
|
||||
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
|
||||
@if $enable-semantic-container {
|
||||
padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
|
||||
|
||||
// Centered viewport
|
||||
@if settings.$enable-viewport {
|
||||
@if map-get(settings.$breakpoints, "sm") and settings.$enable-viewport {
|
||||
@media (min-width: map-get(settings.$breakpoints, "sm")) {
|
||||
max-width: map-get(settings.$viewports, "sm");
|
||||
@if $enable-viewport {
|
||||
@if map-get($breakpoints, "sm") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
max-width: map-get($viewports, "sm");
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "md") and settings.$enable-viewport {
|
||||
@media (min-width: map-get(settings.$breakpoints, "md")) {
|
||||
max-width: map-get(settings.$viewports, "md");
|
||||
@if map-get($breakpoints, "md") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
max-width: map-get($viewports, "md");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "lg") and settings.$enable-viewport {
|
||||
@media (min-width: map-get(settings.$breakpoints, "lg")) {
|
||||
max-width: map-get(settings.$viewports, "lg");
|
||||
@if map-get($breakpoints, "lg") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
max-width: map-get($viewports, "lg");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "xl") and settings.$enable-viewport {
|
||||
@media (min-width: map-get(settings.$breakpoints, "xl")) {
|
||||
max-width: map-get(settings.$viewports, "xl");
|
||||
@if map-get($breakpoints, "xl") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
max-width: map-get($viewports, "xl");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -66,7 +66,7 @@ main {
|
|||
|
||||
// Semantic container
|
||||
@else {
|
||||
padding: var(--block-spacing-vertical) 0;
|
||||
padding: var(#{$✨}block-spacing-vertical) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@use "../settings";
|
||||
@use "default/light" as *;
|
||||
@use "default/dark" as *;
|
||||
@use "../settings" as *;
|
||||
@use "default/light";
|
||||
@use "default/dark";
|
||||
|
||||
// Commons styles
|
||||
@use "default/styles";
|
||||
|
|
@ -9,26 +9,26 @@
|
|||
// Can be forced with data-theme="light"
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
@include light;
|
||||
@include light.theme;
|
||||
}
|
||||
|
||||
// Dark theme (Auto)
|
||||
// Automatically enabled if user has Dark mode enabled
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
@include dark;
|
||||
@include dark.theme;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark theme (Forced)
|
||||
// Enabled if forced with data-theme="dark"
|
||||
[data-theme="dark"] {
|
||||
@include dark;
|
||||
@include dark.theme;
|
||||
}
|
||||
|
||||
progress,
|
||||
[type="checkbox"],
|
||||
[type="radio"],
|
||||
[type="range"] {
|
||||
accent-color: var(--primary);
|
||||
accent-color: var(#{$✨}primary);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,119 +1,119 @@
|
|||
@use "colors" as *;
|
||||
@use "../../settings" as *;
|
||||
@use "../../utils/functions";
|
||||
|
||||
// Default: Dark theme
|
||||
@mixin dark {
|
||||
--background-color: #{mix($black, $grey-900, 37.5%)};
|
||||
@mixin theme {
|
||||
#{$✨}background-color: #{mix($black, $grey-900, 37.5%)};
|
||||
|
||||
// Texts colors
|
||||
--color: #{$grey-200};
|
||||
--h1-color: #{$grey-50};
|
||||
--h2-color: #{mix($grey-100, $grey-50)};
|
||||
--h3-color: #{$grey-100};
|
||||
--h4-color: #{mix($grey-200, $grey-100)};
|
||||
--h5-color: #{$grey-200};
|
||||
--h6-color: #{mix($grey-300, $grey-200)};
|
||||
#{$✨}color: #{$grey-200};
|
||||
#{$✨}h1-color: #{$grey-50};
|
||||
#{$✨}h2-color: #{mix($grey-100, $grey-50)};
|
||||
#{$✨}h3-color: #{$grey-100};
|
||||
#{$✨}h4-color: #{mix($grey-200, $grey-100)};
|
||||
#{$✨}h5-color: #{$grey-200};
|
||||
#{$✨}h6-color: #{mix($grey-300, $grey-200)};
|
||||
|
||||
// Muted colors
|
||||
--muted-color: #{$grey-500};
|
||||
--muted-border-color: #{mix($grey-900, $grey-800, 75%)};
|
||||
#{$✨}muted-color: #{$grey-500};
|
||||
#{$✨}muted-border-color: #{mix($grey-900, $grey-800, 75%)};
|
||||
|
||||
// Primary colors
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-500};
|
||||
--primary-focus: #{rgba($primary-600, 0.25)};
|
||||
--primary-inverse: #{$white};
|
||||
#{$✨}primary: #{$primary-600};
|
||||
#{$✨}primary-hover: #{$primary-500};
|
||||
#{$✨}primary-focus: #{rgba($primary-600, 0.25)};
|
||||
#{$✨}primary-inverse: #{$white};
|
||||
|
||||
// Secondary colors
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-hover: #{$grey-500};
|
||||
--secondary-focus: #{rgba($grey-500, 0.25)};
|
||||
--secondary-inverse: #{$white};
|
||||
#{$✨}secondary: #{$grey-600};
|
||||
#{$✨}secondary-hover: #{$grey-500};
|
||||
#{$✨}secondary-focus: #{rgba($grey-500, 0.25)};
|
||||
#{$✨}secondary-inverse: #{$white};
|
||||
|
||||
// Contrast colors
|
||||
--contrast: #{$grey-50};
|
||||
--contrast-hover: #{$white};
|
||||
--contrast-focus: #{rgba($grey-500, 0.25)};
|
||||
--contrast-inverse: #{$black};
|
||||
#{$✨}contrast: #{$grey-50};
|
||||
#{$✨}contrast-hover: #{$white};
|
||||
#{$✨}contrast-focus: #{rgba($grey-500, 0.25)};
|
||||
#{$✨}contrast-inverse: #{$black};
|
||||
|
||||
// Highlighted text (<mark>)
|
||||
--mark-background-color: #{mix($grey-300, $amber-300)};
|
||||
--mark-color: #{mix($black, $grey-900, 37.5%)};
|
||||
#{$✨}mark-background-color: #{mix($grey-300, $amber-300)};
|
||||
#{$✨}mark-color: #{mix($black, $grey-900, 37.5%)};
|
||||
|
||||
// Inserted (<ins>) & Deleted (<ins>)
|
||||
--ins-color: #{$green-700};
|
||||
--del-color: #{$red-800};
|
||||
#{$✨}ins-color: #{$green-700};
|
||||
#{$✨}del-color: #{$red-800};
|
||||
|
||||
// Blockquote
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
#{$✨}blockquote-border-color: var(#{$✨}muted-border-color);
|
||||
#{$✨}blockquote-footer-color: var(#{$✨}muted-color);
|
||||
|
||||
// Button
|
||||
// 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.
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
#{$✨}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
#{$✨}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
|
||||
// Form elements
|
||||
--form-element-background-color: #{mix($black, $grey-900, 37.5%)};
|
||||
--form-element-border-color: #{mix($grey-800, $grey-700)};
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: var(--form-element-background-color);
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #{$grey-800};
|
||||
--form-element-disabled-border-color: #{$grey-700};
|
||||
--form-element-disabled-opacity: 0.5;
|
||||
--form-element-invalid-border-color: #{$red-900};
|
||||
--form-element-invalid-active-border-color: #{$red-800};
|
||||
--form-element-invalid-focus-color: #{rgba($red-800, 0.25)};
|
||||
--form-element-valid-border-color: #{$green-800};
|
||||
--form-element-valid-active-border-color: #{$green-700};
|
||||
--form-element-valid-focus-color: #{rgba($green-700, 0.25)};
|
||||
#{$✨}form-element-background-color: #{mix($black, $grey-900, 37.5%)};
|
||||
#{$✨}form-element-border-color: #{mix($grey-800, $grey-700)};
|
||||
#{$✨}form-element-color: var(#{$✨}color);
|
||||
#{$✨}form-element-placeholder-color: var(#{$✨}muted-color);
|
||||
#{$✨}form-element-active-background-color: var(#{$✨}form-element-background-color);
|
||||
#{$✨}form-element-active-border-color: var(#{$✨}primary);
|
||||
#{$✨}form-element-focus-color: var(#{$✨}primary-focus);
|
||||
#{$✨}form-element-disabled-background-color: #{$grey-800};
|
||||
#{$✨}form-element-disabled-border-color: #{$grey-700};
|
||||
#{$✨}form-element-disabled-opacity: 0.5;
|
||||
#{$✨}form-element-invalid-border-color: #{$red-900};
|
||||
#{$✨}form-element-invalid-active-border-color: #{$red-800};
|
||||
#{$✨}form-element-invalid-focus-color: #{rgba($red-800, 0.25)};
|
||||
#{$✨}form-element-valid-border-color: #{$green-800};
|
||||
#{$✨}form-element-valid-active-border-color: #{$green-700};
|
||||
#{$✨}form-element-valid-focus-color: #{rgba($green-700, 0.25)};
|
||||
|
||||
// Switch (input[type="checkbox"][role="switch"])
|
||||
--switch-background-color: #{mix($grey-800, $grey-700)};
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
#{$✨}switch-background-color: #{mix($grey-800, $grey-700)};
|
||||
#{$✨}switch-color: var(#{$✨}primary-inverse);
|
||||
#{$✨}switch-checked-background-color: var(#{$✨}primary);
|
||||
|
||||
// Range (input[type="range"])
|
||||
--range-border-color: #{mix($grey-900, $grey-800)};
|
||||
--range-active-border-color: #{$grey-800};
|
||||
--range-thumb-border-color: var(--background-color);
|
||||
--range-thumb-color: var(--secondary);
|
||||
--range-thumb-hover-color: var(--secondary-hover);
|
||||
--range-thumb-active-color: var(--primary);
|
||||
#{$✨}range-border-color: #{mix($grey-900, $grey-800)};
|
||||
#{$✨}range-active-border-color: #{$grey-800};
|
||||
#{$✨}range-thumb-border-color: var(#{$✨}background-color);
|
||||
#{$✨}range-thumb-color: var(#{$✨}secondary);
|
||||
#{$✨}range-thumb-hover-color: var(#{$✨}secondary-hover);
|
||||
#{$✨}range-thumb-active-color: var(#{$✨}primary);
|
||||
|
||||
// Table
|
||||
--table-border-color: var(--muted-border-color);
|
||||
--table-row-stripped-background-color: #{rgba($grey-500, 0.05)};
|
||||
#{$✨}table-border-color: var(#{$✨}muted-border-color);
|
||||
#{$✨}table-row-stripped-background-color: #{rgba($grey-500, 0.05)};
|
||||
|
||||
// Code
|
||||
--code-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||
--code-color: var(--muted-color);
|
||||
--code-kbd-background-color: var(--contrast);
|
||||
--code-kbd-color: var(--contrast-inverse);
|
||||
--code-tag-color: #{hsl(330, 30%, 50%)};
|
||||
--code-property-color: #{hsl(185, 30%, 50%)};
|
||||
--code-value-color: #{hsl(40, 10%, 50%)};
|
||||
--code-comment-color: #{mix($grey-700, $grey-600)};
|
||||
#{$✨}code-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||
#{$✨}code-color: var(#{$✨}muted-color);
|
||||
#{$✨}code-kbd-background-color: var(#{$✨}contrast);
|
||||
#{$✨}code-kbd-color: var(#{$✨}contrast-inverse);
|
||||
#{$✨}code-tag-color: #{hsl(330, 30%, 50%)};
|
||||
#{$✨}code-property-color: #{hsl(185, 30%, 50%)};
|
||||
#{$✨}code-value-color: #{hsl(40, 10%, 50%)};
|
||||
#{$✨}code-comment-color: #{mix($grey-700, $grey-600)};
|
||||
|
||||
// Accordion (<details>)
|
||||
--accordion-border-color: var(--muted-border-color);
|
||||
--accordion-active-summary-color: var(--primary);
|
||||
--accordion-close-summary-color: var(--color);
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
#{$✨}accordion-border-color: var(#{$✨}muted-border-color);
|
||||
#{$✨}accordion-active-summary-color: var(#{$✨}primary);
|
||||
#{$✨}accordion-close-summary-color: var(#{$✨}color);
|
||||
#{$✨}accordion-open-summary-color: var(#{$✨}muted-color);
|
||||
|
||||
// Card (<article>)
|
||||
$box-shadow-elevation: 1rem;
|
||||
$box-shadow-blur-strengh: 6rem;
|
||||
$box-shadow-opacity: 0.06;
|
||||
--card-background-color: #{mix($black, $grey-900, 25%)};
|
||||
--card-border-color: var(--card-background-color);
|
||||
--card-box-shadow: #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{(
|
||||
$box-shadow-blur-strengh * 0.029
|
||||
)} #{rgba($black, ($box-shadow-opacity * 0.283))},
|
||||
#{$✨}card-background-color: #{mix($black, $grey-900, 25%)};
|
||||
#{$✨}card-border-color: var(#{$✨}card-background-color);
|
||||
#{$✨}card-box-shadow: #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)}
|
||||
#{($box-shadow-blur-strengh * 0.029)} #{rgba($black, ($box-shadow-opacity * 0.283))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{(
|
||||
$box-shadow-blur-strengh * 0.067
|
||||
)} #{rgba($black, ($box-shadow-opacity * 0.4))},
|
||||
|
|
@ -131,41 +131,41 @@
|
|||
$box-shadow-opacity
|
||||
)},
|
||||
0 0 0 0.0625rem #{rgba($black, ($box-shadow-opacity * 0.25))};
|
||||
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||
#{$✨}card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||
|
||||
// Dropdown (<details role="list">)
|
||||
--dropdown-background-color: #{$grey-900};
|
||||
--dropdown-border-color: #{mix($grey-900, $grey-800)};
|
||||
--dropdown-box-shadow: var(--card-box-shadow);
|
||||
--dropdown-color: var(--color);
|
||||
--dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};
|
||||
#{$✨}dropdown-background-color: #{$grey-900};
|
||||
#{$✨}dropdown-border-color: #{mix($grey-900, $grey-800)};
|
||||
#{$✨}dropdown-box-shadow: var(#{$✨}card-box-shadow);
|
||||
#{$✨}dropdown-color: var(#{$✨}color);
|
||||
#{$✨}dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};
|
||||
|
||||
// Modal (<dialog>)
|
||||
--modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.8)};
|
||||
#{$✨}modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.8)};
|
||||
|
||||
// Progress
|
||||
--progress-background-color: #{mix($grey-900, $grey-800)};
|
||||
--progress-color: var(--primary);
|
||||
#{$✨}progress-background-color: #{mix($grey-900, $grey-800)};
|
||||
#{$✨}progress-color: var(#{$✨}primary);
|
||||
|
||||
// Loading ([aria-busy=true])
|
||||
--loading-spinner-opacity: 0.5;
|
||||
#{$✨}loading-spinner-opacity: 0.5;
|
||||
|
||||
// Tooltip ([data-tooltip])
|
||||
--tooltip-background-color: var(--contrast);
|
||||
--tooltip-color: var(--contrast-inverse);
|
||||
#{$✨}tooltip-background-color: var(#{$✨}contrast);
|
||||
#{$✨}tooltip-color: var(#{$✨}contrast-inverse);
|
||||
|
||||
// Icons
|
||||
--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-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($grey-300)}' 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-button: 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='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-button-inverse: 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($black)}' 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-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($grey-500)}' stroke-width='4' 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-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($grey-300)}' 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-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($red-900)}' 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-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-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($grey-300)}' stroke-width='2' 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-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($grey-300)}' 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-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($green-800)}' stroke-width='3' 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");
|
||||
#{$✨}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($grey-300)}' 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-button: 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='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-button-inverse: 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($black)}' 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-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($grey-500)}' stroke-width='4' 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-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($grey-300)}' 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-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($red-900)}' 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-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-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($grey-300)}' stroke-width='2' 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-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($grey-300)}' 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-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($green-800)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
|
||||
// Document
|
||||
color-scheme: dark;
|
||||
|
|
|
|||
|
|
@ -1,118 +1,118 @@
|
|||
@use "colors" as *;
|
||||
@use "../../settings" as *;
|
||||
@use "../../utils/functions";
|
||||
|
||||
// Default: Light theme
|
||||
@mixin light {
|
||||
--background-color: #{$white};
|
||||
@mixin theme {
|
||||
#{$✨}background-color: #{$white};
|
||||
|
||||
// Texts colors
|
||||
--color: #{$grey-700};
|
||||
--h1-color: #{$grey-900};
|
||||
--h2-color: #{mix($grey-900, $grey-800)};
|
||||
--h3-color: #{$grey-800};
|
||||
--h4-color: #{mix($grey-800, $grey-700)};
|
||||
--h5-color: #{$grey-700};
|
||||
--h6-color: #{mix($grey-700, $grey-600)};
|
||||
#{$✨}color: #{$grey-700};
|
||||
#{$✨}h1-color: #{$grey-900};
|
||||
#{$✨}h2-color: #{mix($grey-900, $grey-800)};
|
||||
#{$✨}h3-color: #{$grey-800};
|
||||
#{$✨}h4-color: #{mix($grey-800, $grey-700)};
|
||||
#{$✨}h5-color: #{$grey-700};
|
||||
#{$✨}h6-color: #{mix($grey-700, $grey-600)};
|
||||
|
||||
// Muted colors
|
||||
--muted-color: #{$grey-500};
|
||||
--muted-border-color: #{$grey-50};
|
||||
#{$✨}muted-color: #{$grey-500};
|
||||
#{$✨}muted-border-color: #{$grey-50};
|
||||
|
||||
// Primary colors
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-700};
|
||||
--primary-focus: #{rgba($primary-600, 0.125)};
|
||||
--primary-inverse: #{$white};
|
||||
#{$✨}primary: #{$primary-600};
|
||||
#{$✨}primary-hover: #{$primary-700};
|
||||
#{$✨}primary-focus: #{rgba($primary-600, 0.125)};
|
||||
#{$✨}primary-inverse: #{$white};
|
||||
|
||||
// Secondary colors
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-hover: #{$grey-700};
|
||||
--secondary-focus: #{rgba($grey-600, 0.125)};
|
||||
--secondary-inverse: #{$white};
|
||||
#{$✨}secondary: #{$grey-600};
|
||||
#{$✨}secondary-hover: #{$grey-700};
|
||||
#{$✨}secondary-focus: #{rgba($grey-600, 0.125)};
|
||||
#{$✨}secondary-inverse: #{$white};
|
||||
|
||||
// Contrast colors
|
||||
--contrast: #{$grey-900};
|
||||
--contrast-hover: #{$black};
|
||||
--contrast-focus: #{rgba($grey-600, 0.125)};
|
||||
--contrast-inverse: #{$white};
|
||||
#{$✨}contrast: #{$grey-900};
|
||||
#{$✨}contrast-hover: #{$black};
|
||||
#{$✨}contrast-focus: #{rgba($grey-600, 0.125)};
|
||||
#{$✨}contrast-inverse: #{$white};
|
||||
|
||||
// Highlighted text (<mark>)
|
||||
--mark-background-color: #{mix($amber-100, $amber-50)};
|
||||
--mark-color: #{mix($grey-900, $amber-900, 75%)};
|
||||
#{$✨}mark-background-color: #{mix($amber-100, $amber-50)};
|
||||
#{$✨}mark-color: #{mix($grey-900, $amber-900, 75%)};
|
||||
|
||||
// Inserted (<ins>) & Deleted (<ins>)
|
||||
--ins-color: #{$green-700};
|
||||
--del-color: #{$red-800};
|
||||
#{$✨}ins-color: #{$green-700};
|
||||
#{$✨}del-color: #{$red-800};
|
||||
|
||||
// Blockquote
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
#{$✨}blockquote-border-color: var(#{$✨}muted-border-color);
|
||||
#{$✨}blockquote-footer-color: var(#{$✨}muted-color);
|
||||
|
||||
// Button
|
||||
// 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.
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
#{$✨}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
#{$✨}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
|
||||
// Form elements
|
||||
--form-element-background-color: transparent;
|
||||
--form-element-border-color: #{$grey-300};
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: transparent;
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #{$grey-100};
|
||||
--form-element-disabled-border-color: #{$grey-300};
|
||||
--form-element-disabled-opacity: 0.5;
|
||||
--form-element-invalid-border-color: #{$red-800};
|
||||
--form-element-invalid-active-border-color: #{$red-700};
|
||||
--form-element-invalid-focus-color: #{rgba($red-700, 0.125)};
|
||||
--form-element-valid-border-color: #{$green-700};
|
||||
--form-element-valid-active-border-color: #{$green-600};
|
||||
--form-element-valid-focus-color: #{rgba($green-600, 0.125)};
|
||||
#{$✨}form-element-background-color: transparent;
|
||||
#{$✨}form-element-border-color: #{$grey-300};
|
||||
#{$✨}form-element-color: var(#{$✨}color);
|
||||
#{$✨}form-element-placeholder-color: var(#{$✨}muted-color);
|
||||
#{$✨}form-element-active-background-color: transparent;
|
||||
#{$✨}form-element-active-border-color: var(#{$✨}primary);
|
||||
#{$✨}form-element-focus-color: var(#{$✨}primary-focus);
|
||||
#{$✨}form-element-disabled-background-color: #{$grey-100};
|
||||
#{$✨}form-element-disabled-border-color: #{$grey-300};
|
||||
#{$✨}form-element-disabled-opacity: 0.5;
|
||||
#{$✨}form-element-invalid-border-color: #{$red-800};
|
||||
#{$✨}form-element-invalid-active-border-color: #{$red-700};
|
||||
#{$✨}form-element-invalid-focus-color: #{rgba($red-700, 0.125)};
|
||||
#{$✨}form-element-valid-border-color: #{$green-700};
|
||||
#{$✨}form-element-valid-active-border-color: #{$green-600};
|
||||
#{$✨}form-element-valid-focus-color: #{rgba($green-600, 0.125)};
|
||||
|
||||
// Switch (input[type="checkbox"][role="switch"])
|
||||
--switch-background-color: #{$grey-200};
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
#{$✨}switch-background-color: #{$grey-200};
|
||||
#{$✨}switch-color: var(#{$✨}primary-inverse);
|
||||
#{$✨}switch-checked-background-color: var(#{$✨}primary);
|
||||
|
||||
// Range (input[type="range"])
|
||||
--range-border-color: #{$grey-100};
|
||||
--range-active-border-color: #{$grey-200};
|
||||
--range-thumb-border-color: var(--background-color);
|
||||
--range-thumb-color: var(--secondary);
|
||||
--range-thumb-hover-color: var(--secondary-hover);
|
||||
--range-thumb-active-color: var(--primary);
|
||||
#{$✨}range-border-color: #{$grey-100};
|
||||
#{$✨}range-active-border-color: #{$grey-200};
|
||||
#{$✨}range-thumb-border-color: var(#{$✨}background-color);
|
||||
#{$✨}range-thumb-color: var(#{$✨}secondary);
|
||||
#{$✨}range-thumb-hover-color: var(#{$✨}secondary-hover);
|
||||
#{$✨}range-thumb-active-color: var(#{$✨}primary);
|
||||
|
||||
// Table
|
||||
--table-border-color: var(--muted-border-color);
|
||||
--table-row-stripped-background-color: #{mix($grey-50, $white)};
|
||||
#{$✨}table-border-color: var(#{$✨}muted-border-color);
|
||||
#{$✨}table-row-stripped-background-color: #{mix($grey-50, $white)};
|
||||
|
||||
// Code
|
||||
--code-background-color: #{$grey-50};
|
||||
--code-color: var(--muted-color);
|
||||
--code-kbd-background-color: var(--contrast);
|
||||
--code-kbd-color: var(--contrast-inverse);
|
||||
--code-tag-color: #{hsl(330, 40%, 50%)};
|
||||
--code-property-color: #{hsl(185, 40%, 40%)};
|
||||
--code-value-color: #{hsl(40, 20%, 50%)};
|
||||
--code-comment-color: #{$grey-300};
|
||||
#{$✨}code-background-color: #{$grey-50};
|
||||
#{$✨}code-color: var(#{$✨}muted-color);
|
||||
#{$✨}code-kbd-background-color: var(#{$✨}contrast);
|
||||
#{$✨}code-kbd-color: var(#{$✨}contrast-inverse);
|
||||
#{$✨}code-tag-color: #{hsl(330, 40%, 50%)};
|
||||
#{$✨}code-property-color: #{hsl(185, 40%, 40%)};
|
||||
#{$✨}code-value-color: #{hsl(40, 20%, 50%)};
|
||||
#{$✨}code-comment-color: #{$grey-300};
|
||||
|
||||
// Accordion (<details>)
|
||||
--accordion-border-color: var(--muted-border-color);
|
||||
--accordion-close-summary-color: var(--color);
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
#{$✨}accordion-border-color: var(#{$✨}muted-border-color);
|
||||
#{$✨}accordion-close-summary-color: var(#{$✨}color);
|
||||
#{$✨}accordion-open-summary-color: var(#{$✨}muted-color);
|
||||
|
||||
// Card (<article>)
|
||||
$box-shadow-elevation: 1rem;
|
||||
$box-shadow-blur-strengh: 6rem;
|
||||
$box-shadow-opacity: 0.06;
|
||||
--card-background-color: var(--background-color);
|
||||
--card-border-color: var(--muted-border-color);
|
||||
--card-box-shadow: #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{(
|
||||
$box-shadow-blur-strengh * 0.029
|
||||
)} #{rgba($grey-900, ($box-shadow-opacity * 0.283))},
|
||||
#{$✨}card-background-color: var(#{$✨}background-color);
|
||||
#{$✨}card-border-color: var(#{$✨}muted-border-color);
|
||||
#{$✨}card-box-shadow: #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)}
|
||||
#{($box-shadow-blur-strengh * 0.029)} #{rgba($grey-900, ($box-shadow-opacity * 0.283))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{(
|
||||
$box-shadow-blur-strengh * 0.067
|
||||
)} #{rgba($grey-900, ($box-shadow-opacity * 0.4))},
|
||||
|
|
@ -130,41 +130,41 @@
|
|||
$box-shadow-opacity
|
||||
)},
|
||||
0 0 0 0.0625rem #{rgba($grey-900, ($box-shadow-opacity * 0.25))};
|
||||
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
|
||||
#{$✨}card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
|
||||
|
||||
// Dropdown (<details role="list">)
|
||||
--dropdown-background-color: #{mix($grey-50, $white, 25%)};
|
||||
--dropdown-border-color: #{mix($grey-100, $grey-50)};
|
||||
--dropdown-box-shadow: var(--card-box-shadow);
|
||||
--dropdown-color: var(--color);
|
||||
--dropdown-hover-background-color: #{$grey-50};
|
||||
#{$✨}dropdown-background-color: #{mix($grey-50, $white, 25%)};
|
||||
#{$✨}dropdown-border-color: #{mix($grey-100, $grey-50)};
|
||||
#{$✨}dropdown-box-shadow: var(#{$✨}card-box-shadow);
|
||||
#{$✨}dropdown-color: var(#{$✨}color);
|
||||
#{$✨}dropdown-hover-background-color: #{$grey-50};
|
||||
|
||||
// Modal (<dialog>)
|
||||
--modal-overlay-background-color: #{rgba($grey-100, 0.7)};
|
||||
#{$✨}modal-overlay-background-color: #{rgba($grey-100, 0.7)};
|
||||
|
||||
// Progress
|
||||
--progress-background-color: #{$grey-100};
|
||||
--progress-color: var(--primary);
|
||||
#{$✨}progress-background-color: #{$grey-100};
|
||||
#{$✨}progress-color: var(#{$✨}primary);
|
||||
|
||||
// Loading ([aria-busy=true])
|
||||
--loading-spinner-opacity: 0.5;
|
||||
#{$✨}loading-spinner-opacity: 0.5;
|
||||
|
||||
// Tooltip ([data-tooltip])
|
||||
--tooltip-background-color: var(--contrast);
|
||||
--tooltip-color: var(--contrast-inverse);
|
||||
#{$✨}tooltip-background-color: var(#{$✨}contrast);
|
||||
#{$✨}tooltip-color: var(#{$✨}contrast-inverse);
|
||||
|
||||
// Icons
|
||||
--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-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($grey-700)}' 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-button: 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='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-button-inverse: 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%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($grey-500)}' stroke-width='4' 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-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($grey-700)}' 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-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($red-800)}' 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-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-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($grey-700)}' stroke-width='2' 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-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($grey-700)}' 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-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($green-700)}' stroke-width='3' 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");
|
||||
#{$✨}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($grey-700)}' 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-button: 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='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-button-inverse: 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%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($grey-500)}' stroke-width='4' 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-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($grey-700)}' 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-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($red-800)}' 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-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-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($grey-700)}' stroke-width='2' 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-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($grey-700)}' 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-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($green-700)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
|
||||
// Document
|
||||
color-scheme: light;
|
||||
|
|
|
|||
|
|
@ -1,157 +1,158 @@
|
|||
@use "sass:map";
|
||||
@use "../../settings";
|
||||
@use "../../settings" as *;
|
||||
|
||||
// Commons Styles:
|
||||
:root {
|
||||
// Typography
|
||||
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans",
|
||||
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--line-height: 1.5;
|
||||
--font-weight: 400;
|
||||
--font-size: 16px;
|
||||
#{$✨}font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell",
|
||||
"Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
#{$✨}line-height: 1.5;
|
||||
#{$✨}font-weight: 400;
|
||||
#{$✨}font-size: 16px;
|
||||
|
||||
// Responsive typography
|
||||
@if settings.$enable-responsive-typography {
|
||||
@if map-get(settings.$breakpoints, "sm") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "sm")) {
|
||||
--font-size: 17px;
|
||||
@if $enable-responsive-typography {
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
#{$✨}font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "md") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "md")) {
|
||||
--font-size: 18px;
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
#{$✨}font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "lg") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "lg")) {
|
||||
--font-size: 19px;
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
#{$✨}font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "xl") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "xl")) {
|
||||
--font-size: 20px;
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
#{$✨}font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Borders
|
||||
--border-radius: 0.25rem;
|
||||
--border-width: 1px;
|
||||
--outline-width: 3px;
|
||||
#{$✨}border-radius: 0.25rem;
|
||||
#{$✨}border-width: 1px;
|
||||
#{$✨}outline-width: 3px;
|
||||
|
||||
// Spacings
|
||||
--spacing: 1rem;
|
||||
#{$✨}spacing: 1rem;
|
||||
|
||||
// Spacings for typography elements
|
||||
--typography-spacing-vertical: 1.5rem;
|
||||
#{$✨}typography-spacing-vertical: 1.5rem;
|
||||
|
||||
// Spacings for body > header, body > main, body > footer, section, article
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||||
--block-spacing-horizontal: var(--spacing);
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2);
|
||||
#{$✨}block-spacing-horizontal: var(#{$✨}spacing);
|
||||
|
||||
@if (settings.$enable-classes and settings.$enable-grid) {
|
||||
--grid-spacing-vertical: 0;
|
||||
--grid-spacing-horizontal: var(--spacing);
|
||||
@if ($enable-classes and $enable-grid) {
|
||||
#{$✨}grid-spacing-vertical: 0;
|
||||
#{$✨}grid-spacing-horizontal: var(#{$✨}spacing);
|
||||
}
|
||||
|
||||
// Spacings for form elements and button
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
#{$✨}form-element-spacing-vertical: 0.75rem;
|
||||
#{$✨}form-element-spacing-horizontal: 1rem;
|
||||
|
||||
// Spacings for nav component
|
||||
--nav-element-spacing-vertical: 1rem;
|
||||
--nav-element-spacing-horizontal: 0.5rem;
|
||||
--nav-link-spacing-vertical: 0.5rem;
|
||||
--nav-link-spacing-horizontal: 0.5rem;
|
||||
#{$✨}nav-element-spacing-vertical: 1rem;
|
||||
#{$✨}nav-element-spacing-horizontal: 0.5rem;
|
||||
#{$✨}nav-link-spacing-vertical: 0.5rem;
|
||||
#{$✨}nav-link-spacing-horizontal: 0.5rem;
|
||||
|
||||
// Font weight for form labels & fieldsets legend
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
#{$✨}form-label-font-weight: var(#{$✨}font-weight);
|
||||
|
||||
// Transitions
|
||||
--transition: 0.2s ease-in-out;
|
||||
#{$✨}transition: 0.2s ease-in-out;
|
||||
|
||||
// Modal (<dialog>)
|
||||
--modal-overlay-backdrop-filter: blur(0.25rem);
|
||||
#{$✨}modal-overlay-backdrop-filter: blur(0.25rem);
|
||||
}
|
||||
|
||||
// Responsives spacings
|
||||
@if settings.$enable-responsive-spacings {
|
||||
@if $enable-responsive-spacings {
|
||||
// Sectioning
|
||||
#{settings.$semantic-root-element} > header,
|
||||
#{settings.$semantic-root-element} > main,
|
||||
#{settings.$semantic-root-element} > footer,
|
||||
#{$semantic-root-element} > header,
|
||||
#{$semantic-root-element} > main,
|
||||
#{$semantic-root-element} > footer,
|
||||
section {
|
||||
@if map-get(settings.$breakpoints, "sm") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "sm")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2.5);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "md") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "md")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 3);
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 3);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "lg") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "lg")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 3.5);
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 3.5);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "xl") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "xl")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 4);
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Card (<article>)
|
||||
article {
|
||||
@if map-get(settings.$breakpoints, "sm") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "sm")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.25);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "md") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "md")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "lg") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "lg")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.75);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "xl") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "xl")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modal
|
||||
dialog > article {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||||
--block-spacing-horizontal: var(--spacing);
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2);
|
||||
#{$✨}block-spacing-horizontal: var(#{$✨}spacing);
|
||||
|
||||
@if map-get(settings.$breakpoints, "sm") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "sm")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2.5);
|
||||
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.25);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "md") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "md")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 3);
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 3);
|
||||
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -159,20 +160,20 @@
|
|||
|
||||
// Link
|
||||
a {
|
||||
--text-decoration: none;
|
||||
#{$✨}text-decoration: none;
|
||||
|
||||
// Secondary & Contrast
|
||||
@if settings.$enable-classes {
|
||||
@if enable-classes {
|
||||
&.secondary,
|
||||
&.contrast {
|
||||
--text-decoration: underline;
|
||||
#{$✨}text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
small {
|
||||
--font-size: 0.875em;
|
||||
#{$✨}font-size: 0.875em;
|
||||
}
|
||||
|
||||
// Headings
|
||||
|
|
@ -182,42 +183,42 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
--font-weight: 700;
|
||||
#{$✨}font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
--font-size: 2rem;
|
||||
--typography-spacing-vertical: 3rem;
|
||||
#{$✨}font-size: 2rem;
|
||||
#{$✨}typography-spacing-vertical: 3rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
--font-size: 1.75rem;
|
||||
--typography-spacing-vertical: 2.625rem;
|
||||
#{$✨}font-size: 1.75rem;
|
||||
#{$✨}typography-spacing-vertical: 2.625rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
--font-size: 1.5rem;
|
||||
--typography-spacing-vertical: 2.25rem;
|
||||
#{$✨}font-size: 1.5rem;
|
||||
#{$✨}typography-spacing-vertical: 2.25rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
--font-size: 1.25rem;
|
||||
--typography-spacing-vertical: 1.874rem;
|
||||
#{$✨}font-size: 1.25rem;
|
||||
#{$✨}typography-spacing-vertical: 1.874rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
--font-size: 1.125rem;
|
||||
--typography-spacing-vertical: 1.6875rem;
|
||||
#{$✨}font-size: 1.125rem;
|
||||
#{$✨}typography-spacing-vertical: 1.6875rem;
|
||||
}
|
||||
|
||||
// Forms elements
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
--border-width: 2px;
|
||||
#{$✨}border-width: 2px;
|
||||
}
|
||||
|
||||
[type="checkbox"][role="switch"] {
|
||||
--border-width: 3px;
|
||||
#{$✨}border-width: 3px;
|
||||
}
|
||||
|
||||
// Table
|
||||
|
|
@ -225,12 +226,12 @@ thead,
|
|||
tfoot {
|
||||
th,
|
||||
td {
|
||||
--border-width: 3px;
|
||||
#{$✨}border-width: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
:not(thead, tfoot) > * > td {
|
||||
--font-size: 0.875em;
|
||||
#{$✨}font-size: 0.875em;
|
||||
}
|
||||
|
||||
// Code
|
||||
|
|
@ -238,11 +239,11 @@ pre,
|
|||
code,
|
||||
kbd,
|
||||
samp {
|
||||
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono",
|
||||
"Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
#{$✨}font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono",
|
||||
"Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji",
|
||||
"Segoe UI Symbol", "Noto Color Emoji";
|
||||
}
|
||||
|
||||
kbd {
|
||||
--font-weight: bolder;
|
||||
#{$✨}font-weight: bolder;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@use "../settings";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if settings.$enable-transitions and settings.$enable-important {
|
||||
@if enable-transitions and enable-important {
|
||||
/**
|
||||
* Reduce Motion Features
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/*!
|
||||
* Pico.css v2.0.0-alpha1 (https://picocss.com)
|
||||
* Pico ✨ v2.0.0-alpha1 (https://picocss.com)
|
||||
* Copyright 2019-2022 - Licensed under MIT
|
||||
*/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue