From 74d1c5e6b6dbbfa42e0260f14882bbd7fc31b51c Mon Sep 17 00:00:00 2001
From: davidhatten <david.r.hatten@gmail.com>
Date: Wed, 18 Apr 2018 23:36:53 -0400
Subject: [PATCH] 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
---
 components/collapse/style/index.less | 11 +++--------
 components/style/themes/default.less |  7 +++++++
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less
index 39e59f1d8a..afa93e8655 100644
--- a/components/collapse/style/index.less
+++ b/components/collapse/style/index.less
@@ -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 {
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index e01b12a7cf..81b7e141c9 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -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;