+/// 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
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;
+ }
+}
