mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-08 01:53:34 +08:00
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:
parent
04a5cc2a8b
commit
74d1c5e6b6
@ -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 {
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user