Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make final position responsive #1145

Merged
merged 3 commits into from
Sep 10, 2020
Merged

Make final position responsive #1145

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d5b801a
Make final position responsive
simurai Aug 24, 2020
993d1a4
Mentioned responsive final positions
simurai Aug 24, 2020
789bd1a
Add option to reset final position -> right-md-auto
simurai Sep 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 27 additions & 19 deletions docs/content/utilities/layout.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<div style="height: 64px;">
<div class="border position-absolute top-0 left-0">
.top-0 .left-0
</div>
<div class="border position-absolute top-0 right-0">
.top-0 .right-0
</div>
<div class="border position-absolute bottom-0 right-0">
.bottom-0 .right-0
</div>
<div class="border position-absolute bottom-0 left-0">
.bottom-0 .left-0
</div>
</div>
```

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._
Expand All @@ -246,6 +269,8 @@ _Note how the other elements are displayed as if "Two" were in its normal positi
</div>
```

### Absolute

Use `.position-absolute` to take elements out of the normal document flow.

```html live
Expand All @@ -258,6 +283,8 @@ Use `.position-absolute` to take elements out of the normal document flow.
</div>
```

### 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 `<iframe>` and therefore will not be positioned to the viewport of this page._
Expand All @@ -270,25 +297,6 @@ _Note: This example is shown in an `<iframe>` and therefore will not be position
</div>
```

Use `top-0`, `right-0`, `bottom-0`, and `left-0` with `position-absolute`, `position-fixed`, or `position-relative` to further specify an elements position.

```html live
<div style="height: 64px;">
<div class="border position-absolute top-0 left-0">
.top-0 .left-0
</div>
<div class="border position-absolute top-0 right-0">
.top-0 .right-0
</div>
<div class="border position-absolute bottom-0 right-0">
.bottom-0 .right-0
</div>
<div class="border position-absolute bottom-0 left-0">
.bottom-0 .left-0
</div>
</div>
```

To fill an entire width or height, use opposing directions.

_Note: fixed positioning has been disabled here for demonstration only._
Expand Down
17 changes: 9 additions & 8 deletions src/utilities/layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand Down