cami/sp-codes.de
1
0
Fork 0
forked from samuel-p/sp-codes.de
Code Issues Pull requests Projects Releases Wiki Activity

Initial commit

Browse source
This commit is contained in:
Samuel Philipp 2016-10-28 19:33:25 +02:00
commit b953a6c158
326 changed files with 76065 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

275
bower_components/foundation-sites/scss/util/_breakpoint.scss vendored Normal file
View file

@ -0,0 +1,275 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group breakpoints
////
// scss-lint:disable ZeroUnit
/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.
/// @type Map
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
) !default;
$-zf-zero-breakpoint: small !default;
@if nth(map-values($breakpoints), 1) != 0 {
@error 'Your smallest breakpoint (defined in $breakpoints) must be set to "0".';
}
@else {
$-zf-zero-breakpoint: nth(map-keys($breakpoints), 1);
}
/// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.
/// @type List
$breakpoint-classes: (small medium large) !default;
/// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are.
///
/// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.
@function breakpoint($val: $-zf-zero-breakpoint) {
// Size or keyword
$bp: nth($val, 1);
// Value for max-width media queries
$bp-max: 0;
// Direction of media query (up, down, or only)
$dir: if(length($val) > 1, nth($val, 2), up);
// Eventual output
$str: '';
// Is it a named media query?
$named: false;
// Orientation media queries have a unique syntax
@if $bp == 'landscape' or $bp == 'portrait' {
@return '(orientation: #{$bp})';
}
@else if $bp == 'retina' {
@return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
}
// 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' or $dir == 'down' {
$bp-max: -zf-map-next($breakpoints, $bp);
}
$bp: map-get($breakpoints, $bp);
$named: true;
}
@else {
$bp: 0;
@warn 'breakpoint(): "#{$val}" is not defined in your $breakpoints setting.';
}
}
// Convert any pixel, rem, or unitless value to em
$bp: -zf-bp-to-em($bp);
@if $bp-max {
$bp-max: -zf-bp-to-em($bp-max) - (1/16);
}
// Conditions to skip media query creation
// - It's a named breakpoint that resolved to "0 down" or "0 up"
// - It's a numeric breakpoint that resolved to "0 " + anything
@if $bp > 0em or $dir == 'only' or $dir == 'down' {
// `only` ranges use the format `(min-width: n) and (max-width: n)`
@if $dir == 'only' {
// Only named media queries can have an "only" range
@if $named == true {
// Only use "min-width" if the floor is greater than 0
@if $bp > 0em {
$str: $str + '(min-width: #{$bp})';
// Only add "and" to the media query if there's a ceiling
@if $bp-max != null {
$str: $str + ' and ';
}
}
// Only use "max-width" if there's a ceiling
@if $bp-max != null {
$str: $str + '(max-width: #{$bp-max})';
}
}
@else {
@warn 'breakpoint(): Only named media queries can have an `only` range.';
}
}
// `down` ranges use the format `(max-width: n)`
@else if $dir == 'down' {
$max: if($named, $bp-max, $bp);
// Skip media query creation if input value is exactly "0 down",
// unless the function was called as "small down", in which case it's just "small only"
@if $named or $bp > 0em {
@if $max != null {
$str: $str + '(max-width: #{$max})';
}
}
}
// `up` ranges use the format `(min-width: n)`
@else if $bp > 0em {
$str: $str + '(min-width: #{$bp})';
}
}
@return $str;
}
/// 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 `$global-font-size` as the 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 {Keyword|Number} $value - Breakpoint name, or px, rem, or em value to process.
///
/// @output If the breakpoint is "0px and larger", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.
@mixin breakpoint($value) {
$str: breakpoint($value);
// If $str is still an empty string, no media query is needed
@if $str == '' {
@content;
}
// Otherwise, wrap the content in a media query
@else {
@media screen and #{$str} {
@content;
}
}
}
/// Convers the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `<meta>` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.
/// @access private
///
/// @param {Map} $map - Map to convert.
///
/// @returns {String} A string containing the map's contents.
@function -zf-bp-serialize($map) {
$str: '';
@each $key, $value in $map {
$str: $str + $key + '=' + -zf-bp-to-em($value) + '&';
}
$str: str-slice($str, 1, -2);
@return $str;
}
/// Find the next key in a map.
/// @access private
///
/// @param {Map} $map - Map to traverse.
/// @param {Mixed} $key - Key to use as a starting point.
///
/// @returns {Mixed} 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 -zf-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);
}
}
/// Get a value for a breakpoint from a responsive config map. If the config map has the key `$value`, the exact breakpoint value is returned. If the config map does *not* have the breakpoint, the value matching the next lowest breakpoint in the config map is returned.
/// @access private
///
/// @param {Map} $map - Input config map.
/// @param {Keyword} $value - Breakpoint name to use.
///
/// @return {Mixed} The corresponding breakpoint value.
@function -zf-get-bp-val($map, $value) {
// Check if the breakpoint name exists globally
@if not map-has-key($breakpoints, $value) {
@return null;
}
// Check if the breakpoint name exists in the local config map
@else if map-has-key($map, $value) {
// If it does, just return the value
@return map-get($map, $value);
}
// Otherwise, find the next lowest breakpoint and return that value
@else {
$anchor: null;
$found: false;
@each $key, $val in $breakpoints {
@if not $found {
@if map-has-key($map, $key) {
$anchor: $key;
}
@if $key == $value {
$found: true;
}
}
}
@return map-get($map, $anchor);
}
}
// Legacy breakpoint variables
// These will be removed in 6.3
$small-up: null;
$small-only: null;
$medium-up: null;
$medium-only: null;
$large-up: null;
$large-only: null;
$xlarge-up: null;
$xlarge-only: null;
$xxlarge-up: null;
$xxlarge-only: null;
@if map-has-key($breakpoints, small) {
$small-up: screen;
$small-only: unquote('screen and #{breakpoint(small only)}');
}
@if map-has-key($breakpoints, medium) {
$medium-up: unquote('screen and #{breakpoint(medium)}');
$medium-only: unquote('screen and #{breakpoint(medium only)}');
}
@if map-has-key($breakpoints, large) {
$large-up: unquote('screen and #{breakpoint(large)}');
$large-only: unquote('screen and #{breakpoint(large only)}');
}
@if map-has-key($breakpoints, xlarge) {
$xlarge-up: unquote('screen and #{breakpoint(xlarge)}');
$xlarge-only: unquote('screen and #{breakpoint(xlarge only)}');
}
@if map-has-key($breakpoints, xxlarge) {
$xxlarge-up: unquote('screen and #{breakpoint(xxlarge)}');
}

