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

nostalgic-css · Jan 17, 2019 · e74d2c0 · e74d2c0
1 parent b58e8b0
commit e74d2c0
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/docs/dialogs.stories.js b/docs/dialogs.stories.js
@@ -9,7 +9,8 @@ stories.addDecorator(withKnobs);
 stories.add('dialog', () => {
   const open = boolean('open', true) ? 'open' : '';
   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}>
       <p class="title">Dialog</p>

diff --git a/scss/elements/dialogs.scss b/scss/elements/dialogs.scss
@@ -12,5 +12,14 @@
 
   &.is-rounded {
     @include rounded-corners();
+
+    &.is-dark {
+      @include rounded-corners(true);
+    }
+  }
+  &.is-dark {
+    color: $background-color;
+    background-color: $base-color;
+    border-color: $background-color;
   }
 }