Skip to content

A
AdminLTE

知鸟1号 / AdminLTE
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
A
AdminLTE

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 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
显示空白变更内容
内联 并排
Showing with 93 addition and 20 deletion
build/scss/_buttons.scss
浏览文件 @ 6a85e9c5
...@@ -92,3 +92,8 @@ ...@@ -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
浏览文件 @ 6a85e9c5
...@@ -58,10 +58,11 @@ ...@@ -58,10 +58,11 @@
// Dropdown Hover // Dropdown Hover
.dropdown-hover { .dropdown-hover {
&:hover,
&.nav-item.dropdown:hover, &.nav-item.dropdown:hover,
.dropdown-submenu:hover, .dropdown-submenu:hover,
&.dropdown-submenu:hover { &.dropdown-submenu:hover {
> ul.dropdown-menu { > .dropdown-menu {
display: block; display: block;
} }
} }
......
build/scss/_variables.scss
浏览文件 @ 6a85e9c5
...@@ -176,6 +176,13 @@ $button-default-background-color: $gray-100 !default; ...@@ -176,6 +176,13 @@ $button-default-background-color: $gray-100 !default;
$button-default-color: #444 !default; $button-default-color: #444 !default;
$button-default-border-color: #ddd !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 // RIBBON
// -------------------------------------------------------- // --------------------------------------------------------
$ribbon-border-size: 3px !default; $ribbon-border-size: 3px !default;
......
pages/UI/buttons.html
浏览文件 @ 6a85e9c5
...@@ -628,6 +628,7 @@ ...@@ -628,6 +628,7 @@
<th>Normal</th> <th>Normal</th>
<th>Large <code>.btn-lg</code></th> <th>Large <code>.btn-lg</code></th>
<th>Small <code>.btn-sm</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>Flat <code>.btn-flat</code></th>
<th>Disabled <code>.disabled</code></th> <th>Disabled <code>.disabled</code></th>
</tr> </tr>
...@@ -641,6 +642,9 @@ ...@@ -641,6 +642,9 @@
<td> <td>
<button type="button" class="btn btn-block btn-default btn-sm">Default</button> <button type="button" class="btn btn-block btn-default btn-sm">Default</button>
</td> </td>
<td>
<button type="button" class="btn btn-block btn-default btn-xs">Default</button>
</td>
<td> <td>
<button type="button" class="btn btn-block btn-default btn-flat">Default</button> <button type="button" class="btn btn-block btn-default btn-flat">Default</button>
</td> </td>
...@@ -658,6 +662,9 @@ ...@@ -658,6 +662,9 @@
<td> <td>
<button type="button" class="btn btn-block btn-primary btn-sm">Primary</button> <button type="button" class="btn btn-block btn-primary btn-sm">Primary</button>
</td> </td>
<td>
<button type="button" class="btn btn-block btn-primary btn-xs">Primary</button>
</td>
<td> <td>
<button type="button" class="btn btn-block btn-primary btn-flat">Primary</button> <button type="button" class="btn btn-block btn-primary btn-flat">Primary</button>
</td> </td>
...@@ -675,6 +682,9 @@ ...@@ -675,6 +682,9 @@
<td> <td>
<button type="button" class="btn btn-block btn-secondary btn-sm">Secondary</button> <button type="button" class="btn btn-block btn-secondary btn-sm">Secondary</button>
</td> </td>
<td>
<button type="button" class="btn btn-block btn-secondary btn-xs">Secondary</button>
</td>
<td> <td>
<button type="button" class="btn btn-block btn-secondary btn-flat">Secondary</button> <button type="button" class="btn btn-block btn-secondary btn-flat">Secondary</button>
</td> </td>
...@@ -692,6 +702,9 @@ ...@@ -692,6 +702,9 @@
<td> <td>
<button type="button" class="btn btn-block btn-success btn-sm">Success</button> <button type="button" class="btn btn-block btn-success btn-sm">Success</button>
</td> </td>
<td>
<button type="button" class="btn btn-block btn-success btn-xs">Success</button>
</td>
<td> <td>
<button type="button" class="btn btn-block btn-success btn-flat">Success</button> <button type="button" class="btn btn-block btn-success btn-flat">Success</button>
</td> </td>
...@@ -709,6 +722,9 @@ ...@@ -709,6 +722,9 @@
<td> <td>
<button type="button" class="btn btn-block btn-info btn-sm">Info</button> <button type="button" class="btn btn-block btn-info btn-sm">Info</button>
</td> </td>
<td>
<button type="button" class="btn btn-block btn-info btn-xs">Info</button>
</td>
<td> <td>
<button type="button" class="btn btn-block btn-info btn-flat">Info</button> <button type="button" class="btn btn-block btn-info btn-flat">Info</button>
</td> </td>
...@@ -726,6 +742,9 @@ ...@@ -726,6 +742,9 @@
<td> <td>
<button type="button" class="btn btn-block btn-danger btn-sm">Danger</button> <button type="button" class="btn btn-block btn-danger btn-sm">Danger</button>
</td> </td>
<td>
<button type="button" class="btn btn-block btn-danger btn-xs">Danger</button>
</td>
<td> <td>
<button type="button" class="btn btn-block btn-danger btn-flat">Danger</button> <button type="button" class="btn btn-block btn-danger btn-flat">Danger</button>
</td> </td>
...@@ -743,6 +762,9 @@ ...@@ -743,6 +762,9 @@
<td> <td>
<button type="button" class="btn btn-block btn-warning btn-sm">Warning</button> <button type="button" class="btn btn-block btn-warning btn-sm">Warning</button>
</td> </td>
<td>
<button type="button" class="btn btn-block btn-warning btn-xs">Warning</button>
</td>
<td> <td>
<button type="button" class="btn btn-block btn-warning btn-flat">Warning</button> <button type="button" class="btn btn-block btn-warning btn-flat">Warning</button>
</td> </td>
...@@ -775,6 +797,7 @@ ...@@ -775,6 +797,7 @@
<th>Normal</th> <th>Normal</th>
<th>Large <code>.btn-lg</code></th> <th>Large <code>.btn-lg</code></th>
<th>Small <code>.btn-sm</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>Flat <code>.btn-flat</code></th>
<th>Disabled <code>.disabled</code></th> <th>Disabled <code>.disabled</code></th>
</tr> </tr>
...@@ -788,6 +811,9 @@ ...@@ -788,6 +811,9 @@
<td> <td>
<button type="button" class="btn btn-block btn-outline-primary btn-sm">Primary</button> <button type="button" class="btn btn-block btn-outline-primary btn-sm">Primary</button>
</td> </td>
<td>
<button type="button" class="btn btn-block btn-outline-primary btn-xs">Primary</button>
</td>
<td> <td>
<button type="button" class="btn btn-block btn-outline-primary btn-flat">Primary</button> <button type="button" class="btn btn-block btn-outline-primary btn-flat">Primary</button>
</td> </td>
...@@ -805,6 +831,9 @@ ...@@ -805,6 +831,9 @@
<td> <td>
<button type="button" class="btn btn-block btn-outline-secondary btn-sm">Secondary</button> <button type="button" class="btn btn-block btn-outline-secondary btn-sm">Secondary</button>
</td> </td>
<td>
<button type="button" class="btn btn-block btn-outline-secondary btn-xs">Secondary</button>
</td>
<td> <td>
<button type="button" class="btn btn-block btn-outline-secondary btn-flat">Secondary</button> <button type="button" class="btn btn-block btn-outline-secondary btn-flat">Secondary</button>
</td> </td>
...@@ -822,6 +851,9 @@ ...@@ -822,6 +851,9 @@
<td> <td>
<button type="button" class="btn btn-block btn-outline-success btn-sm">Success</button> <button type="button" class="btn btn-block btn-outline-success btn-sm">Success</button>
</td> </td>
<td>
<button type="button" class="btn btn-block btn-outline-success btn-xs">Success</button>
</td>
<td> <td>
<button type="button" class="btn btn-block btn-outline-success btn-flat">Success</button> <button type="button" class="btn btn-block btn-outline-success btn-flat">Success</button>
</td> </td>
...@@ -839,6 +871,9 @@ ...@@ -839,6 +871,9 @@
<td> <td>
<button type="button" class="btn btn-block btn-outline-info btn-sm">Info</button> <button type="button" class="btn btn-block btn-outline-info btn-sm">Info</button>
</td> </td>
<td>
<button type="button" class="btn btn-block btn-outline-info btn-xs">Info</button>
</td>
<td> <td>
<button type="button" class="btn btn-block btn-outline-info btn-flat">Info</button> <button type="button" class="btn btn-block btn-outline-info btn-flat">Info</button>
</td> </td>
...@@ -856,6 +891,9 @@ ...@@ -856,6 +891,9 @@
<td> <td>
<button type="button" class="btn btn-block btn-outline-danger btn-sm">Danger</button> <button type="button" class="btn btn-block btn-outline-danger btn-sm">Danger</button>
</td> </td>
<td>
<button type="button" class="btn btn-block btn-outline-danger btn-xs">Danger</button>
</td>
<td> <td>
<button type="button" class="btn btn-block btn-outline-danger btn-flat">Danger</button> <button type="button" class="btn btn-block btn-outline-danger btn-flat">Danger</button>
</td> </td>
...@@ -873,6 +911,9 @@ ...@@ -873,6 +911,9 @@
<td> <td>
<button type="button" class="btn btn-block btn-outline-warning btn-sm">Warning</button> <button type="button" class="btn btn-block btn-outline-warning btn-sm">Warning</button>
</td> </td>
<td>
<button type="button" class="btn btn-block btn-outline-warning btn-xs">Warning</button>
</td>
<td> <td>
<button type="button" class="btn btn-block btn-outline-warning btn-flat">Warning</button> <button type="button" class="btn btn-block btn-outline-warning btn-flat">Warning</button>
</td> </td>
...@@ -895,7 +936,7 @@ ...@@ -895,7 +936,7 @@
<div class="card-header"> <div class="card-header">
<h3 class="card-title"> <h3 class="card-title">
<i class="fas fa-edit"></i> <i class="fas fa-edit"></i>
Gradient Buttons (bg-*) Gradient Buttons (bg-gradient-*)
</h3> </h3>
</div> </div>
<div class="card-body pad table-responsive"> <div class="card-body pad table-responsive">
...@@ -905,6 +946,7 @@ ...@@ -905,6 +946,7 @@
<th>Normal</th> <th>Normal</th>
<th>Large <code>.btn-lg</code></th> <th>Large <code>.btn-lg</code></th>
<th>Small <code>.btn-sm</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>Flat <code>.btn-flat</code></th>
<th>Disabled <code>.disabled</code></th> <th>Disabled <code>.disabled</code></th>
</tr> </tr>
...@@ -918,6 +960,9 @@ ...@@ -918,6 +960,9 @@
<td> <td>
<button type="button" class="btn btn-block bg-gradient-primary btn-sm">Primary</button> <button type="button" class="btn btn-block bg-gradient-primary btn-sm">Primary</button>
</td> </td>
<td>
<button type="button" class="btn btn-block bg-gradient-primary btn-xs">Primary</button>
</td>
<td> <td>
<button type="button" class="btn btn-block bg-gradient-primary btn-flat">Primary</button> <button type="button" class="btn btn-block bg-gradient-primary btn-flat">Primary</button>
</td> </td>
...@@ -935,6 +980,9 @@ ...@@ -935,6 +980,9 @@
<td> <td>
<button type="button" class="btn btn-block bg-gradient-secondary btn-sm">Secondary</button> <button type="button" class="btn btn-block bg-gradient-secondary btn-sm">Secondary</button>
</td> </td>
<td>
<button type="button" class="btn btn-block bg-gradient-secondary btn-xs">Secondary</button>
</td>
<td> <td>
<button type="button" class="btn btn-block bg-gradient-secondary btn-flat">Secondary</button> <button type="button" class="btn btn-block bg-gradient-secondary btn-flat">Secondary</button>
</td> </td>
...@@ -952,6 +1000,9 @@ ...@@ -952,6 +1000,9 @@
<td> <td>
<button type="button" class="btn btn-block bg-gradient-success btn-sm">Success</button> <button type="button" class="btn btn-block bg-gradient-success btn-sm">Success</button>
</td> </td>
<td>
<button type="button" class="btn btn-block bg-gradient-success btn-xs">Success</button>
</td>
<td> <td>
<button type="button" class="btn btn-block bg-gradient-success btn-flat">Success</button> <button type="button" class="btn btn-block bg-gradient-success btn-flat">Success</button>
</td> </td>
...@@ -969,6 +1020,9 @@ ...@@ -969,6 +1020,9 @@
<td> <td>
<button type="button" class="btn btn-block bg-gradient-info btn-sm">Info</button> <button type="button" class="btn btn-block bg-gradient-info btn-sm">Info</button>
</td> </td>
<td>
<button type="button" class="btn btn-block bg-gradient-info btn-xs">Info</button>
</td>
<td> <td>
<button type="button" class="btn btn-block bg-gradient-info btn-flat">Info</button> <button type="button" class="btn btn-block bg-gradient-info btn-flat">Info</button>
</td> </td>
...@@ -986,6 +1040,9 @@ ...@@ -986,6 +1040,9 @@
<td> <td>
<button type="button" class="btn btn-block bg-gradient-danger btn-sm">Danger</button> <button type="button" class="btn btn-block bg-gradient-danger btn-sm">Danger</button>
</td> </td>
<td>
<button type="button" class="btn btn-block bg-gradient-danger btn-xs">Danger</button>
</td>
<td> <td>
<button type="button" class="btn btn-block bg-gradient-danger btn-flat">Danger</button> <button type="button" class="btn btn-block bg-gradient-danger btn-flat">Danger</button>
</td> </td>
...@@ -1003,6 +1060,9 @@ ...@@ -1003,6 +1060,9 @@
<td> <td>
<button type="button" class="btn btn-block bg-gradient-warning btn-sm">Warning</button> <button type="button" class="btn btn-block bg-gradient-warning btn-sm">Warning</button>
</td> </td>
<td>
<button type="button" class="btn btn-block bg-gradient-warning btn-xs">Warning</button>
</td>
<td> <td>
<button type="button" class="btn btn-block bg-gradient-warning btn-flat">Warning</button> <button type="button" class="btn btn-block bg-gradient-warning btn-flat">Warning</button>
</td> </td>
...@@ -1302,7 +1362,7 @@ ...@@ -1302,7 +1362,7 @@
<!-- /input-group --> <!-- /input-group -->
<strong>Flat</strong> <strong>Flat</strong>
<div class="input-group mb-3"> <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"> <span class="input-group-append">
<button type="button" class="btn btn-info btn-flat">Go!</button> <button type="button" class="btn btn-info btn-flat">Go!</button>
</span> </span>
...@@ -1403,13 +1463,13 @@ ...@@ -1403,13 +1463,13 @@
<span class="caret"></span> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu" role="menu"> <div class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-info btn-flat">Action</button> <button type="button" class="btn btn-info btn-flat">Action</button>
...@@ -1577,8 +1637,8 @@ ...@@ -1577,8 +1637,8 @@
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -1618,8 +1678,8 @@ ...@@ -1618,8 +1678,8 @@
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -1660,8 +1720,8 @@ ...@@ -1660,8 +1720,8 @@
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -1703,8 +1763,8 @@ ...@@ -1703,8 +1763,8 @@
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -1746,8 +1806,8 @@ ...@@ -1746,8 +1806,8 @@
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul> </ul>
</div> </div>
</div> </div>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或