ant-design/components/layout/style/index.less

91 lines
1.9 KiB
Plaintext
Raw Normal View History

@import "../../style/themes/default";
@import "../../style/mixins/index";
@layout-prefix-cls: ~"@{ant-prefix}-layout";
.@{layout-prefix-cls} {
display: flex;
flex-direction: column;
flex: auto;
overflow: auto;
background: @layout-body-background;
&&-has-sider {
flex-direction: row;
}
&-header,
&-footer {
flex: 0 0 auto;
}
&-header {
background: @layout-header-background;
padding: @layout-header-padding;
height: @layout-header-height;
line-height: @layout-header-height;
}
&-footer {
padding: @layout-footer-padding;
color: @text-color;
font-size: @font-size-base;
}
&-content {
flex: auto;
}
&-sider {
transition: all .3s @ease-out;
position: relative;
background: @layout-sider-background;
&-has-trigger {
padding-bottom: @layout-trigger-height;
}
&-right {
order: 1;
}
&-trigger {
position: absolute;
text-align: center;
width: 100%;
bottom: 0;
cursor: pointer;
height: @layout-trigger-height;
line-height: @layout-trigger-height;
background: tint(@heading-color, 20%);
color: #fff;
}
&-zero-width {
& > * {
overflow: hidden;
}
&-trigger {
position: absolute;
top: @layout-header-height;
right: -@layout-zero-trigger-width;
text-align: center;
width: @layout-zero-trigger-width;
height: @layout-zero-trigger-height;
line-height: @layout-zero-trigger-height;
background: @layout-sider-background;
color: #fff;
font-size: @layout-zero-trigger-width / 2;
border-radius: 0 @border-radius-base @border-radius-base 0;
cursor: pointer;
transition: background .3s ease;
&:hover {
background: tint(@layout-sider-background, 10%);
}
}
}
}
}