refactor(text): Remove css code duplication, using specificity instea…

…d of nesting composes
telus · Aug 31, 2017 · 688c00e · 688c00e
1 parent 66c5dfb
commit 688c00e
Showing 1 changed file with 16 additions and 42 deletions.
diff --git a/src/components/Typography/Text/Text.modules.scss b/src/components/Typography/Text/Text.modules.scss
@@ -1,6 +1,22 @@
 @import '../../../scss/settings/colours';
 @import '../../../scss/settings/typography';
 
+.baseScripts {
+  position: relative;
+  vertical-align: baseline;
+  font-size: .875rem;
+}
+
+.sup {
+  composes: baseScripts;
+  top: -.5em;
+}
+
+.sub {
+  composes: baseScripts;
+  bottom: -.5em;
+}
+
 .base {
   font-size: inherit;
 }
@@ -13,20 +29,6 @@
   font-size: .875rem;
   letter-spacing: -0.6px;
   line-height: 1.5;
-
-  .sup, .sub {
-    position: relative;
-    vertical-align: baseline;
-    font-size: .875rem;
-  }
-
-  .sup {
-    top: -.5em;
-  }
-
-  .sub {
-    bottom: -.5em;
-  }
 }
 
 .smallFont {
@@ -37,20 +39,6 @@
   font-size: 1rem;
   letter-spacing: -0.8px;
   line-height: 1.5;
-
-  .sup, .sub {
-    position: relative;
-    vertical-align: baseline;
-    font-size: .875rem;
-  }
-
-  .sup {
-    top: -.5em;
-  }
-
-  .sub {
-    bottom: -.5em;
-  }
 }
 
 .mediumFont {
@@ -61,20 +49,6 @@
   font-size: 1.25rem;
   letter-spacing: -1px;
   line-height: 2;
-
-  .sup, .sub {
-    position: relative;
-    vertical-align: baseline;
-    font-size: .875rem;
-  }
-
-  .sup {
-    top: -.5em;
-  }
-
-  .sub {
-    bottom: -.5em;
-  }
 }
 
 .largeFont {