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

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