mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-30 17:30:23 +02:00
Code Issues Releases Wiki Activity

Add progress bar (#140)

Browse Source 
* feat(progress.scss): add progress bar element

* feat(progress.stories.js): add progress test in storybook

* feat: add is-filled class

* feat: add color variation
This commit is contained in:
ダーシノ
2018-12-10 15:48:17 +09:00
committed by Abdullah Samman
parent 9579a19617
commit cf43a3d3a3
4 changed files with 145 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
scss/elements/_index.scss
View File

@@ -6,3 +6,4 @@
@import "checkboxes.scss";
@import "balloons.scss";
@import "tables.scss";
@import "progress.scss";

108
scss/elements/progress.scss Normal file
View File

@@ -0,0 +1,108 @@
.nes-progress {
width: 100%;
height: 48px;
padding: 4px;
margin: 4px;
color: $base-color;
background-color: $background-color;
box-shadow: 4px 0, -4px 0, 0 4px, 0 -4px;
-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-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;
}
}
}