Add collapse styles to default.less (#9943)

* push collapse styling into overridable defaults

* Changes to ensure backwards compatibiliy, switch bg-color to be based on default style

* change background-color to bg in style names

* simplify and consolodate content-padding

* I figured out why the styling is split across content and box like that

The collapse/show animation doesn't work right without the padding set up across the two elements like this. From an end-user point of view, I think this is the easiest thing.

* pushing all padding styling on to the box instead of the content, keeping var name the same because the end user doesn't need to know the difference

* Pushing header-bg-color back up to the top of the component heirarchy

* shorten content padding
This commit is contained in:
davidhatten 2018-04-18 23:36:53 -04:00 committed by 偏右
parent 04a5cc2a8b
commit 74d1c5e6b6
2 changed files with 10 additions and 8 deletions

View File

@ -3,9 +3,6 @@
@collapse-prefix-cls: ~"@{ant-prefix}-collapse";
@collapse-header-bg: @background-color-light;
@collapse-active-bg: @background-color-base;
.collapse-close() {
transform: rotate(0);
}
@ -32,7 +29,7 @@
> .@{collapse-prefix-cls}-header {
line-height: 22px;
padding: 12px 0 12px 40px;
padding: @collapse-header-padding;
color: @heading-color;
cursor: pointer;
position: relative;
@ -69,13 +66,11 @@
&-content {
overflow: hidden;
color: @text-color;
padding: 0 @padding-md;
background-color: @component-background;
background-color: @collapse-content-bg;
border-top: @border-width-base @border-style-base @border-color-base;
& > &-box {
padding-top: @padding-md;
padding-bottom: @padding-md;
padding: @collapse-content-padding;
}
&-inactive {

View File

@ -461,3 +461,10 @@
@slider-dot-border-color-active: tint(@primary-color, 50%);
@slider-disabled-color: @disabled-color;
@slider-disabled-background-color: @component-background;
// Collapse
// ---
@collapse-header-padding: 12px 0 12px 40px;
@collapse-header-bg: @background-color-light;
@collapse-content-padding: @padding-md;
@collapse-content-bg: @component-background;