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

feat(dialog): adding dark modifier to dialogs #241

Browse Source
This commit is contained in:
shotaro kaneda
2019-01-17 13:01:28 -03:00
parent b58e8b01c9
commit e74d2c0e35
2 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/dialogs.stories.js
View File

@@ -9,7 +9,8 @@ stories.addDecorator(withKnobs);
stories.add('dialog', () => { stories.add('dialog', () => {
const open = boolean('open', true) ? 'open' : ''; const open = boolean('open', true) ? 'open' : '';
const isRounded = boolean('is-rounded', false) ? 'is-rounded' : ''; const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
const selectedClasses = [isRounded]; const isDark = boolean('is-dark', false) ? 'is-dark' : '';
const selectedClasses = [isRounded, isDark];
return `<dialog class="nes-dialog ${selectedClasses.join(' ')}" ${open}> return `<dialog class="nes-dialog ${selectedClasses.join(' ')}" ${open}>
<p class="title">Dialog</p> <p class="title">Dialog</p>

9
scss/elements/dialogs.scss
View File

@@ -12,5 +12,14 @@
&.is-rounded { &.is-rounded {
@include rounded-corners(); @include rounded-corners();
&.is-dark {
@include rounded-corners(true);
}
}
&.is-dark {
color: $background-color;
background-color: $base-color;
border-color: $background-color;
} }
} }