X-Git-Url: https://git.danix.xyz/?a=blobdiff_plain;f=assets%2Fsass%2Flibs%2F_my-mixins.scss;h=dc5210903920b10816610fba066e9e3735124af8;hb=ca7530825d1ff39bb77947934ef24187a9590fcf;hp=5e078e4ab1e910a5a73795cd45007ce2425c1b22;hpb=748286b530a4b000cac6b88bbcebb258056a9e77;p=theme-danix.xyz.git

diff --git a/assets/sass/libs/_my-mixins.scss b/assets/sass/libs/_my-mixins.scss
index 5e078e4..dc52109 100644
--- a/assets/sass/libs/_my-mixins.scss
+++ b/assets/sass/libs/_my-mixins.scss
@@ -1,3 +1,31 @@
+/// Transforms shorthand that can range from 1-to-4 values to be 4 values.
+///
+/// @argument {list} $shorthand
+///
+/// @example scss
+///   .element {
+///     margin: _unpack-shorthand(1em 2em);
+///   }
+///
+///   // CSS Output
+///   .element {
+///     margin: 1em 2em 1em 2em;
+///   }
+///
+/// @access private
+
+@function _unpack-shorthand($shorthand) {
+  @if length($shorthand) == 1 {
+    @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1);
+  } @else if length($shorthand) == 2 {
+    @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);
+  } @else if length($shorthand) == 3 {
+    @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);
+  } @else {
+    @return $shorthand;
+  }
+}
+
 /// hide-visually mixin from Bourbon < https://bourbon.io >
 /// 
 /// Hides an element visually while still allowing the content to be accessible
@@ -68,3 +96,92 @@
     width: auto;
   }
 }
+
+/// Provides a concise, one-line method for setting an element’s positioning
+/// properties: `position`, `top`, `right`, `bottom` and `left`. Use a `null`
+/// value to “skip” an edge of the box.
+///
+/// @argument {string} $position
+///   A CSS position value.
+///
+/// @argument {list} $box-edge-values
+///   List of lengths; accepts CSS shorthand.
+///
+/// @example scss
+///   .element {
+///     @include position(relative, 0 null null 10em);
+///   }
+///
+///   // CSS Output
+///   .element {
+///     left: 10em;
+///     position: relative;
+///     top: 0;
+///   }
+///
+/// @example scss
+///   .element {
+///     @include position(absolute, 0);
+///   }
+///
+///   // CSS Output
+///   .element {
+///     position: absolute;
+///     top: 0;
+///     right: 0;
+///     bottom: 0;
+///     left: 0;
+///   }
+///
+/// @require {function} _is-length
+///
+/// @require {function} _unpack-shorthand
+
+@mixin position(
+  $position,
+  $box-edge-values
+) {
+  $box-edge-values: _unpack-shorthand($box-edge-values);
+  $offsets: (
+    "top": nth($box-edge-values, 1),
+    "right": nth($box-edge-values, 2),
+    "bottom": nth($box-edge-values, 3),
+    "left": nth($box-edge-values, 4),
+  );
+
+  position: $position;
+
+  @each $offset, $value in $offsets {
+    @if _is-length($value) {
+      #{$offset}: $value;
+    }
+  }
+}
+
+@mixin circle($size, $display) {
+  width: $size;
+  height: $size;
+  display: $display;
+  -webkit-border-radius: $size/2;
+  -moz-border-radius: $size/2;
+  border-radius: $size/2;
+}
+
+// box-shadow
+// top and left are  the anchor point from where to start moving the shadow
+@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
+    @if unitless($top) or unitless($left) or unitless($blur) {
+        $top: $top * 1px;
+        $left: $left * 1px;
+        $blur: $blur * 1px;
+    }
+    @if $inset {
+        -webkit-box-shadow:inset $top $left $blur $color;
+        -moz-box-shadow:inset $top $left $blur $color;
+        box-shadow:inset $top $left $blur $color;
+    } @else {
+        -webkit-box-shadow: $top $left $blur $color;
+        -moz-box-shadow: $top $left $blur $color;
+        box-shadow: $top $left $blur $color;
+    }
+}