toolbar support disabled and divider style
This commit is contained in:
parent
739cd8fb02
commit
8bdfec1a6b
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Reference in a new issue