summaryrefslogtreecommitdiffstats
path: root/debian/missing-sources/bourbon-neat/app/assets/stylesheets/grid/_shift.scss
diff options
context:
space:
mode:
Diffstat (limited to 'debian/missing-sources/bourbon-neat/app/assets/stylesheets/grid/_shift.scss')
-rw-r--r--debian/missing-sources/bourbon-neat/app/assets/stylesheets/grid/_shift.scss50
1 files changed, 50 insertions, 0 deletions
diff --git a/debian/missing-sources/bourbon-neat/app/assets/stylesheets/grid/_shift.scss b/debian/missing-sources/bourbon-neat/app/assets/stylesheets/grid/_shift.scss
new file mode 100644
index 0000000..c0f24cd
--- /dev/null
+++ b/debian/missing-sources/bourbon-neat/app/assets/stylesheets/grid/_shift.scss
@@ -0,0 +1,50 @@
+@charset "UTF-8";
+
+/// Translates an element horizontally by a number of columns. Positive arguments shift the element to the active layout direction, while negative ones shift it to the opposite direction.
+///
+/// @param {Number (unitless)} $n-columns [1]
+/// Number of columns by which the element shifts.
+///
+/// @example scss - Usage
+/// .element {
+/// @include shift(-3);
+/// }
+///
+/// @example css - CSS output
+/// .element {
+/// margin-left: -25.58941%;
+/// }
+
+@mixin shift($n-columns: 1) {
+ @include shift-in-context($n-columns);
+}
+
+/// Translates an element horizontally by a number of columns, in a specific nesting context.
+///
+/// @param {List} $shift
+/// A list containing the number of columns to shift (`$columns`) and the number of columns of the parent element (`$container-columns`).
+///
+/// The two values can be separated with any string such as `of`, `/`, etc.
+///
+/// @example scss - Usage
+/// .element {
+/// @include shift(-3 of 6);
+/// }
+///
+/// @example css - CSS output
+/// .element {
+/// margin-left: -52.41458%;
+/// }
+
+@mixin shift-in-context($shift: $columns of $container-columns) {
+ $n-columns: nth($shift, 1);
+ $parent-columns: container-shift($shift) !global;
+
+ $direction: get-direction($layout-direction, $default-layout-direction);
+ $opposite-direction: get-opposite-direction($direction);
+
+ margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns);
+
+ // Reset nesting context
+ $parent-columns: $grid-columns !global;
+}