90 lines
2.1 KiB
SCSS
90 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;
|
|||
|
|
}
|
|||
|
|
}
|