diff options
| author | Jaume Sala <[email protected]> | 2020-09-21 04:42:41 +0200 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-09-20 19:42:41 -0700 |
| commit | 7bbfd439c9d647cdfc1c4ec3bef57911cddfb00d (patch) | |
| tree | b7698564c014829d2354df7af205446200b90182 /scss | |
| parent | 4e9a29e47ae776064b5afe931a347d61a4390451 (diff) | |
| download | bootstrap-7bbfd439c9d647cdfc1c4ec3bef57911cddfb00d.tar.xz bootstrap-7bbfd439c9d647cdfc1c4ec3bef57911cddfb00d.zip | |
Extra position utilities (#31280)
* Extra position utilities
Given that there are utilities for the *position* property, it seems logic to have utilities for the *top*, *left*, *bottom* and *right* propertires.
* Update extra position utilities
* add default position values map
* tweak examples
* add real life examples
* fix double colon
Co-authored-by: XhmikosR <[email protected]>
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_utilities.scss | 23 | ||||
| -rw-r--r-- | scss/_variables.scss | 11 |
2 files changed, 34 insertions, 0 deletions
diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 69615ec4e..e9a9b1e33 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -39,6 +39,29 @@ $utilities: map-merge( property: position, values: static relative absolute fixed sticky ), + "top": ( + property: top, + values: $position-values + ), + "bottom": ( + property: bottom, + values: $position-values + ), + "left": ( + property: left, + values: $position-values + ), + "right": ( + property: right, + values: $position-values + ), + "translate-middle": ( + property: transform, + class: translate-middle, + values: ( + null: (translateX(-50%) translateY(-50%)) + ) + ), "border": ( property: border, values: ( diff --git a/scss/_variables.scss b/scss/_variables.scss index bdf2d62a4..610a56962 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -246,6 +246,17 @@ $spacers: ( $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; +// Position +// +// Define the edge positioning anchors of the position utilities. + +$position-values: ( + 0: 0, + 50: 50%, + 100: 100% +) !default; + + // Body // // Settings for the `<body>` element. |