choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
112 lines (111 loc) • 2.66 kB
CSS
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
.c7n-layout {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background: #f0f2f5;
}
.c7n-layout,
.c7n-layout * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.c7n-layout.c7n-layout-has-sider {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.c7n-layout.c7n-layout-has-sider > .c7n-layout,
.c7n-layout.c7n-layout-has-sider > .c7n-layout-content {
overflow-x: hidden;
}
.c7n-layout-header,
.c7n-layout-footer {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.c7n-layout-header {
height: 0.64rem;
padding: 0 0.5rem;
line-height: 0.64rem;
background: #001529;
}
.c7n-layout-footer {
padding: 0.24rem 0.5rem;
color: #000000;
font-size: 0.13rem;
background: #f0f2f5;
}
.c7n-layout-content {
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
}
.c7n-layout-sider {
position: relative;
/* fix firefox can't set width smaller than content on flex item */
min-width: 0;
background: #001529;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.c7n-layout-sider-children {
height: 100%;
margin-top: -0.001rem;
padding-top: 0.001rem;
}
.c7n-layout-sider-has-trigger {
padding-bottom: 0.48rem;
}
.c7n-layout-sider-right {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.c7n-layout-sider-trigger {
position: fixed;
bottom: 0;
z-index: 1;
height: 0.48rem;
color: #fff;
line-height: 0.48rem;
text-align: center;
background: #002140;
cursor: pointer;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.c7n-layout-sider-zero-width > * {
overflow: hidden;
}
.c7n-layout-sider-zero-width-trigger {
position: absolute;
top: 0.64rem;
right: -0.36rem;
width: 0.36rem;
height: 0.42rem;
color: #fff;
font-size: 0.18rem;
line-height: 0.42rem;
text-align: center;
background: #001529;
border-radius: 0 0.02rem 0.02rem 0;
cursor: pointer;
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
}
.c7n-layout-sider-zero-width-trigger:hover {
background: #192c3e;
}