Merge pull request #159 from geotrev/framework/classes

Update text utility classes for consistency

Author: geotrev

app/docs/text.md

@@ -4,12 +4,12 @@ When you need to add custom font styles in specific places, rely on these utilit
 
 Change an element and/or it's children to use sans or sans-serif font family as defined in your `_config.scss`.
 
-<p class="filler has-padding has-sans-font">I'm in sans-serif style!</p>
-<p class="filler has-padding has-serif-font">I'm in serif style!</p>
+<p class="filler has-padding has-sans-text">I'm in sans-serif style!</p>
+<p class="filler has-padding has-serif-text">I'm in serif style!</p>
 
 ```html
-<p class="has-sans-font">I'm in sans-serif style!</p>
-<p class="has-serif-font">I'm in serif style!</p>
+<p class="has-sans-text">I'm in sans-serif style!</p>
+<p class="has-serif-text">I'm in serif style!</p>
 ```
 
 ## Text Align
@@ -30,12 +30,12 @@ Align text left, right, or center.
 
 Make your font bold or italic.
 
-<p class="filler has-padding is-bold">I'm bold!</p>
-<p class="filler has-padding is-italic">I'm italic!</p>
+<p class="filler has-padding has-bold-text">I'm bold!</p>
+<p class="filler has-padding has-italic-text">I'm italic!</p>
 
 ```html
-<p class="is-bold">I'm bold!</p>
-<p class="is-italic">I'm italic!</p>
+<p class="has-bold-text">I'm bold!</p>
+<p class="has-italic-text">I'm italic!</p>
 ```
 
 <hr />

src/scss/utilities/_classes.scss

@@ -7,10 +7,10 @@
 
 // Typography style modifiers
 
-.has-sans-font {
+.has-sans-text {
   font-family: $global-font-sans !important;
 }
-.has-serif-font {
+.has-serif-text {
   font-family: $global-font-serif !important;
 }
 
@@ -20,10 +20,10 @@
   }
 }
 
-.is-bold {
+.has-bold-text {
   font-weight: $global-font-weight-bold !important;
 }
-.is-italic {
+.has-italic-text {
   font-style: $global-font-style-italic !important;
 }
 
@@ -212,3 +212,16 @@
     width: auto;
   }
 }
+
+// Revert `is-visually-hidden` class. Will always ensure an element is normally visible even
+// if hidden class is present.
+
+.is-not-visually-hidden {
+  clip: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  position: static;
+  white-space: normal;
+  width: auto;
+}