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

   1 // Foundation for Apps ALPHA
   2 // by ZURB
   3 // foundation.zurb.com
   4 // Licensed under MIT Open Source
   5
   6 $include-css: () !default;
   7 $modules: () !default;
   8 $rem-base: 16px !default;
   9
  10 /// Checks if a module is in use.
  11 @function using($name) {
  12   // Import from global scope
  13   $include-css: $include-css !global;
  14   $module-key: map-get($include-css, $name);
  15
  16   @if $module-key == true or $module-key == null {
  17     @return true;
  18   }
  19   @else {
  20     @return false;
  21   }
  22 }
  23
  24 /// Checks if a module's CSS has already been exported.
  25 @function imported($name) {
  26   // Import from global scope
  27   $modules: $modules !global;
  28   // Check if the module is already on the imported list
  29   @if type-of(index($modules, $name)) == 'number' {
  30     @return true;
  31   }
  32   @else {
  33     @return false;
  34   }
  35 }
  36
  37 /// Outputs the chunk of content passed if component $name hasn't yet been output.
  38 /// This prevents code duplication by keeping track of which components have already been output.
  39 ///
  40 /// @param {string} $name - Name of component to output
  41 ///
  42 /// @output The content passed, if the component has not yet been exported.
  43 @mixin exports($name) {
  44   // Check if the module has already been imported
  45   @if not(imported($name)) {
  46     // Check if the module should be used
  47     @if using($name) {
  48       $modules: append($modules, $name) !global;
  49       @content;
  50     }
  51   }
  52 }
  53
  54 /// Map Serialize
  55 /// Converts a Sass map to a URL-encoded string, like this: `key1=value1&key2=value2`. We use this function to encode the media queries in the `$breakpoints` variable, so it can be transferred to our JavaScript for use there.
  56 ///
  57 /// @param {map} $map - Map to convert.
  58 ///
  59 /// @return A string with a map converted to a string.
  60 @function map-serialize($map) {
  61   $str: '';
  62   @each $key, $value in $map {
  63     $str: $str + $key + '=' + $value + '&';
  64   }
  65   $str: str-slice($str, 1, -2);
  66
  67   @return $str;
  68 }
  69
  70 /// Map Next
  71 /// Find the next key in a map.
  72 ///
  73 /// @param {map} $map - Map to traverse.
  74 /// @param {mixed} $key - Key to use as a starting point.
  75 ///
  76 /// @return The value for the key after `$key` if `$key` was found. If `$key` was not found, or `$key` was the last value in the map, returns null.
  77 @function map-next($map, $key) {
  78   // Store the values of the map as a list, so we can access them with nth
  79   $values: map-values($map);
  80
  81   // Ghetto for loop
  82   $i: 1;
  83   $found: false;
  84   @each $val in map-keys($map) {
  85     @if $found == false {
  86       @if ($key == $val) {
  87         $found: true;
  88       }
  89       $i: $i + 1;
  90     }
  91   }
  92
  93   // If the key doesn't exist, or it's the last key in the map, return null
  94   @if $i > length($map) {
  95     @return null;
  96   }
  97   // Otherwise return the value
  98   @else {
  99     @return nth($values, $i);
 100   }
 101 }
 102
 103 /// Is It Light?
 104 /// Checks the lightness of $color, and if it passes the $threshold of lightness, it returns the `$yes` color. Otherwise, it returns the `$no` color. Use this function to dynamically output a foreground color based on a given background color.
 105 ///
 106 /// @param {color} $color - Color to check the lightness of.
 107 /// @param {color} $yes - Color to return if $color is light.
 108 /// @param {color} $no - Color to return if $color is dark.
 109 /// @param {percentage} $threshold - Threshold of lightness to check against.
 110 ///
 111 /// @return The $yes color or $no color.
 112 @function isitlight($color, $yes: #000, $no: #fff, $threshold: 60%) {
 113   @if (lightness($color) > $threshold) {
 114     @return $yes;
 115   }
 116   @else {
 117     @return $no;
 118   }
 119 }
 120
 121 /// Smart Scale
 122 /// Scales a color to be lighter if it's light, or darker if it's dark. Use this function to "fade" a color appropriate to its lightness.
 123 ///
 124 /// @param {color} $color - Color to scale.
 125 /// @param {percentage} $scale - Amount to scale up or down.
 126 /// @param {percentage} $threshold - Threshold of lightness to check against.
 127 ///
 128 /// @return A scaled color.
 129 @function smartscale($color, $scale: 5%, $threshold: 60%) {
 130   @if lightness($color) > $threshold {
 131     $scale: -$scale;
 132   }
 133   @return scale-color($color, $lightness: $scale);
 134 }
 135
 136 /// Has Value
 137 /// Returns true if a value is not 0, null, or none. Use this function to check for values like `border: 0` or `box-shadow: none`.
 138 ///
 139 /// @param $val - Value to check.
 140 ///
 141 /// @return True if `$val` is not 0, null, or none.
 142 @function hasvalue($val) {
 143   @if $val == null or $val == none {
 144     @return false;
 145   }
 146   @if type-of($val) == 'number' and strip-unit($val) == 0 {
 147     @return false;
 148   }
 149   @return true;
 150 }
 151
 152 /// Get Side
 153 /// Determine a top/right/bottom/right value on a padding, margin, etc. property, no matter how many values were passed in. Use this function if you need to know the specific side of a value, but don't know if the value is using shorthand.
 154 ///
 155 /// @param {list|number} $val - Value to analyze. Should be a shorthand sizing property, e.g. "1em 2em 1em"
 156 /// @param {keyword} $side - Side to return. Should be top, right, bottom, or left.
 157 ///
 158 /// @return A single value based on `$val` and `$side`.
 159 @function get-side($val, $side) {
 160   $length: length($val);
 161
 162   @if $length == 1 {
 163     @return $val;
 164   }
 165   @if $length == 2 {
 166     @return map-get((
 167       top: nth($val, 1),
 168       bottom: nth($val, 1),
 169       left: nth($val, 2),
 170       right: nth($val, 2),
 171     ), $side);
 172   }
 173   @if $length == 3 {
 174     @return map-get((
 175       top: nth($val, 1),
 176       left: nth($val, 2),
 177       right: nth($val, 2),
 178       bottom: nth($val, 3),
 179     ), $side);
 180   }
 181   @if $length == 4 {
 182     @return map-get((
 183       top: nth($val, 1),
 184       right: nth($val, 2),
 185       bottom: nth($val, 3),
 186       left: nth($val, 4),
 187     ), $side);
 188   }
 189 }
 190
 191 /// Get Border Value
 192 /// Given border $val, find a specific element of the border, which is $elem. The possible values for $elem are width, style, and color.
 193 ///
 194 /// @param {list} $val - Border value to find a value in.
 195 /// @param {keyword} $elem - Border component to extract.
 196 ///
 197 /// @param If the value exists, returns the value. If the value is not in the border definition, the function will return a 0px width, solid style, or black border.
 198  @function get-border-value($val, $elem) {
 199    // Find the width, style, or color and return it
 200    @each $v in $val {
 201      $type: type-of($v);
 202      @if $elem == width and $type == 'number' {
 203        @return $v;
 204      }
 205      @if $elem == style and $type == 'string' {
 206        @return $v;
 207      }
 208      @if $elem == color and $type == 'color' {
 209        @return $v;
 210      }
 211    }
 212
 213    // Defaults
 214    $defaults: (
 215      width: 0,
 216      style: solid,
 217      color: black,
 218    );
 219    @return map-get($defaults, $elem);
 220  }
 221
 222 /// Get Shadow Value
 223 /// Given shadow value $val, find a specific element of the shadow, which is $elem. The possible values for $elem are x, y, size, spread, color, and inset.
 224 ///
 225 /// @param {list} $val - Shadow value to find a value in.
 226 /// @param {keyword} $elem - Shadow component to extract.
 227 ///
 228 /// @return If the value exists, returns the value. If the value is not set, returns false. If `$elem` is "inset", returns true, otherwise false.
 229 @function get-shadow-value($val, $elem) {
 230   // Return "none" if there's no shadow
 231   @if $val == none {
 232     @return none;
 233   }
 234
 235   // Inset and color are always at the beginning and end
 236   @if $elem == inset {
 237     @return nth($val, 1) == inset;
 238   }
 239   @if $elem == color {
 240     @if type-of(nth($val, -1)) == color {
 241       @return nth($val, -1);
 242     }
 243     @else {
 244       @return black;
 245     }
 246   }
 247
 248   // The rest of the values are located perilously in the middle
 249   $values: ();
 250   @each $v in $val {
 251     @if type-of($v) == 'number' {
 252       $values: append($values, $v);
 253     }
 254   }
 255   @if $elem == x {
 256     @if length($values) >= 1 {
 257       @return nth($values, 1);
 258     }
 259     @else {
 260       @return 0;
 261     }
 262   }
 263   @else if $elem == y {
 264     @if length($values) >= 2 {
 265       @return nth($values, 2);
 266     }
 267     @else {
 268       @return 0;
 269     }
 270   }
 271   @else if $elem == size {
 272     @if length($values) >= 3 {
 273       @return nth($values, 3);
 274     }
 275     @else {
 276       @return 0;
 277     }
 278   }
 279   @else if $elem == spread {
 280     @if length($values) >= 4 {
 281       @return nth($values, 4);
 282     }
 283     @else {
 284       @return 0;
 285     }
 286   }
 287   @else {
 288     @return false;
 289   }
 290 }
 291
 292 /// Strip Unit
 293 /// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
 294 ///
 295 /// @param {number} $num - Number to strip unit from.
 296 ///
 297 /// @return The same number, sans unit.
 298 @function strip-unit($num) {
 299   @return $num / ($num * 0 + 1);
 300 }
 301
 302 /// Turn to Degrees
 303 /// Converts a turn unit to the equivalent unit in degrees. 1turn is equal to 360 degrees. Not all browsers support turn, so this function allows us to use turns while outputting a value that all browsers understand.
 304 ///
 305 /// @param {number} $value - Turn value to convert.
 306 ///
 307 /// @return The same value, but in degrees.
 308 @function turn-to-deg($value) {
 309   @return strip-unit($value) * 360deg;
 310 }
 311
 312 /// Convert to Rem
 313 /// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$rem-base` variable.
 314 ///
 315 /// @param {number} $value - Pixel value to convert.
 316 ///
 317 /// @return A number in rems, calculated based on the given value and the base pixel value.
 318 @function convert-to-rem($value, $base-value: $rem-base)  {
 319   $value: strip-unit($value) / strip-unit($base-value) * 1rem;
 320   @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
 321   @return $value;
 322 }
 323
 324 /// Rem Calculator
 325 /// Converts one or more pixel values into matching rem values. This function works a lot like `convert-to-rem`, except it can convert more than one value at once, which is useful when setting multiple values on a `margin` or `padding` property.
 326 ///
 327 /// @param {number|list} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.
 328 ///
 329 /// @return A list of converted values.
 330 @function rem-calc($values, $base-value: null) {
 331   @if $base-value == null {
 332     $base-value: $rem-base;
 333   }
 334   $max: length($values);
 335
 336   @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }
 337
 338   $remValues: ();
 339   @for $i from 1 through $max {
 340     $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
 341   }
 342   @return $remValues;
 343 }