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

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