toolbar support disabled and divider style

This commit is contained in:
MaysWind 2016-05-28 23:57:47 +08:00
parent 739cd8fb02
commit 8bdfec1a6b
2 changed files with 57 additions and 4 deletions

View file

@ -36,30 +36,34 @@
<nav class="navbar navbar-static-top" role="navigation">
<div class="navbar-toolbar">
<ul class="nav navbar-nav">
<li>
<li class="disabled">
<a class="toolbar" title="{{'New' | translate}}">
<i class="fa fa-plus"></i>
<span translate>New</span>
</a>
</li>
<li>
<li class="divider"></li>
<li class="disabled">
<a class="toolbar" title="{{'Start' | translate}}">
<i class="fa fa-play"></i>
</a>
</li>
<li>
<li class="disabled">
<a class="toolbar" title="{{'Pause' | translate}}">
<i class="fa fa-pause"></i>
</a>
</li>
<li>
<li class="disabled">
<a class="toolbar" title="{{'Delete' | translate}}">
<i class="fa fa-trash-o"></i>
<i class="fa fa-caret-right fa-right-bottom fa-rotate-45 fa-half" aria-hidden="true"></i>
</a>
</li>
<li class="divider"></li>
<li>
<a class="toolbar dropdown-toggle" data-toggle="dropdown" title="{{'Display Order' | translate}}">
<i class="fa fa-sort-alpha-asc"></i>
<i class="fa fa-caret-right fa-right-bottom fa-rotate-45 fa-half" aria-hidden="true"></i>
</a>
<ul class="dropdown-menu" role="menu">
<li>

View file

@ -16,6 +16,10 @@
background-color: #f6f6f6;
}
.skin-aria-ng .main-header .navbar .navbar-nav {
margin-left: 5px;
}
.skin-aria-ng .main-header .navbar .nav > li {
display: inline-block;
}
@ -23,6 +27,8 @@
.skin-aria-ng .main-header .navbar .nav > li > a {
color: #707070;
font-size: 16px;
padding-left: 10px;
padding-right: 10px;
}
.skin-aria-ng .main-header .navbar .nav > li > a:hover,
@ -35,6 +41,20 @@
color: #0080ff;
}
.skin-aria-ng .main-header .navbar .nav > li.disabled > a {
color: #ccc !important;
pointer-events: none !important;
}
.skin-aria-ng .main-header .navbar .nav > li.divider {
padding: 10px 0 10px 0;
margin-left: 4px;
margin-right: 4px;
border-right: 1px solid #ccc;
position: relative;
top: 15px;
}
.skin-aria-ng .main-header .navbar .sidebar-toggle, .skin-aria-ng .main-footer .sidebar-toggle {
color: #707070;
}
@ -58,6 +78,16 @@
padding-left: 20px;
}
.skin-aria-ng .main-header .navbar .navbar-nav {
margin-left: -10px;
}
.skin-aria-ng .main-header .navbar .nav > li.divider {
margin-left: 0;
margin-right: 0;
top: 5px;
}
.skin-aria-ng .main-header .navbar .dropdown-menu li.divider {
background-color: rgba(255, 255, 255, 0.1);
}
@ -224,6 +254,25 @@ td {
}
}
/* font-awesome extend */
.fa-half {
font-size: 0.5em;
}
.fa-rotate-45 {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
filter: none;
}
.fa-right-bottom {
position: relative;
right: 0;
bottom: -6px;
}
/* toolbar */
.toolbar {
cursor: pointer;