60
bower_components/foundation-sites/scss/util/_color.scss vendored Normal file
View file

@ -0,0 +1,60 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group functions
////
/// 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 [$black] - Color to return if `$color` is light.
/// @param {Color} $no [$white] - Color to return if `$color` is dark.
/// @param {Percentage} $threshold [60%] - Threshold of lightness to check against.
///
/// @returns {Color} The $yes color or $no color.
@function foreground($color, $yes: $black, $no: $white, $threshold: 60%) {
@if $color == transparent {
$color: $body-background;
}
@if (lightness($color) > $threshold) {
@return $yes;
}
@else {
@return $no;
}
}
/// Scales a color to be lighter if it's light, or darker if it's dark. Use this function to tint a color appropriate to its lightness.
///
/// @param {Color} $color - Color to scale.
/// @param {Percentage} $scale [5%] - Amount to scale up or down.
/// @param {Percentage} $threshold [40%] - Threshold of lightness to check against.
///
/// @returns {Color} A scaled color.
@function smart-scale($color, $scale: 5%, $threshold: 40%) {
@if lightness($color) > $threshold {
$scale: -$scale;
}
@return scale-color($color, $lightness: $scale);
}
/// Transfers the colors in the `$foundation-palette` variable into the legacy color variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.
@mixin add-foundation-colors() {
@if map-has-key($foundation-palette, primary) {
$primary-color: map-get($foundation-palette, primary) !global;
}
@if map-has-key($foundation-palette, secondary) {
$secondary-color: map-get($foundation-palette, secondary) !global;
}
@if map-has-key($foundation-palette, success) {
$success-color: map-get($foundation-palette, success) !global;
}
@if map-has-key($foundation-palette, warning) {
$warning-color: map-get($foundation-palette, warning) !global;
}
@if map-has-key($foundation-palette, alert) {
$alert-color: map-get($foundation-palette, alert) !global;
}
}

