@lvxiaowu/antd4
Version:
antd4-components
101 lines (100 loc) • 2.15 kB
text/less
@topH: 64px;
.sd-layout {
min-height: 100%;
.sd-sidebar {
position: relative;
z-index: 100;
min-height: 100vh;
.logo {
background: #001529;
height: @topH;
color: #fff;
font-size: 18px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
line-height: @topH;
}
.side-nav {
overflow-y: hidden;
overflow-x: hidden;
max-height: 100vh;
padding-bottom: 20px;
&:hover {
overflow-y: auto;
}
}
}
.sd-sidebar-fixed {
transition: transform 0.3s;
position: fixed;
transform: translateX(-100%);
box-shadow: 2px 0 8px #aaa;
.side-nav {
height: calc(100vh - @topH);
}
.collapse-icon-fixed {
position: absolute;
top: @topH;
right: -34px;
z-index: 1;
width: 34px;
height: 40px;
color: #fff;
font-size: 18px;
line-height: 40px;
text-align: center;
background: #001529;
border-radius: 0 2px 2px 0;
cursor: pointer;
}
}
.sd-sidebar-mask {
position: fixed;
width: 100vw;
height: 100vh;
z-index: 99;
}
.sd-sidebar-fixed-show {
transform: translateX(0);
}
.sd-center {
overflow-y: initial;
.sd-header {
position: relative;
display: flex;
justify-content: space-between;
.collapse-icon {
position: absolute;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
cursor: pointer;
width: 40px;
color: #fff;
left: 10px;
}
.top-nav {
flex: 1;
margin-right: 20px;
margin-left: 20px;
overflow: hidden;
}
.extra {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
flex-shrink: 0;
}
}
.sd-content {
padding: 20px 20px 0;
min-height: auto;
}
}
}