add: Typography mixins. add: Created typography variables (margin, fo…

…nt-weight). moved: Typography internal variables
ant-design · Sep 19, 2019 · ee5f9ad · ee5f9ad
1 parent 721baa8
commit ee5f9ad
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 29 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; @headingMargin) {
+  font-size: @fontSize;
+  font-weight: @fontWeight;
+  line-height: @lineHeight;
+  color: @headingColor;
+  margin: @headingMargin;
+}
+
+.typography-title-1() {
+  .typography-title(
+    @heading-1-size,
+    @typography-title-font-weight,
+    1.23,
+    @heading-color,
+    @typography-title-margin
+  );
+}
+.typography-title-2() {
+  .typography-title(
+    @heading-2-size,
+    @typography-title-font-weight,
+    1.35,
+    @heading-color,
+    @typography-title-margin
+  );
+}
+.typography-title-3() {
+  .typography-title(
+    @heading-3-size,
+    @typography-title-font-weight,
+    1.35,
+    @heading-color,
+    @typography-title-margin
+  );
+}
+.typography-title-4() {
+  .typography-title(
+    @heading-4-size,
+    @typography-title-font-weight,
+    1.4,
+    @heading-color,
+    @typography-title-margin
+  );
+}
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
@@ -681,3 +681,6 @@
 // Typography
 // ---
 @typography-title-font-weight: 600;
+@typography-title-margin: 0 0 0.5em 0;
+@typography-title-margin-top: 1.2em;
+@typography-prefix-cls: ~'@{ant-prefix}-typography';
diff --git a/components/typography/style/index.less b/components/typography/style/index.less
@@ -1,35 +1,6 @@
 @import '../../style/themes/index';
 @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} {
   color: @text-color;