Remove boilerplate - font styling via mixins

MediaMath · Apr 21, 2016 · e0adfc4 · e0adfc4
1 parent c689f55
commit e0adfc4
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 63 deletions.
diff --git a/src/mm-grid-item/mm-grid-item.scss b/src/mm-grid-item/mm-grid-item.scss
@@ -6,20 +6,15 @@
 */
 @import "_bourbon";
 @import "_color";
-@import "_fonts";
-@import "_mixins";
+@import "_text";
 @import "_grid";
 
 :host {
 	display: block;
 	position: relative;
 	overflow: hidden;
 	background: #fff;
-	font-family: "Arimo", sans-serif;
-	@include fontSmoothing();
-	font-weight: 400;
-	font-size: 12px;
-	color: $color-A2;
+	@include defaultFont(12px, normal);
 	border-bottom: 1px solid $color-A9;
 }
 

diff --git a/src/mm-test-form-view/mm-test-form-view.scss b/src/mm-test-form-view/mm-test-form-view.scss
@@ -10,7 +10,7 @@
 :host {
 	position: relative;
 	display: block;
-	@include bodyFont();
+	@include defaultFont();
 }
 
 // custom form items

diff --git a/src/shared/sass/_mixins.scss b/src/shared/sass/_mixins.scss
@@ -7,14 +7,6 @@
 @import "_bourbon";
 // mixins.scss
 
-@mixin buttonFont() {
-	font-family: "Arimo", sans-serif;
-	font-weight: 700;
-	font-size: 13px!important;
-	line-height: 29px !important;
-	@include fontSmoothing();
-}
-
 // fix for google's fit behavior
 @mixin fit() {
   :host([fitparent]) {
@@ -36,7 +28,21 @@
 	box-shadow: inset 0 5px 1px $boxShadowColor;
 }
 
-// font smoothing
+// fonts
+@mixin defaultFont($size: 13px, $line-height: 18px, $weight: 400, $style: normal, $color: $color-A2) {
+	font-family: "Arimo", sans-serif;
+	@include fontSmoothing();
+	font-size: $size !important;
+	line-height: $line-height !important;
+	font-weight: $weight;
+	font-style: normal;
+	color: $color-A2;
+}
+
+@mixin buttonFont() {
+	@include defaultFont(13px, 29px, 700);
+}
+
 // defaults to antialiased
 // Values: antialiased | auto | subpixel-antialiased
 @mixin fontSmoothing($value: antialiased) {

diff --git a/src/shared/sass/_text.scss b/src/shared/sass/_text.scss
@@ -8,68 +8,28 @@
 @import "_color";
 @import "_mixins";
 
-@mixin bodyFont() {
-	font-size: 13px !important;
-	line-height: 18px !important;
-	font-family: "Arimo", sans-serif;
-	@include fontSmoothing();
-	font-weight: 400;
-	font-style: normal;
-	color: $color-A2;
-}
-
 h1, .header-large {
-	font-size: 20px !important;
-	line-height: 25px !important;
-	font-family: "Arimo", sans-serif;
-	@include fontSmoothing();
-	font-weight: 700;
-	font-style: normal;
-	color: $color-A2;
+	@include defaultFont(20px, 25px, 700);
 }
 
 h2, .header-medium {
-	font-size: 15px !important;
-	line-height: 20px !important;
-	font-family: "Arimo", sans-serif;
-	@include fontSmoothing();
-	font-weight: 700;
-	font-style: normal;
-	color: $color-A2;
+	@include defaultFont(15px, 20px, 700);
 }
 
 h3, .header-small {
-	font-size: 13px !important;
-	line-height: 18px !important;
-	font-family: "Arimo", sans-serif;
-	@include fontSmoothing();
-	font-weight: 700;
-	font-style: normal;
-	color: $color-A2;
+	@include defaultFont(13px, 18px, 700);
 }
 
 h4, .header-normal {
-	font-size: 11px !important;
-	line-height: 14px !important;
-	font-family: "Arimo", sans-serif;
-	@include fontSmoothing();
-	font-weight: 700;
-	font-style: normal;
+	@include defaultFont(11px, 14px, 700, normal, $color-D2);
 	text-transform: uppercase;
-	color: $color-D2;
 }
 
 h5, .header-tiny {
-	font-size: 9px !important;
-	line-height: 12px !important;
-	font-family: "Arimo", sans-serif;
-	@include fontSmoothing();
-	font-weight: 700;
-	font-style: normal;
+	@include defaultFont(9px, 12px, 700, normal, $color-A3);
 	text-transform: uppercase;
-	color: $color-A3;
 }
 
 .body-normal {
-	@include bodyFont();
+	@include defaultFont();
 }