diff options
| author | Ian Grindley <ian@ignition-studios.com> | 2019-08-09 14:43:56 +0300 |
|---|---|---|
| committer | Ian Grindley <ian@ignition-studios.com> | 2019-08-09 14:43:56 +0300 |
| commit | 8ebe2b973384486ffe063ec40fe657ef5e30c035 (patch) | |
| tree | 350ef169ad7b8f319d6b0c82df1ead450a642c66 | |
| parent | 26ffd50381fed6db672b265990caa12d4d98d272 (diff) | |
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
| -rw-r--r-- | docs/utilities/text.html | 7 | ||||
| -rw-r--r-- | src/utilities/_text.scss | 12 |
2 files changed, 19 insertions, 0 deletions
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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-bold"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-comment"><!-- Italicized text --></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-italic"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- Muted text --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-muted"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-comment"><!-- Larger text (120%) --></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-large"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- Smaller text (90%) --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-small"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- Tiny text (80%) --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-tiny"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-comment"><!-- Overflow behavior: display an ellipsis to represent clipped text --></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-ellipsis"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></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(); |