89 lines
2.1 KiB
SCSS
89 lines
2.1 KiB
SCSS
/**
|
||
* 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;
|
||
}
|
||
}
|