diff options
| author | Yan Zhu <picturepan2@hotmail.com> | 2020-07-02 08:10:50 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-07-02 08:10:50 +0300 |
| commit | ad01910b72a2ece0efc76ff2b12a5258819746aa (patch) | |
| tree | 97fb994bfba590756c16169e14937153911466b8 | |
| parent | 9bf3ae221786bccfdee175b671be4fbe39f78d7e (diff) | |
| parent | c9c6f0bf951d6231eac16ad763e5c8df59013b18 (diff) | |
Merge pull request #601 from dijitaltrix/master
Make column classes less verbose
| -rw-r--r-- | docs/utilities/text.html | 7 | ||||
| -rw-r--r-- | src/_layout.scss | 2 | ||||
| -rw-r--r-- | src/utilities/_text.scss | 12 |
3 files changed, 21 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/_layout.scss b/src/_layout.scss index 1f6b77c..e6bad9a 100644 --- a/src/_layout.scss +++ b/src/_layout.scss @@ -39,6 +39,7 @@ } // Responsive grid system +.cols, .columns { display: flex; flex-wrap: wrap; @@ -59,6 +60,7 @@ overflow-x: auto; } } +[class~="col-"], .column { flex: 1; max-width: 100%; diff --git a/src/utilities/_text.scss b/src/utilities/_text.scss index 67793ac..5796905 100644 --- a/src/utilities/_text.scss +++ b/src/utilities/_text.scss @@ -46,6 +46,18 @@ font-size: 1.2em; } +.text-small { + font-size: .9em; +} + +.text-tiny { + font-size: .8em; +} + +.text-muted { + opacity: .8; +} + // Text overflow utilities .text-ellipsis { @include text-ellipsis(); |