mirror of
https://github.com/picocss/pico.git
synced 2025-04-20 08:45:06 -04:00
refactor: update $css-var-prefix name
This commit is contained in:
Lucas Larroche
parent
2c97dc3ae5
commit
3c96e6043b
41 changed files with 866 additions and 759 deletions
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
details {
|
||||
display: block;
|
||||
margin-bottom: var(#{$✨}spacing);
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
|
||||
summary {
|
||||
line-height: 1rem;
|
||||
|
|
@ -16,11 +16,11 @@
|
|||
cursor: pointer;
|
||||
|
||||
&:not([role]) {
|
||||
color: var(#{$✨}accordion-close-summary-color);
|
||||
color: var(#{$css-var-prefix}accordion-close-summary-color);
|
||||
}
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: color var(#{$✨}transition);
|
||||
transition: color var(#{$css-var-prefix}transition);
|
||||
}
|
||||
|
||||
// Reset marker
|
||||
|
|
@ -41,17 +41,17 @@
|
|||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-inline-start: calc(var(#{$✨}spacing, 1rem) * 0.5);
|
||||
margin-inline-start: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
|
||||
float: right;
|
||||
transform: rotate(-90deg);
|
||||
background-image: var(#{$✨}icon-chevron);
|
||||
background-image: var(#{$css-var-prefix}icon-chevron);
|
||||
background-position: right center;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: transform var(#{$✨}transition);
|
||||
transition: transform var(#{$css-var-prefix}transition);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -59,15 +59,15 @@
|
|||
outline: none;
|
||||
|
||||
&:not([role]) {
|
||||
color: var(#{$✨}accordion-active-summary-color);
|
||||
color: var(#{$css-var-prefix}accordion-active-summary-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
&:not([role]) {
|
||||
outline: var(#{$✨}outline-width) solid var(#{$✨}primary-focus);
|
||||
outline-offset: calc(var(#{$✨}spacing, 1rem) * 0.5);
|
||||
color: var(#{$✨}primary);
|
||||
outline: var(#{$css-var-prefix}outline-width) solid var(#{$css-var-prefix}primary-focus);
|
||||
outline-offset: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
|
||||
color: var(#{$css-var-prefix}primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
|
||||
// Marker
|
||||
&::after {
|
||||
height: calc(1rem * var(#{$✨}line-height, 1.5));
|
||||
height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -86,11 +86,11 @@
|
|||
// Open
|
||||
&[open] {
|
||||
> summary {
|
||||
margin-bottom: var(#{$✨}spacing);
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
|
||||
&:not([role]) {
|
||||
&:not(:focus) {
|
||||
color: var(#{$✨}accordion-open-summary-color);
|
||||
color: var(#{$css-var-prefix}accordion-open-summary-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,34 +7,40 @@
|
|||
*/
|
||||
|
||||
article {
|
||||
margin-bottom: var(#{$✨}block-spacing-vertical);
|
||||
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-bottom: var(#{$css-var-prefix}block-spacing-vertical);
|
||||
padding: var(#{$css-var-prefix}block-spacing-vertical)
|
||||
var(#{$css-var-prefix}block-spacing-horizontal);
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
background: var(#{$css-var-prefix}card-background-color);
|
||||
box-shadow: var(#{$css-var-prefix}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-sectioning-background-color);
|
||||
margin-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
|
||||
margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
|
||||
padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66)
|
||||
var(#{$css-var-prefix}block-spacing-horizontal);
|
||||
background-color: var(#{$css-var-prefix}card-sectioning-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(#{$css-var-prefix}block-spacing-vertical) * -1);
|
||||
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
|
||||
border-bottom: var(#{$css-var-prefix}border-width)
|
||||
solid
|
||||
var(#{$css-var-prefix}card-border-color);
|
||||
border-top-right-radius: var(#{$css-var-prefix}border-radius);
|
||||
border-top-left-radius: var(#{$css-var-prefix}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(#{$css-var-prefix}block-spacing-vertical);
|
||||
margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
|
||||
border-top: var(#{$css-var-prefix}border-width)
|
||||
solid
|
||||
var(#{$css-var-prefix}card-border-color);
|
||||
border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
|
||||
border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,13 +20,13 @@
|
|||
&::after {
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: calc(1rem * var(#{$✨}line-height, 1.5));
|
||||
height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
|
||||
margin-inline-start: 0.25rem;
|
||||
float: right;
|
||||
// TODO: find out why we need this magic number (0.2 rem)
|
||||
// for the marker to be aligned with the regular select
|
||||
transform: rotate(0deg) translateX(0.2rem);
|
||||
background-image: var(#{$✨}icon-chevron);
|
||||
background-image: var(#{$css-var-prefix}icon-chevron);
|
||||
background-position: right center;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -49,37 +49,44 @@
|
|||
details.dropdown summary:not([role]) {
|
||||
height: calc(
|
||||
1rem *
|
||||
var(#{$✨}line-height) +
|
||||
var(#{$✨}form-element-spacing-vertical) *
|
||||
var(#{$css-var-prefix}line-height) +
|
||||
var(#{$css-var-prefix}form-element-spacing-vertical) *
|
||||
2 +
|
||||
var(#{$✨}border-width) *
|
||||
var(#{$css-var-prefix}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(#{$css-var-prefix}form-element-spacing-vertical)
|
||||
var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||
border: var(#{$css-var-prefix}border-width)
|
||||
solid
|
||||
var(#{$css-var-prefix}form-element-border-color);
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
background-color: var(#{$css-var-prefix}form-element-background-color);
|
||||
color: var(#{$css-var-prefix}form-element-placeholder-color);
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(#{$✨}transition),
|
||||
border-color var(#{$✨}transition),
|
||||
color var(#{$✨}transition),
|
||||
box-shadow var(#{$✨}transition);
|
||||
background-color var(#{$css-var-prefix}transition),
|
||||
border-color var(#{$css-var-prefix}transition),
|
||||
color var(#{$css-var-prefix}transition),
|
||||
box-shadow var(#{$css-var-prefix}transition);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(#{$✨}form-element-active-border-color);
|
||||
background-color: var(#{$✨}form-element-active-background-color);
|
||||
border-color: var(#{$css-var-prefix}form-element-active-border-color);
|
||||
background-color: var(#{$css-var-prefix}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(#{$css-var-prefix}outline-width)
|
||||
var(#{$css-var-prefix}form-element-focus-color);
|
||||
}
|
||||
|
||||
// Reset focus visible from accordion component
|
||||
|
|
@ -89,15 +96,27 @@
|
|||
|
||||
// Aria-invalid
|
||||
&[aria-invalid="false"] {
|
||||
#{$✨}form-element-border-color: var(#{$✨}form-element-valid-border-color);
|
||||
#{$✨}form-element-active-border-color: var(#{$✨}form-element-valid-focus-color);
|
||||
#{$✨}form-element-focus-color: var(#{$✨}form-element-valid-focus-color);
|
||||
#{$css-var-prefix}form-element-border-color: var(
|
||||
#{$css-var-prefix}form-element-valid-border-color
|
||||
);
|
||||
#{$css-var-prefix}form-element-active-border-color: var(
|
||||
#{$css-var-prefix}form-element-valid-focus-color
|
||||
);
|
||||
#{$css-var-prefix}form-element-focus-color: var(
|
||||
#{$css-var-prefix}form-element-valid-focus-color
|
||||
);
|
||||
}
|
||||
|
||||
&[aria-invalid="true"] {
|
||||
#{$✨}form-element-border-color: var(#{$✨}form-element-invalid-border-color);
|
||||
#{$✨}form-element-active-border-color: var(#{$✨}form-element-invalid-focus-color);
|
||||
#{$✨}form-element-focus-color: var(#{$✨}form-element-invalid-focus-color);
|
||||
#{$css-var-prefix}form-element-border-color: var(
|
||||
#{$css-var-prefix}form-element-invalid-border-color
|
||||
);
|
||||
#{$css-var-prefix}form-element-active-border-color: var(
|
||||
#{$css-var-prefix}form-element-invalid-focus-color
|
||||
);
|
||||
#{$css-var-prefix}form-element-focus-color: var(
|
||||
#{$css-var-prefix}form-element-invalid-focus-color
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -105,16 +124,22 @@
|
|||
// ––––––––––––––––––––
|
||||
nav details.dropdown {
|
||||
display: inline;
|
||||
margin: calc(var(#{$✨}nav-element-spacing-vertical) * -1) 0;
|
||||
margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
|
||||
|
||||
summary:not([role]) {
|
||||
// Override height
|
||||
height: calc((1rem * var(#{$✨}line-height)) + (var(#{$✨}nav-link-spacing-vertical) * 2));
|
||||
padding: calc(var(#{$✨}nav-link-spacing-vertical) - (var(#{$✨}border-width) * 2))
|
||||
var(#{$✨}nav-link-spacing-horizontal);
|
||||
height: calc(
|
||||
(1rem * var(#{$css-var-prefix}line-height)) +
|
||||
(var(#{$css-var-prefix}nav-link-spacing-vertical) * 2)
|
||||
);
|
||||
padding: calc(
|
||||
var(#{$css-var-prefix}nav-link-spacing-vertical) -
|
||||
(var(#{$css-var-prefix}border-width) * 2)
|
||||
)
|
||||
var(#{$css-var-prefix}nav-link-spacing-horizontal);
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}primary-focus);
|
||||
box-shadow: 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -130,19 +155,19 @@
|
|||
width: 100%;
|
||||
min-width: fit-content;
|
||||
margin: 0;
|
||||
margin-top: var(#{$✨}outline-width);
|
||||
margin-top: var(#{$css-var-prefix}outline-width);
|
||||
padding: 0;
|
||||
border: var(#{$✨}border-width) solid var(#{$✨}dropdown-border-color);
|
||||
border-radius: var(#{$✨}border-radius);
|
||||
background-color: var(#{$✨}dropdown-background-color);
|
||||
box-shadow: var(#{$✨}dropdown-box-shadow);
|
||||
color: var(#{$✨}dropdown-color);
|
||||
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}dropdown-border-color);
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
background-color: var(#{$css-var-prefix}dropdown-background-color);
|
||||
box-shadow: var(#{$css-var-prefix}dropdown-box-shadow);
|
||||
color: var(#{$css-var-prefix}dropdown-color);
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
opacity var(--pico-transition),
|
||||
opacity var(#{$css-var-prefix}transition),
|
||||
transform 0s ease-in-out 1s;
|
||||
}
|
||||
|
||||
|
|
@ -154,27 +179,27 @@
|
|||
li {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
|
||||
var(#{$✨}form-element-spacing-horizontal);
|
||||
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
|
||||
var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||
list-style: none;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: calc(var(#{$✨}form-element-spacing-vertical) * 0.5);
|
||||
margin-top: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: calc(var(#{$✨}form-element-spacing-vertical) * 0.5);
|
||||
margin-bottom: calc(var(#{$css-var-prefix}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(#{$css-var-prefix}form-element-spacing-vertical) * -0.5)
|
||||
calc(var(#{$css-var-prefix}form-element-spacing-horizontal) * -1);
|
||||
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
|
||||
var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||
overflow: hidden;
|
||||
border-radius: 0;
|
||||
color: var(#{$✨}dropdown-color);
|
||||
color: var(#{$css-var-prefix}dropdown-color);
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
|
|
@ -183,7 +208,7 @@
|
|||
&:active,
|
||||
&:focus-visible,
|
||||
&[aria-current]:not([aria-current="false"]) {
|
||||
background-color: var(#{$✨}dropdown-hover-background-color);
|
||||
background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -193,7 +218,7 @@
|
|||
|
||||
// Not working in Firefox, which doesn't support the `:has()` pseudo-class
|
||||
&:has(label):hover {
|
||||
background-color: var(#{$✨}dropdown-hover-background-color);
|
||||
background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -240,6 +265,6 @@
|
|||
// Label
|
||||
// ––––––––––––––––––––
|
||||
label > details.dropdown {
|
||||
margin-top: calc(var(#{$✨}spacing) * 0.25);
|
||||
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,11 +31,11 @@
|
|||
[role="group"] {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
margin-bottom: var(#{$✨}spacing);
|
||||
border-radius: var(#{$✨}border-radius);
|
||||
box-shadow: var(#{$✨}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
box-shadow: var(#{$css-var-prefix}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
vertical-align: middle;
|
||||
transition: box-shadow var(#{$✨}transition);
|
||||
transition: box-shadow var(#{$css-var-prefix}transition);
|
||||
|
||||
> *,
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
input:not([type="checkbox"], [type="radio"]),
|
||||
select {
|
||||
&:not(:first-child) {
|
||||
margin-left: calc(var(#{$✨}border-width) * -1);
|
||||
margin-left: calc(var(#{$css-var-prefix}border-width) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -83,7 +83,9 @@
|
|||
@supports selector(:has(*)) {
|
||||
// Group box shadow when a button is focused
|
||||
&:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
|
||||
#{$✨}group-box-shadow: var(#{$✨}group-box-shadow-focus-with-button);
|
||||
#{$css-var-prefix}group-box-shadow: var(
|
||||
#{$css-var-prefix}group-box-shadow-focus-with-button
|
||||
);
|
||||
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select {
|
||||
|
|
@ -93,16 +95,19 @@
|
|||
|
||||
// Group box shadow when an input is focused
|
||||
&:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
|
||||
#{$✨}group-box-shadow: var(#{$✨}group-box-shadow-focus-with-input);
|
||||
#{$css-var-prefix}group-box-shadow: var(
|
||||
#{$css-var-prefix}group-box-shadow-focus-with-input
|
||||
);
|
||||
|
||||
// Adapt box shadow for buttons
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="button"],
|
||||
[role="button"] {
|
||||
#{$✨}button-box-shadow: 0 0 0 var(#{$✨}border-width) var(#{$✨}primary-border);
|
||||
#{$✨}button-hover-box-shadow: 0 0 0 var(#{$✨}border-width)
|
||||
var(#{$✨}primary-hover-border);
|
||||
#{$css-var-prefix}button-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
|
||||
var(#{$css-var-prefix}primary-border);
|
||||
#{$css-var-prefix}button-hover-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
|
||||
var(#{$css-var-prefix}primary-hover-border);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-image: var(#{$✨}icon-loading);
|
||||
background-image: var(#{$css-var-prefix}icon-loading);
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
&:not(:empty) {
|
||||
&::before {
|
||||
margin-inline-end: calc(var(#{$✨}spacing) * 0.5);
|
||||
margin-inline-end: calc(var(#{$css-var-prefix}spacing) * 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
*/
|
||||
|
||||
:root {
|
||||
#{$✨}scrollbar-width: 0px;
|
||||
#{$css-var-prefix}scrollbar-width: 0px;
|
||||
}
|
||||
|
||||
dialog {
|
||||
|
|
@ -25,15 +25,15 @@
|
|||
height: inherit;
|
||||
min-height: 100%;
|
||||
border: 0;
|
||||
backdrop-filter: var(#{$✨}modal-overlay-backdrop-filter);
|
||||
background-color: var(#{$✨}modal-overlay-background-color);
|
||||
color: var(#{$✨}color);
|
||||
backdrop-filter: var(#{$css-var-prefix}modal-overlay-backdrop-filter);
|
||||
background-color: var(#{$css-var-prefix}modal-overlay-background-color);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
|
||||
// Content
|
||||
article {
|
||||
width: 100%;
|
||||
max-height: calc(100vh - var(#{$✨}spacing) * 2);
|
||||
margin: var(#{$✨}spacing);
|
||||
max-height: calc(100vh - var(#{$css-var-prefix}spacing) * 2);
|
||||
margin: var(#{$css-var-prefix}spacing);
|
||||
overflow: auto;
|
||||
|
||||
@if map.get($breakpoints, "sm") {
|
||||
|
|
@ -50,13 +50,14 @@
|
|||
|
||||
> header,
|
||||
> footer {
|
||||
padding: calc(var(#{$✨}block-spacing-vertical) * 0.5) var(#{$✨}block-spacing-horizontal);
|
||||
padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.5)
|
||||
var(#{$css-var-prefix}block-spacing-horizontal);
|
||||
}
|
||||
|
||||
> header {
|
||||
.close {
|
||||
margin: 0;
|
||||
margin-left: var(#{$✨}spacing);
|
||||
margin-left: var(#{$css-var-prefix}spacing);
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
|
@ -69,7 +70,7 @@
|
|||
margin-bottom: 0;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
margin-left: calc(var(#{$✨}spacing) * 0.5);
|
||||
margin-left: calc(var(#{$css-var-prefix}spacing) * 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -80,17 +81,17 @@
|
|||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: calc(var(#{$✨}spacing) * -1);
|
||||
margin-bottom: var(#{$✨}spacing);
|
||||
margin-top: calc(var(#{$css-var-prefix}spacing) * -1);
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
margin-left: auto;
|
||||
background-image: var(#{$✨}icon-close);
|
||||
background-image: var(#{$css-var-prefix}icon-close);
|
||||
background-position: center;
|
||||
background-size: auto 1rem;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.5;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: opacity var(#{$✨}transition);
|
||||
transition: opacity var(#{$css-var-prefix}transition);
|
||||
}
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
|
|
@ -110,7 +111,7 @@
|
|||
// Utilities
|
||||
@if $enable-classes {
|
||||
.modal-is-open {
|
||||
padding-right: var(#{$✨}scrollbar-width, 0px);
|
||||
padding-right: var(#{$css-var-prefix}scrollbar-width, 0px);
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
|
|
|
|||
|
|
@ -34,24 +34,26 @@
|
|||
list-style: none;
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: calc(var(#{$✨}nav-element-spacing-horizontal) * -1);
|
||||
margin-left: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-right: calc(var(#{$✨}nav-element-spacing-horizontal) * -1);
|
||||
margin-right: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: var(#{$✨}nav-element-spacing-vertical) var(#{$✨}nav-element-spacing-horizontal);
|
||||
padding: var(#{$css-var-prefix}nav-element-spacing-vertical)
|
||||
var(#{$css-var-prefix}nav-element-spacing-horizontal);
|
||||
|
||||
: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(#{$css-var-prefix}nav-link-spacing-vertical) * -1)
|
||||
calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
|
||||
padding: var(#{$css-var-prefix}nav-link-spacing-vertical)
|
||||
var(#{$css-var-prefix}nav-link-spacing-horizontal);
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
|
||||
&:not(:hover) {
|
||||
text-decoration: none;
|
||||
|
|
@ -67,8 +69,11 @@
|
|||
margin-right: inherit;
|
||||
margin-bottom: 0;
|
||||
margin-left: inherit;
|
||||
padding: calc(var(#{$✨}nav-link-spacing-vertical) - (var(#{$✨}border-width) * 2))
|
||||
var(#{$✨}nav-link-spacing-horizontal);
|
||||
padding: calc(
|
||||
var(#{$css-var-prefix}nav-link-spacing-vertical) -
|
||||
(var(#{$css-var-prefix}border-width) * 2)
|
||||
)
|
||||
var(#{$css-var-prefix}nav-link-spacing-horizontal);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -79,22 +84,22 @@
|
|||
|
||||
& ul li {
|
||||
&:not(:first-child) {
|
||||
margin-inline-start: var(#{$✨}nav-link-spacing-horizontal);
|
||||
margin-inline-start: var(#{$css-var-prefix}nav-link-spacing-horizontal);
|
||||
}
|
||||
|
||||
a {
|
||||
margin: calc(var(#{$✨}nav-link-spacing-vertical) * -1) 0;
|
||||
margin-inline-start: calc(var(#{$✨}nav-link-spacing-horizontal) * -1);
|
||||
margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1) 0;
|
||||
margin-inline-start: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
&::after {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: calc(var(#{$✨}nav-link-spacing-horizontal) * 4);
|
||||
margin: 0 calc(var(#{$✨}nav-link-spacing-horizontal) * -1);
|
||||
content: var(#{$✨}nav-breadcrumb-divider);
|
||||
color: var(#{$✨}muted-color);
|
||||
width: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 4);
|
||||
margin: 0 calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
|
||||
content: var(#{$css-var-prefix}nav-breadcrumb-divider);
|
||||
color: var(#{$css-var-prefix}muted-color);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
|
|
@ -122,8 +127,8 @@
|
|||
}
|
||||
|
||||
li {
|
||||
padding: calc(var(#{$✨}nav-element-spacing-vertical) * 0.5)
|
||||
var(#{$✨}nav-element-spacing-horizontal);
|
||||
padding: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * 0.5)
|
||||
var(#{$css-var-prefix}nav-element-spacing-horizontal);
|
||||
|
||||
a {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -31,42 +31,42 @@
|
|||
appearance: none;
|
||||
width: 100%;
|
||||
height: 0.5rem;
|
||||
margin-bottom: calc(var(#{$✨}spacing) * 0.5);
|
||||
margin-bottom: calc(var(#{$css-var-prefix}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(#{$css-var-prefix}border-radius);
|
||||
background-color: var(#{$css-var-prefix}progress-background-color);
|
||||
|
||||
// IE10 uses `color` to set the bar background-color
|
||||
color: var(#{$✨}progress-color);
|
||||
color: var(#{$css-var-prefix}progress-color);
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
border-radius: var(#{$✨}border-radius);
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
background: none;
|
||||
}
|
||||
|
||||
&[value]::-webkit-progress-value {
|
||||
background-color: var(#{$✨}progress-color);
|
||||
background-color: var(#{$css-var-prefix}progress-color);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: inline-size var(#{$✨}transition);
|
||||
transition: inline-size var(#{$css-var-prefix}transition);
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-progress-bar {
|
||||
background-color: var(#{$✨}progress-color);
|
||||
background-color: var(#{$css-var-prefix}progress-color);
|
||||
}
|
||||
|
||||
// Indeterminate state
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
&:indeterminate {
|
||||
background: var(#{$✨}progress-background-color)
|
||||
background: var(#{$css-var-prefix}progress-background-color)
|
||||
linear-gradient(
|
||||
to right,
|
||||
var(#{$✨}progress-color) 30%,
|
||||
var(#{$✨}progress-background-color) 30%
|
||||
var(#{$css-var-prefix}progress-color) 30%,
|
||||
var(#{$css-var-prefix}progress-background-color) 30%
|
||||
)
|
||||
top left / 150% 150% no-repeat;
|
||||
animation: progress-indeterminate 1s linear infinite;
|
||||
|
|
|
|||
|
|
@ -27,12 +27,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(#{$css-var-prefix}border-radius);
|
||||
background: var(#{$css-var-prefix}tooltip-background-color);
|
||||
content: attr(data-tooltip);
|
||||
color: var(#{$✨}tooltip-color);
|
||||
color: var(#{$css-var-prefix}tooltip-color);
|
||||
font-style: normal;
|
||||
font-weight: var(#{$✨}font-weight);
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
content: "";
|
||||
color: var(#{$✨}tooltip-background-color);
|
||||
color: var(#{$css-var-prefix}tooltip-background-color);
|
||||
}
|
||||
|
||||
&[data-placement="bottom"] {
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
#{$✨}tooltip-slide-to: translate(-50%, -0.25rem);
|
||||
#{$css-var-prefix}tooltip-slide-to: translate(-50%, -0.25rem);
|
||||
transform: translate(-50%, 0.75rem);
|
||||
animation-duration: 0.2s;
|
||||
animation-fill-mode: forwards;
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
}
|
||||
|
||||
&::after {
|
||||
#{$✨}tooltip-caret-slide-to: translate(-50%, 0rem);
|
||||
#{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, 0rem);
|
||||
transform: translate(-50%, -0.25rem);
|
||||
animation-name: tooltip-caret-slide;
|
||||
}
|
||||
|
|
@ -142,13 +142,13 @@
|
|||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
#{$✨}tooltip-slide-to: translate(-50%, 0.25rem);
|
||||
#{$css-var-prefix}tooltip-slide-to: translate(-50%, 0.25rem);
|
||||
transform: translate(-50%, -0.75rem);
|
||||
animation-name: tooltip-slide;
|
||||
}
|
||||
|
||||
&::after {
|
||||
#{$✨}tooltip-caret-slide-to: translate(-50%, -0.3rem);
|
||||
#{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, -0.3rem);
|
||||
transform: translate(-50%, -0.5rem);
|
||||
animation-name: tooltip-caret-slide;
|
||||
}
|
||||
|
|
@ -161,13 +161,13 @@
|
|||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
#{$✨}tooltip-slide-to: translate(-0.25rem, -50%);
|
||||
#{$css-var-prefix}tooltip-slide-to: translate(-0.25rem, -50%);
|
||||
transform: translate(0.75rem, -50%);
|
||||
animation-name: tooltip-slide;
|
||||
}
|
||||
|
||||
&::after {
|
||||
#{$✨}tooltip-caret-slide-to: translate(0.3rem, -50%);
|
||||
#{$css-var-prefix}tooltip-caret-slide-to: translate(0.3rem, -50%);
|
||||
transform: translate(0.05rem, -50%);
|
||||
animation-name: tooltip-caret-slide;
|
||||
}
|
||||
|
|
@ -180,13 +180,13 @@
|
|||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
#{$✨}tooltip-slide-to: translate(0.25rem, -50%);
|
||||
#{$css-var-prefix}tooltip-slide-to: translate(0.25rem, -50%);
|
||||
transform: translate(-0.75rem, -50%);
|
||||
animation-name: tooltip-slide;
|
||||
}
|
||||
|
||||
&::after {
|
||||
#{$✨}tooltip-caret-slide-to: translate(-0.3rem, -50%);
|
||||
#{$css-var-prefix}tooltip-caret-slide-to: translate(-0.3rem, -50%);
|
||||
transform: translate(-0.05rem, -50%);
|
||||
animation-name: tooltip-caret-slide;
|
||||
}
|
||||
|
|
@ -196,7 +196,7 @@
|
|||
|
||||
@keyframes tooltip-slide {
|
||||
to {
|
||||
transform: var(#{$✨}tooltip-slide-to);
|
||||
transform: var(#{$css-var-prefix}tooltip-slide-to);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -206,7 +206,7 @@
|
|||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: var(#{$✨}tooltip-caret-slide-to);
|
||||
transform: var(#{$css-var-prefix}tooltip-caret-slide-to);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue