afb-client/bower_components/foundation-apps/scss/components/_utilities.scss

   1 /*
   2   UTILITIES
   3   ---------
   4
   5   Responsive helper classes to assist you in quickly doing basic formatting and layout.
   6
   7   Features:
   8    - Vertical alignment
   9    - Visibility
  10    - Text alignment
  11    - Floating
  12 */
  13
  14 $block-selector: '[class*="grid-block"]';
  15
  16 @mixin show-for($size, $prop: block) {
  17   &:not(.ng-hide) {
  18     display: none !important;
  19     @include breakpoint($size) {
  20       display: $prop !important;
  21     }
  22   }
  23 }
  24
  25 @mixin show-for-only($size, $prop: block) {
  26   &:not(.ng-hide) {
  27     display: none !important;
  28     @include breakpoint($size only) {
  29       display: $prop !important;
  30     }
  31   }
  32 }
  33
  34 @mixin hide-for($size, $prop: block) {
  35   &:not(.ng-hide) {
  36     display: $prop !important;
  37     @include breakpoint($size) {
  38       display: none !important;
  39     }
  40   }
  41 }
  42
  43 @mixin hide-for-only($size, $prop: block) {
  44   &:not(.ng-hide) {
  45     display: $prop !important;
  46     @include breakpoint($size only) {
  47       display: none !important;
  48     }
  49   }
  50 }
  51
  52 @include exports(utilities) {
  53   // Vertical alignment
  54   .v-align {
  55     display: flex;
  56     align-items: center;
  57     justify-content: space-between;
  58
  59     $align-values: (
  60       'top': flex-start,
  61       'center': center,
  62       'bottom': flex-end,
  63     );
  64
  65     @each $orient in (top, center, bottom) {
  66       .align-#{$orient} {
  67         align-self: map-get($align-values, $orient);
  68       }
  69     }
  70
  71     @each $size in $breakpoint-classes {
  72       @each $orient in (top, center, bottom) {
  73         @include breakpoint($size) {
  74           .#{$size}-align-#{$orient} {
  75             align-self: map-get($align-values, $orient);
  76           }
  77         }
  78       }
  79     }
  80   }
  81
  82   // Visibility
  83   .hide { display: none !important; }
  84
  85   .invisible { visibility: hidden; }
  86
  87   @each $size in $breakpoint-classes {
  88     .hide-for-#{$size} {
  89       @include hide-for($size);
  90       &#{$block-selector} { @include hide-for($size, flex); }
  91     }
  92
  93     .show-for-#{$size} {
  94       @include show-for($size);
  95       &#{$block-selector} { @include show-for($size, flex); }
  96     }
  97
  98     .hide-for-#{$size}-only {
  99       @include hide-for-only($size);
 100       &#{$block-selector} { @include hide-for-only($size, flex); }
 101     }
 102
 103     .show-for-#{$size}-only {
 104       @include show-for-only($size);
 105       &#{$block-selector} { @include show-for-only($size, flex); }
 106     }
 107   }
 108
 109   @each $orientation in (portrait, landscape) {
 110     .hide-for-#{$orientation} {
 111       @include breakpoint($orientation) {
 112         display: none !important;
 113         &#{$block-selector} { display: flex !important; }
 114       }
 115     }
 116
 117     .show-for-#{$orientation} {
 118       display: none !important;
 119
 120       @include breakpoint($orientation) {
 121         display: block !important;
 122         &#{$block-selector} { display: flex !important; }
 123       }
 124     }
 125   }
 126
 127   /*
 128     Text alignment
 129   */
 130   @each $align in (left, right, center, justify) {
 131     .text-#{$align} {
 132       text-align: $align;
 133     }
 134
 135     @each $size in $breakpoint-classes {
 136       @include breakpoint($size) {
 137         .#{$size}-text-#{$align} {
 138           text-align: $align;
 139         }
 140       }
 141
 142       @include breakpoint($size only) {
 143         .#{$size}-only-text-#{$align} {
 144           text-align: $align;
 145         }
 146       }
 147     }
 148   }
 149
 150   /*
 151     Floating
 152   */
 153   .clearfix { @include clearfix; }
 154
 155   @each $float in (left, right, none) {
 156     .float-#{$float} {
 157       float: #{$float};
 158     }
 159   }
 160 }