mirror of https://github.com/ColorlibHQ/AdminLTE
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.htmlpull/2220/head
REJack
parent
6874eb31d7
commit
6a85e9c5a1
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
// --------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue