seperate reset styles (#7682)

* seperate reset styles * not reset ul/ol/p/heading * revert reset.less idea * move label style into ant-form-item, #5851 * revert reset.less idea * update base.less * Better typography from bootstrap@4 use reboot replace normalize ref: https://github.com/twbs/bootstrap/blob/b4d84b9cdfe0fc1c3d73770f5b7cb428f79d5e68/scss/_reboot.scss close #6162
ant-design · Sep 22, 2017 · 759b0bb · 759b0bb
1 parent bb41151
commit 759b0bb
Show file tree

Hide file tree

Showing 56 changed files with 570 additions and 545 deletions.
diff --git a/components/alert/style/index.less b/components/alert/style/index.less
@@ -1,17 +1,16 @@
 @import "../../style/themes/default";
+@import "../../style/mixins/index";
 
 @alert-prefix-cls: ~"@{ant-prefix}-alert";
 
 @alert-message-color: @heading-color;
 @alert-text-color: @text-color;
 
 .@{alert-prefix-cls} {
+  .reset-component;
   position: relative;
   padding: 8px 48px 8px 38px;
   border-radius: @border-radius-base;
-  color: @alert-text-color;
-  font-size: @font-size-base;
-  line-height: @line-height-base;
 
   &&-no-icon {
     padding: 8px 48px 8px 16px;

diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less
@@ -1,6 +1,8 @@
 @import "../../style/themes/default";
+@import "../../style/mixins/index";
 
 .@{ant-prefix}-anchor {
+  .reset-component;
   position: relative;
   &-wrapper {
     background-color: @component-background;

diff --git a/components/auto-complete/style/index.less b/components/auto-complete/style/index.less
@@ -7,6 +7,8 @@
 @autocomplete-prefix-cls: ~"@{select-prefix-cls}-auto-complete";
 
 .@{autocomplete-prefix-cls} {
+  .reset-component;
+
   &.@{select-prefix-cls} {
     .@{select-prefix-cls} {
       &-selection {

diff --git a/components/avatar/style/index.less b/components/avatar/style/index.less
@@ -1,8 +1,10 @@
 @import "../../style/themes/default";
+@import "../../style/mixins/index";
 
 @avatar-prefix-cls: ~"@{ant-prefix}-avatar";
 
 .@{avatar-prefix-cls} {
+  .reset-component;
   display: inline-block;
   text-align: center;
   background: @avatar-bg;

diff --git a/components/back-top/style/index.less b/components/back-top/style/index.less
@@ -1,8 +1,10 @@
 @import "../../style/themes/default";
+@import "../../style/mixins/index";
 
 @backtop-prefix-cls: ~"@{ant-prefix}-back-top";
 
 .@{backtop-prefix-cls} {
+  .reset-component;
   z-index: @zindex-back-top;
   position: fixed;
   right: 100px;

diff --git a/components/badge/style/index.less b/components/badge/style/index.less
@@ -1,9 +1,11 @@
 @import "../../style/themes/default";
+@import "../../style/mixins/index";
 
 @badge-prefix-cls: ~"@{ant-prefix}-badge";
 @number-prefix-cls: ~"@{ant-prefix}-scroll-number";
 
 .@{badge-prefix-cls} {
+  .reset-component;
   position: relative;
   display: inline-block;
   line-height: 1;

diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less
@@ -1,10 +1,10 @@
 @import "../../style/themes/default";
+@import "../../style/mixins/index";
 
 @breadcrumb-prefix-cls: ~"@{ant-prefix}-breadcrumb";
 
 .@{breadcrumb-prefix-cls} {
-  color: @text-color;
-  font-size: @font-size-base;
+  .reset-component;
 
   a {
     color: @text-color;

diff --git a/components/button/style/index.less b/components/button/style/index.less
@@ -12,6 +12,7 @@
 // Button styles
 // -----------------------------
 .@{btn-prefix-cls} {
+  .reset-component;
   .btn;
   .btn-default;
 

diff --git a/components/calendar/style/index.less b/components/calendar/style/index.less
@@ -1,10 +1,10 @@
 @import "../../style/themes/default";
+@import "../../style/mixins/index";
 
 @full-calendar-prefix-cls: ~"@{ant-prefix}-fullcalendar";
 
 .@{full-calendar-prefix-cls} {
-  font-size: @font-size-base;
-  line-height: @line-height-base;
+  .reset-component;
   outline: none;
   border-top: @border-width-base @border-style-base @border-color-base;
 

diff --git a/components/card/demo/basic.md b/components/card/demo/basic.md
@@ -24,3 +24,9 @@ ReactDOM.render(
   </Card>
 , mountNode);
 ````
+
+<style>
+.code-box-demo p {
+  margin: 0;
+}
+</style>
diff --git a/components/card/style/index.less b/components/card/style/index.less
@@ -6,9 +6,9 @@
 @card-padding-wider: 32px;
 
 .@{card-prefix-cls} {
+  .reset-component;
   background: @component-background;
   border-radius: @border-radius-sm;
-  font-size: @font-size-base;
   position: relative;
   transition: all .3s;
 
@@ -78,6 +78,9 @@
 
   &-loading-content {
     padding: @card-padding-base;
+    p {
+      margin: 0;
+    }
   }
 
   &-loading-block {

diff --git a/components/carousel/style/index.less b/components/carousel/style/index.less
@@ -2,6 +2,8 @@
 @import "../../style/mixins/index";
 
 .@{ant-prefix}-carousel {
+  .reset-component;
+
   .slick-slider {
     position: relative;
     display: block;

diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less
@@ -5,7 +5,7 @@
 @cascader-prefix-cls: ~"@{ant-prefix}-cascader";
 
 .@{cascader-prefix-cls} {
-  font-size: @font-size-base;
+  .reset-component;
 
   &-input.@{ant-prefix}-input {
     // Add important to fix https://github.com/ant-design/ant-design/issues/5078
@@ -17,10 +17,10 @@
   }
 
   &-picker {
+    .reset-component;
     position: relative;
     display: inline-block;
     cursor: pointer;
-    font-size: @font-size-base;
     background-color: @component-background;
     border-radius: @border-radius-base;
     outline: 0;
@@ -110,6 +110,14 @@
     border-radius: @border-radius-base;
     box-shadow: @box-shadow-base;
     white-space: nowrap;
+
+    ul,
+    ol {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
     &-empty,
     &-hidden {
       display: none;

diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less
@@ -4,6 +4,7 @@
   @checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";
   // 一般状态
   .@{checkbox-prefix-cls} {
+    .reset-component;
     white-space: nowrap;
     cursor: pointer;
     outline: none;
@@ -149,8 +150,8 @@
   }
 
   .@{checkbox-prefix-cls}-wrapper {
+    .reset-component;
     cursor: pointer;
-    font-size: @font-size-base;
     display: inline-block;
     &:not(:last-child) {
       margin-right: 8px;
@@ -164,7 +165,7 @@
   }
 
   .@{checkbox-prefix-cls}-group {
-    font-size: @font-size-base;
+    .reset-component;
     &-item {
       display: inline-block;
     }

diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less
@@ -14,6 +14,7 @@
 }
 
 .@{collapse-prefix-cls} {
+  .reset-component;
   background-color: @collapse-header-bg;
   border-radius: @border-radius-base;
   border: @border-width-base @border-style-base @border-color-base;

diff --git a/components/date-picker/style/Picker.less b/components/date-picker/style/Picker.less
@@ -1,4 +1,5 @@
 .@{calendar-prefix-cls}-picker-container {
+  .reset-component;
   position: absolute;
   z-index: @zindex-picker;
 
@@ -28,10 +29,10 @@
 }
 
 .@{calendar-prefix-cls}-picker {
+  .reset-component;
   position: relative;
   display: inline-block;
   outline: none;
-  font-size: @font-size-base;
   transition: opacity 0.3s;
 
   &-input {

diff --git a/components/divider/style/index.less b/components/divider/style/index.less
@@ -4,6 +4,7 @@
 @divider-prefix-cls: ~"@{ant-prefix}-divider";
 
 .@{divider-prefix-cls} {
+  .reset-component;
   background: @border-color-split;
 
   &,  // for compatiable

diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less
@@ -4,14 +4,12 @@
 @dropdown-prefix-cls: ~"@{ant-prefix}-dropdown";
 
 .@{dropdown-prefix-cls} {
+  .reset-component;
   position: absolute;
   left: -9999px;
   top: -9999px;
   z-index: @zindex-dropdown;
   display: block;
-  font-size: @font-size-base;
-  font-weight: normal;
-  line-height: 1.5;
 
   &-wrap {
     position: relative;

diff --git a/components/form/style/index.less b/components/form/style/index.less
@@ -9,15 +9,9 @@
 @form-component-height: @input-height-lg;
 @form-feedback-icon-size: 14px;
 
-.reset-form();
-
-label {
-  position: relative;
-
-  > .@{iconfont-css-prefix} {
-    vertical-align: top;
-    font-size: @font-size-base;
-  }
+.@{form-prefix-cls} {
+  .reset-component;
+  .reset-form;
 }
 
 .@{form-prefix-cls}-item-required:before {
@@ -65,9 +59,17 @@ input[type="checkbox"] {
 // Form items
 // You should wrap labels and controls in .@{form-prefix-cls}-item for optimum spacing
 .@{form-prefix-cls}-item {
-  font-size: @font-size-base;
+  label {
+    position: relative;
+
+    > .@{iconfont-css-prefix} {
+      vertical-align: top;
+      font-size: @font-size-base;
+    }
+  }
+
+  .reset-component;
   margin-bottom: @form-item-margin-bottom;
-  color: @text-color;
   vertical-align: top;
   transition: margin .15s steps(1);
 
@@ -81,6 +83,10 @@ input[type="checkbox"] {
     line-height: @form-component-height;
     position: relative;
     .clearfix;
+    font-size: 0;
+    * {
+      font-size: @font-size-base;
+    }
   }
 
   &-with-help {

diff --git a/components/grid/style/index.less b/components/grid/style/index.less
@@ -6,6 +6,7 @@
 .@{ant-prefix}-row {
   .make-row();
   display: block;
+  box-sizing: border-box;
 }
 
 .@{ant-prefix}-row-flex {

diff --git a/components/grid/style/mixin.less b/components/grid/style/mixin.less
@@ -53,6 +53,7 @@
 .loop-grid-columns(@index, @class) when (@index > 0) {
   .@{ant-prefix}-col@{class}-@{index} {
     display: block;
+    box-sizing: border-box;
     width: percentage((@index / @grid-columns));
   }
   .@{ant-prefix}-col@{class}-push-@{index} {

diff --git a/components/input-number/style/index.less b/components/input-number/style/index.less
@@ -11,11 +11,10 @@
 }
 
 .@{input-number-prefix-cls} {
-  .input();
+  .reset-component;
+  .input;
   margin: 0;
   padding: 0;
-  font-size: @font-size-base;
-  height: @input-height-base;
   display: inline-block;
   border: @border-width-base @border-style-base @border-color-base;
   border-radius: @border-radius-base;

diff --git a/components/input/style/index.less b/components/input/style/index.less
@@ -4,11 +4,13 @@
 
 // Input styles
 .@{ant-prefix}-input {
+  .reset-component;
   .input;
 }
 
 //== Style for input-group: input with label, with button or dropdown...
 .@{ant-prefix}-input-group {
+  .reset-component;
   .input-group(~"@{ant-prefix}-input");
   &-wrapper {
     display: inline-block;
@@ -19,6 +21,7 @@
 
 // Input with affix: prefix or suffix
 .@{ant-prefix}-input-affix-wrapper {
+  .reset-component;
   .input-affix-wrapper(~"@{ant-prefix}-input");
 
   // https://github.com/ant-design/ant-design/issues/6144

diff --git a/components/layout/style/index.less b/components/layout/style/index.less
@@ -9,6 +9,11 @@
   flex: auto;
   background: @layout-body-background;
 
+  &,
+  * {
+    box-sizing: border-box;
+  }
+
   &&-has-sider {
     flex-direction: row;
     > .@{layout-prefix-cls},

diff --git a/components/list/style/index.less b/components/list/style/index.less
@@ -4,6 +4,8 @@
 @list-prefix-cls: ~"@{ant-prefix}-list";
 
 .@{list-prefix-cls} {
+  .reset-component;
+
   &-more, &-pagination {
     margin-top: 24px;
     text-align: center;