organize scss files

resource/styles/agile-admin/inverse/colors/_apply-colors-light.scss

@@ -0,0 +1,7 @@
+.top-left-part {
+  background-color: white;
+
+  .logo-mark, .logo-text {
+    fill: $dark-themecolor;
+  }
+}

resource/styles/agile-admin/inverse/colors/_apply-colors.scss

@@ -0,0 +1,121 @@
+body{
+  background:$sidebar;
+}
+
+/*Top Header Part*/
+
+.logo i{ color:$white;}
+.navbar-header{
+     background:$topbar;
+}
+.navbar-top-links > li > a{
+    color:$white;
+}
+/*
+.notify .heartbit{
+    border-color:$white;
+}
+.notify .point{
+  background-color:$danger;
+}*/
+
+/*Right panel*/
+.right-sidebar .rpanel-title{
+  background:$themecolor;
+}
+
+/*Bread Crumb*/
+.bg-title .breadcrumb .active{
+    color:$themecolor;
+}
+.bg-title{
+
+}
+
+/*Sidebar*/
+
+.sidebar {
+    background:$sidebar;
+    box-shadow:1px 0px 20px rgba(0, 0, 0, 0.08);
+  .label-custom{
+      background:$megna;
+  }
+}
+#side-menu li a{
+    color:$sidebar-text;
+}
+#side-menu li a{
+    color:$sidebar-text;
+  border-left:0px solid $sidebar;
+}
+
+#side-menu > li > a {
+    &:hover, &:focus{
+        background:rgba(0, 0, 0, 0.03);
+    }
+   &.active {
+            border-left:3px solid $themecolor;
+            color:$dark;
+
+            font-weight:500;
+        i{
+          color:$themecolor;
+        }
+        }
+
+}
+#side-menu ul > li > a {
+    &:hover{
+        color:$themecolor;
+
+    }
+    &.active{
+     color:$dark;
+     font-weight:500;
+    }
+}
+.sidebar #side-menu .user-pro{
+  .nav-second-level a:hover{
+          color:$themecolor;
+        }
+  }
+
+/*themecolor*/
+
+.bg-theme {
+  background-color: $danger !important;
+}
+.bg-theme-dark {
+  background-color: $megna !important;
+}
+
+/*Chat widget*/
+.chat-list .odd .chat-text{
+    background:$themecolor;
+}
+/*Button*/
+.btn-custom{
+  background:$themecolor;
+  border:1px solid $themecolor;
+  color:$white;
+  &:hover{
+    background:$themecolor;
+    opacity:0.8;
+    color:$white;
+    border:1px solid $themecolor;
+  }
+}
+/*Custom tab*/
+.customtab li.active a, .customtab li.active a:hover,  .customtab li.active a:focus{
+ border-bottom:2px solid $themecolor;
+ color:$themecolor;
+}
+.tabs-vertical li.active a, .tabs-vertical li.active a:hover,  .tabs-vertical li.active a:focus{
+  background:$themecolor;
+  border-right:2px solid $themecolor;
+}
+/*Nav-pills*/
+.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
+  background:$themecolor;
+  color:$white;
+}

resource/styles/agile-admin/inverse/colors/default.scss

@@ -1,6 +1,4 @@
-@import "../variables.scss";
-
-/*Just change your choise color here its theme Colors*/
+@import '../variables';
 
 $topbar:#4F5467;
 $sidebar:#fff;
@@ -15,132 +13,5 @@ $dark-themecolor:#4F5467;
 
 $primary: $topbar;
 
-body{
-  background:$sidebar;
-}
-
-/*Top Header Part*/
-
-.logo i{ color:$white;}
-.top-left-part{
-  .light-logo{
-    display:inline-block;
-  }
-  .dark-logo{
-    display:none;
-  }
-}
-.navbar-header{
-     background:$topbar;
-}
-.navbar-top-links > li > a{
-    color:$white;
-}
-/*
-.notify .heartbit{
-    border-color:$white;
-}
-.notify .point{
-  background-color:$danger;
-}*/
-
-/*Right panel*/
-.right-sidebar .rpanel-title{
-  background:$themecolor;
-}
-
-/*Bread Crumb*/
-.bg-title .breadcrumb .active{
-    color:$themecolor;
-}
-.bg-title{
-
-}
-
-/*Sidebar*/
-
-.sidebar {
-    background:$sidebar;
-    box-shadow:1px 0px 20px rgba(0, 0, 0, 0.08);
-  .label-custom{
-      background:$megna;
-  }
-}
-#side-menu li a{
-    color:$sidebar-text;
-}
-#side-menu li a{
-    color:$sidebar-text;
-  border-left:0px solid $sidebar;
-}
-
-#side-menu > li > a {
-    &:hover, &:focus{
-        background:rgba(0, 0, 0, 0.03);
-    }
-   &.active {
-            border-left:3px solid $themecolor;
-            color:$dark;
-
-            font-weight:500;
-        i{
-          color:$themecolor;
-        }
-        }
-
-}
-#side-menu ul > li > a {
-    &:hover{
-        color:$themecolor;
-
-    }
-    &.active{
-     color:$dark;
-     font-weight:500;
-    }
-}
-.sidebar #side-menu .user-pro{
-  .nav-second-level a:hover{
-          color:$themecolor;
-        }
-  }
-
-/*themecolor*/
-
-.bg-theme {
-  background-color: $danger !important;
-}
-.bg-theme-dark {
-  background-color: $megna !important;
-}
-
-/*Chat widget*/
-.chat-list .odd .chat-text{
-    background:$themecolor;
-}
-/*Button*/
-.btn-custom{
-  background:$themecolor;
-  border:1px solid $themecolor;
-  color:$white;
-  &:hover{
-    background:$themecolor;
-    opacity:0.8;
-    color:$white;
-    border:1px solid $themecolor;
-  }
-}
-/*Custom tab*/
-.customtab li.active a, .customtab li.active a:hover,  .customtab li.active a:focus{
- border-bottom:2px solid $themecolor;
- color:$themecolor;
-}
-.tabs-vertical li.active a, .tabs-vertical li.active a:hover,  .tabs-vertical li.active a:focus{
-  background:$themecolor;
-  border-right:2px solid $themecolor;
-}
-/*Nav-pills*/
-.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
-  background:$themecolor;
-  color:$white;
-}
+@import 'apply-colors';
+@import 'apply-colors-light';

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

