mirror of
https://github.com/picocss/pico.git
synced 2025-02-24 00:39:20 -05:00
41314ab4b0
This reverts commit 6a6d67dbab230a058b494f6a468ed5f4423f1c4c, reversing changes made to ba4bd765d8fb28466d816c098b03476754c13fc3.
82 lines
1.9 KiB
SCSS
82 lines
1.9 KiB
SCSS
/**
|
||
* Progress
|
||
*/
|
||
|
||
// Reboot based on :
|
||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||
// - sanitize.css v12.0.1 | 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: transparent;
|
||
}
|
||
&[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: progressIndeterminate 1s linear infinite;
|
||
|
||
&[value]::-webkit-progress-value {
|
||
background-color: transparent;
|
||
}
|
||
&::-moz-progress-bar {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes progressIndeterminate {
|
||
0% {
|
||
background-position: 200% 0;
|
||
}
|
||
100% {
|
||
background-position: -200% 0;
|
||
}
|
||
}
|