clean code

src/client/styles/scss/_override-bootstrap-variables.scss

@@ -1,72 +0,0 @@
-//
-// Variables
-// --------------------------------------------------
-
-//== Colors
-//
-
-$theme-colors: (
-  'primary': $grw-primary,
-  'success': $grw-success,
-  'info': $grw-info,
-  'warning': $grw-warning,
-  'danger': $grw-danger
-);
-
-//== Typography
-//
-//## Font, line-height, and color for body text, headings, and more.
-$font-family-sans-serif:  Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
-$font-family-serif:       Georgia, "Times New Roman", Times, serif;
-$font-family-monospace:   Osaka-Mono, "MS Gothic", Monaco, Menlo, Consolas, "Courier New", monospace;
-$font-family-base:        $font-family-sans-serif;
-
-$font-size-root:          14px;
-$line-height-base:        1.42857;
-
-//== Components
-//
-//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
-$border-radius-base:      0;
-$border-radius-large:     0;
-$border-radius-small:     0;
-
-
-//== Buttons
-//
-//## For each of Bootstrap's buttons, define text, background and border color.
-
-$btn-border-radius:       0;
-$btn-border-radius-lg:    0;
-$btn-border-radius-sm:    0;
-
-
-// Forms
-
-$input-border-radius:     0;
-$input-border-radius-lg:  0;
-$input-border-radius-sm:  0;
-
-
-// Navs
-
-$nav-link-padding-y:              0.75rem;
-$nav-link-padding-x:              1rem;
-$nav-tabs-border-radius:          0;
-
-
-// Navbar
-$navbar-padding-y:                0;
-$navbar-brand-padding-y:          0;
-$navbar-nav-link-padding-x:       1rem;
-
-
-// Dropdowns
-$dropdown-border-radius:          0;
-
-
-// Modals
-$modal-content-border-width:      0;
-$modal-content-border-radius:     0;
-$modal-header-padding-y:          0.75rem;
-$modal-header-padding-x:          1rem;

src/client/styles/scss/_override-bootstrap.scss

@@ -1,6 +1,3 @@
-@import 'override-bootstrap-variables';
-@import 'layout_variable';
-
 * {
   outline: none !important;
 }
@@ -9,27 +6,6 @@
   font-size: $font-size-root;
 }
 
-//** alert with custom color
-.alert {
-  a:not(.btn) {
-    color: white;
-  }
-}
-@each $theme-color, $color in $theme-colors {
-  .alert.alert-#{$theme-color} {
-    color: white;
-    background: $color;
-    border: initial;
-    border-radius: initial;
-    a:not(.btn) {
-      &:hover,
-      &:focus {
-        color: lighten($color, 30%);
-      }
-    }
-  }
-}
-
 // Navs
 .nav-tabs {
   .nav-item {

src/client/styles/scss/_variables-bootstrap.scss

@@ -0,0 +1,67 @@
+//
+// Variables
+// --------------------------------------------------
+
+//== Colors
+$theme-colors: (
+  'primary': $grw-primary,
+  'success': $grw-success,
+  'info': $grw-info,
+  'warning': $grw-warning,
+  'danger': $grw-danger
+);
+
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
+$font-family-sans-serif: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
+$font-family-serif: Georgia, 'Times New Roman', Times, serif;
+$font-family-monospace: Osaka-Mono, 'MS Gothic', Monaco, Menlo, Consolas, 'Courier New', monospace;
+$font-family-base: $font-family-sans-serif;
+
+$font-size-root: 14px;
+$line-height-base: 1.42857;
+
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+$border-radius-base: 0;
+$border-radius-large: 0;
+$border-radius-small: 0;
+
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+$btn-border-radius: 0;
+$btn-border-radius-lg: 0;
+$btn-border-radius-sm: 0;
+
+// Forms
+
+$input-border-radius: 0;
+$input-border-radius-lg: 0;
+$input-border-radius-sm: 0;
+
+// Navs
+
+$nav-link-padding-y: 0.75rem;
+$nav-link-padding-x: 1rem;
+$nav-tabs-border-radius: 0;
+
+// Navbar
+$navbar-padding-y: 0;
+$navbar-brand-padding-y: 0;
+$navbar-nav-link-padding-x: 1rem;
+
+// Dropdowns
+$dropdown-border-radius: 0;
+
+// Modals
+$modal-content-border-width: 0;
+$modal-content-border-radius: 0;
+$modal-header-padding-y: 0.75rem;
+$modal-header-padding-x: 1rem;
+
+// Alerts
+$alert-border-radius: 0;

src/client/styles/scss/style-app.scss

@@ -1,14 +1,16 @@
 // import variables
 @import '../agile-admin/inverse/variables';
 @import 'variables';
-@import 'mixins';
+@import 'variables-bootstrap';
 
-@import 'override-bootstrap-variables';
-@import 'override-bootstrap';
+@import 'mixins';
 
 // vendor
 @import 'vendor';
 
+// override bootstrap
+@import 'override-bootstrap';
+
 // override react-bootstrap-typeahead styles
 @import 'override-rbt';
 

src/client/styles/scss/theme/_apply-colors.scss

@@ -15,6 +15,20 @@
     @include button-outline-variant($value);
   }
 }
+@each $theme-color, $color in $theme-colors {
+  .alert.alert-#{$theme-color} {
+    color: white;
+    background: $color;
+    a:not(.btn) {
+      color: white;
+
+      &:hover,
+      &:focus {
+        color: lighten($color, 30%);
+      }
+    }
+  }
+}
 // @each $color, $value in $theme-colors {
 //   .link-#{$color} {
 //     color: $value;
@@ -27,11 +41,6 @@
 //   }
 // }
 // @each $color, $value in $theme-colors {
-//   .alert-#{$color} {
-//     @include alert-variant(color-level($value, $alert-bg-level), color-level($value, $alert-border-level), color-level($value, $alert-color-level));
-//   }
-// }
-// @each $color, $value in $theme-colors {
 //   @include table-row-variant($color, color-level($value, $table-bg-level), color-level($value, $table-border-level));
 // }
 // @each $color, $value in $theme-colors {