@@ -1,4 +1,4 @@
-// @import "variables.scss";
+@import "variables.scss";
 @import "eliteadmin.scss";
 @import "widgets.scss";
 

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

@@ -4,8 +4,8 @@
 
 // $basefont1:'Rubik', sans-serif;
 // $basefont2:'Rubik', sans-serif;
-$basefont1: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
-$basefont2: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
+$basefont1: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !default;
+$basefont2: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !default;
 
 /* GROWI Color */
 $growi-green: #74bc46;
@@ -13,47 +13,47 @@ $growi-blue: #175fa5;
 
 
 /*bootstrap Color*/
-$danger: #ff0a54;
-$success: #00bb83;
-$warning: #ffa32b;
-$primary: $growi-blue;
-$info: #009fbb;
-$muted: #98a6ad;
-$dark: #3e4d6c;
-$inverse:#3e4d6c;
-$light:#e4e7ea;
-$extralight:#f7fafc ;
+$danger: #ff0a54 !default;
+$success: #00bb83 !default;
+$warning: #ffa32b !default;
+$primary: $growi-blue !default;
+$info: #009fbb !default;
+$muted: #98a6ad !default;
+$dark: #3e4d6c !default;
+$inverse:#3e4d6c !default;
+$light:#e4e7ea !default;
+$extralight:#f7fafc !default;
 
 
 /*Normal Color*/
-$white: #ffffff;
-$red:#ff0000;
-$purple:#7b00ce;
-$blue:#0d00c5;
-$yellow:#cccf0e;
-$border:#f0f0f0;
-$megna:#00b5c2;
+$white: #ffffff !default;
+$red:#ff0000 !default;
+$purple:#7b00ce !default;
+$blue:#0d00c5 !default;
+$yellow:#cccf0e !default;
+$border:#f0f0f0 !default;
+$megna:#00b5c2 !default;
 
 /*Theme Colors*/
-$topbar:#3c4451;
-$sidebar:#4F5467;
-$bodycolor:#fff;
-$headingtext: #2b2b2b;
-$bodytext: #686868;
-$linktext: $inverse;
-$linktext-hover: lighten($inverse, 20%);
-$sidebar-text:#54667a;
-$themecolor:#ff6849;
-$dark-themecolor:#4F5467;
+$topbar:#3c4451 !default;
+$sidebar:#4F5467 !default;
+$bodycolor:#fff !default;
+$headingtext: #2b2b2b !default;
+$bodytext: #686868 !default;
+$linktext: $inverse !default;
+$linktext-hover: lighten($inverse, 20%) !default;
+$sidebar-text:#54667a !default;
+$themecolor:#ff6849 !default;
+$dark-themecolor:#4F5467 !default;
 
 
-$rgt:right;
-$lft:left;
+$rgt:right !default;
+$lft:left !default;
 
-$dark-text:#848a96;
+$dark-text:#848a96 !default;
 
 /*Border radius*/
-$radius: 0;
+$radius: 0 !default;
 
 /*Preloader*/
 /*
@@ -73,4 +73,4 @@ $radius: 0;
 */
 
 /*Font weight*/
-$font-bold:700;
+$font-bold:700 !default;

resource/styles/scss/theme/default.scss

@@ -1,11 +1,8 @@
-// import to read variables
+// import colors
 @import '../../agile-admin/inverse/colors/default';
 
 // apply agile-admin theme
 @import '../../agile-admin/inverse/style';
 
-// import again to apply colors
-@import '../../agile-admin/inverse/colors/default';
-
 // override
 @import 'override-agileadmin';