From 411c508806c9751b87fcf93dc3dea7457cfcb192 Mon Sep 17 00:00:00 2001
From: Patrick Marsceill <patrick.marsceill@gmail.com>
Date: Fri, 1 May 2020 15:32:42 -0400
Subject: [PATCH] Add additional layout and text justifcations
---
_sass/typography.scss | 8 ++++++++
_sass/utilities/_layout.scss | 26 ++++++++++++++++++++++++++
_sass/utilities/_spacing.scss | 14 +++++++++-----
docs/utilities/layout.md | 16 ++++++++++++++++
docs/utilities/typography.md | 10 ++++++++++
5 files changed, 69 insertions(+), 5 deletions(-)
diff --git a/_sass/typography.scss b/_sass/typography.scss
index ccf16040..fa8dcef6 100644
--- a/_sass/typography.scss
+++ b/_sass/typography.scss
@@ -53,6 +53,14 @@ li {
font-family: $mono-font-family !important;
}
+.text-left {
+ text-align: left !important;
+}
+
.text-center {
text-align: center !important;
}
+
+.text-right {
+ text-align: right !important;
+}
diff --git a/_sass/utilities/_layout.scss b/_sass/utilities/_layout.scss
index 3247ea39..37ebe421 100644
--- a/_sass/utilities/_layout.scss
+++ b/_sass/utilities/_layout.scss
@@ -47,6 +47,32 @@
}
}
+// Horizontal alignment
+
+.float-left {
+ float: left !important;
+}
+
+.float-right {
+ float: right !important;
+}
+
+.flex-justify-start {
+ justify-content: flex-start !important;
+}
+
+.flex-justify-end {
+ justify-content: flex-end !important;
+}
+
+.flex-justify-between {
+ justify-content: space-between !important;
+}
+
+.flex-justify-around {
+ justify-content: space-around !important;
+}
+
// Vertical alignment
.v-align-baseline {
diff --git a/_sass/utilities/_spacing.scss b/_sass/utilities/_spacing.scss
index 917dd3c7..162f8017 100644
--- a/_sass/utilities/_spacing.scss
+++ b/_sass/utilities/_spacing.scss
@@ -7,6 +7,11 @@
// Margin spacer utilities
+.mx-auto {
+ margin-right: auto !important;
+ margin-left: auto !important;
+}
+
@for $i from 1 through length($spacers) {
$size: #{map-get($spacers, sp-#{$i - 1})};
$scale: #{$i - 1};
@@ -42,11 +47,10 @@
margin-right: -#{$size} !important;
margin-left: -#{$size} !important;
}
-}
-
-.mx-auto {
- margin-right: auto !important;
- margin-left: auto !important;
+ .mx-#{$scale}-auto {
+ margin-right: auto !important;
+ margin-left: auto !important;
+ }
}
@each $media-query in map-keys($media-queries) {
diff --git a/docs/utilities/layout.md b/docs/utilities/layout.md
index 4410459f..06ef9c33 100644
--- a/docs/utilities/layout.md
+++ b/docs/utilities/layout.md
@@ -51,6 +51,9 @@ Spacing values are based on a `1rem = 16px` spacing scale, broken down into thes
| `6` | 2rem | 32px |
| `7` | 2.5rem | 40px |
| `8` | 3rem | 48px |
+| `auto` | auto | auto |
+
+Use `mx-auto` to horizontally center elements.
#### Examples
{: .no_toc }
@@ -65,6 +68,19 @@ This paragraph will have 2rem/32px of padding on the right and left at all scree
{: .px-6 }
```
+## Horizontal Alignment
+
+| Classname | What it does |
+|:------------------------|:---------------------------------|
+| `.float-left` | `float: left` |
+| `.float-right` | `float: right` |
+| `.flex-justify-start` | `justify-content: flex-start` |
+| `.flex-justify-end` | `justify-content: flex-end` |
+| `.flex-justify-between` | `justify-content: space-between` |
+| `.flex-justify-around` | `justify-content: space-around` |
+
+Note any of the `flex-` classes must be used on a parent element that has `d-flex` applied to it.
+
## Vertical Alignment
| Classname | What it does |
diff --git a/docs/utilities/typography.md b/docs/utilities/typography.md
index 6b952a97..1c5dca98 100644
--- a/docs/utilities/typography.md
+++ b/docs/utilities/typography.md
@@ -144,3 +144,13 @@ Default line height
Default line height
{: .fh-default }
```
+
+## Text justification
+
+By default text is justified left. Use these `text-` classes to override settings:
+
+| Class | What it does |
+|:---------------|:---------------------|
+| `.text-left` | `text-align: left` |
+| `.text-right` | `text-align: right` |
+| `.text-center` | `text-align: center` |
--
GitLab