68
bower_components/foundation-sites/scss/util/_flex.scss vendored Normal file
View file

@ -0,0 +1,68 @@
$-zf-flex-justify: (
'left': flex-start,
'right': flex-end,
'center': center,
'justify': space-between,
'spaced': space-around,
);
$-zf-flex-align: (
'top': flex-start,
'bottom': flex-end,
'middle': center,
'stretch': stretch,
);
/// Enables flexbox by adding `display: flex` to the element.
@mixin flex {
display: flex;
}
/// Horizontally or vertically aligns the items within a flex container.
///
/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.
/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
@mixin flex-align($x: null, $y: null) {
@if $x {
@if map-has-key($-zf-flex-justify, $x) {
$x: map-get($-zf-flex-justify, $x);
}
@else {
@warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.'
}
}
@if $y {
@if map-has-key($-zf-flex-align, $y) {
$y: map-get($-zf-flex-align, $y);
}
@else {
@warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.'
}
}
justify-content: $x;
align-items: $y;
}
/// Vertically align a single column within a flex row. Apply this mixin to a flex column.
///
/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
@mixin flex-align-self($y: null) {
@if $y {
@if map-has-key($-zf-flex-align, $y) {
$y: map-get($-zf-flex-align, $y);
}
@else {
@warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.'
}
}
align-self: $y;
}
/// Changes the source order of a flex child. Children with lower numbers appear first in the layout.
/// @param {Number} $order [0] - Order number to apply.
@mixin flex-order($order: 0) {
order: $order;
}

235
bower_components/foundation-sites/scss/util/_mixins.scss vendored Normal file
View file

