assets/sass/libs/_my-mixins.scss

   1 /// hide-visually mixin from Bourbon < https://bourbon.io >
   2 ///
   3 /// Hides an element visually while still allowing the content to be accessible
   4 /// to assistive technology, e.g. screen readers. Passing `unhide` will reverse
   5 /// the affects of the hiding, which is handy for showing the element on focus,
   6 /// for example.
   7 ///
   8 /// @link https://goo.gl/Vf1TGn
   9 ///
  10 /// @argument {string} $toggle [hide]
  11 ///   Accepts `hide` or `unhide`. `unhide` reverses the affects of `hide`.
  12 ///
  13 /// @example scss
  14 ///   .element {
  15 ///     @include hide-visually;
  16 ///
  17 ///     &:active,
  18 ///     &:focus {
  19 ///       @include hide-visually("unhide");
  20 ///     }
  21 ///   }
  22 ///
  23 ///   // CSS Output
  24 ///   .element {
  25 ///     border: 0;
  26 ///     clip: rect(1px, 1px, 1px, 1px);
  27 ///     clip-path: inset(100%);
  28 ///     height: 1px;
  29 ///     overflow: hidden;
  30 ///     padding: 0;
  31 ///     position: absolute;
  32 ///     width: 1px;
  33 ///   }
  34 ///
  35 ///   .hide-visually:active,
  36 ///   .hide-visually:focus {
  37 ///     clip: auto;
  38 ///     clip-path: none;
  39 ///     height: auto;
  40 ///     overflow: visible;
  41 ///     position: static;
  42 ///     width: auto;
  43 ///   }
  44 ///
  45 /// @since 5.0.0
  46
  47 @mixin hide-visually($toggle: "hide") {
  48   @if not index("hide" "unhide", $toggle) {
  49     @error "`#{$toggle}` is not a valid value for the `$toggle` argument in " +
  50       "the `hide-visually` mixin. Must be either `hide` or `unhide`.";
  51   } @else if $toggle == "hide" {
  52     border: 0;
  53     clip: rect(1px, 1px, 1px, 1px);
  54     clip-path: inset(100%);
  55     height: 1px;
  56     overflow: hidden;
  57     padding: 0;
  58     position: absolute;
  59     white-space: nowrap;
  60     width: 1px;
  61   } @else if $toggle == "unhide" {
  62     clip: auto;
  63     clip-path: none;
  64     height: auto;
  65     overflow: visible;
  66     position: static;
  67     white-space: inherit;
  68     width: auto;
  69   }
  70 }