重构代码:精简侧边栏样式

This commit is contained in:
Argo-Lenovo 2017-04-01 14:26:07 +08:00
parent 419c980d9c
commit 62c7cc2f01
2 changed files with 44 additions and 73 deletions

View File

@ -28,7 +28,7 @@
top: 94px; top: 94px;
bottom: 40px; bottom: 40px;
position: absolute; position: absolute;
overflow-y: auto; overflow: auto;
} }
.form-group .form-control-url { .form-group .form-control-url {
@ -78,7 +78,7 @@
top: 94px; top: 94px;
bottom: 40px; bottom: 40px;
position: absolute; position: absolute;
overflow-y: auto; overflow: auto;
} }
.main-content { .main-content {

View File

@ -181,108 +181,79 @@ aside {
.sidebar { .sidebar {
display: none; display: none;
overflow-y: auto; overflow: auto;
width: 100%; width: 100%;
z-index: 5; z-index: 5;
background: #2a3542; background: #2a3542;
} }
.sidebar ul li a { .sidebar-menu {
padding-right: 25px; padding: 20px 0;
}
.sidebar .sub-menu > .sub li {
padding-left: 32px;
}
.sidebar ul li {
position: relative;
}
ul.sidebar-menu {
padding: 20px 0 15px 0;
margin-bottom: 0; margin-bottom: 0;
} }
ul.sidebar-menu, ul.sidebar-menu li ul.sub { .sidebar-menu .dcjq-icon {
padding-left: 0; height: 17px;
width: 17px;
display: inline-block;
background: url(images/nav-expand.png) no-repeat;
float: right;
} }
ul.sidebar-menu .dcjq-icon { .sidebar-menu .active .dcjq-icon {
height: 17px; background-position: bottom;
width: 17px; }
display: inline-block;
background: url(images/nav-expand.png) no-repeat; .sidebar-menu li {
background-position: top; margin: 5px 10px;
position: absolute; }
right: 10px;
top: 15px; .sidebar-menu li a {
border-radius: 3px; color: #aeb2b7;
display: block;
padding: 15px 10px;
font-size: 1.2rem;
transition: all 0.3s ease;
border-radius: 4px;
} }
ul.sidebar-menu .active .dcjq-icon { .sidebar-menu li a.active, .sidebar-menu li a:hover, .sidebar-menu li a:focus {
background-position: bottom; background: #35404d;
} color: #fff;
ul.sidebar-menu li {
line-height: 20px;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 10px;
}
ul.sidebar-menu li a.active i {
color: #FF6C60;
} }
ul.sidebar-menu li a i { .sidebar-menu li a.active i {
color: #FF6C60;
}
.sidebar-menu li a i {
font-size: 1.5rem; font-size: 1.5rem;
width: 22px; width: 22px;
} }
ul.sidebar-menu li a { .sidebar-menu li .sub {
color: #aeb2b7; padding-left: 0;
text-decoration: none; }
display: block;
padding: 15px 0 15px 10px;
font-size: 1.2rem;
outline: none;
transition: all 0.3s ease;
}
ul.sidebar-menu li a.active, ul.sidebar-menu li a:hover, ul.sidebar-menu li a:focus { .sidebar-menu li .sub li a:hover, .sidebar-menu li .sub li.active a {
background: #35404d;
color: #fff;
display: block;
border-radius: 4px;
transition: all 0.3s ease;
}
ul.sidebar-menu li ul.sub li a:hover, ul.sidebar-menu li ul.sub li.active a {
color: #FF6C60; color: #FF6C60;
transition: all 0.3s ease; transition: all 0.3s ease;
display: block; display: block;
} }
ul.sidebar-menu li ul.sub li { .sidebar-menu li .sub li {
background: #35404D; background: #35404D;
margin-bottom: 0; margin: 0;
margin-left: 0; padding: 0 10px 0 32px;
margin-right: 0;
} }
ul.sidebar-menu li ul.sub li:last-child { .sidebar-menu li .sub li:last-child {
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
padding-bottom: 10px; padding-bottom: 10px;
} }
ul.sidebar-menu li ul.sub li a { .sidebar-menu li .sub li a {
font-size: 1.2rem; padding: 12px 0;
padding: 6px 0;
line-height: 35px;
height: 35px;
transition: all 0.3s ease;
color: #aeb2b7;
} }
/*Modal Dialog Checkbox*/ /*Modal Dialog Checkbox*/