summaryrefslogtreecommitdiffstats
path: root/afm-client/bower_components/foundation-apps/scss/helpers/_functions.scss
blob: 1d2379341f8023c72880dcdeafa07c33f75f8ca5 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
// Foundation for Apps ALPHA
// by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

$include-css: () !default;
$modules: () !default;
$rem-base: 16px !default;

/// Checks if a module is in use.
@function using($name) {
  // Import from global scope
  $include-css: $include-css !global;
  $module-key: map-get($include-css, $name);

  @if $module-key == true or $module-key == null {
    @return true;
  }
  @else {
    @return false;
  }
}

/// Checks if a module's CSS has already been exported.
@function imported($name) {
  // Import from global scope
  $modules: $modules !global;
  // Check if the module is already on the imported list
  @if type-of(index($modules, $name)) == 'number' {
    @return true;
  }
  @else {
    @return false;
  }
}

/// Outputs the chunk of content passed if component $name hasn't yet been output.
/// This prevents code duplication by keeping track of which components have already been output.
///
/// @param {string} $name - Name of component to output
///
/// @output The content passed, if the component has not yet been exported.
@mixin exports($name) {
  // Check if the module has already been imported
  @if not(imported($name)) {
    // Check if the module should be used
    @if using($name) {
      $modules: append($modules, $name) !global;
      @content;
    }
  }
}

/// Map Serialize
/// 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.
///
/// @param {map} $map - Map to convert.
///
/// @return A string with a map converted to a string.
@function map-serialize($map) {
  $str: '';
  @each $key, $value in $map {
    $str: $str + $key + '=' + $value + '&';
  }
  $str: str-slice($str, 1, -2);

  @return $str;
}

/// Map Next
/// Find the next key in a map.
///
/// @param {map} $map - Map to traverse.
/// @param {mixed} $key - Key to use as a starting point.
///
/// @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.
@function map-next($map, $key) {
  // Store the values of the map as a list, so we can access them with nth
  $values: map-values($map);

  // Ghetto for loop
  $i: 1;
  $found: false;
  @each $val in map-keys($map) {
    @if $found == false {
      @if ($key == $val) {
        $found: true;
      }
      $i: $i + 1;
    }
  }

  // If the key doesn't exist, or it's the last key in the map, return null
  @if $i > length($map) {
    @return null;
  }
  // Otherwise return the value
  @else {
    @return nth($values, $i);
  }
}

/// Is It Light?
/// 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.
///
/// @param {color} $color - Color to check the lightness of.
/// @param {color} $yes - Color to return if $color is light.
/// @param {color} $no - Color to return if $color is dark.
/// @param {percentage} $threshold - Threshold of lightness to check against.
///
/// @return The $yes color or $no color.
@function isitlight($color, $yes: #000, $no: #fff, $threshold: 60%) {
  @if (lightness($color) > $threshold) {
    @return $yes;
  }
  @else {
    @return $no;
  }
}

/// Smart Scale
/// 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.
///
/// @param {color} $color - Color to scale.
/// @param {percentage} $scale - Amount to scale up or down.
/// @param {percentage} $threshold - Threshold of lightness to check against.
///
/// @return A scaled color.
@function smartscale($color, $scale: 5%, $threshold: 60%) {
  @if lightness($color) > $threshold {
    $scale: -$scale;
  }
  @return scale-color($color, $lightness: $scale);
}

/// Has Value
/// 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`.
///
/// @param $val - Value to check.
///
/// @return True if `$val` is not 0, null, or none.
@function hasvalue($val) {
  @if $val == null or $val == none {
    @return false;
  }
  @if type-of($val) == 'number' and strip-unit($val) == 0 {
    @return false;
  }
  @return true;
}

