--- /dev/null
+// Foundation for Apps ALPHA\r
+// by ZURB\r
+// foundation.zurb.com\r
+// Licensed under MIT Open Source\r
+\r
+$include-css: () !default;\r
+$modules: () !default;\r
+$rem-base: 16px !default;\r
+\r
+/// Checks if a module is in use.\r
+@function using($name) {\r
+ // Import from global scope\r
+ $include-css: $include-css !global;\r
+ $module-key: map-get($include-css, $name);\r
+\r
+ @if $module-key == true or $module-key == null {\r
+ @return true;\r
+ }\r
+ @else {\r
+ @return false;\r
+ }\r
+}\r
+\r
+/// Checks if a module's CSS has already been exported.\r
+@function imported($name) {\r
+ // Import from global scope\r
+ $modules: $modules !global;\r
+ // Check if the module is already on the imported list\r
+ @if type-of(index($modules, $name)) == 'number' {\r
+ @return true;\r
+ }\r
+ @else {\r
+ @return false;\r
+ }\r
+}\r
+\r
+/// Outputs the chunk of content passed if component $name hasn't yet been output.\r
+/// This prevents code duplication by keeping track of which components have already been output.\r
+///\r
+/// @param {string} $name - Name of component to output\r
+///\r
+/// @output The content passed, if the component has not yet been exported.\r
+@mixin exports($name) {\r
+ // Check if the module has already been imported\r
+ @if not(imported($name)) {\r
+ // Check if the module should be used\r
+ @if using($name) {\r
+ $modules: append($modules, $name) !global;\r
+ @content;\r
+ }\r
+ }\r
+}\r
+\r
+/// Map Serialize\r
+/// 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
+///\r
+/// @param {map} $map - Map to convert.\r
+///\r
+/// @return A string with a map converted to a string.\r
+@function map-serialize($map) {\r
+ $str: '';\r
+ @each $key, $value in $map {\r
+ $str: $str + $key + '=' + $value + '&';\r
+ }\r
+ $str: str-slice($str, 1, -2);\r
+\r
+ @return $str;\r
+}\r
+\r
+/// Map Next\r
+/// Find the next key in a map.\r
+///\r
+/// @param {map} $map - Map to traverse.\r
+/// @param {mixed} $key - Key to use as a starting point.\r
+///\r
+/// @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
+@function map-next($map, $key) {\r
+ // Store the values of the map as a list, so we can access them with nth\r
+ $values: map-values($map);\r
+\r
+ // Ghetto for loop\r
+ $i: 1;\r
+ $found: false;\r
+ @each $val in map-keys($map) {\r
+ @if $found == false {\r
+ @if ($key == $val) {\r
+ $found: true;\r
+ }\r
+ $i: $i + 1;\r
+ }\r
+ }\r
+\r
+ // If the key doesn't exist, or it's the last key in the map, return null\r
+ @if $i > length($map) {\r
+ @return null;\r
+ }\r
+ // Otherwise return the value\r
+ @else {\r
+ @return nth($values, $i);\r
+ }\r
+}\r
+\r
+/// Is It Light?\r
+/// 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
+///\r
+/// @param {color} $color - Color to check the lightness of.\r
+/// @param {color} $yes - Color to return if $color is light.\r
+/// @param {color} $no - Color to return if $color is dark.\r
+/// @param {percentage} $threshold - Threshold of lightness to check against.\r
+///\r
+/// @return The $yes color or $no color.\r
+@function isitlight($color, $yes: #000, $no: #fff, $threshold: 60%) {\r
+ @if (lightness($color) > $threshold) {\r
+ @return $yes;\r
+ }\r
+ @else {\r
+ @return $no;\r
+ }\r
+}\r
+\r
+/// Smart Scale\r
+/// 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
+///\r
+/// @param {color} $color - Color to scale.\r
+/// @param {percentage} $scale - Amount to scale up or down.\r
+/// @param {percentage} $threshold - Threshold of lightness to check against.\r
+///\r
+/// @return A scaled color.\r
+@function smartscale($color, $scale: 5%, $threshold: 60%) {\r
+ @if lightness($color) > $threshold {\r
+ $scale: -$scale;\r
+ }\r
+ @return scale-color($color, $lightness: $scale);\r
+}\r
+\r
+/// Has Value\r
+/// 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
+///\r
+/// @param $val - Value to check.\r
+///\r
+/// @return True if `$val` is not 0, null, or none.\r
+@function hasvalue($val) {\r
+ @if $val == null or $val == none {\r
+ @return false;\r
+ }\r
+ @if type-of($val) == 'number' and strip-unit($val) == 0 {\r
+ @return false;\r
+ }\r
+ @return true;\r
+}\r
+\r
+/// Get Side\r
+/// 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
+///\r
+/// @param {list|number} $val - Value to analyze. Should be a shorthand sizing property, e.g. "1em 2em 1em"\r
+/// @param {keyword} $side - Side to return. Should be top, right, bottom, or left.\r
+///\r
+/// @return A single value based on `$val` and `$side`.\r
+@function get-side($val, $side) {\r
+ $length: length($val);\r
+\r
+ @if $length == 1 {\r
+ @return $val;\r
+ }\r
+ @if $length == 2 {\r
+ @return map-get((\r
+ top: nth($val, 1),\r
+ bottom: nth($val, 1),\r
+ left: nth($val, 2),\r
+ right: nth($val, 2),\r
+ ), $side);\r
+ }\r
+ @if $length == 3 {\r
+ @return map-get((\r
+ top: nth($val, 1),\r
+ left: nth($val, 2),\r
+ right: nth($val, 2),\r
+ bottom: nth($val, 3),\r
+ ), $side);\r
+ }\r
+ @if $length == 4 {\r
+ @return map-get((\r
+ top: nth($val, 1),\r
+ right: nth($val, 2),\r
+ bottom: nth($val, 3),\r
+ left: nth($val, 4),\r
+ ), $side);\r
+ }\r
+}\r
+\r
+/// Get Border Value\r
+/// Given border $val, find a specific element of the border, which is $elem. The possible values for $elem are width, style, and color.\r
+///\r
+/// @param {list} $val - Border value to find a value in.\r
+/// @param {keyword} $elem - Border component to extract.\r
+///\r
+/// @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
+ @function get-border-value($val, $elem) {\r
+ // Find the width, style, or color and return it\r
+ @each $v in $val {\r
+ $type: type-of($v);\r
+ @if $elem == width and $type == 'number' {\r
+ @return $v;\r
+ }\r
+ @if $elem == style and $type == 'string' {\r
+ @return $v;\r
+ }\r
+ @if $elem == color and $type == 'color' {\r
+ @return $v;\r
+ }\r
+ }\r
+\r
+ // Defaults\r
+ $defaults: (\r
+ width: 0,\r
+ style: solid,\r
+ color: black,\r
+ );\r
+ @return map-get($defaults, $elem);\r
+ }\r
+\r
+/// Get Shadow Value\r
+/// 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
+///\r
+/// @param {list} $val - Shadow value to find a value in.\r
+/// @param {keyword} $elem - Shadow component to extract.\r
+///\r
+/// @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
+@function get-shadow-value($val, $elem) {\r
+ // Return "none" if there's no shadow\r
+ @if $val == none {\r
+ @return none;\r
+ }\r
+\r
+ // Inset and color are always at the beginning and end\r
+ @if $elem == inset {\r
+ @return nth($val, 1) == inset;\r
+ }\r
+ @if $elem == color {\r
+ @if type-of(nth($val, -1)) == color {\r
+ @return nth($val, -1);\r
+ }\r
+ @else {\r
+ @return black;\r
+ }\r
+ }\r
+\r
+ // The rest of the values are located perilously in the middle\r
+ $values: ();\r
+ @each $v in $val {\r
+ @if type-of($v) == 'number' {\r
+ $values: append($values, $v);\r
+ }\r
+ }\r
+ @if $elem == x {\r
+ @if length($values) >= 1 {\r
+ @return nth($values, 1);\r
+ }\r
+ @else {\r
+ @return 0;\r
+ }\r
+ }\r
+ @else if $elem == y {\r
+ @if length($values) >= 2 {\r
+ @return nth($values, 2);\r
+ }\r
+ @else {\r
+ @return 0;\r
+ }\r
+ }\r
+ @else if $elem == size {\r
+ @if length($values) >= 3 {\r
+ @return nth($values, 3);\r
+ }\r
+ @else {\r
+ @return 0;\r
+ }\r
+ }\r
+ @else if $elem == spread {\r
+ @if length($values) >= 4 {\r
+ @return nth($values, 4);\r
+ }\r
+ @else {\r
+ @return 0;\r
+ }\r
+ }\r
+ @else {\r
+ @return false;\r
+ }\r
+}\r
+\r
+/// Strip Unit\r
+/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.\r
+///\r
+/// @param {number} $num - Number to strip unit from.\r
+///\r
+/// @return The same number, sans unit.\r
+@function strip-unit($num) {\r
+ @return $num / ($num * 0 + 1);\r
+}\r
+\r
+/// Turn to Degrees\r
+/// 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
+///\r
+/// @param {number} $value - Turn value to convert.\r
+///\r
+/// @return The same value, but in degrees.\r
+@function turn-to-deg($value) {\r
+ @return strip-unit($value) * 360deg;\r
+}\r
+\r
+/// Convert to Rem\r
+/// 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
+///\r
+/// @param {number} $value - Pixel value to convert.\r
+///\r
+/// @return A number in rems, calculated based on the given value and the base pixel value.\r
+@function convert-to-rem($value, $base-value: $rem-base) {\r
+ $value: strip-unit($value) / strip-unit($base-value) * 1rem;\r
+ @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0\r
+ @return $value;\r
+}\r
+\r
+/// Rem Calculator\r
+/// 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
+///\r
+/// @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
+///\r
+/// @return A list of converted values.\r
+@function rem-calc($values, $base-value: null) {\r
+ @if $base-value == null {\r
+ $base-value: $rem-base;\r
+ }\r
+ $max: length($values);\r
+\r
+ @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }\r
+\r
+ $remValues: ();\r
+ @for $i from 1 through $max {\r
+ $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));\r
+ }\r
+ @return $remValues;\r
+}\r
Code Review / src / app-framework-demo.git / blobdiff