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"> <nav class="navbar navbar-static-top" role="navigation">
<div class="navbar-toolbar"> <div class="navbar-toolbar">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li> <li class="disabled">
<a class="toolbar" title="{{'New' | translate}}"> <a class="toolbar" title="{{'New' | translate}}">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
<span translate>New</span> <span translate>New</span>
</a> </a>
</li> </li>
<li> <li class="divider"></li>
<li class="disabled">
<a class="toolbar" title="{{'Start' | translate}}"> <a class="toolbar" title="{{'Start' | translate}}">
<i class="fa fa-play"></i> <i class="fa fa-play"></i>
</a> </a>
</li> </li>
<li> <li class="disabled">
<a class="toolbar" title="{{'Pause' | translate}}"> <a class="toolbar" title="{{'Pause' | translate}}">
<i class="fa fa-pause"></i> <i class="fa fa-pause"></i>
</a> </a>
</li> </li>
<li> <li class="disabled">
<a class="toolbar" title="{{'Delete' | translate}}"> <a class="toolbar" title="{{'Delete' | translate}}">
<i class="fa fa-trash-o"></i> <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> </a>
</li> </li>
<li class="divider"></li>
<li> <li>
<a class="toolbar dropdown-toggle" data-toggle="dropdown" title="{{'Display Order' | translate}}"> <a class="toolbar dropdown-toggle" data-toggle="dropdown" title="{{'Display Order' | translate}}">
<i class="fa fa-sort-alpha-asc"></i> <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> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li> <li>

View file

@ -16,6 +16,10 @@
background-color: #f6f6f6; background-color: #f6f6f6;
} }
.skin-aria-ng .main-header .navbar .navbar-nav {
margin-left: 5px;
}
.skin-aria-ng .main-header .navbar .nav > li { .skin-aria-ng .main-header .navbar .nav > li {
display: inline-block; display: inline-block;
} }
@ -23,6 +27,8 @@
.skin-aria-ng .main-header .navbar .nav > li > a { .skin-aria-ng .main-header .navbar .nav > li > a {
color: #707070; color: #707070;
font-size: 16px; font-size: 16px;
padding-left: 10px;
padding-right: 10px;
} }
.skin-aria-ng .main-header .navbar .nav > li > a:hover, .skin-aria-ng .main-header .navbar .nav > li > a:hover,
@ -35,6 +41,20 @@
color: #0080ff; 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 { .skin-aria-ng .main-header .navbar .sidebar-toggle, .skin-aria-ng .main-footer .sidebar-toggle {
color: #707070; color: #707070;
} }
@ -58,6 +78,16 @@
padding-left: 20px; 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 { .skin-aria-ng .main-header .navbar .dropdown-menu li.divider {
background-color: rgba(255, 255, 255, 0.1); 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 */
.toolbar { .toolbar {
cursor: pointer; cursor: pointer;