From 8ebe2b973384486ffe063ec40fe657ef5e30c035 Mon Sep 17 00:00:00 2001
From: Ian Grindley <ian@ignition-studios.com>
Date: Fri, 9 Aug 2019 12:43:56 +0100
Subject: Add additional text helper functions

.text-muted similar to Bootstrap, adds a slight fade to the text
Added text size utilities text-small and text-tiny
Added new classes to docs
---
 docs/utilities/text.html |  7 +++++++
 src/utilities/_text.scss | 12 ++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/docs/utilities/text.html b/docs/utilities/text.html
index 81d3575..476c46f 100644
--- a/docs/utilities/text.html
+++ b/docs/utilities/text.html
@@ -234,8 +234,15 @@
 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-bold"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-comment">&lt;!-- Italicized text --&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-italic"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Muted text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-muted"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-comment">&lt;!-- Larger text (120%) --&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-large"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Smaller text (90%) --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-small"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Tiny text (80%) --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-tiny"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
 
 <span class="hljs-comment">&lt;!-- Overflow behavior: display an ellipsis to represent clipped text --&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-ellipsis"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
diff --git a/src/utilities/_text.scss b/src/utilities/_text.scss
index 67793ac..fa1cbd8 100644
--- a/src/utilities/_text.scss
+++ b/src/utilities/_text.scss
@@ -46,6 +46,18 @@
   font-size: 1.2em;
 }
 
+.text-small {
+    font-size: 0.9em;
+}
+
+.text-tiny {
+    font-size: 0.8em;
+}
+
+.text-muted {
+    opacity: 0.8;
+}
+
 // Text overflow utilities
 .text-ellipsis {
   @include text-ellipsis();
-- 
cgit v1.2.3