未验证 提交 6a85e9c5 编写于 作者: R REJack

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
上级 6874eb31
......@@ -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>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册