| 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 | } |