From 7bbfd439c9d647cdfc1c4ec3bef57911cddfb00d Mon Sep 17 00:00:00 2001 From: Jaume Sala Date: Mon, 21 Sep 2020 04:42:41 +0200 Subject: 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 --- scss/_utilities.scss | 23 +++++++++++++++++++++++ scss/_variables.scss | 11 +++++++++++ 2 files changed, 34 insertions(+) (limited to 'scss') 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 `` element. -- cgit v1.2.3