/// Get Side
/// 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.
///
/// @param {list|number} $val - Value to analyze. Should be a shorthand sizing property, e.g. "1em 2em 1em"
/// @param {keyword} $side - Side to return. Should be top, right, bottom, or left.
///
/// @return A single value based on `$val` and `$side`.
@function get-side($val, $side) {
  $length: length($val);

  @if $length == 1 {
    @return $val;
  }
  @if $length == 2 {
    @return map-get((
      top: nth($val, 1),
      bottom: nth($val, 1),
      left: nth($val, 2),
      right: nth($val, 2),
    ), $side);
  }
  @if $length == 3 {
    @return map-get((
      top: nth($val, 1),
      left: nth($val, 2),
      right: nth($val, 2),
      bottom: nth($val, 3),
    ), $side);
  }
  @if $length == 4 {
    @return map-get((
      top: nth($val, 1),
      right: nth($val, 2),
      bottom: nth($val, 3),
      left: nth($val, 4),
    ), $side);
  }
}

/// Get Border Value
/// Given border $val, find a specific element of the border, which is $elem. The possible values for $elem are width, style, and color.
///
/// @param {list} $val - Border value to find a value in.
/// @param {keyword} $elem - Border component to extract.
///
/// @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.
 @function get-border-value($val, $elem) {
   // Find the width, style, or color and return it
   @each $v in $val {
     $type: type-of($v);
     @if $elem == width and $type == 'number' {
       @return $v;
     }
     @if $elem == style and $type == 'string' {
       @return $v;
     }
     @if $elem == color and $type == 'color' {
       @return $v;
     }
   }

   // Defaults
   $defaults: (
     width: 0,
     style: solid,
     color: black,
   );
   @return map-get($defaults, $elem);
 }

/// Get Shadow Value
/// 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.
///
/// @param {list} $val - Shadow value to find a value in.
/// @param {keyword} $elem - Shadow component to extract.
///
/// @return If the value exists, returns the value. If the value is not set, returns false. If `$elem` is "inset", returns true, otherwise false.
@function get-shadow-value($val, $elem) {
  // Return "none" if there's no shadow
  @if $val == none {
    @return none;
  }

  // Inset and color are always at the beginning and end
  @if $elem == inset {
    @return nth($val, 1) == inset;
  }
  @if $elem == color {
    @if type-of(nth($val, -1)) == color {
      @return nth($val, -1);
    }
    @else {
      @return black;
    }
  }

  // The rest of the values are located perilously in the middle
  $values: ();
  @each $v in $val {
    @if type-of($v) == 'number' {
      $values: append($values, $v);
    }
  }
  @if $elem == x {
    @if length($values) >= 1 {
      @return nth($values, 1);
    }
    @else {
      @return 0;
    }
  }
  @else if $elem == y {
    @if length($values) >= 2 {
      @return nth($values, 2);
    }
    @else {
      @return 0;
    }
  }
  @else if $elem == size {
    @if length($values) >= 3 {
      @return nth($values, 3);
    }
    @else {
      @return 0;
    }
  }
  @else if $elem == spread {
    @if length($values) >= 4 {
      @return nth($values, 4);
    }
    @else {
      @return 0;
    }
  }
  @else {
    @return false;
  }
}

/// Strip Unit
/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
///
/// @param {number} $num - Number to strip unit from.
///
/// @return The same number, sans unit.
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

/// Turn to Degrees
/// 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.
///
/// @param {number} $value - Turn value to convert.
///
/// @return The same value, but in degrees.
@function turn-to-deg($value) {
  @return strip-unit($value) * 360deg;
}

/// Convert to Rem
/// 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.
///
/// @param {number} $value - Pixel value to convert.
///
/// @return A number in rems, calculated based on the given value and the base pixel value.
@function convert-to-rem($value, $base-value: $rem-base)  {
  $value: strip-unit($value) / strip-unit($base-value) * 1rem;
  @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
  @return $value;
}

/// Rem Calculator
/// 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.
///
/// @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.
///
/// @return A list of converted values.
@function rem-calc($values, $base-value: null) {
  @if $base-value == null {
    $base-value: $rem-base;
  }
  $max: length($values);

  @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }

  $remValues: ();
  @for $i from 1 through $max {
    $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
  }
  @return $remValues;
}