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

Merge branch 'develop' into add-kirby-icon

Browse Source
This commit is contained in:
Abdullah Samman
2018-12-10 09:40:38 +02:00
committed by GitHub
parent 55d563d362 cf43a3d3a3
commit 80ad55f329
4 changed files with 145 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
docs/progress.stories.js Normal file
View File

@@ -0,0 +1,26 @@
import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
import { // eslint-disable-line import/no-extraneous-dependencies
withKnobs, number, radios,
} from '@storybook/addon-knobs';
const stories = storiesOf('Progress', module);
stories.addDecorator(withKnobs);
// prettier-ignore
stories.add('progress', () => {
const percentage = number('percentage', 30, {
range: true,
min: 0,
max: 100,
step: 1,
});
const extraClass = radios('class', {
default: '',
'is-primary': 'is-primary',
'is-success': 'is-success',
'is-warning': 'is-warning',
'is-error': 'is-error',
'is-pattern': 'is-pattern',
}, '');
return `<progress class="nes-progress ${extraClass}" value="${percentage}" max="100" style="width: 98%;"></progress>`;
});

10
index.html
View File

@@ -178,6 +178,16 @@
</div>
</section>
<section class="container with-title">
<h2 class="title">Progress</h2>
<progress class="nes-progress" value="90" max="100"></progress>
<progress class="nes-progress is-primary" value="80" max="100"></progress>
<progress class="nes-progress is-success" value="50" max="100"></progress>
<progress class="nes-progress is-warning" value="30" max="100"></progress>
<progress class="nes-progress is-error" value="10" max="100"></progress>
<progress class="nes-progress is-pattern" value="50" max="100"></progress>
</section>
<section class="container with-title">
<h2 class="title">Icons</h2>
<section class="container with-title">

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;
}
}
}