mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 02:36: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

24
scss/components/_progress.scss
View file

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