💄 add @typography-title-margin-top and @typography-title-margin-bottom (

#18746) * add: Typography mixins. add: Created typography variables (margin, font-weight). moved: Typography internal variables * fix: heding margin moved: prefix variable out of default.less * fixed: circleci * 🗑 Remove @typography-title-margin-left and @typography-title-margin-right * 🗑 Remove unused vars
ant-design · Oct 15, 2019 · a2f28f0 · a2f28f0
1 parent a72f43b
commit a2f28f0
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 27 deletions.
diff --git a/components/style/mixins/index.less b/components/style/mixins/index.less
@@ -7,3 +7,4 @@
 @import 'motion';
 @import 'reset';
 @import 'operation-unit';
+@import 'typography';
diff --git a/components/style/mixins/typography.less b/components/style/mixins/typography.less
@@ -0,0 +1,49 @@
+// =============== Common ===============
+.typography-paragraph() {
+  margin-bottom: 1em;
+}
+
+.typography-title(@fontSize; @fontWeight; @lineHeight; @headingColor; @headingMarginBottom;) {
+  margin-bottom: @headingMarginBottom;
+  color: @headingColor;
+  font-weight: @fontWeight;
+  font-size: @fontSize;
+  line-height: @lineHeight;
+}
+
+.typography-title-1() {
+  .typography-title(
+    @heading-1-size,
+    @typography-title-font-weight,
+    1.23,
+    @heading-color,
+    @typography-title-margin-bottom
+  );
+}
+.typography-title-2() {
+  .typography-title(
+    @heading-2-size,
+    @typography-title-font-weight,
+    1.35,
+    @heading-color,
+    @typography-title-margin-bottom
+  );
+}
+.typography-title-3() {
+  .typography-title(
+    @heading-3-size,
+    @typography-title-font-weight,
+    1.35,
+    @heading-color,
+    @typography-title-margin-bottom
+  );
+}
+.typography-title-4() {
+  .typography-title(
+    @heading-4-size,
+    @typography-title-font-weight,
+    1.4,
+    @heading-color,
+    @typography-title-margin-bottom
+  );
+}
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
@@ -684,3 +684,5 @@
 // Typography
 // ---
 @typography-title-font-weight: 600;
+@typography-title-margin-top: 1.2em;
+@typography-title-margin-bottom: 0.5em;
diff --git a/components/typography/style/index.less b/components/typography/style/index.less
@@ -2,33 +2,6 @@
 @import '../../style/mixins/index';
 
 @typography-prefix-cls: ~'@{ant-prefix}-typography';
-@typography-title-margin-top: 1.2em;
-
-// =============== Common ===============
-.typography-paragraph() {
-  margin-bottom: 1em;
-}
-
-.typography-title(@fontSize; @lineHeight) {
-  margin-bottom: 0.5em;
-  color: @heading-color;
-  font-weight: @typography-title-font-weight;
-  font-size: @fontSize;
-  line-height: @lineHeight;
-}
-
-.typography-title-1() {
-  .typography-title(@heading-1-size, 1.23);
-}
-.typography-title-2() {
-  .typography-title(@heading-2-size, 1.35);
-}
-.typography-title-3() {
-  .typography-title(@heading-3-size, 1.35);
-}
-.typography-title-4() {
-  .typography-title(@heading-4-size, 1.4);
-}
 
 // =============== Basic ===============
 .@{typography-prefix-cls} {