foundation_apps_styles 1.1.0

data/vendor/assets/stylesheets/foundation.scss

@@ -0,0 +1,50 @@
+// Foundation for Apps
+// by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+$foundation-version: '1.1.0';
+
+// Make sure the charset is set appropriately
+@charset "UTF-8";
+
+// Libraries (let's make Normalize an external dependency eventually)
+@import
+  "vendor/normalize";
+
+// Helpers
+@import
+  "helpers/functions",
+  "helpers/mixins",
+  "helpers/breakpoints",
+  "helpers/images";
+
+// Global styles
+@import
+  "global";
+
+// Components
+@import
+  "components/iconic",
+  "components/action-sheet",
+  "components/block-list",
+  "components/button",
+  "components/button-group",
+  "components/card",
+  "components/extras",
+  "components/forms",
+  "components/grid",
+  "components/title-bar",
+  "components/label",
+  "components/list",
+	"components/menu-bar",
+	"components/modal",
+  "components/motion",
+  "components/notification",
+  "components/off-canvas",
+  "components/popup",
+  "components/switch",
+  "components/tabs",
+  "components/accordion",
+  "components/typography",
+  "components/utilities";

data/vendor/assets/stylesheets/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)}";
+}

data/vendor/assets/stylesheets/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;
+}