Add Sidebar Variables

Author: mosaic-pro

src/sass/_variables.scss

@@ -38,8 +38,6 @@ $state-info-bg:                 lighten($brand-info, 54%) !default;
 $state-warning-bg:              lighten($brand-warning, 43%) !default;
 $state-danger-bg:               lighten($brand-danger, 40%) !default;
 
-$sidebar-width:                 250px !default;
-
 $progress-bar-bg:               $brand-primary !default;
 
 $list-group-border-color:       $card-border-color !default;
@@ -58,8 +56,39 @@ $dropdown-border-color:         $border-color !default;
 
 $pagination-disabled-bg:        #efefef !default;
 
+// SIDEBAR
+$sidebar-width:                 250px !default;
+$sidebar-font-size:             15px !default;
+$sidebar-padding:               1.25rem !default;
+
 $sidebar-light-link-color:      $brand-primary !default;
+
 $sidebar-dark-link-color:       #fff !default;
+$sidebar-dark-link-active-color: $sidebar-dark-link-color !default;
+$sidebar-dark-link-active-bg:   rgba(255,255,255, .12) !default;
+
+$sidebar-brand-size:            1.3rem !default;
+$sidebar-brand-weight:          500 !default;
+
+$sidebar-heading-size:          .9rem !default; 
+$sidebar-heading-padding:       $sidebar-padding !default;
+$sidebar-heading-weight:        500 !default;
+$sidebar-heading-line-height:   normal !default;
+$sidebar-link-height:           42px !default;
+
+$sidebar-link-icon-size:        24px !default;
+$sidebar-link-icon-width:       1.5rem !default;
+$sidebar-link-icon-margin-r:    1rem !default;
+
+$sidebar-link-label-margin-t:   13px !default;
+
+$sidebar-link-caret-size:       16px !default;
+$sidebar-link-caret:            '\e5db' !default;
+$sidebar-link-caret-open:       '\e5d8' !default;
+$sidebar-link-caret-spacing:    45px !default;
+$sidebar-link-caret-margin-r:   1.25rem !default;
+
+// END SIDEBAR
 
 $state-success-text:            darken($brand-success, 13%) !default;
 $state-success-bg:              lighten($brand-success, 48%) !default;

src/sass/sidebar/_sidebar-dark.scss

@@ -32,17 +32,17 @@
 
 		&.active, 
 		> .active {
-			background: rgba(255,255,255, .12);
+			background: $sidebar-dark-link-active-bg;
 			a, 
 			a i { 
-				color: $sidebar-dark-link-color; 
+				color: $sidebar-dark-link-active-color; 
 			}
 		}
 		&.open .active {
-			background: rgba(255,255,255, .12);
+			background: $sidebar-dark-link-active-bg;
 			a, 
 			a i { 
-				color: $sidebar-dark-link-color; 
+				color: $sidebar-dark-link-active-color;
 			}
 		}
 		a {

src/sass/sidebar/components/_brand.scss

@@ -4,9 +4,9 @@
   width: 100%;
   height: $navbar-height;
   line-height: $navbar-height;
-  padding: 0 1.25rem;
-  font-weight: 500;
-  font-size: 1.3rem;
+  padding: 0 $sidebar-padding;
+  font-weight: $sidebar-brand-weight;
+  font-size: $sidebar-brand-size;
   &:hover { 
     cursor: pointer;
     text-decoration: none;

src/sass/sidebar/components/_core.scss

@@ -7,7 +7,7 @@
   bottom: 0;
   overflow: auto;
   width: $sidebar-width;
-  font-size: 15px;
+  font-size: $sidebar-font-size;
   @include media-breakpoint-up(md) {
     &.top-md-navbar { top: 56px; }
     .nav { top: 70px; }

src/sass/sidebar/components/_forms.scss

@@ -1,7 +1,7 @@
 // SIDEBAR FORMS
 .sidebar-filter {
   .form-group  {
-    padding: 0 1.25rem; 
+    padding: 0 $sidebar-padding;
   }
   .c-select {
     width: 100%;

src/sass/sidebar/components/_heading.scss

@@ -1,8 +1,8 @@
 // SIDEBAR HEADER
 .sidebar-header { 
   text-transform: uppercase;
-  padding: 1.25rem;
-  line-height: normal;
-  font-weight: 500;
-  font-size: .9rem; 
+  padding: $sidebar-heading-padding;
+  line-height: $sidebar-heading-line-height;
+  font-weight: $sidebar-heading-weight;
+  font-size: $sidebar-heading-size;
 }

src/sass/sidebar/components/_menu.scss

@@ -1,15 +1,22 @@
 // SIDEBAR MENU 
 .sidebar .nav {
   .nav-item a {
-    padding: 0 1.25rem;
-    line-height: 42px;
+    padding: 0 $sidebar-padding;
+    line-height: $sidebar-link-height;
     display: block;
     i {
-      width: 2.5rem;
+      font-size: $sidebar-link-icon-size;
+      width: $sidebar-link-icon-width;
+      margin-right: $sidebar-link-icon-margin-r;
+      text-align: center;
+      &.material-icons {
+        position: relative;
+        top: -1px;
+      }
     }
     .label {
       float:right; 
-      margin-top: 13px;
+      margin-top: $sidebar-link-label-margin-t;
     }
     &:hover { text-decoration: none }
   }
@@ -30,17 +37,17 @@
 // SIDEBAR MENU ITEM CARET
 .sidebar .nav-item {
   &.open a:not(:only-child):before {
-    content: '\e5d8';
+    content: $sidebar-link-caret-open;
   }
   a:not(:only-child) {
-    padding-right: 45px !important; 
+    padding-right: $sidebar-link-caret-spacing !important; 
   }
   a:not(:only-child):before {
     font-family: 'Material Icons';
-    font-size: 16px;
-    content: '\e5db';
+    font-size: $sidebar-link-caret-size;
+    content: $sidebar-link-caret;
     position: absolute;
-    right: 1.25rem;
+    right: $sidebar-link-caret-margin-r;
     margin-top: 2px;
   }
 }

src/sass/sidebar/components/_type.scss

@@ -1,4 +1,4 @@
 // SIDEBAR DIRECT CONTENT
 .sidebar > p {
-  padding: 0 1.25rem;
+  padding: 0 $sidebar-padding;
 }