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

docs/dialogs.stories.js

@@ -8,8 +8,10 @@ stories.addDecorator(withKnobs);
 
 stories.add('dialog', () => {
   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>Alert: this is a dialog.</p>
   </div>`;

scss/elements/_index.scss

@@ -1,11 +1,12 @@
 @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 "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";

scss/elements/dialogs.scss

@@ -1,8 +1,5 @@
 .nes-dialog {
   padding: 1.5rem 2rem;
-  color: $base-color;
-  border: none;
-  box-shadow: 4px 0, -4px 0, 0 4px, 0 -4px;
 
   > .backdrop,
   &::backdrop {
@@ -12,4 +9,9 @@
   > :last-child {
     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;
+  }
 }