Merge pull request #251 from juanpablolvl99/develop

adding is-dark modifier to input

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>

docs/inputs.stories.js

@@ -25,6 +25,7 @@ stories.add('input.radio', () => `
       'is-success': 'is-success',
       'is-warning': 'is-warning',
       'is-error': 'is-error',
+      'is-dark': 'is-dark',
     }, '');
 
     return `<input type="text" id="name_field" class="nes-input ${selectedClass}" placeholder="NES.css">`;

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;
   }
 }

scss/form/inputs.scss

@@ -13,6 +13,12 @@
 
   @include border-style($base-color, map-get($default-colors, "hover"));
 
+  &.is-dark {
+    @include border-style(map-get($default-colors, "normal"), map-get($default-colors, "hover"));
+
+    color: $background-color;
+    background-color: $base-color;
+  }
   &.is-success {
     @include border-style(map-get($success-colors, "normal"), map-get($success-colors, "hover"));
   }