orga0063
/
BootstrapAdmin
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

重写Header相关样式

This commit is contained in:
Argo-Lenovo 2016-11-07 15:44:32 +08:00
parent 3135ff24f0
commit e85a76b7ca
2 changed files with 507 additions and 503 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

438
Bootstrap.Admin/Content/css/site.css
View File

@ -57,6 +57,17 @@ div button span {
border-bottom: 1px solid #f1f2f7;
}
.arrow-up {
background: url("../images/arrow-up.png") no-repeat;
width: 20px;
height: 11px;
position: absolute;
right: 20px;
top: -10px;
}
/*Title*/
a.logo {
font-size: 21px;
color: #2e2e2e;
@ -73,6 +84,7 @@ a.logo {
a.logo span {
color: #FF6C60;
}
/*end title*/
.sidebar-toggle-box {
float: left;
@ -111,18 +123,37 @@ a.logo {
color: #2A3542;
}
.top-nav {
/*Right Profile*/
.top-menu {
margin-top: 7px;
}
.top-nav .username {
.top-menu .username {
font-size: 13px;
color: #555555;
display: inline-block;
min-width: 18px;
}
.top-nav ul.top-menu > li > a {
.top-menu li {
float: left;
}
.top-menu > li {
margin-left: 10px;
}
.top-menu > li > a:hover, top-menu > li > a:focus {
border: 1px solid #F1F2F7;
background: #F1F2F7;
}
.top-menu > li > a > img {
height: 29px;
width: 29px;
}
.top-menu > li > a {
border: 1px solid #eeeeee;
border-radius: 4px;
-webkit-border-radius: 4px;
@ -131,58 +162,12 @@ a.logo {
margin-right: 0;
}
.top-nav ul.top-menu > li {
margin-left: 10px;
}
.top-nav ul.top-menu > li > a:hover, .top-nav ul.top-menu > li > a:focus {
border: 1px solid #F1F2F7;
background: #F1F2F7;
}
.top-nav ul.top-menu > li > a > img {
height: 29px;
width: 29px;
}
.top-nav .dropdown-menu.extended.logout {
top: 50px;
}
.top-nav .dropdown-menu.extended.logout li a i {
margin-bottom: 4px;
}
.top-nav .nav .caret {
border-bottom-color: #A4AABA;
border-top-color: #A4AABA;
}
.top-nav ul.top-menu > li > a:hover .caret {
.top-menu > li > a:hover .caret {
border-bottom-color: #000;
border-top-color: #000;
}
.top-nav ul.top-menu > li .dropdown-menu.logout {
width: 268px !important;
right: 0;
}
.nav > li, ul.top-menu > li {
float: left;
}
ul.top-menu > li > a {
color: #666666;
font-size: 16px;
border-radius: 4px;
-webkit-border-radius: 4px;
border: 1px solid #f0f0f8 !important;
padding: 2px 6px;
margin-right: 15px;
}
ul.top-menu > li > a:hover, ul.top-menu > li > a:focus {
.top-menu > li > a:hover, .top-menu > li > a:focus {
border: 1px solid #f0f0f8 !important;
background-color: #fff !important;
border-color: #f0f0f8 !important;
@ -192,7 +177,73 @@ a.logo {
color: #2E2E2E !important;
}
.search {
.top-menu .caret {
border-bottom-color: #A4AABA;
border-top-color: #A4AABA;
}
.top-menu .dropdown-menu.logout {
width: 268px !important;
top: 50px;
left: auto;
right: 0;
padding: 0;
border: none;
}
.top-menu .dropdown-menu.logout li {
margin-left: 0;
text-align: center;
width: 33.3%;
}
.top-menu .dropdown-menu.logout li:last-child {
float: left;
text-align: center;
width: 100%;
background: #a9d96c;
border-radius: 0 0 3px 3px;
}
.top-menu .dropdown-menu.logout li:last-child a, .top-menu .dropdown-menu.logout li:last-child a:hover {
color: #fff;
border-bottom: none !important;
text-transform: uppercase;
}
.top-menu .dropdown-menu.logout li:last-child a:hover, .top-menu .dropdown-menu.logout li:last-child a:hover i {
color: #FF6C60;
}
.top-menu .dropdown-menu.logout li a {
color: #a4abbb;
border-bottom: none !important;
padding: 15px 10px;
}
.top-menu .dropdown-menu.logout li a:hover {
background: none !important;
color: #337ab7;
}
.top-menu .dropdown-menu.logout li a:hover i {
color: #50c8ea;
}
.top-menu .dropdown-menu.logout li a i {
font-size: 17px;
display: block;
margin-bottom: 4px;
}
.top-menu .dropdown-menu.logout li a .badge {
position: absolute;
right: 20px;
top: 4px;
background: #FCB322;
}
.top-menu .search {
margin-top: 6px;
width: 20px;
-webkit-transition: all .3s ease;
@ -207,7 +258,7 @@ a.logo {
color: #000;
}
.search:focus {
.top-menu .search:focus {
margin-top: 5px;
width: 180px;
border: 1px solid #eaeaea;
@ -220,21 +271,53 @@ a.logo {
color: #c8c8c8;
font-weight: 300;
}
/*end*/
.arrow-up {
background: url("../images/arrow-up.png") no-repeat;
width: 20px;
height: 11px;
/*notify bar*/
.notify-row {
margin-top: 20px;
float: left;
}
.notify-row > li {
float: left;
position: relative;
display: block;
}
.notify-row > li > a {
color: #666666;
border-radius: 4px;
-webkit-border-radius: 4px;
font-size: 16px;
border: 1px solid #f0f0f8;
padding: 2px 6px;
margin-right: 15px;
}
.notify-row > li > a .badge {
position: absolute;
right: 20px;
top: -10px;
}
.dropdown-menu.extended {
.notify-row > li > a .badge.bg-success {
background: #a9d86e;
}
.notify-row > li > a .badge.bg-important {
background: #ff6c60;
}
.notify-row > li > a .badge.bg-warning {
background: #FCB322;
}
.notify-row .dropdown-menu {
float: left;
max-width: 300px !important;
min-width: 160px !important;
top: 42px;
right: -100px;
top: 32px;
left: -74px;
width: 235px !important;
padding: 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.176) !important;
@ -243,59 +326,41 @@ a.logo {
-webkit-border-radius: 4px;
}
.dropdown-menu.extended.logout > li {
float: left;
text-align: center;
width: 33.3%;
}
.dropdown-menu.extended.logout > li:last-child {
float: left;
text-align: center;
width: 100%;
background: #a9d96c;
border-radius: 0 0 3px 3px;
}
.dropdown-menu.extended.logout > li:last-child > a, .dropdown-menu.extended.logout > li:last-child > a:hover {
color: #fff;
border-bottom: none !important;
text-transform: uppercase;
}
.dropdown-menu.extended.logout > li:last-child > a:hover, .dropdown-menu.extended.logout > li:last-child > a:hover > i {
color: #FF6C60;
}
.dropdown-menu.extended.logout > li > a {
color: #a4abbb;
border-bottom: none !important;
}
.dropdown-menu.extended.logout > li > a:hover {
background: none !important;
}
.dropdown-menu.extended.logout > li > a:hover i {
color: #50c8ea;
}
.dropdown-menu.extended.logout > li > a i {
font-size: 17px;
}
.dropdown-menu.extended.logout > li > a > i {
display: block;
}
.dropdown-menu.extended.logout > li > a > .badge {
.notify-row .dropdown-menu > .notify-arrow {
border-style: solid;
border-width: 0 9px 9px;
height: 0;
margin-top: 0;
opacity: 0;
position: absolute;
right: 20px;
top: 4px;
background: #FCB322;
left: 80px;
top: -18px;
transition: all 0.25s ease 0s;
width: 0;
z-index: 10;
margin-top: 10px;
opacity: 1;
}
.dropdown-menu.extended li a {
.notify-row .dropdown-menu > .notify-arrow.notify-arrow-green {
border-color: transparent transparent #a9d86e;
border-bottom-color: #a9d86e !important;
border-top-color: #a9d86e !important;
}
.notify-row .dropdown-menu > .notify-arrow.notify-arrow-yellow {
border-color: transparent transparent #FCB322;
border-bottom-color: #FCB322 !important;
border-top-color: #FCB322 !important;
}
.notify-row .dropdown-menu > .notify-arrow.notify-arrow-red {
border-color: transparent transparent #ff6c60;
border-bottom-color: #ff6c60 !important;
border-top-color: #ff6c60 !important;
}
.notify-row .dropdown-menu > li > a {
border-bottom: 1px solid #EBEBEB !important;
font-size: 12px;
list-style: none;
@ -304,46 +369,46 @@ a.logo {
display: inline-block;
}
.dropdown-menu.extended li a:hover {
.notify-row .dropdown-menu li a:hover {
background-color: #F7F8F9 !important;
color: #2E2E2E;
}
.dropdown-menu.extended li p {
.notify-row .dropdown-menu .label {
padding: 0.5em 0.8em;
}
.notify-row .dropdown-menu .label.label-danger {
background-color: #FF6C60;
}
.notify-row .dropdown-menu p {
background-color: #F1F2F7;
color: #666666;
color: #fff;
margin: 0;
padding: 10px;
border-radius: 4px 4px 0px 0px;
-webkit-border-radius: 4px 4px 0px 0px;
}
.dropdown-menu.extended li p.green {
.notify-row .dropdown-menu p.green {
background-color: #a9d86e;
color: #fff;
}
.dropdown-menu.extended li p.yellow {
.notify-row .dropdown-menu p.yellow {
background-color: #fcb322;
color: #fff;
}
.dropdown-menu.extended li p.red {
.notify-row .dropdown-menu p.red {
background-color: #ff6c60;
color: #fff;
}
.dropdown-menu.extended .progress {
margin-bottom: 0 !important;
height: 10px;
}
.dropdown-menu.tasks-bar .task-info .desc {
.notify-row .dropdown-menu.tasks-bar .desc {
font-size: 13px;
font-weight: normal;
}
.dropdown-menu.tasks-bar .task-info .percent {
.notify-row .dropdown-menu.tasks-bar .percent {
display: inline-block;
float: right;
font-size: 13px;
@ -352,7 +417,12 @@ a.logo {
margin-top: -4px;
}
.dropdown-menu.inbox li a .photo img {
.notify-row .dropdown-menu.tasks-bar .progress {
margin-bottom: 0 !important;
height: 10px;
}
.notify-row .dropdown-menu.inbox .photo img {
border-radius: 2px 2px 2px 2px;
float: left;
height: 42px;
@ -362,16 +432,15 @@ a.logo {
border-radius: 3px;
}
.dropdown-menu.inbox li a .subject {
.notify-row .dropdown-menu.inbox .subject {
display: block;
}
.dropdown-menu.inbox li a .message {
display: block !important;
font-size: 11px;
.notify-row .dropdown-menu.inbox .subject .from {
font-weight: 600;
}
.dropdown-menu.inbox li a .subject .time {
.notify-row .dropdown-menu.inbox .subject .time {
font-size: 11px;
font-style: italic;
font-weight: bold;
@ -379,6 +448,27 @@ a.logo {
right: 5px;
}
.notify-row .dropdown-menu.inbox .message {
display: block !important;
font-size: 11px;
}
.notify-row .dropdown-menu.notification .label {
display: inline-block;
height: 18px;
width: 20px;
padding: 5px;
margin-right: 5px;
}
.notify-row .dropdown-menu.notification .small {
font-size: 10px;
font-style: italic;
font-weight: bold;
float: right;
}
.dropdown-menu.menu {
top: 50px;
left: 15px;
@ -432,87 +522,7 @@ a.logo {
.dropdown-menu.menu .menu-submenu li a i {
padding-right: 6px;
}
.notify-row {
margin-top: 4px;
padding-right: 10px;
}
.notify-row .badge {
position: absolute;
right: -10px;
top: -10px;
z-index: 100;
}
.notify-row .badge.bg-success {
background: #a9d86e;
}
.notify-row .badge.bg-important {
background: #ff6c60;
}
.notify-row .badge.bg-warning {
background: #FCB322;
}
.notify-row .notification span.label {
display: inline-block;
height: 18px;
width: 20px;
padding: 5px;
margin-right: 5px;
}
.notify-arrow {
border-style: solid;
border-width: 0 9px 9px;
height: 0;
margin-top: 0;
opacity: 0;
position: absolute;
right: 107px;
top: -18px;
transition: all 0.25s ease 0s;
width: 0;
z-index: 10;
margin-top: 10px;
opacity: 1;
}
.notify-arrow-green {
border-color: transparent transparent #a9d86e;
border-bottom-color: #a9d86e !important;
border-top-color: #a9d86e !important;
}
.notify-arrow-yellow {
border-color: transparent transparent #FCB322;
border-bottom-color: #FCB322 !important;
border-top-color: #FCB322 !important;
}
.notify-arrow-red {
border-color: transparent transparent #ff6c60;
border-bottom-color: #ff6c60 !important;
border-top-color: #ff6c60 !important;
}
.label-danger {
background-color: #FF6C60;
}
.label {
padding: 0.5em 0.8em;
}
.small {
font-size: 10px;
font-style: italic;
font-weight: bold;
float: right;
}
/*end*/
/*Login*/
.form-signin {

38
Bootstrap.Admin/Views/Shared/Header.cshtml
View File

@ -10,7 +10,7 @@
@if (Model.Menus.Count() > 0 && Model.ShowMenu)
{
<ul class="dropdown-menu menu">
<div class="menu-arrow arrow-up"></div>
<div class="arrow-up"></div>
<li>
<div class="menu-submenu">
@foreach (var menu in Model.Menus)
@ -21,30 +21,22 @@
</li>
</ul>
}
<div class="top-nav">
<!--search & user info start-->
<ul class="nav pull-right top-menu">
<li>
<input type="text" class="form-control search" placeholder="搜索">
</li>
<li>
<div class="nav notify-row">
<!-- notification start -->
<ul class="nav top-menu">
<ul class="notify-row">
<!-- settings start -->
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="fa fa-tasks"></i>
<span class="badge bg-success">5</span>
</a>
<ul class="dropdown-menu extended tasks-bar">
<ul class="dropdown-menu tasks-bar">
<div class="notify-arrow notify-arrow-green"></div>
<li>
<p class="green">您有 5 个待处理的任务</p>
</li>
<li>
<a href="#">
<div class="task-info">
<div>
<div class="desc">任务1</div>
<div class="percent">40%</div>
</div>
@ -57,7 +49,7 @@
</li>
<li>
<a href="#">
<div class="task-info">
<div>
<div class="desc">任务2</div>
<div class="percent">60%</div>
</div>
@ -70,7 +62,7 @@
</li>
<li>
<a href="#">
<div class="task-info">
<div>
<div class="desc">任务3</div>
<div class="percent">87%</div>
</div>
@ -83,7 +75,7 @@
</li>
<li>
<a href="#">
<div class="task-info">
<div>
<div class="desc">任务4</div>
<div class="percent">33%</div>
</div>
@ -96,7 +88,7 @@
</li>
<li>
<a href="#">
<div class="task-info">
<div>
<div class="desc">任务5</div>
<div class="percent">45%</div>
</div>
@ -107,7 +99,7 @@
</div>
</a>
</li>
<li class="external">
<li>
<a href="#">查看所有任务</a>
</li>
</ul>
@ -119,7 +111,7 @@
<i class="fa fa-envelope-o"></i>
<span class="badge bg-important">4</span>
</a>
<ul class="dropdown-menu extended inbox">
<ul class="dropdown-menu inbox">
<div class="notify-arrow notify-arrow-red"></div>
<li>
<p class="red">您有 4 个待处理的消息</p>
@ -176,7 +168,7 @@
<i class="fa fa-bell-o"></i>
<span class="badge bg-warning">5</span>
</a>
<ul class="dropdown-menu extended notification">
<ul class="dropdown-menu notification">
<div class="notify-arrow notify-arrow-yellow"></div>
<li>
<p class="yellow">您有 5 条新通知</p>
@ -224,7 +216,10 @@
<!-- notification dropdown end -->
</ul>
<!-- notification end -->
</div>
<!--search & user info start-->
<ul class="nav pull-right top-menu">
<li>
<input type="text" class="form-control search" placeholder="搜索">
</li>
<!-- user login dropdown start-->
<li class="dropdown">
@ -234,7 +229,7 @@
<b class="caret"></b>
<input id="userId" type="text" class="hide" value="@Model.UserID" />
</a>
<ul class="dropdown-menu extended logout">
<ul class="dropdown-menu logout">
<div class="arrow-up"></div>
<li><a href="#"><i class=" fa fa-suitcase"></i>个人中心</a></li>
<li><a href="~/Admin"><i class="fa fa-cog"></i>设置</a></li>
@ -245,7 +240,6 @@
<!-- user login dropdown end -->
</ul>
<!--search & user info end-->
</div>
<!--breadcrumbs start -->
<ul class="breadcrumb">
<li><a href="@Url.Content(Model.HomeUrl)"><i class="fa fa-home"></i>首页</a></li>