mirror of
https://github.com/picocss/pico.git
synced 2025-02-24 00:39:20 -05:00
cb5b746bbb
This effectively make the SCSS code processable only by dart-sass because neither libsass (and node-sass in consequence) nor ruby-sass supports new syntax. See https://sass-lang.com/documentation/breaking-changes/slash-div for more information. This fixes #27
79 lines
1.9 KiB
SCSS
79 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;
|
||
appearance: none;
|
||
|
||
// Styles
|
||
display: inline-block;
|
||
width: 100%;
|
||
height: .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;
|
||
}
|
||
}
|