@ -0,0 +1,235 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group functions
////
/// Creates a CSS triangle, which can be used for dropdown arrows, dropdown pips, 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 `up`, `right`, `down`, 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 == down) {
border-color: $triangle-color transparent transparent;
border-top-style: solid;
border-bottom-width: 0;
}
@if ($triangle-direction == up) {
border-color: transparent transparent $triangle-color;
border-bottom-style: solid;
border-top-width: 0;
}
@if ($triangle-direction == right) {
border-color: transparent transparent transparent $triangle-color;
border-left-style: solid;
border-right-width: 0;
}
@if ($triangle-direction == left) {
border-color: transparent $triangle-color transparent transparent;
border-right-style: solid;
border-left-width: 0;
}
}
/// Creates a menu icon with a set width, height, number of bars, and colors. The mixin uses the height of the icon and the weight of the bars to determine spacing. <div class="docs-example-burger"></div>
///
/// @param {Color} $color [$black] - Color to use for the icon.
/// @param {Color} $color-hover [$dark-gray] - Color to use when the icon is hovered over.
/// @param {Number} $width [20px] - Width of the icon.
/// @param {Number} $height [16px] - Height of the icon.
/// @param {Number} $weight [2px] - Height of individual bars in the icon.
/// @param {Number} $bars [3] - Number of bars in the icon.
@mixin hamburger(
$color: $black,
$color-hover: $dark-gray,
$width: 20px,
$height: 16px,
$weight: 2px,
$bars: 3
) {
// box-shadow CSS output
$shadow: ();
$hover-shadow: ();
// Spacing between bars is calculated based on the total height of the icon and the weight of each bar
$spacing: floor(($height - ($weight * $bars)) / ($bars - 1));
// Icon container
position: relative;
display: inline-block;
vertical-align: middle;
cursor: pointer;
width: $width;
height: $height;
// Icon bars
&::after {
content: '';
position: absolute;
display: block;
width: 100%;
height: $weight;
background: $color;
top: 0;
left: 0;
@for $i from 2 through $bars {
$offset: ($weight + $spacing) * ($i - 1);
$shadow: append($shadow, 0 $offset 0 $color, comma);
}
box-shadow: $shadow;
}
// Hover state
@if $color-hover {
// Generate CSS
@for $i from 2 through $bars {
$offset: ($weight + $spacing) * ($i - 1);
$hover-shadow: append($hover-shadow, 0 $offset 0 $color-hover, comma);
}
&:hover::after {
background: $color-hover;
box-shadow: $hover-shadow;
}
}
}
/// Adds a downward-facing triangle as a background image to an element. The image is formatted as an SVG, making it easy to change the color. Because Internet Explorer doesn't support encoded SVGs as background images, a PNG fallback is also included.
/// There are two PNG fallbacks: a black triangle and a white triangle. The one used depends on the lightness of the input color.
///
/// @param {Color} $color [$black] - Color to use for the triangle.
@mixin background-triangle($color: $black) {
$rgb: 'rgb%28#{red($color)}, #{green($color)}, #{blue($color)}%29';
background-image: url("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: #{$rgb}'></polygon></svg>");
@media screen and (min-width:0\0) {
@if lightness($color) < 60% {
// White triangle
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==');
}
@else {
// Black triangle
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNrEllsOhCAMRVszC9IlzU7KCmVHTJsoMWYMUtpyv9BgbuXQB5ZSdgBYYY4ycgBivk8KYFsQMfMiTTBP4o3nUzCKzOabLJbLy2/g31evGkAginR4/ZegKH5qX3bJCscA3t0x3kgO5tQFyhhFf50xRqFLbyMUNJQzgyjGS/wgCpvKqkRBpuWrE4V9d+1E4dPUXqIg107SQOE/2DRQxMwTDygIInVDET9T3lCoj/6j/VCmGjZOl2lKpZ8AAwDQP7zIimDGFQAAAABJRU5ErkJggg==');
}
}
}
/// Applies 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.
/// The clearfix is augmented with specific styles to prevent borders in flexbox environments
/// @link http://nicolasgallagher.com/micro-clearfix-hack/ Micro Clearfix Hack
/// @link http://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/ Flexbox fix
@mixin clearfix {
&::before,
&::after {
content: ' ';
display: table;
@if $global-flexbox {
flex-basis: 0;
order: 1;
}
}
&::after {
clear: both;
}
}
/// Adds CSS for a "quantity query" selector that automatically sizes elements based on how many there are inside a container.
/// @link http://alistapart.com/article/quantity-queries-for-css Quantity Queries for CSS
///
/// @param {Number} $max - Maximum number of items to detect. The higher this number is, the more CSS that's required to cover each number of items.
/// @param {Keyword} $elem [li] - Tag to use for sibling selectors.
@mixin auto-width($max, $elem: li) {
@for $i from 2 through $max {
&:nth-last-child(#{$i}):first-child,
&:nth-last-child(#{$i}):first-child ~ #{$elem} {
width: percentage(1 / $i);
}
}
}
/// Removes the focus ring around an element when a mouse input is detected.
@mixin disable-mouse-outline {
[data-whatinput='mouse'] & {
outline: 0;
}
}
/// Makes an element visually hidden, but still accessible to keyboards and assistive devices.
/// @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility Hiding Content for Accessibility
@mixin element-invisible {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
/// Reverses the CSS output created by the `element-invisible()` mixin.
@mixin element-invisible-off {
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto;
}
/// Vertically centers the element inside of its first non-static parent,
/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
@mixin vertical-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/// Horizontally centers the element inside of its first non-static parent,
/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
@mixin horizontal-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/// Absolutely centers the element inside of its first non-static parent,
/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
@mixin absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/// Iterates through breakpoints defined in `$breakpoint-classes` and prints the CSS inside the mixin at each breakpoint's media query. Use this with the grid, or any other component that has responsive classes.
///
/// @param {Boolean} $small [true] - If `false`, the mixin will skip the `small` breakpoint. Use this with components that don't prefix classes with `small-`, only `medium-` and up.
@mixin -zf-each-breakpoint($small: true) {
$map: $breakpoint-classes;
@if not $small {
$map: map-remove($map, $-zf-zero-breakpoint);
}
@each $size in $map {
$-zf-size: $size !global;
@include breakpoint($size) {
@content;
}
}
}

40
bower_components/foundation-sites/scss/util/_selector.scss vendored Normal file
View file

@ -0,0 +1,40 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group functions
////
/// Generates a selector with every text input type. You can also filter the list to only output a subset of those selectors.
///
/// @param {List|Keyword} $types [()] - A list of text input types to use. Leave blank to use all of them.
@function text-inputs($types: ()) {
$return: ();
$all-types:
text
password
date
datetime
datetime-local
month
week
email
number
search
tel
time
url
color;
@if not has-value($types) {
$types: $all-types;
}
@each $type in $types {
$return: append($return, unquote('[type=\'#{$type}\']'), comma);
}
@return $return;
}

90
bower_components/foundation-sites/scss/util/_unit.scss vendored Normal file
View file

@ -0,0 +1,90 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group functions
////
$global-font-size: 100% !default;
// scss-lint:disable ZeroUnit
/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
///
/// @param {Number} $num - Number to strip unit from.
///
/// @returns {Number} The same number, sans unit.
@function strip-unit($num) {
@return $num / ($num * 0 + 1);
}
/// Converts one or more pixel values into matching rem values.
///
/// @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.
/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.
///
/// @returns {List} A list of converted values.
@function rem-calc($values, $base: null) {
$rem-values: ();
$count: length($values);
// If no base is defined, defer to the global font size
@if $base == null {
$base: $global-font-size;
}
// If the base font size is a %, then multiply it by 16px
// This is because 100% font size = 16px in most all browsers
@if unit($base) == '%' {
$base: ($base / 100%) * 16px;
}
@if $count == 1 {
@return -zf-to-rem($values, $base);
}
@for $i from 1 through $count {
$rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));
}
@return $rem-values;
}
// Converts a unitless, pixel, or rem value to em, for use in breakpoints.
@function -zf-bp-to-em($value) {
// Pixel and unitless values are converted to rems
@if unit($value) == 'px' or unitless($value) {
$value: rem-calc($value, $base: 16px);
}
// Then the value is converted to ems
@return strip-unit($value) * 1em;
}
/// 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 `$global-font-size` variable.
/// @access private
///
/// @param {Number} $value - Pixel value to convert.
/// @param {Number} $base [null] - Base for pixel conversion.
///
/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.
@function -zf-to-rem($value, $base: null) {
// Check if the value is a number
@if type-of($value) != 'number' {
@warn inspect($value) + ' was passed to rem-calc(), which is not a number.';
@return $value;
}
// Calculate rem if units for $value is not rem
@if unit($value) != 'rem' {
$value: strip-unit($value) / strip-unit($base) * 1rem;
}
// Turn 0rem into 0
@if $value == 0rem {
$value: 0;
}
@return $value;
}

11
bower_components/foundation-sites/scss/util/_util.scss vendored Normal file
View file

@ -0,0 +1,11 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
@import 'unit';
@import 'value';
@import 'color';
@import 'selector';
@import 'flex';
@import 'breakpoint';
@import 'mixins';

107
bower_components/foundation-sites/scss/util/_value.scss vendored Normal file
View file

@ -0,0 +1,107 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group functions
////
/// Determine if a value is not falsey, in CSS terms. Falsey values are `null`, `none`, `0` with any unit, or an empty list.
///
/// @param {Mixed} $val - Value to check.
///
/// @returns {Boolean} `true` if `$val` is not falsey.
@function has-value($val) {
@if $val == null or $val == none {
@return false;
}
@if type-of($val) == 'number' and strip-unit($val) == 0 {
@return false;
}
@if type-of($val) == 'list' and length($val) == 0 {
@return false;
}
@return true;
}
/// 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 a shorthand format.
///
/// @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`.
///
/// @returns {Number} 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);
}
}
/// 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.
///
/// @returns {Mixed} 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: #000,
);
@return map-get($defaults, $elem);
}
/// Finds a value in a nested map.
/// @link https://css-tricks.com/snippets/sass/deep-getset-maps/ Deep Get/Set in Maps
///
/// @param {Map} $map - Map to pull a value from.
/// @param {String} $keys... - Keys to use when looking for a value.
/// @returns {Mixed} The value found in the map.
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}