Merge branch 'dev' into dev-daterangepicker

scss/_variables.scss

@@ -18,20 +18,23 @@ $icon-fonts: () !default;
 // COLORS
 $theme-color-interval: 10% !default;
 
-$light-black: rgba(0, 0, 0, .4) !default;
-$light-white: rgba(255, 255, 255, .4) !default;
-$min-black: rgba(135, 150, 165, .032) !default;
-$min-white: rgba(255, 255, 255, .032) !default;
+$light: #f5f7fb !default;
+$dark: #354052 !default;
 
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
-$gray-600: #868e96 !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
+$light-black: rgba($dark, .4) !default;
+$light-white: rgba($light, .4) !default;
+$min-black: rgba($dark, .02) !default;
+$min-white: rgba($light, .02) !default;
+
+$gray-100: $light !default;
+$gray-200: mix($light, $dark, 98%) !default;
+$gray-300: mix($light, $dark, 94%) !default;
+$gray-400: mix($light, $dark, 88%) !default;
+$gray-500: mix($light, $dark, 79%) !default;
+$gray-600: mix($light, $dark, 63%) !default;
+$gray-700: mix($light, $dark, 45%) !default;
+$gray-800: mix($light, $dark, 22%) !default;
+$gray-900: $dark !default;
 
 $blue: #206bc4 !default;
 $azure: #45aaf2 !default;
@@ -49,23 +52,18 @@ $black: #000000 !default;
 $white: #ffffff !default;
 
 $primary: $blue !default;
-$secondary: $white !default;
+$secondary: $gray-800 !default;
 $success: $green !default;
 $info: $azure !default;
 $warning: $yellow !default;
 $danger: $red !default;
-$light: #f5f7fb !default;
-$dark: #354052 !default;
 
 $body-bg: $light !default;
 $body-color: $dark !default;
 
-$text-muted: #8a91a5 !default;
-
-$border-color: #dce3e9 !default;
-$border-color-alpha: rgba(138, 160, 180, .3) !default;
-
-$hover-bg: rgba(138, 160, 180, 0.1) !default;
+$text-muted: $gray-700 !default;
+$border-color: $gray-400 !default;
+$hover-bg: $gray-200 !default;
 
 $social-colors: (
   "facebook": #3b5998,
@@ -104,6 +102,7 @@ $colors: (
 ) !default;
 
 $avatar-sizes: (
+  "xs": 1.5rem,
   "sm": 2rem,
   "md": 3rem,
   "lg": 4.5rem,
@@ -202,6 +201,7 @@ $badge-font-weight: $font-weight-bold !default;
 $badge-empty-size: .5rem !default;
 
 //buttons
+$input-color: $body-color !default;
 $input-btn-line-height: (22/15) !default;
 $input-btn-font-size: $font-size-base !default;
 
@@ -218,11 +218,11 @@ $input-height-sm: null !default;
 $input-height-lg: null !default;
 
 $btn-padding-x: 1rem !default;
-$btn-font-weight: $font-weight-bold !default;
+$btn-font-weight: 500 !default;
 $btn-border-radius: 3px !default;
 
 //cards
-$card-border-color: $border-color-alpha !default;
+$card-border-color: $border-color !default;
 $card-border-radius: $border-radius !default;
 $card-cap-bg: $min-black !default;
 
@@ -240,7 +240,7 @@ $close-font-size: 1.5rem !default;
 //dropdown
 $dropdown-item-padding-x: 1rem !default;
 $dropdown-font-size: $h4-font-size !default;
-$dropdown-divider-bg: $border-color-alpha !default;
+$dropdown-divider-bg: $border-color !default;
 $dropdown-padding-y: .5rem !default;
 $dropdown-link-hover-bg: $hover-bg !default;
 $dropdown-link-hover-color: inherit !default;
@@ -255,7 +255,7 @@ $loader-size: 2.5rem !default;
 //navbar
 $navbar-bg: $white !default;
 $navbar-height: 3.5rem !default;
-$navbar-border-color: $border-color-alpha !default;
+$navbar-border-color: $border-color !default;
 
 //nav
 $nav-link-padding-y: 1rem !default;
@@ -277,7 +277,6 @@ $pagination-disabled-bg: transparent !default;
 $pagination-disabled-color: rgba($text-muted, .5) !default;
 
 
-
 //steps
 $steps-border-width: 2px !default;
 $steps-color-inactive: #f3f5f5 !default;

scss/layout/_layout.scss

@@ -2,7 +2,7 @@
 $sidenav-width: 16rem;
 $sidenav-width-folded: 4rem;
 $sidenav-bg: $white;
-$sidenav-border-color: $border-color-alpha;
+$sidenav-border-color: $border-color;
 $sidenav-dark-bg: $dark;
 $sidenav-padding: 1.25rem;
 $sidenav-breakpoint-show: 'sm';

scss/ui/_buttons.scss

@@ -1,5 +1,5 @@
 .btn-secondary {
-  @include button-variant($secondary, $border-color, $body-color);
+  @include button-variant($white, $border-color, $secondary);
 }
 
 .btn {

scss/ui/_lists.scss

@@ -12,7 +12,7 @@
 
 .list-bordered {
   .list-item {
-    border-top: 1px solid $border-color-alpha;
+    border-top: 1px solid $border-color;
     margin-top: -1px;
 
     &:first-child {

scss/ui/forms/_form-colorinput.scss

@@ -20,7 +20,7 @@ Color Input
   width: 1.5rem;
   height: 1.5rem;
   color: #fff;
-  border: 1px solid $border-color-alpha;
+  border: 1px solid $border-color;
   border-radius: 3px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
 

scss/ui/forms/_form-imagecheck.scss

@@ -18,7 +18,7 @@ Image check
   display: flex;
   margin: 0;
   user-select: none;
-  border: 1px solid $border-color-alpha;
+  border: 1px solid $border-color;
   border-radius: 3px;
 
   .imagecheck-input:focus ~ & {
@@ -27,7 +27,7 @@ Image check
   }
 
   .imagecheck-input:checked ~ & {
-    border-color: $border-color-alpha;
+    border-color: $border-color;
   }
 
   &::before {

scss/vendor/_selectize.scss

@@ -1,9 +1,20 @@
 .selectize-control {
   padding: 0;
   border: 0;
+
+  &.multi .selectize-input > div {
+    font-size: $h5-font-size;
+    margin: 0 8px 2px 0;
+    padding: 2px 8px;
+    border-radius: $border-radius;
+    background-color: $gray-200;
+    color: inherit;
+  }
 }
 
 .selectize-input {
+  display: flex !important;
+  height: 100%;
   border: 1px solid $border-color;
   padding: $input-padding-y $input-padding-x;
   font-size: $input-font-size;