New position utils, split docs

- Renames .pos-f-t to .fixed-top, adds .fixed-bottom and .sticky-top
- Updates utilities Sass to be split across more files (one for position, sizing, and spacing)

5 files changed, 35 insertions, 21 deletions

diff --git a/docs/utilities/sizing-and-positioning.md b/docs/utilities/sizing.md
index a6de778ca..a6de778ca 100644
--- a/docs/utilities/sizing-and-positioning.md
+++ b/docs/utilities/sizing.md
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index c63e50600..7d08ff2f8 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -5,7 +5,9 @@
 @import "utilities/display";
 @import "utilities/flex";
 @import "utilities/float";
+@import "utilities/position";
 @import "utilities/screenreaders";
+@import "utilities/sizing";
 @import "utilities/spacing";
 @import "utilities/text";
 @import "utilities/visibility";
diff --git a/scss/utilities/_position.scss b/scss/utilities/_position.scss
new file mode 100644
index 000000000..2cf08bfa0
--- /dev/null
+++ b/scss/utilities/_position.scss
@@ -0,0 +1,23 @@
+// Positioning
+
+.fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: $zindex-fixed;
+}
+
+.fixed-bottom {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $zindex-fixed;
+}
+
+.sticky-top {
+  position: sticky;
+  top: 0;
+  z-index: $zindex-sticky;
+}
diff --git a/scss/utilities/_sizing.scss b/scss/utilities/_sizing.scss
new file mode 100644
index 000000000..a7dc3e49b
--- /dev/null
+++ b/scss/utilities/_sizing.scss
@@ -0,0 +1,10 @@
+// Width and height
+
+@each $prop, $abbrev in (width: w, height: h) {
+  @each $size, $length in $sizes {
+    .#{$abbrev}-#{$size} { #{$prop}: $length !important; }
+  }
+}
+
+.mw-100 { max-width: 100% !important; }
+.mh-100 { max-height: 100% !important; }
diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss
index 208212d52..6056e2b7e 100644
--- a/scss/utilities/_spacing.scss
+++ b/scss/utilities/_spacing.scss
@@ -1,14 +1,3 @@
-// Width and height
-
-@each $prop, $abbrev in (width: w, height: h) {
-  @each $size, $length in $sizes {
-    .#{$abbrev}-#{$size} { #{$prop}: $length !important; }
-  }
-}
-
-.mw-100 { max-width: 100% !important; }
-.mh-100 { max-height: 100% !important; }
-
 // Margin and Padding
 
 @each $breakpoint in map-keys($grid-breakpoints) {
@@ -52,13 +41,3 @@
     }
   }
 }
-
-// Positioning
-
-.pos-f-t {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: $zindex-navbar-fixed;
-}