mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-26 11:16:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: prefix css vars

Browse source
This commit is contained in:
Lucas Larroche 2022-10-22 13:11:51 +07:00
parent cba8f385c2
commit c5a1ffc733
40 changed files with 2334 additions and 2329 deletions
Download patch file Download diff file Expand all files Collapse all files

36
scss/components/_accordion.scss
View file

@ -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);
}
}