added current state from hippie main repo

commit state 175816
source/style/hippie

mixins/_all.scss

@@ -0,0 +1,5 @@
+@import "media_query";
+@import "sprite";
+@import "flow";
+@import "color";
+@import "user_agent";

mixins/_color.scss

@@ -0,0 +1,20 @@
+@mixin addDefaultColors() {
+  @if map-has-key($color_palette, alpha) {
+    $alpha_color: map-get($color_palette, alpha) !global;
+  }
+  @if map-has-key($color_palette, bravo) {
+    $bravo_color: map-get($color_palette, bravo) !global;
+  }
+  @if map-has-key($color_palette, charlie) {
+    $charlie_color: map-get($color_palette, charlie) !global;
+  }
+  @if map-has-key($color_palette, delta) {
+    $delta_color: map-get($color_palette, delta) !global;
+  }
+  @if map-has-key($color_palette, echo) {
+    $echo_color: map-get($color_palette, echo) !global;
+  }
+  @if map-has-key($color_palette, foxtrot) {
+    $foxtrot_color: map-get($color_palette, foxtrot) !global;
+  }
+}

mixins/_flow.scss

@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+// Provides an easy way to include a clearflow for containing floats.
+//
+// @link http://cssmojo.com/latest_new_clearfix_so_far/
+//
+// @example scss - Usage
+//   .element {
+//     @include clearFlow;
+//   }
+//
+// @example css - CSS Output
+//   .element::after {
+//     content: "";
+//     clear: both;
+//     display: table;
+//   }
+
+@mixin clearFlow {
+  &::after {
+    content: "";
+    clear: both;
+    display: table;
+  }
+}

mixins/_media_query.scss

@@ -0,0 +1,38 @@
+//Sections for Media Queries
+@mixin forPhoneUp {
+  @media (min-width: #{$screen_tiny - 1}) { @content; } //599px
+}
+@mixin forPhoneOnly {
+  @media (max-width: #{$screen_tiny - 1}) { @content; } //599px
+}
+@mixin forTabletPortraitUp {
+  @media (min-width: $screen_small) { @content; } //600px
+}
+@mixin forTabletPortraitOnly {
+  @media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px
+}
+@mixin forTabletLandscapeUp {
+  @media (min-width: $screen_small) { @content; } //900px
+}
+@mixin forTabletLandscapeOnly {
+  @media (min-width: $screen_small) and (max-width: #{$screen_medium - 1}) { @content; } //900px - 1199px
+}
+@mixin forDesktopUp {
+  @media (min-width: $screen_medium) { @content; } //1200px
+}
+@mixin forDesktopOnly {
+  @media (min-width: $screen_medium) and (max-width: #{$screen_huge - 1}) { @content; } //1200px - 1799px
+}
+@mixin forBigDesktopUp {
+  @media (min-width: $screen_huge) { @content; } //1800px
+}
+
+//Mobile-first Media Query
+@mixin goingLarge($width) {
+  @media (min-width: $width/16+em) { @content; }
+}
+
+//Desktop-first Media Query
+@mixin goingSmall($width) {
+  @media (max-width: $width/16+em) { @content; }
+}

mixins/_sprite.scss

@@ -0,0 +1,123 @@
+// SCSS variables are information about icon's compiled state, stored under its original file name
+//
+// .icon-home {
+//   width: $icon-home-width;
+// }
+//
+// The large array-like variables contain all information about a single icon
+// $icon-home: x y offset_x offset_y width height total_width total_height image_path;
+//
+// At the bottom of this section, we provide information about the spritesheet itself
+// $spritesheet: width height image $spritesheet-sprites;
+$down-name: 'down';
+$down-x: 64px;
+$down-y: 0px;
+$down-offset-x: -64px;
+$down-offset-y: 0px;
+$down-width: 32px;
+$down-height: 32px;
+$down-total-width: 96px;
+$down-total-height: 64px;
+$down-image: '../art/sprite.png';
+$down: (64px, 0px, -64px, 0px, 32px, 32px, 96px, 64px, '../art/sprite.png', 'down', );
+$meta-name: 'meta';
+$meta-x: 64px;
+$meta-y: 32px;
+$meta-offset-x: -64px;
+$meta-offset-y: -32px;
+$meta-width: 32px;
+$meta-height: 32px;
+$meta-total-width: 96px;
+$meta-total-height: 64px;
+$meta-image: '../art/sprite.png';
+$meta: (64px, 32px, -64px, -32px, 32px, 32px, 96px, 64px, '../art/sprite.png', 'meta', );
+$up-name: 'up';
+$up-x: 0px;
+$up-y: 0px;
+$up-offset-x: 0px;
+$up-offset-y: 0px;
+$up-width: 32px;
+$up-height: 64px;
+$up-total-width: 96px;
+$up-total-height: 64px;
+$up-image: '../art/sprite.png';
+$up: (0px, 0px, 0px, 0px, 32px, 64px, 96px, 64px, '../art/sprite.png', 'up', );
+$up2-name: 'up2';
+$up2-x: 32px;
+$up2-y: 0px;
+$up2-offset-x: -32px;
+$up2-offset-y: 0px;
+$up2-width: 32px;
+$up2-height: 64px;
+$up2-total-width: 96px;
+$up2-total-height: 64px;
+$up2-image: '../art/sprite.png';
+$up2: (32px, 0px, -32px, 0px, 32px, 64px, 96px, 64px, '../art/sprite.png', 'up2', );
+$spritesheet-width: 96px;
+$spritesheet-height: 64px;
+$spritesheet-image: '../art/sprite.png';
+$spritesheet-sprites: ($down, $meta, $up, $up2, );
+$spritesheet: (96px, 64px, '../art/sprite.png', $spritesheet-sprites, );
+
+// The provided mixins are intended to be used with the array-like variables
+//
+// .icon-home {
+//   @include sprite-width($icon-home);
+// }
+//
+// .icon-email {
+//   @include sprite($icon-email);
+// }
+//
+// Example usage in HTML:
+//
+// `display: block` sprite:
+// <div class="icon-home"></div>
+//
+// To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
+//
+// // CSS
+// .icon {
+//   display: inline-block;
+// }
+//
+// // HTML
+// <i class="icon icon-home"></i>
+@mixin sprite-width($sprite) {
+  width: nth($sprite, 5);
+}
+
+@mixin sprite-height($sprite) {
+  height: nth($sprite, 6);
+}
+
+@mixin sprite-position($sprite) {
+  $sprite-offset-x: nth($sprite, 3);
+  $sprite-offset-y: nth($sprite, 4);
+  background-position: $sprite-offset-x  $sprite-offset-y;
+}
+
+@mixin sprite-image($sprite) {
+  $sprite-image: nth($sprite, 9);
+  background-image: url(#{$sprite-image});
+}
+
+@mixin sprite($sprite) {
+  @include sprite-image($sprite);
+  @include sprite-position($sprite);
+  @include sprite-width($sprite);
+  @include sprite-height($sprite);
+}
+
+// The `sprites` mixin generates identical output to the CSS template
+//   but can be overridden inside of SCSS
+//
+// @include sprites($spritesheet-sprites);
+@mixin sprites($sprites) {
+  @each $sprite in $sprites {
+    $sprite-name: nth($sprite, 10);
+    .#{$sprite-name} {
+      @include sprite($sprite);
+    }
+  }
+}

mixins/_user_agent.scss

@@ -0,0 +1,9 @@
+@mixin overrideUserAgent() {
+  @if $no_agent_focus == true {
+    @each $el in $io_focus_list {
+      #{$el}:focus {
+        outline: 0;
+      }
+    }
+  }
+}