gswz/SFHY/static/css/drawer.min.css

253 lines
4.9 KiB
CSS

.drawer-main {
position: fixed;
top: 0;
width: 280px;
height: 100%;
overflow: hidden
}
.drawer-left .drawer-main {
left: -280px;
-webkit-transition: left .4s cubic-bezier(0.19,1,.22,1);
-o-transition: left .4s cubic-bezier(0.19,1,.22,1);
transition: left .4s cubic-bezier(0.19,1,.22,1)
}
.drawer-left.drawer-open .drawer-main {
left: 0
}
.drawer-right .drawer-main {
right: -280px;
-webkit-transition: right .4s cubic-bezier(0.19,1,.22,1);
-o-transition: right .4s cubic-bezier(0.19,1,.22,1);
transition: right .4s cubic-bezier(0.19,1,.22,1)
}
.drawer-right.drawer-open .drawer-main {
right: 0
}
.drawer-overlay {
position: relative
}
.drawer-left .drawer-overlay,.drawer-left .drawer-hamberger {
left: 0;
-webkit-transition: left .4s cubic-bezier(0.19,1,.22,1);
-o-transition: left .4s cubic-bezier(0.19,1,.22,1);
transition: left .4s cubic-bezier(0.19,1,.22,1)
}
.drawer-left.drawer-open .drawer-overlay,.drawer-left.drawer-open .drawer-hamberger {
left: 280px
}
.drawer-right .drawer-overlay,.drawer-right .drawer-hamberger {
top: 16px;
right: 16px;
-webkit-transition: right .4s cubic-bezier(0.19,1,.22,1);
-o-transition: right .4s cubic-bezier(0.19,1,.22,1);
transition: right .4s cubic-bezier(0.19,1,.22,1)
}
.drawer-right.drawer-open .drawer-overlay,.drawer-right.drawer-open .drawer-hamberger {
right: 280px
}
.drawer-overlay-upper {
position: fixed;
top: 0;
z-index: 1100;
display: none;
height: 100%;
background-color: #000;
background-color: rgba(0,0,0,.5)
}
.drawer-left.drawer-open .drawer-overlay-upper {
right: 0
}
.drawer-right.drawer-open .drawer-overlay-upper {
left: 0
}
.drawer-default {
background-color: #374046;
-webkit-box-shadow: inset 0 0 0 rgba(0,0,0,.5);
box-shadow: inset 0 0 0 rgba(0,0,0,.5)
}
.drawer-default+.drawer-overlay {
background-color: #fff
}
.drawer-default .drawer-brand a {
display: block;
width: 100%;
padding: 15px;
font-size: 22px;
color: #fff
}
.drawer-default .drawer-brand a:hover {
color: #444;
text-decoration: none
}
.drawer-default .xianxas{
width: 100%;
height: 1px;
background-color: #333;
}
.drawer-default .drawer-nav-title {
display: block;
padding: 0 15px;
font-size: 15px;
color: #ddd;
}
.drawer-default .drawer-nav-list {
padding: 0;
margin: 0 15px 15px 15px;
list-style: none;
}
.drawer-default .drawer-nav-list li {
display: block
}
.drawer-default .drawer-nav-list li a {
display: block;
padding: 15px 15px 0 15px;
color: #ddd;
font-size: 15px;
}
.drawer-default .drawer-nav-list li a img{
width: 2.2rem;
vertical-align: text-top;
}
.drawer-default .drawer-nav-list li ul a {
padding: 8px 20px
}
.drawer-hamberger {
position: fixed;
z-index: 1000;
display: block;
width: 32px;
height: 32px;
padding: 0;
background-color: transparent;
border: 0
}
.drawer-hamberger span {
margin-top: 10px
}
.drawer-hamberger span,.drawer-hamberger span:before,.drawer-hamberger span:after {
position: absolute;
display: block;
width: 30px;
height: 3px;
cursor: pointer;
content: '';
background-color: #444;
border-radius: 5px;
-webkit-transition: all .4s cubic-bezier(0.19,1,.22,1);
-o-transition: all .4s cubic-bezier(0.19,1,.22,1);
transition: all .4s cubic-bezier(0.19,1,.22,1)
}
.drawer-hamberger span:before {
top: -10px
}
.drawer-hamberger span:after {
bottom: -10px
}
.drawer-open .drawer-hamberger span {
background-color: transparent
}
.drawer-open .drawer-hamberger span:before,.drawer-open .drawer-hamberger span:after {
top: 0
}
.drawer-open .drawer-hamberger span:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg)
}
.drawer-open .drawer-hamberger span:after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.drawer-hamberger:hover {
cursor: pointer
}
@media (min-width:767px) {
.drawer-responsive.drawer-left .drawer-toggle,.drawer-responsive.drawer-right .drawer-toggle {
display: none;
visibility: hidden
}
.drawer-responsive.drawer-left .drawer-main {
left: 0
}
.drawer-responsive.drawer-right .drawer-main {
right: 0
}
}
@media (min-width:768px) {
.drawer-responsive {
background-color: #222
}
.drawer-responsive.drawer-left .drawer-main,.drawer-responsive.drawer-right .drawer-main {
position: absolute;
width: 150px!important;
height: auto!important;
overflow: visible!important
}
.drawer-responsive.drawer-left .drawer-main {
float: left
}
.drawer-responsive.drawer-left .drawer-overlay {
margin-left: 150px
}
.drawer-responsive.drawer-right .drawer-main {
float: right
}
.drawer-responsive.drawer-right .drawer-overlay {
margin-right: 150px
}
}
@media (min-width:1200px) {
.drawer-responsive.drawer-left .drawer-main,.drawer-responsive.drawer-right .drawer-main {
width: 280px!important
}
.drawer-responsive.drawer-left .drawer-overlay {
margin-left: 280px
}
.drawer-responsive.drawer-right .drawer-overlay {
margin-right: 280px
}
}