ccchh-website/themes/ccchh/assets/pico-1.5.11/scss/components/_progress.scss

90 lines
2.1 KiB
SCSS
Raw Permalink Normal View History

2024-01-27 22:10:30 +01:00
/**
* Progress
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
//
// 1. Add the correct display in Edge 18- and IE
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
progress {
display: inline-block; // 1
vertical-align: baseline; // 2
}
// Pico
//
progress {
// Reset the default appearance
-webkit-appearance: none;
-moz-appearance: none;
// Styles
display: inline-block;
appearance: none;
width: 100%;
height: 0.5rem;
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);
// IE10 uses `color` to set the bar background-color
color: var(--progress-color);
&::-webkit-progress-bar {
border-radius: var(--border-radius);
background: none;
}
&[value]::-webkit-progress-value {
background-color: var(--progress-color);
}
&::-moz-progress-bar {
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%
)
top left / 150% 150% no-repeat;
animation: progress-indeterminate 1s linear infinite;
&[value]::-webkit-progress-value {
background-color: transparent;
}
&::-moz-progress-bar {
background-color: transparent;
}
}
}
}
[dir="rtl"] {
@media (prefers-reduced-motion: no-preference) {
progress:indeterminate {
animation-direction: reverse;
}
}
}
@keyframes progress-indeterminate {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}