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

Merge branch 'develop' into 205-icon-shadow-optimization

Browse Source
This commit is contained in:
Igor Guastalla
2018-12-19 22:59:34 -02:00
committed by GitHub
parent ff74f17e83 557775fb6b
commit 2c94ad0fbe
3 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/dialogs.stories.js
View File

@@ -8,8 +8,10 @@ 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 selectedClasses = [isRounded];
return `<dialog ${open}> return `<dialog class="nes-dialog ${selectedClasses.join(' ')}" ${open}>
<p class="title">Dialog</p> <p class="title">Dialog</p>
<p>Alert: this is a dialog.</p> <p>Alert: this is a dialog.</p>
</div>`; </div>`;

17
scss/elements/_index.scss
View File

@@ -1,11 +1,12 @@
@charset "utf-8"; @charset "utf-8";
@import "buttons.scss";
@import "containers.scss";
@import "radios.scss";
@import "checkboxes.scss";
@import "lists.scss";
@import "balloons.scss";
@import "tables.scss";
@import "progress.scss";
@import "avatar.scss"; @import "avatar.scss";
@import "balloons.scss";
@import "buttons.scss";
@import "checkboxes.scss";
@import "containers.scss";
@import "dialogs.scss";
@import "lists.scss";
@import "progress.scss";
@import "radios.scss";
@import "tables.scss";

8
scss/elements/dialogs.scss
View File

@@ -1,8 +1,5 @@
.nes-dialog { .nes-dialog {
padding: 1.5rem 2rem; padding: 1.5rem 2rem;
color: $base-color;
border: none;
box-shadow: 4px 0, -4px 0, 0 4px, 0 -4px;
> .backdrop, > .backdrop,
&::backdrop { &::backdrop {
@@ -12,4 +9,9 @@
> :last-child { > :last-child {
margin-bottom: 0; margin-bottom: 0;
} }
&.is-rounded {
border: none;
box-shadow: 4px 0 $base-color, -4px 0 $base-color, 0 4px $base-color, 0 -4px $base-color;
}
} }