ant-design/components/layout/style/index.less
偏右 2bced36f0c New component styles (#7731)
* Tweak button padding

* upgrade input and button size

* update form controls size

* update components size

* Add lemon color and update rate color

* Add new icons

* update layout style

* breadcrumb and dropdown

* update menu arrow width

* update layout and menu

* update steps

* fix var name

* update cascasder style

* Update DatePicker

* update InputNumber and Mention

* radio and switch

* select and transfer

* TimePicker & Upload

* more components

* calendar and list

* Tree Timeline Popover Tag

* divider modal popover

* update search input

* update card style

* update switch disabled opacity

* update shoadow and mask

* Add v2-compatible-reset.less

* Fix undefined className

* update snahshotssssssssssssssssss 👻
2017-09-27 22:32:49 +08:00

107 lines
2.1 KiB
Plaintext

@import "../../style/themes/default";
@import "../../style/mixins/index";
@layout-prefix-cls: ~"@{ant-prefix}-layout";
.@{layout-prefix-cls} {
display: flex;
flex-direction: column;
flex: auto;
background: @layout-body-background;
&,
* {
box-sizing: border-box;
}
&&-has-sider {
flex-direction: row;
> .@{layout-prefix-cls},
> .@{layout-prefix-cls}-content {
overflow-x: hidden;
}
}
&-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 .2s;
position: relative;
background: @layout-sider-background;
/* fix firefox can't set width smaller than content on flex item */
min-width: 0;
&-children {
height: 100%;
}
&-has-trigger {
padding-bottom: @layout-trigger-height;
}
&-right {
order: 1;
}
&-trigger {
position: fixed;
text-align: center;
bottom: 0;
cursor: pointer;
height: @layout-trigger-height;
line-height: @layout-trigger-height;
color: @layout-trigger-color;
background: @layout-trigger-background;
z-index: 1;
transition: all .2s;
}
&-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%);
}
}
}
}
}