Merge branch 'develop' into change-is-center-container-class

docs/dialogs.stories.js

@@ -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>`;
+});

scss/base/variables.scss

@@ -5,8 +5,8 @@ $font-size: 16px !default;
 $base-color: $color-black;
 $background-color: $color-white;
 
-$cursor-url: url(../assets/cursor.png);
+$cursor-url: url(https://unpkg.com/nes.css/assets/cursor.png);
-$cursor-click-url: url(../assets/cursor-click.png);
+$cursor-click-url: url(https://unpkg.com/nes.css/assets/cursor-click.png);
 
 $default-colors: (
   normal: $background-color,

scss/elements/dialogs.scss

@@ -0,0 +1,15 @@
+.nes-dialog {
+  padding: 1.5rem 2rem;
+  color: $base-color;
+  border: none;
+  box-shadow: 4px 0, -4px 0, 0 4px, 0 -4px;
+
+  > .backdrop,
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}