111 lines
2.6 KiB
SCSS
111 lines
2.6 KiB
SCSS
.nes-progress {
|
|
@include compact-rounded-corners();
|
|
|
|
width: 100%;
|
|
height: 48px;
|
|
margin: 4px;
|
|
color: $base-color;
|
|
background-color: $background-color;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
|
|
@mixin progress-style($color) {
|
|
&::-webkit-progress-bar {
|
|
background-color: $background-color;
|
|
}
|
|
&::-webkit-progress-value {
|
|
background-color: $color;
|
|
}
|
|
&::-moz-progress-bar {
|
|
background-color: $color;
|
|
}
|
|
&::-ms-fill {
|
|
background-color: $color;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
@include progress-style($base-color);
|
|
|
|
&.is-rounded {
|
|
@include rounded-corners();
|
|
}
|
|
&.is-primary {
|
|
@include progress-style(map-get($primary-colors, "normal"));
|
|
}
|
|
|
|
&.is-success {
|
|
@include progress-style(map-get($success-colors, "normal"));
|
|
}
|
|
|
|
&.is-warning {
|
|
@include progress-style(map-get($warning-colors, "normal"));
|
|
}
|
|
|
|
&.is-error {
|
|
@include progress-style(map-get($error-colors, "normal"));
|
|
}
|
|
|
|
&.is-pattern {
|
|
&::-webkit-progress-value {
|
|
background-color: $base-color;
|
|
background-image: linear-gradient(
|
|
45deg,
|
|
$background-color 25%,
|
|
transparent 25%,
|
|
transparent 75%,
|
|
$background-color 75%,
|
|
$background-color
|
|
),
|
|
linear-gradient(
|
|
45deg,
|
|
$background-color 25%,
|
|
transparent 25%,
|
|
transparent 75%,
|
|
$background-color 75%,
|
|
$background-color
|
|
);
|
|
background-position: 0 0, 10px 10px;
|
|
background-size: 20px 20px;
|
|
}
|
|
|
|
&::-moz-progress-bar {
|
|
background-color: $base-color;
|
|
background-image: -moz-linear-gradient(
|
|
45deg,
|
|
$background-color 25%,
|
|
transparent 25%,
|
|
transparent 75%,
|
|
$background-color 75%,
|
|
$background-color
|
|
),
|
|
-moz-linear-gradient(45deg, $background-color 25%, transparent 25%, transparent 75%, $background-color
|
|
75%, $background-color);
|
|
background-position: 0 0, 10px 10px;
|
|
background-size: 20px 20px;
|
|
}
|
|
|
|
&::-ms-fill {
|
|
background-color: $base-color;
|
|
background-image: linear-gradient(
|
|
45deg,
|
|
$background-color 25%,
|
|
transparent 25%,
|
|
transparent 75%,
|
|
$background-color 75%,
|
|
$background-color
|
|
),
|
|
linear-gradient(
|
|
45deg,
|
|
$background-color 25%,
|
|
transparent 25%,
|
|
transparent 75%,
|
|
$background-color 75%,
|
|
$background-color
|
|
);
|
|
background-position: 0 0, 10px 10px;
|
|
background-size: 20px 20px;
|
|
border: none;
|
|
}
|
|
}
|
|
}
|