organize scss files

resource/styles/agile-admin/inverse/pages.scss

@@ -758,7 +758,7 @@
         z-index: -1;
         width: 100%;
         height: 100%;
-        background-color: $gray-light;
+        background-color: #f5f5f5;
         content: '';
         -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
         transition: transform 0.3s, background-color 0.3s;

resource/styles/agile-admin/inverse/variables.scss

@@ -23,10 +23,7 @@ $dark: #3e4d6c;
 $inverse:#3e4d6c;
 $light:#e4e7ea;
 $extralight:#f7fafc ;
-$gray: #eee;
-$gray-light: #f0f0f0;
-$gray-lighter: #f5f5f5;
-$gray-extralight: #fafafa;
+
 
 /*Normal Color*/
 $white: #ffffff;
@@ -34,7 +31,7 @@ $red:#ff0000;
 $purple:#7b00ce;
 $blue:#0d00c5;
 $yellow:#cccf0e;
-$border:$gray;
+$border:#f0f0f0;
 $megna:#00b5c2;
 
 /*Theme Colors*/

resource/styles/scss/_login.scss

@@ -1,5 +1,5 @@
 .login-page {
-  $dark-gray: darken(white, 30%);
+  $gray-dark-for-login: darken(white, 30%);
 
   // background color
   background:
@@ -100,7 +100,7 @@
   } // #wrapper
 
   .login-header {
-    background-color: rgba($white, 0.5);
+    background-color: rgba(white, 0.5);
     .logo {
       width: 70px;
       .group1, .group2 {
@@ -115,7 +115,7 @@
     }
   }
   .login-dialog {
-    background-color: rgba($white, 0.5);
+    background-color: rgba(white, 0.5);
   }
 
   .input-group {
@@ -125,7 +125,7 @@
       text-align: center;
       border: none;
       border-radius: 0;
-      color: $dark-gray;
+      color: $gray-dark-for-login;
       background-color: rgba(black, 0.4);
     }
     .form-control {
@@ -133,7 +133,7 @@
       color: white;
       background-color: rgba(lighten(black, 10%), 0.4);
       &::placeholder {
-        color: $dark-gray;
+        color: $gray-dark-for-login;
       }
     }
   }
@@ -154,7 +154,7 @@
   }
   .btn-login.fcbtn {
     .btn-label {
-      background-color: rgba($danger, 0.4);
+      background-color: rgba($brand-danger, 0.4);
     }
     &:after {
       background-color: #7e4153;
@@ -162,7 +162,7 @@
   }
   .btn-register.fcbtn {
     .btn-label {
-      background-color: rgba($success, 0.4);
+      background-color: rgba($brand-success, 0.4);
     }
     &:after {
       background-color: #3f7263;

resource/styles/scss/_override-bootstrap-variables.scss

@@ -0,0 +1,22 @@
+//
+// Variables
+// --------------------------------------------------
+
+
+//== Colors
+//
+//## Gray and brand colors for use across Bootstrap.
+
+$gray-base:              #000 !default;
+$gray-darker:            lighten($gray-base, 13.5%) !default; // #222
+$gray-dark:              lighten($gray-base, 20%) !default;   // #333
+$gray:                   #f0f0f0;
+$gray-light:             #f5f5f5;
+$gray-lighter:           #fafafa;
+$gray-extralight:        #fafafa; // Growi original
+
+$brand-primary:         $primary;
+$brand-success:         $success;
+$brand-info:            $info;
+$brand-warning:         $warning;
+$brand-danger:          $danger;

resource/styles/scss/_variables.scss

@@ -1,3 +1,4 @@
+// override bootstrap
 $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;

resource/styles/scss/_wiki.scss

@@ -144,7 +144,7 @@ div.body {
   }
 
   .highlighted {
-    @extend .bg-warning;
+    background-color: $brand-warning;
   }
 
 }

resource/styles/scss/style.scss

@@ -1,4 +1,3 @@
-
 // vendor
 @import 'vendor';
 
@@ -6,6 +5,8 @@
 @import '../agile-admin/inverse/variables';
 @import 'variables';
 
+@import 'override-bootstrap-variables';
+
 // override react-bootstrap-typeahead styles
 @import 'override-rbt';