assets/sass/libs/_my-mixins.scss

   1 /// Transforms shorthand that can range from 1-to-4 values to be 4 values.
   2 ///
   3 /// @argument {list} $shorthand
   4 ///
   5 /// @example scss
   6 ///   .element {
   7 ///     margin: _unpack-shorthand(1em 2em);
   8 ///   }
   9 ///
  10 ///   // CSS Output
  11 ///   .element {
  12 ///     margin: 1em 2em 1em 2em;
  13 ///   }
  14 ///
  15 /// @access private
  16
  17 @function _unpack-shorthand($shorthand) {
  18   @if length($shorthand) == 1 {
  19     @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1);
  20   } @else if length($shorthand) == 2 {
  21     @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);
  22   } @else if length($shorthand) == 3 {
  23     @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);
  24   } @else {
  25     @return $shorthand;
  26   }
  27 }
  28
  29 /// hide-visually mixin from Bourbon < https://bourbon.io >
  30 ///
  31 /// Hides an element visually while still allowing the content to be accessible
  32 /// to assistive technology, e.g. screen readers. Passing `unhide` will reverse
  33 /// the affects of the hiding, which is handy for showing the element on focus,
  34 /// for example.
  35 ///
  36 /// @link https://goo.gl/Vf1TGn
  37 ///
  38 /// @argument {string} $toggle [hide]
  39 ///   Accepts `hide` or `unhide`. `unhide` reverses the affects of `hide`.
  40 ///
  41 /// @example scss
  42 ///   .element {
  43 ///     @include hide-visually;
  44 ///
  45 ///     &:active,
  46 ///     &:focus {
  47 ///       @include hide-visually("unhide");
  48 ///     }
  49 ///   }
  50 ///
  51 ///   // CSS Output
  52 ///   .element {
  53 ///     border: 0;
  54 ///     clip: rect(1px, 1px, 1px, 1px);
  55 ///     clip-path: inset(100%);
  56 ///     height: 1px;
  57 ///     overflow: hidden;
  58 ///     padding: 0;
  59 ///     position: absolute;
  60 ///     width: 1px;
  61 ///   }
  62 ///
  63 ///   .hide-visually:active,
  64 ///   .hide-visually:focus {
  65 ///     clip: auto;
  66 ///     clip-path: none;
  67 ///     height: auto;
  68 ///     overflow: visible;
  69 ///     position: static;
  70 ///     width: auto;
  71 ///   }
  72 ///
  73 /// @since 5.0.0
  74
  75 @mixin hide-visually($toggle: "hide") {
  76   @if not index("hide" "unhide", $toggle) {
  77     @error "`#{$toggle}` is not a valid value for the `$toggle` argument in " +
  78       "the `hide-visually` mixin. Must be either `hide` or `unhide`.";
  79   } @else if $toggle == "hide" {
  80     border: 0;
  81     clip: rect(1px, 1px, 1px, 1px);
  82     clip-path: inset(100%);
  83     height: 1px;
  84     overflow: hidden;
  85     padding: 0;
  86     position: absolute;
  87     white-space: nowrap;
  88     width: 1px;
  89   } @else if $toggle == "unhide" {
  90     clip: auto;
  91     clip-path: none;
  92     height: auto;
  93     overflow: visible;
  94     position: static;
  95     white-space: inherit;
  96     width: auto;
  97   }
  98 }
  99
 100 /// Provides a concise, one-line method for setting an element’s positioning
 101 /// properties: `position`, `top`, `right`, `bottom` and `left`. Use a `null`
 102 /// value to “skip” an edge of the box.
 103 ///
 104 /// @argument {string} $position
 105 ///   A CSS position value.
 106 ///
 107 /// @argument {list} $box-edge-values
 108 ///   List of lengths; accepts CSS shorthand.
 109 ///
 110 /// @example scss
 111 ///   .element {
 112 ///     @include position(relative, 0 null null 10em);
 113 ///   }
 114 ///
 115 ///   // CSS Output
 116 ///   .element {
 117 ///     left: 10em;
 118 ///     position: relative;
 119 ///     top: 0;
 120 ///   }
 121 ///
 122 /// @example scss
 123 ///   .element {
 124 ///     @include position(absolute, 0);
 125 ///   }
 126 ///
 127 ///   // CSS Output
 128 ///   .element {
 129 ///     position: absolute;
 130 ///     top: 0;
 131 ///     right: 0;
 132 ///     bottom: 0;
 133 ///     left: 0;
 134 ///   }
 135 ///
 136 /// @require {function} _is-length
 137 ///
 138 /// @require {function} _unpack-shorthand
 139
 140 @mixin position(
 141   $position,
 142   $box-edge-values
 143 ) {
 144   $box-edge-values: _unpack-shorthand($box-edge-values);
 145   $offsets: (
 146     "top": nth($box-edge-values, 1),
 147     "right": nth($box-edge-values, 2),
 148     "bottom": nth($box-edge-values, 3),
 149     "left": nth($box-edge-values, 4),
 150   );
 151
 152   position: $position;
 153
 154   @each $offset, $value in $offsets {
 155     @if _is-length($value) {
 156       #{$offset}: $value;
 157     }
 158   }
 159 }
 160
 161 @mixin circle($size, $display) {
 162   width: $size;
 163   height: $size;
 164   display: $display;
 165   -webkit-border-radius: $size/2;
 166   -moz-border-radius: $size/2;
 167   border-radius: $size/2;
 168 }
 169
 170 // box-shadow
 171 // top and left are  the anchor point from where to start moving the shadow
 172 @mixin box-shadow($top, $left, $blur, $color, $inset: false) {
 173     @if unitless($top) or unitless($left) or unitless($blur) {
 174         $top: $top * 1px;
 175         $left: $left * 1px;
 176         $blur: $blur * 1px;
 177     }
 178     @if $inset {
 179         -webkit-box-shadow:inset $top $left $blur $color;
 180         -moz-box-shadow:inset $top $left $blur $color;
 181         box-shadow:inset $top $left $blur $color;
 182     } @else {
 183         -webkit-box-shadow: $top $left $blur $color;
 184         -moz-box-shadow: $top $left $blur $color;
 185         box-shadow: $top $left $blur $color;
 186     }
 187 }