afb-client/bower_components/foundation-apps/scss/helpers/_mixins.scss

   1 // Foundation for Apps
   2 //
   3 // Mixins
   4 // ------
   5 // The framework comes with a number of mixins that help you easily create common small components,
   6 // like triangles and menu icons.
   7
   8 /// CSS Triangle
   9 /// Creates a CSS triangle, which can be used for dropdown arrows, popup tails, and more. Use this mixin inside a `&::before` or `&::after` selector, to attach the triangle to an existing element.
  10 ///
  11 /// @param {number} $triangle-size - Width of the triangle.
  12 /// @param {color} $triangle-color - Color of the triangle.
  13 /// @param {keyword} $triangle-direction - Direction the triangle points. Can be `top`, `right`, `bottom`, or `left`.
  14 @mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
  15   content: "";
  16   display: block;
  17   width: 0;
  18   height: 0;
  19   border: inset $triangle-size;
  20   @if ($triangle-direction == top) {
  21     border-color: $triangle-color transparent transparent transparent;
  22     border-top-style: solid;
  23   }
  24   @if ($triangle-direction == bottom) {
  25     border-color: transparent transparent $triangle-color transparent;
  26     border-bottom-style: solid;
  27   }
  28   @if ($triangle-direction == left) {
  29     border-color: transparent transparent transparent $triangle-color;
  30     border-left-style: solid;
  31   }
  32   @if ($triangle-direction == right) {
  33     border-color: transparent $triangle-color transparent transparent;
  34     border-right-style: solid;
  35   }
  36 }
  37
  38 // @mixins
  39 //
  40 /// Hamburger
  41 /// Creates a three-line menu icon, affectionately referred to as the "hamburger icon".
  42 ///
  43 /// @param {number} $width - Width of the icon, in rem units.
  44 /// @param {number|boolean} $left - Left offset of the icon. Set to `false` to center the icon horizontally.
  45 /// @param {number|boolean} $top - Top offset of the icon. Set to `false` to center the icon vertically.
  46 /// @param {number} $thickness - Height of each line in the icon.
  47 /// @param {number} $gap - Amount of space between each line.
  48 /// @param {color} $color - Color of the lines.
  49 /// @param {color} $hover-color - Color of the lines on hover.
  50 @mixin hamburger($width, $left, $top, $thickness, $gap, $color, $hover-color, $offcanvas) {
  51   span::after {
  52     content: "";
  53     position: absolute;
  54     display: block;
  55     height: 0;
  56
  57     @if $offcanvas {
  58       @if $top {
  59         top: $top;
  60       }
  61       @else {
  62         top: 50%;
  63         margin-top: -$width/2;
  64       }
  65       @if $left {
  66         left: $left;
  67       }
  68       @else {
  69         left: ($tabbar-menu-icon-width - $width)/2;
  70       }
  71     }
  72     @else {
  73       top: 50%;
  74       margin-top: -$width/2;
  75       #{$opposite-direction}: $topbar-link-padding;
  76     }
  77
  78     box-shadow:
  79       0 0px 0 $thickness $color,
  80       0 $gap + $thickness 0 $thickness $color,
  81       0 (2 * $gap + 2*$thickness) 0 $thickness $color;
  82     width: $width;
  83   }
  84   span:hover:after {
  85     box-shadow:
  86       0 0px 0 $thickness $hover-color,
  87       0 $gap + $thickness 0 $thickness $hover-color,
  88       0 (2 * $gap + 2*$thickness) 0 $thickness $hover-color;
  89   }
  90 }
  91
  92 /// Clearfix
  93 /// Uses the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height.
  94 ///
  95 /// @see http://nicolasgallagher.com/micro-clearfix-hack/
  96 @mixin clearfix {
  97   &:before, &:after { content: " "; display: table; }
  98   &:after { clear: both; }
  99 }
 100
 101 /// Invisible Element
 102 /// Makes an element visually hidden, but accessible.
 103 ///
 104 /// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 105 @mixin element-invisible {
 106   position: absolute !important;
 107   height: 1px;
 108   width: 1px;
 109   overflow: hidden;
 110   clip: rect(1px, 1px, 1px, 1px);
 111 }
 112
 113 /// Invisible Element Off
 114 /// Reverses the CSS output by the `element-invisible()` mixin.
 115 @mixin element-invisible-off {
 116   position: static !important;
 117   height: auto;
 118   width: auto;
 119   overflow: visible;
 120   clip: auto;
 121 }
 122
 123 $text-input-selectors: 'input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea';