diff options
Diffstat (limited to 'afb-client/bower_components/foundation-apps/scss/helpers')
4 files changed, 639 insertions, 0 deletions
diff --git a/afb-client/bower_components/foundation-apps/scss/helpers/_breakpoints.scss b/afb-client/bower_components/foundation-apps/scss/helpers/_breakpoints.scss new file mode 100644 index 0000000..36300d7 --- /dev/null +++ b/afb-client/bower_components/foundation-apps/scss/helpers/_breakpoints.scss @@ -0,0 +1,154 @@ +// Foundation for Apps +// +// BREAKPOINTS +// ----------- +// Foundation for Apps has three core breakpoints: small (> 0), medium (>= 640), and large (>= 1024). +// There are two additional breakpoints, xlarge, and xxlarge, which (by default) do not output as sizing classes. +// Access named breakpoints using the mixin breakpoint($size), where $size is a breakpoint value. +// You can also pass an em, rem, or pixel value into this mixin to generate an em-based media query. +// Create new named breakpoints using the $breakpoints map. Change which named breakpoints get their own classes by modifying the $breakpoint-classes map. +// NOTE: If you change the $breakpoints map, know that all values must be ordered by width, smallest width first. So 0 is always your first value. + +// 1. Variables +// - - - - - - - - - - - - - - - + +/// @Foundation.settings +// Breakpoints +// These are our named breakpoints. You can use them in our breakpoint function like this: @include breakpoint(medium) { // Medium and larger styles } +$breakpoints: ( + small: rem-calc(0), + medium: rem-calc(640), + large: rem-calc(1200), + xlarge: rem-calc(1440), + xxlarge: rem-calc(1920), +) !default; + +// All of the names in this list will be output as classes in your CSS, like small-12, medium-6, and so on. +$breakpoint-classes: (small medium large) !default; +/// + +// 2. Mixins +// - - - - - - - - - - - - - - - + +/// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values: +/// - If a string is passed, the mixin will look for it in the $breakpoints map, and use a media query there. +/// - If a pixel value is passed, it will be converted to an em value using $rem-base. +/// - If a rem value is passed, the unit will be changed to em. +/// - If an em value is passed, the value will be used as-is. +/// +/// @param {mixed} $val - Breakpoint name or px/em/rem value to process. +/// +/// @output If the breakpoint is "0px and larger", outputs the content. Otherwise, outputs the content wrapped in a media query. +@mixin breakpoint($val: small) { + // Size or keyword + $bp: nth($val, 1); + // Value for max-width media queries + $bpMax: 0; + // Direction of media query (up, down, or only) + $dir: if(length($val) > 1, nth($val, 2), up); + // Eventual output + $str: 'only screen'; + // Is it a named media query? + $named: false; + + // Orientation media queries have a unique syntax + @if $bp == 'landscape' or $bp == 'portrait' { + $str: $str + ' and (orientation: #{$bp})'; + } + + @else { + // Try to pull a named breakpoint out of the $breakpoints map + @if type-of($bp) == 'string' { + @if map-has-key($breakpoints, $bp) { + @if $dir == 'only' { + $next-bp: map-next($breakpoints, $bp); + @if $next-bp == null { + $bpMax: null; + } + @else { + $bpMax: $next-bp - (1/16); + } + } + $bp: map-get($breakpoints, $bp); + $named: true; + } + @else { + $bp: 0; + } + } + + // Pixel and unitless values are converted to rems + @if unit($bp) == 'px' or unit($bp) == '' { + $bp: rem-calc($bp); + } + // Finally, the rem value is turned into an em value + $bp: strip-unit($bp) * 1em; + + // Skip media query creation if the input is "0 up" or "0 down" + @if $bp > 0 or $dir == 'only' { + // And lo, a media query was born + @if $dir == 'only' { + @if $named == true { + $str: $str + ' and (min-width: #{$bp})'; + @if $bpMax != null { + $str: $str + ' and (max-width: #{$bpMax})'; + } + } + @else { + @debug 'ERROR: Only named media queries can have an "only" range.'; + } + } + @else if $dir == 'down' { + $max: $bp - (1/16); + $str: $str + ' and (max-width: #{$max})'; + } + @else { + $str: $str + ' and (min-width: #{$bp})'; + } + } + } + + // Output + @if $bp == 0em and $dir != 'only' { + @content; + } + @else { + @media #{$str} { + @content; + } + } +} + +/// Prefixes selector $class with breakpoint keywords, allowing you to create a batch of breakpoint classes with one chunk of code. If you want to skip a breakpoint (like small, because mobile first and all that), add values to the $omit parameter. +/// +/// @param {string} $class - Class to prefix with the breakpoint name and a hyphen. +/// @param {list} $omit - Named breakpoints to skip. No class will be added with breakpoints in this list. +@mixin each-breakpoint($class, $omit: ()) { + // Iterate through breakpoint classes + @each $size in $breakpoint-classes { + // Only do something if the breakpoint is not in $omit + @if index($omit, $size) == null { + $val: map-get($breakpoints, $size); + // Prefix $class with $size and a hyphen + .#{$size + '-' + $class} { + @include breakpoint($size) { + @content; + } + } + } + } +} + +// 3. CSS Output +// - - - - - - - - - - - - - - - + +// Meta styles are included in all builds, as they are a dependancy of the Javascript. +// Used to provide media query values for javascript components. +// Forward slash placed around everything to convince PhantomJS to read the value. + +meta.foundation-version { + font-family: "#{$foundation-version}"; +} +meta.foundation-mq { + font-family: "#{map-serialize($breakpoints)}"; +} diff --git a/afb-client/bower_components/foundation-apps/scss/helpers/_functions.scss b/afb-client/bower_components/foundation-apps/scss/helpers/_functions.scss new file mode 100755 index 0000000..cb2ab37 --- /dev/null +++ b/afb-client/bower_components/foundation-apps/scss/helpers/_functions.scss @@ -0,0 +1,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; +} diff --git a/afb-client/bower_components/foundation-apps/scss/helpers/_images.scss b/afb-client/bower_components/foundation-apps/scss/helpers/_images.scss new file mode 100644 index 0000000..c91052e --- /dev/null +++ b/afb-client/bower_components/foundation-apps/scss/helpers/_images.scss @@ -0,0 +1,19 @@ +@function image-triangle($color: #000) { + $color: rgb(red($color), green($color), blue($color)); + @return 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: #{$color}"></polygon></svg>'; +} + +@mixin image-checkmark($color: #000) { + $color: rgb(red($color), green($color), blue($color)); + background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32" viewBox="0 0 32 32"><path fill="#{$color}" d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zm6.906 8.875l2.219 2.031-12.063 13.281-6.188-6.188 2.125-2.125 3.938 3.938 9.969-10.938z"/></svg>'); + + // IE10 fallback, since it doesn't support SVG data URLs + @media screen and (min-width:0\0) { + @if lightness($color) < 60% { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAdlJREFUeNrMl0FugzAQRY3TRZeoFyhVL0BOkGTXJezaHZwguUnECaCrdFd6gqQnCN11Uyk5QekNOlONJWMVGMCgfGlkEIY3HnsG2xFM3d96PjQB2AJsWdPtAPYOln+dTwXnuw4DHEGzBvNFN6EDCTiS9XIAwB40acNoucKoxODIie0AwAOCu8KOSnIiNx/MakK+A7sW9oTferxx3fP3T1nURoBG/irGVahHwjHm/Ggx7E3TMVdrQmoP0gngghhpZQ3QvG/EdPLUelARWI8Aycjq9Md0qMIdbcNhjmOKLoY7quk3l1Rebeqg4AwFkmq7LWGOh1pmNY0etZAWSq0OX8HoS4JvWuCopbSY26EGR/CW86K0BF+pwkLwlPuyHJhOCl5oe4ZtF++vOqST+GdOYwO+71pN2VNAjmQGPCe42weuHDg0PI8olUwnYrXTGQJH9gxq8l1LKvrQx4O6/YY32Kp/ugb3ey7gZ4xAzuhYiYTxB/UHZFAuaREVXZ2g6yFlvEC2yoKEmbsRZYNgVLk2JeaOaG+xLHN+WCszDWMqLGOrJFa1DlApjSdwoHJGqGzLIb0+cas0wh5Bh780ngswx8GJD7h8sHg2wLA/mfDLPZpdxOF0quP5rwADAAFIzSRvu1m5AAAAAElFTkSuQmCC'); + } + @else { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAT9JREFUeNrMV4sRgyAMDU7gCI6AE7QjMILdoCO4Cd2g3aB2Ah2hG7Qb0ODRO2r98Anqu8txKvISII/AwBFKKY6NQDugHSe6NWgPtBtjrAMKIHGF1ip/6H+qGOIC7a7ioccofMkF2kvRQY8lfKY8FSqXyFPjZyaYvebYtGg5pMUbrcQseeqHzPogVyAHwyHXXPfZ/cCMA3rqOXGkF9NObbwOl6HsFS5BdNKaXTnTj2dGXinRYGQnx74CiNTOlt/cMfpeJSEh+dnlJyCU2iIkq4CInIemtIsDcmYth+Tc9xCDyHQSMeReDow4UVnv89Dj2yUNx5wYkreB+6dPw9pH2QbOxJBr1D5SLEccuEZmEP8O1Po64aByi8IVehxLAvL/8oz4TFjefHspyTYvSvdVlu/iYrKLq9mal1O29fX8I8AANpIQzC0hTdEAAAAASUVORK5CYII='); + } + } +}
\ No newline at end of file diff --git a/afb-client/bower_components/foundation-apps/scss/helpers/_mixins.scss b/afb-client/bower_components/foundation-apps/scss/helpers/_mixins.scss new file mode 100644 index 0000000..403fe61 --- /dev/null +++ b/afb-client/bower_components/foundation-apps/scss/helpers/_mixins.scss @@ -0,0 +1,123 @@ +// Foundation for Apps +// +// Mixins +// ------ +// The framework comes with a number of mixins that help you easily create common small components, +// like triangles and menu icons. + +/// CSS Triangle +/// Creates a CSS triangle, which can be used for dropdown arrows, popup tails, and more. Use this mixin inside a `&::before` or `&::after` selector, to attach the triangle to an existing element. +/// +/// @param {number} $triangle-size - Width of the triangle. +/// @param {color} $triangle-color - Color of the triangle. +/// @param {keyword} $triangle-direction - Direction the triangle points. Can be `top`, `right`, `bottom`, or `left`. +@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) { + content: ""; + display: block; + width: 0; + height: 0; + border: inset $triangle-size; + @if ($triangle-direction == top) { + border-color: $triangle-color transparent transparent transparent; + border-top-style: solid; + } + @if ($triangle-direction == bottom) { + border-color: transparent transparent $triangle-color transparent; + border-bottom-style: solid; + } + @if ($triangle-direction == left) { + border-color: transparent transparent transparent $triangle-color; + border-left-style: solid; + } + @if ($triangle-direction == right) { + border-color: transparent $triangle-color transparent transparent; + border-right-style: solid; + } +} + +// @mixins +// +/// Hamburger +/// Creates a three-line menu icon, affectionately referred to as the "hamburger icon". +/// +/// @param {number} $width - Width of the icon, in rem units. +/// @param {number|boolean} $left - Left offset of the icon. Set to `false` to center the icon horizontally. +/// @param {number|boolean} $top - Top offset of the icon. Set to `false` to center the icon vertically. +/// @param {number} $thickness - Height of each line in the icon. +/// @param {number} $gap - Amount of space between each line. +/// @param {color} $color - Color of the lines. +/// @param {color} $hover-color - Color of the lines on hover. +@mixin hamburger($width, $left, $top, $thickness, $gap, $color, $hover-color, $offcanvas) { + span::after { + content: ""; + position: absolute; + display: block; + height: 0; + + @if $offcanvas { + @if $top { + top: $top; + } + @else { + top: 50%; + margin-top: -$width/2; + } + @if $left { + left: $left; + } + @else { + left: ($tabbar-menu-icon-width - $width)/2; + } + } + @else { + top: 50%; + margin-top: -$width/2; + #{$opposite-direction}: $topbar-link-padding; + } + + box-shadow: + 0 0px 0 $thickness $color, + 0 $gap + $thickness 0 $thickness $color, + 0 (2 * $gap + 2*$thickness) 0 $thickness $color; + width: $width; + } + span:hover:after { + box-shadow: + 0 0px 0 $thickness $hover-color, + 0 $gap + $thickness 0 $thickness $hover-color, + 0 (2 * $gap + 2*$thickness) 0 $thickness $hover-color; + } +} + +/// Clearfix +/// Uses the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height. +/// +/// @see http://nicolasgallagher.com/micro-clearfix-hack/ +@mixin clearfix { + &:before, &:after { content: " "; display: table; } + &:after { clear: both; } +} + +/// Invisible Element +/// Makes an element visually hidden, but accessible. +/// +/// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility +@mixin element-invisible { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); +} + +/// Invisible Element Off +/// Reverses the CSS output by the `element-invisible()` mixin. +@mixin element-invisible-off { + position: static !important; + height: auto; + width: auto; + overflow: visible; + clip: auto; +} + +$text-input-selectors: 'input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea'; |