Merge pull request #2141 from REJack/v3-dev

last fixes before releasing v3.0.0-beta.1

build/scss/_bootstrap-variables.scss

@@ -101,7 +101,7 @@ $yiq-text-light: $white !default;
 $enable-caret:              true !default;
 $enable-rounded:            true !default;
 $enable-shadows:            true !default;
-$enable-gradients:          true !default;
+$enable-gradients:          false !default;
 $enable-transitions:        true !default;
 $enable-hover-media-query:  false !default; // Deprecated, no longer affects any compiled CSS
 $enable-grid-classes:       true !default;

build/scss/_buttons.scss

@@ -89,3 +89,4 @@
     font-weight: 400;
   }
 }
+

build/scss/_forms.scss

@@ -235,20 +235,20 @@ textarea.form-control {
   @each $name, $color in $theme-colors {
     &.custom-switch-off-#{$name} { 
       & .custom-control-input ~ .custom-control-label::before {
-        background-color: #{$color};
+        background: #{$color};
         border-color: darken($color, 20%);
       }
       & .custom-control-input ~ .custom-control-label::after {
-        background-color: darken($color, 25%);
+        background: darken($color, 25%);
       }
     }
     &.custom-switch-on-#{$name} { 
       & .custom-control-input:checked ~ .custom-control-label::before {
-        background-color: #{$color};
+        background: #{$color};
         border-color: darken($color, 20%);
       }
       & .custom-control-input:checked ~ .custom-control-label::after {
-        background-color: lighten($color, 30%);
+        background: lighten($color, 30%);
       }
     }
   }
@@ -257,20 +257,20 @@ textarea.form-control {
   @each $name, $color in $colors {
     &.custom-switch-off-#{$name} { 
       & .custom-control-input ~ .custom-control-label::before {
-        background-color: #{$color};
+        background: #{$color};
         border-color: darken($color, 20%);
       }
       & .custom-control-input ~ .custom-control-label::after {
-        background-color: darken($color, 25%);
+        background: darken($color, 25%);
       }
     }
     &.custom-switch-on-#{$name} { 
       & .custom-control-input:checked ~ .custom-control-label::before {
-        background-color: #{$color};
+        background: #{$color};
         border-color: darken($color, 20%);
       }
       & .custom-control-input:checked ~ .custom-control-label::after {
-        background-color: lighten($color, 30%);
+        background: lighten($color, 30%);
       }
     }
   }  

build/scss/_info-box.scss

