mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 18:26:14 -04:00
refactor: prefix css vars
This commit is contained in:
Lucas Larroche
parent
cba8f385c2
commit
c5a1ffc733
40 changed files with 2334 additions and 2329 deletions
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue