mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-08 01:53:34 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

Add collapse styles to default.less (#9943)

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/collapse/style/index.less
View File

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

7
components/style/themes/default.less
View File

@ -461,3 +461,10 @@
@slider-dot-border-color-active: tint(@primary-color, 50%); @slider-dot-border-color-active: tint(@primary-color, 50%);
@slider-disabled-color: @disabled-color; @slider-disabled-color: @disabled-color;
@slider-disabled-background-color: @component-background; @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;