@@ -61,7 +61,7 @@
 
 @each $name, $color in $theme-colors {
   .info-box.bg-#{$name},
-  .info-box.bg-#{$name}-gradient {
+  .info-box.bg-gradient-#{$name} {
     color: color-yiq($color);
 
     .progress-bar {

build/scss/_layout.scss

@@ -155,28 +155,30 @@ body,
 
   &.sidebar-collapse {
     .brand-link {
-      $local-sidebar-transition: width $transition-speed $transition-fn;
-      @include transition($local-sidebar-transition);
+      transition: width $transition-speed $transition-fn;
       width: $sidebar-mini-width;
       height: 57px;
     }
 
     .main-sidebar:hover {
       .brand-link {
+        transition: width $transition-speed $transition-fn;
         width: $sidebar-width;
       }
     }
   }
 
+
   .sidebar {
     margin-top: 57px;
   }
 
   .brand-link {
-
+    transition: width $transition-speed $transition-fn;
     position: fixed;
+    overflow: hidden;
     top: 0;
-    z-index: $zindex-main-sidebar;
+    z-index: $zindex-main-sidebar + 1;
     width: $sidebar-width;
   }
 

build/scss/_main-sidebar.scss

@@ -130,8 +130,8 @@
   }
 
   &.nav-child-indent { 
-    .nav-treeview > .nav-item > .nav-link {
-      padding: 0.5rem 0.5rem 0.5rem 1.5rem;
+    .nav-treeview{
+      padding-left: 1rem;
     }
   }
 

build/scss/_miscellaneous.scss

@@ -72,17 +72,63 @@ a.text-muted:hover {
 
 // Gradient Background colors (theme colors)
 @each $name, $color in $theme-colors {
-  .bg-#{$name}-gradient {
-    @include gradient-bg($color);
+  .bg-gradient-#{$name} {
+    @include bg-gradient-variant('&', $color);
     color: color-yiq($color);
+
+    &.btn {
+      &.disabled,
+      &:disabled,
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active,
+      .show > &.dropdown-toggle {
+        background-image: none !important;
+      }
+
+      &:hover {
+        color: color-yiq(darken($color, 7.5%));
+        @include bg-gradient-variant('&', darken($color, 7.5%));
+        border-color: darken($color, 10%);
+      }
+
+      &:active,
+      &.active {
+        color: color-yiq(darken($color, 10%));
+        @include bg-gradient-variant('&', darken($color, 10%));
+        border-color: darken($color, 12.5%);
+      }
+    }
   }
 }
 
 // Gradient Background colors (colors)
 @each $name, $color in $colors {
-  .bg-#{$name}-gradient {
-    @include gradient-bg($color);
+  .bg-gradient-#{$name} {
+    @include bg-gradient-variant('&', $color);
     color: color-yiq($color);
+
+    &.btn {
+      &.disabled,
+      &:disabled,
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active,
+      .show > &.dropdown-toggle {
+        background-image: none !important;
+      }
+
+      &:hover {
+        color: color-yiq(darken($color, 7.5%));
+        @include bg-gradient-variant('&', darken($color, 7.5%));
+        border-color: darken($color, 10%);
+      }
+
+      &:active,
+      &.active {
+        color: color-yiq(darken($color, 10%));
+        @include bg-gradient-variant('&', darken($color, 10%));
+        border-color: darken($color, 12.5%);
+      }
+    }
   }
 }
 

index.html

@@ -1001,7 +1001,7 @@
           <section class="col-lg-5 connectedSortable">
 
             <!-- Map card -->
-            <div class="card bg-primary-gradient">
+            <div class="card bg-gradient-primary">
               <div class="card-header no-border">
                 <h3 class="card-title">
                   <i class="fas fa-map-marker-alt mr-1"></i>
@@ -1053,7 +1053,7 @@
             <!-- /.card -->
 
             <!-- solid sales graph -->
-            <div class="card bg-info-gradient">
+            <div class="card bg-gradient-info">
               <div class="card-header no-border">
                 <h3 class="card-title">
                   <i class="fas fa-th mr-1"></i>
@@ -1104,7 +1104,7 @@
             <!-- /.card -->
 
             <!-- Calendar -->
-            <div class="card bg-success-gradient">
+            <div class="card bg-gradient-success">
               <div class="card-header no-border">
 
                 <h3 class="card-title">

pages/UI/buttons.html

@@ -828,6 +828,136 @@
           <!-- /.col -->
         </div>
         <!-- ./row -->
+
+        <div class="row">
+          <div class="col-md-12">
+            <div class="card card-primary card-outline">
+              <div class="card-header">
+                <h3 class="card-title">
+                  <i class="fas fa-edit"></i>
+                  Gradient Buttons (bg-*)
+                </h3>
+              </div>
+              <div class="card-body pad table-responsive">
+                <p>Various types of buttons. Using the base class <code>.btn</code></p>
+                <table class="table table-bordered text-center">
+                  <tr>
+                    <th>Normal</th>
+                    <th>Large <code>.btn-lg</code></th>
+                    <th>Small <code>.btn-sm</code></th>
+                    <th>Flat <code>.btn-flat</code></th>
+                    <th>Disabled <code>.disabled</code></th>
+                  </tr>
+                  <tr>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-primary">Primary</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-primary btn-lg">Primary</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-primary btn-sm">Primary</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-primary btn-flat">Primary</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-primary disabled">Primary</button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-secondary">Secondary</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-secondary btn-lg">Secondary</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-secondary btn-sm">Secondary</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-secondary btn-flat">Secondary</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-secondary disabled">Secondary</button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-success">Success</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-success btn-lg">Success</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-success btn-sm">Success</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-success btn-flat">Success</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-success disabled">Success</button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-info">Info</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-info btn-lg">Info</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-info btn-sm">Info</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-info btn-flat">Info</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-info disabled">Info</button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-danger">Danger</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-danger btn-lg">Danger</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-danger btn-sm">Danger</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-danger btn-flat">Danger</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-danger disabled">Danger</button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-warning">Warning</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-warning btn-lg">Warning</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-warning btn-sm">Warning</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-warning btn-flat">Warning</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block bg-gradient-warning disabled">Warning</button>
+                    </td>
+                  </tr>
+                </table>
+              </div>
+              <!-- /.card -->
+            </div>
+          </div>
+          <!-- /.col -->
+        </div>
+          <!-- ./row -->
         <div class="row">
           <div class="col-md-6">
             <!-- Block buttons -->

pages/widgets.html

@@ -696,10 +696,10 @@
         <!-- /.row -->
 
         <!-- =========================================================== -->
-        <h5 class="mt-4 mb-2">Info Box With <code>bg-*-gradient</code></h5>
+        <h5 class="mt-4 mb-2">Info Box With <code>bg-gradient-*</code></h5>
         <div class="row">
           <div class="col-md-3 col-sm-6 col-12">
-            <div class="info-box bg-info-gradient">
+            <div class="info-box bg-gradient-info">
               <span class="info-box-icon"><i class="far fa-bookmark"></i></span>
 
               <div class="info-box-content">
@@ -719,7 +719,7 @@
           </div>
           <!-- /.col -->
           <div class="col-md-3 col-sm-6 col-12">
-            <div class="info-box bg-success-gradient">
+            <div class="info-box bg-gradient-success">
               <span class="info-box-icon"><i class="far fa-thumbs-up"></i></span>
 
               <div class="info-box-content">
@@ -739,7 +739,7 @@
           </div>
           <!-- /.col -->
           <div class="col-md-3 col-sm-6 col-12">
-            <div class="info-box bg-warning-gradient">
+            <div class="info-box bg-gradient-warning">
               <span class="info-box-icon"><i class="far fa-calendar-alt"></i></span>
 
               <div class="info-box-content">
@@ -759,7 +759,7 @@
           </div>
           <!-- /.col -->
           <div class="col-md-3 col-sm-6 col-12">
-            <div class="info-box bg-danger-gradient">
+            <div class="info-box bg-gradient-danger">
               <span class="info-box-icon"><i class="fas fa-comments"></i></span>
 
               <div class="info-box-content">
@@ -1225,7 +1225,7 @@
 
         <div class="row">
           <div class="col-md-3">
-            <div class="card bg-primary-gradient">
+            <div class="card bg-gradient-primary">
               <div class="card-header">
                 <h3 class="card-title">Primary Gradient</h3>
 
@@ -1245,7 +1245,7 @@
           </div>
           <!-- /.col -->
           <div class="col-md-3">
-            <div class="card bg-success-gradient">
+            <div class="card bg-gradient-success">
               <div class="card-header">
                 <h3 class="card-title">Success Gradient</h3>
 
@@ -1265,7 +1265,7 @@
           </div>
           <!-- /.col -->
           <div class="col-md-3">
-            <div class="card bg-warning-gradient">
+            <div class="card bg-gradient-warning">
               <div class="card-header">
                 <h3 class="card-title">Warning Gradient</h3>
 
@@ -1285,7 +1285,7 @@
           </div>
           <!-- /.col -->
           <div class="col-md-3">
-            <div class="card bg-danger-gradient">
+            <div class="card bg-gradient-danger">
               <div class="card-header">
                 <h3 class="card-title">Danger Gradient</h3>
               </div>