From d5b801a3e28b962c8fbac4796374d58d577e3b3b Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 24 Aug 2020 09:24:19 +0900 Subject: [PATCH 1/3] Make final position responsive --- src/utilities/layout.scss | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/utilities/layout.scss b/src/utilities/layout.scss index 1b4da950f3..7ce7e2233b 100644 --- a/src/utilities/layout.scss +++ b/src/utilities/layout.scss @@ -12,14 +12,15 @@ } } -/* Set top 0 */ -.top-0 { top: 0 !important; } -/* Set right 0 */ -.right-0 { right: 0 !important; } -/* Set bottom 0 */ -.bottom-0 { bottom: 0 !important; } -/* Set left 0 */ -.left-0 { left: 0 !important; } +/* Set final location to 0 */ +@each $breakpoint, $variant in $responsive-variants { + @include breakpoint($breakpoint) { + .top#{$variant}-0 { top: 0 !important; } + .right#{$variant}-0 { right: 0 !important; } + .bottom#{$variant}-0 { bottom: 0 !important; } + .left#{$variant}-0 { left: 0 !important; } + } +} /* Vertical align middle */ .v-align-middle { vertical-align: middle !important; } From 993d1a47e54bc694ddbed66f657dbf8f1a1bb153 Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 24 Aug 2020 09:41:12 +0900 Subject: [PATCH 2/3] Mentioned responsive final positions --- docs/content/utilities/layout.md | 46 +++++++++++++++++++------------- 1 file changed, 27 insertions(+), 19 deletions(-) diff --git a/docs/content/utilities/layout.md b/docs/content/utilities/layout.md index 6035a51993..92465d9e9a 100644 --- a/docs/content/utilities/layout.md +++ b/docs/content/utilities/layout.md @@ -227,6 +227,29 @@ Use `.height-full` to set height to 100%. ## Position Position utilities can be used to alter the default document flow. **Be careful when using positioning, it's often unnecessary and commonly misused.** +The position of an element depends on the content. Use `top-0`, `right-0`, `bottom-0`, and `left-0` to further specify an elements final position. + +```html live +
+
+ .top-0 .left-0 +
+
+ .top-0 .right-0 +
+
+ .bottom-0 .right-0 +
+
+ .bottom-0 .left-0 +
+
+``` + +Using the **responsive variants** (e.g. `.right-md-0`) can be helpful for positioning select menus, dropdowns, popovers etc. when the content gets shuffled around for certain responsive breakpoints. + +### Relative + Use `.position-relative` to create a new stacking context. _Note how the other elements are displayed as if "Two" were in its normal position and taking up space._ @@ -246,6 +269,8 @@ _Note how the other elements are displayed as if "Two" were in its normal positi ``` +### Absolute + Use `.position-absolute` to take elements out of the normal document flow. ```html live @@ -258,6 +283,8 @@ Use `.position-absolute` to take elements out of the normal document flow. ``` +### Fixed + Use `.position-fixed` to position an element relative to the viewport. **Be careful when using fixed positioning. It is tricky to use and can lead to unwanted side effects.** _Note: This example is shown in an `