enhanced buttons

- added btn-xs class
- added btn-xs demo in pages/UI/buttons.html
- enhanced dropdown-hover for button dropdowns
- fixed dropdown examples in pages/UI/buttons.html

build/scss/_buttons.scss

@@ -92,3 +92,8 @@
   }
 }
 
+// Extra Button Size
+
+.btn-xs {
+  @include button-size($button-padding-y-xs, $button-padding-x-xs, $button-font-size-xs, $button-line-height-xs, $button-border-radius-xs);
+}

build/scss/_dropdown.scss

@@ -58,10 +58,11 @@
 
 // Dropdown Hover
 .dropdown-hover {
+  &:hover,
   &.nav-item.dropdown:hover,
   .dropdown-submenu:hover,
   &.dropdown-submenu:hover {
-    > ul.dropdown-menu {
+    > .dropdown-menu {
       display: block;
     }
   }

build/scss/_variables.scss

@@ -175,6 +175,13 @@ $font-size-xl: ($font-size-base * 2);
 $button-default-background-color: $gray-100 !default;
 $button-default-color: #444 !default;
 $button-default-border-color: #ddd !default;
+
+$button-padding-y-xs: .125rem !default;
+$button-padding-x-xs: .25rem !default;
+$button-line-height-xs: $line-height-sm !default;
+$button-font-size-xs: ($font-size-base * .75) !default;
+$button-border-radius-xs: .15rem !default;
+
   
 // RIBBON
 // --------------------------------------------------------

pages/UI/buttons.html

@@ -628,6 +628,7 @@
                     <th>Normal</th>
                     <th>Large <code>.btn-lg</code></th>
                     <th>Small <code>.btn-sm</code></th>
+                    <th>Extra Small <code>.btn-xs</code></th>
                     <th>Flat <code>.btn-flat</code></th>
                     <th>Disabled <code>.disabled</code></th>
                   </tr>
@@ -641,6 +642,9 @@
                     <td>
                       <button type="button" class="btn btn-block btn-default btn-sm">Default</button>
                     </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-default btn-xs">Default</button>
+                    </td>
                     <td>
                       <button type="button" class="btn btn-block btn-default btn-flat">Default</button>
                     </td>
@@ -658,6 +662,9 @@
                     <td>
                       <button type="button" class="btn btn-block btn-primary btn-sm">Primary</button>
                     </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-primary btn-xs">Primary</button>
+                    </td>
                     <td>
                       <button type="button" class="btn btn-block btn-primary btn-flat">Primary</button>
                     </td>
@@ -675,6 +682,9 @@
                     <td>
                       <button type="button" class="btn btn-block btn-secondary btn-sm">Secondary</button>
                     </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-secondary btn-xs">Secondary</button>
+                    </td>
                     <td>
                       <button type="button" class="btn btn-block btn-secondary btn-flat">Secondary</button>
                     </td>
@@ -692,6 +702,9 @@
                     <td>
                       <button type="button" class="btn btn-block btn-success btn-sm">Success</button>
                     </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-success btn-xs">Success</button>
+                    </td>
                     <td>
                       <button type="button" class="btn btn-block btn-success btn-flat">Success</button>
                     </td>
@@ -709,6 +722,9 @@
                     <td>
                       <button type="button" class="btn btn-block btn-info btn-sm">Info</button>
                     </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-info btn-xs">Info</button>
+                    </td>
                     <td>
                       <button type="button" class="btn btn-block btn-info btn-flat">Info</button>
                     </td>
@@ -726,6 +742,9 @@
                     <td>
                       <button type="button" class="btn btn-block btn-danger btn-sm">Danger</button>
                     </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-danger btn-xs">Danger</button>
+                    </td>
                     <td>
                       <button type="button" class="btn btn-block btn-danger btn-flat">Danger</button>
                     </td>
@@ -743,6 +762,9 @@
                     <td>
                       <button type="button" class="btn btn-block btn-warning btn-sm">Warning</button>
                     </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-warning btn-xs">Warning</button>
+                    </td>
                     <td>
                       <button type="button" class="btn btn-block btn-warning btn-flat">Warning</button>
                     </td>
@@ -775,6 +797,7 @@
                     <th>Normal</th>
                     <th>Large <code>.btn-lg</code></th>
                     <th>Small <code>.btn-sm</code></th>
+                    <th>Extra Small <code>.btn-xs</code></th>
                     <th>Flat <code>.btn-flat</code></th>
                     <th>Disabled <code>.disabled</code></th>
                   </tr>
@@ -788,6 +811,9 @@
                     <td>
                       <button type="button" class="btn btn-block btn-outline-primary btn-sm">Primary</button>
                     </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-primary btn-xs">Primary</button>
+                    </td>
                     <td>
                       <button type="button" class="btn btn-block btn-outline-primary btn-flat">Primary</button>
                     </td>
@@ -805,6 +831,9 @@
                     <td>
                       <button type="button" class="btn btn-block btn-outline-secondary btn-sm">Secondary</button>
                     </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-secondary btn-xs">Secondary</button>
+                    </td>
                     <td>
                       <button type="button" class="btn btn-block btn-outline-secondary btn-flat">Secondary</button>
                     </td>
@@ -822,6 +851,9 @@
                     <td>
                       <button type="button" class="btn btn-block btn-outline-success btn-sm">Success</button>
                     </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-success btn-xs">Success</button>
+                    </td>
                     <td>
                       <button type="button" class="btn btn-block btn-outline-success btn-flat">Success</button>
                     </td>
@@ -839,6 +871,9 @@
                     <td>
                       <button type="button" class="btn btn-block btn-outline-info btn-sm">Info</button>
                     </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-info btn-xs">Info</button>
+                    </td>
                     <td>
                       <button type="button" class="btn btn-block btn-outline-info btn-flat">Info</button>
                     </td>
@@ -856,6 +891,9 @@
                     <td>
                       <button type="button" class="btn btn-block btn-outline-danger btn-sm">Danger</button>
                     </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-danger btn-xs">Danger</button>
+                    </td>
                     <td>
                       <button type="button" class="btn btn-block btn-outline-danger btn-flat">Danger</button>
                     </td>
@@ -873,6 +911,9 @@
                     <td>
                       <button type="button" class="btn btn-block btn-outline-warning btn-sm">Warning</button>
                     </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-warning btn-xs">Warning</button>
+                    </td>
                     <td>
                       <button type="button" class="btn btn-block btn-outline-warning btn-flat">Warning</button>
                     </td>
@@ -895,7 +936,7 @@
               <div class="card-header">
                 <h3 class="card-title">
                   <i class="fas fa-edit"></i>
-                  Gradient Buttons (bg-*)
+                  Gradient Buttons (bg-gradient-*)
                 </h3>
               </div>
               <div class="card-body pad table-responsive">
@@ -905,6 +946,7 @@
                     <th>Normal</th>
                     <th>Large <code>.btn-lg</code></th>
                     <th>Small <code>.btn-sm</code></th>
+                    <th>Extra Small <code>.btn-xs</code></th>
                     <th>Flat <code>.btn-flat</code></th>
                     <th>Disabled <code>.disabled</code></th>
                   </tr>
@@ -918,6 +960,9 @@
                     <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-xs">Primary</button>
+                    </td>
                     <td>
                       <button type="button" class="btn btn-block bg-gradient-primary btn-flat">Primary</button>
                     </td>
@@ -935,6 +980,9 @@
                     <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-xs">Secondary</button>
+                    </td>
                     <td>
                       <button type="button" class="btn btn-block bg-gradient-secondary btn-flat">Secondary</button>
                     </td>
@@ -952,6 +1000,9 @@
                     <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-xs">Success</button>
+                    </td>
                     <td>
                       <button type="button" class="btn btn-block bg-gradient-success btn-flat">Success</button>
                     </td>
@@ -969,6 +1020,9 @@
                     <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-xs">Info</button>
+                    </td>
                     <td>
                       <button type="button" class="btn btn-block bg-gradient-info btn-flat">Info</button>
                     </td>
@@ -986,6 +1040,9 @@
                     <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-xs">Danger</button>
+                    </td>
                     <td>
                       <button type="button" class="btn btn-block bg-gradient-danger btn-flat">Danger</button>
                     </td>
@@ -1003,6 +1060,9 @@
                     <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-xs">Warning</button>
+                    </td>
                     <td>
                       <button type="button" class="btn btn-block bg-gradient-warning btn-flat">Warning</button>
                     </td>
@@ -1302,7 +1362,7 @@
                 <!-- /input-group -->
                 <strong>Flat</strong>
                 <div class="input-group mb-3">
-                  <input type="text" class="form-control">
+                  <input type="text" class="form-control rounded-0">
                   <span class="input-group-append">
                     <button type="button" class="btn btn-info btn-flat">Go!</button>
                   </span>
@@ -1403,13 +1463,13 @@
                       <span class="caret"></span>
                       <span class="sr-only">Toggle Dropdown</span>
                     </button>
-                    <ul class="dropdown-menu" role="menu">
-                      <li><a href="#">Action</a></li>
-                      <li><a href="#">Another action</a></li>
-                      <li><a href="#">Something else here</a></li>
-                      <li class="divider"></li>
-                      <li><a href="#">Separated link</a></li>
-                    </ul>
+                    <div class="dropdown-menu" role="menu">
+                      <a class="dropdown-item" href="#">Action</a>
+                      <a class="dropdown-item" href="#">Another action</a>
+                      <a class="dropdown-item" href="#">Something else here</a>
+                      <div class="dropdown-divider"></div>
+                      <a class="dropdown-item" href="#">Separated link</a>
+                    </div>
                   </div>
                   <div class="btn-group">
                     <button type="button" class="btn btn-info btn-flat">Action</button>
@@ -1577,8 +1637,8 @@
                             <span class="caret"></span>
                           </button>
                           <ul class="dropdown-menu">
-                            <li><a href="#">Dropdown link</a></li>
-                            <li><a href="#">Dropdown link</a></li>
+                            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+                            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                           </ul>
                         </div>
                       </div>
@@ -1618,8 +1678,8 @@
                             <span class="caret"></span>
                           </button>
                           <ul class="dropdown-menu">
-                            <li><a href="#">Dropdown link</a></li>
-                            <li><a href="#">Dropdown link</a></li>
+                            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+                            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                           </ul>
                         </div>
                       </div>
@@ -1660,8 +1720,8 @@
                             <span class="caret"></span>
                           </button>
                           <ul class="dropdown-menu">
-                            <li><a href="#">Dropdown link</a></li>
-                            <li><a href="#">Dropdown link</a></li>
+                            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+                            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                           </ul>
                         </div>
                       </div>
@@ -1703,8 +1763,8 @@
                             <span class="caret"></span>
                           </button>
                           <ul class="dropdown-menu">
-                            <li><a href="#">Dropdown link</a></li>
-                            <li><a href="#">Dropdown link</a></li>
+                            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+                            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                           </ul>
                         </div>
                       </div>
@@ -1746,8 +1806,8 @@
                             <span class="caret"></span>
                           </button>
                           <ul class="dropdown-menu">
-                            <li><a href="#">Dropdown link</a></li>
-                            <li><a href="#">Dropdown link</a></li>
+                            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+                            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                           </ul>
                         </div>
                       </div>