mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-01-17 21:58:27 +01:00
Code Issues Releases Wiki Activity

full dialog build + script fix

Browse Source
This commit is contained in:
soph-iest 2018-12-11 11:08:46 -05:00
parent ac13679413
commit 2ff76ad8c6
4 changed files with 71 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/nes.min.css vendored
View File

File diff suppressed because one or more lines are too long

16
docs/dialogs.stories.js Normal file
View File

@ -0,0 +1,16 @@
import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
import { // eslint-disable-line import/no-extraneous-dependencies
withKnobs, boolean,
} from '@storybook/addon-knobs';
const stories = storiesOf('Dialogs', module);
stories.addDecorator(withKnobs);
stories.add('dialog', () => {
const open = boolean('open', true) ? 'open' : '';
return `<dialog ${open}>
<p class="title">Dialog</p>
<p>Alert: this is a dialog.</p>
</div>`;
});

3
package.json
View File

@ -13,7 +13,8 @@
"build:cleancss": "cleancss -o css/nes.min.css css/nes.css",
"deploy": "npm run build",
"storybook": "start-storybook -p 6006",
"build:storybook": "build-storybook"
"build:storybook": "build-storybook",
"build-storybook": "npm run storybook"
},
"repository": {
"type": "git",

52
scss/elements/dialogs.scss Normal file
View File

@ -0,0 +1,52 @@
dialog {
position: relative;
padding: 1.5rem 2rem;
> :last-child {
margin-bottom: 0;
}
&::before,
&::after {
position: absolute;
z-index: -1;
content: "";
}
&::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
&::after {
top: 2px;
right: 2px;
bottom: 2px;
left: 2px;
border-color: $base-color;
border-style: solid;
border-width: 4px;
border-radius: 4px;
}
&.is-center.is-dark {
color: $background-color;
background-color: $base-color;
// &::before {
// background-color: $base-color;
// }
// &::after {
// border-color: #fff;
// }
// &.with-title {
// > .title {
// color: $background-color;
// background-color: $base-color;
// }
// }
}
}