gem_2345 0.1.1 → 0.1.2

data/stylesheets/compass/css3/_transition.scss

@@ -0,0 +1,190 @@
+@import "compass/support";
+
+// The the user threshold for transition support. Defaults to `$graceful-usage-threshold`
+$transition-support-threshold: $graceful-usage-threshold !default;
+
+
+// CSS Transitions
+// Currently only works in Webkit.
+//
+// * expected in CSS3, FireFox 3.6/7 and Opera Presto 2.3
+// * We'll be prepared.
+//
+// Including this submodule sets following defaults for the mixins:
+//
+//     $default-transition-property : all
+//     $default-transition-duration : 1s
+//     $default-transition-function : false
+//     $default-transition-delay    : false
+//
+// Override them if you like. Timing-function and delay are set to false for browser defaults (ease, 0s).
+
+$default-transition-property: all !default;
+
+$default-transition-duration: 1s !default;
+
+$default-transition-function: null !default;
+
+$default-transition-delay: null !default;
+
+$transitionable-prefixed-values: transform, transform-origin !default;
+
+
+
+// Checks if the value given is a unit of time.
+@function is-time($value) {
+  @return if(type-of($value) == number, not not index(s ms, unit($value)), false);
+}
+
+// Returns `$property` with the given prefix if it is found in `$transitionable-prefixed-values`.
+@function prefixed-for-transition($prefix, $property) {
+  @if not $prefix {
+    @return $property;
+  }
+  @if type-of($property) == list or type-of($property) == arglist {
+    $new-list: comma-list();
+    @each $v in $property {
+      $new-list: append($new-list, prefixed-for-transition($prefix, $v));
+    }
+    @return $new-list;
+  } @else {
+    @if index($transitionable-prefixed-values, $property) {
+      @return #{$prefix}-#{$property};
+    } @else {
+      @return $property;
+    }
+  }
+}
+
+// Returns $transition-map which includes key and values that map to a transition declaration
+@function transition-map($transition) {
+  $transition-map: ();
+
+  @each $item in $transition {
+    @if is-time($item) {
+      @if map-has-key($transition-map, duration) {
+        $transition-map: map-merge($transition-map, (delay: $item));
+      } @else {
+        $transition-map: map-merge($transition-map, (duration: $item));
+      }
+    } @else if map-has-key($transition-map, property) {
+      $transition-map: map-merge($transition-map, (timing-function: $item));
+    } @else {
+      $transition-map: map-merge($transition-map, (property: $item));
+    }
+  }
+
+  @return $transition-map;
+}
+
+// One or more properties to transition
+//
+// * for multiple, use a comma-delimited list
+// * also accepts "all" or "none"
+
+@mixin transition-property($properties...) {
+  $properties: set-arglist-default($properties, $default-transition-property);
+  @include with-each-prefix(css-transitions, $transition-support-threshold) {
+    $props: if($current-prefix, prefixed-for-transition($current-prefix, $properties), $properties);
+    @include prefix-prop(transition-property, $props);
+  }
+}
+
+// One or more durations in seconds
+//
+// * for multiple, use a comma-delimited list
+// * these durations will affect the properties in the same list position
+
+@mixin transition-duration($durations...) {
+  $durations: set-arglist-default($durations, $default-transition-duration);
+  @include prefixed-properties(css-transitions, $transition-support-threshold, (
+    transition-duration: $durations
+  ));
+}
+
+// One or more timing functions
+//
+// * [ ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)]
+// * For multiple, use a comma-delimited list
+// * These functions will effect the properties in the same list position
+
+@mixin transition-timing-function($functions...) {
+  $functions: set-arglist-default($functions, $default-transition-function);
+  @include prefixed-properties(css-transitions, $transition-support-threshold, (
+    transition-timing-function: $functions
+  ));
+}
+
+// One or more transition-delays in seconds
+//
+// * for multiple, use a comma-delimited list
+// * these delays will effect the properties in the same list position
+
+@mixin transition-delay($delays...) {
+  $delays: set-arglist-default($delays, $default-transition-delay);
+  @include prefixed-properties(css-transitions, $transition-support-threshold, (
+    transition-delay: $delays
+  ));
+}
+
+// Transition all-in-one shorthand
+
+@mixin single-transition(
+  $property: $default-transition-property,
+  $duration: $default-transition-duration,
+  $function: $default-transition-function,
+  $delay: $default-transition-delay
+) {
+  @include transition(compact($property $duration $function $delay));
+}
+
+@mixin transition($transitions...) {
+  $default: (compact($default-transition-property $default-transition-duration $default-transition-function $default-transition-delay),);
+  $transitions: if(length($transitions) == 1 and type-of(nth($transitions, 1)) == list and list-separator(nth($transitions, 1)) == comma, nth($transitions, 1), $transitions);
+  $transitions: set-arglist-default($transitions, $default);
+
+
+  @include with-each-prefix(css-transitions, $transition-support-threshold) {
+    $delays: comma-list();
+    $transitions-without-delays: comma-list();
+    $transitions-with-delays: comma-list();
+    $has-delays: false;
+
+
+    // This block can be made considerably simpler at the point in time that
+    // we no longer need to deal with the differences in how delays are treated.
+    @each $transition in $transitions {
+      // Declare initial values for transition
+      $transition: transition-map($transition);
+
+      $property: map-get($transition, property);
+      $duration: map-get($transition, duration);
+      $timing-function: map-get($transition, timing-function);
+      $delay: map-get($transition, delay);
+
+      // Parse transition string to assign values into correct variables
+      $has-delays: $has-delays or $delay;
+
+      @if $current-prefix == -webkit {
+        // Keep a list of delays in case one is specified
+        $delays: append($delays, if($delay, $delay, 0s));
+        $transitions-without-delays: append($transitions-without-delays,
+          prefixed-for-transition($current-prefix, $property) $duration $timing-function);
+      } @else {
+        $transitions-with-delays: append($transitions-with-delays,
+          prefixed-for-transition($current-prefix, $property) $duration $timing-function $delay);
+      }
+    }
+
+    @if $current-prefix == -webkit {
+      @include prefix-prop(transition, $transitions-without-delays);
+      @if $has-delays {
+        @include prefix-prop(transition-delay, $delays);
+      }
+    } @else if $current-prefix {
+      @include prefix-prop(transition, $transitions-with-delays);
+    } @else {
+      transition: $transitions-with-delays;
+    }
+  }
+}

data/stylesheets/compass/css3/_user-interface.scss

@@ -0,0 +1,71 @@
+// User Interface
+// This file can be expanded to handle all the user interface properties as
+// they become available in browsers:
+// http://www.w3.org/TR/2000/WD-css3-userint-20000216
+
+@import "compass/support";
+
+// The prefixed support threshold for user-select.
+// Defaults to the $graceful-usage-threshold.
+$userselect-support-threshold: $graceful-usage-threshold !default;
+
+// This property controls the selection model and granularity of an element.
+//
+// @param $select
+//   [ none | text | toggle | element | elements | all | inherit ]
+@mixin user-select($select) {
+  $select: unquote($select);
+
+  @include with-each-prefix(user-select-none, $userselect-support-threshold) {
+    // old Firefox used a proprietary `-moz-none` value, starting with Firefox 21 `none` behaves like `-moz-none`
+    // @link https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
+    @include prefix-prop(user-select, if($current-prefix == -moz and $select == 'none', -moz-none, $select));
+  }
+}
+
+// The prefixed support threshold for input-placeholder.
+// Defaults to the $graceful-usage-threshold.
+$input-placeholder-support-threshold: $graceful-usage-threshold !default;
+
+// Style the html5 input placeholder in browsers that support it.
+//
+// The styles for the input placeholder are passed as mixin content
+// and the selector comes from the mixin's context.
+//
+// For example:
+//
+//     #{elements-of-type(text-input)} {
+//       @include input-placeholder {
+//         color: #bfbfbf;
+//         font-style: italic;
+//       }
+//     }
+//
+// if you want to apply the placeholder styles to all elements supporting
+// the `input-placeholder` pseudo class (beware of performance impacts):
+//
+//     * {
+//       @include input-placeholder {
+//         color: #bfbfbf;
+//         font-style: italic;
+//       }
+//     }
+@mixin input-placeholder {
+  @include with-each-prefix(css-placeholder, $input-placeholder-support-threshold) {
+    @if $current-prefix == -webkit {
+      &::-webkit-input-placeholder { @content; }
+    }
+    @elseif $current-prefix == -moz {
+      // for Firefox 19 and below
+      @if support-legacy-browser("firefox", "4", "19", $threshold: $input-placeholder-support-threshold) {
+        &:-moz-placeholder { @content; }
+      }
+      // for Firefox 20 and above
+      &::-moz-placeholder { @content; }
+    }
+    @elseif $current-prefix == -ms {
+      &:-ms-input-placeholder { @content; }
+    }
+  }
+  // This is not standardized yet so no official selector is generated.
+}

data/stylesheets/compass/layout/_grid-background.scss

@@ -0,0 +1,178 @@
+@import "compass/css3/images";
+@import "compass/css3/background-size";
+
+// Set the color of your columns
+$grid-background-column-color     : rgba(100, 100, 225, 0.25)   !default;
+// Set the color of your gutters
+$grid-background-gutter-color     : rgba(0, 0, 0, 0)            !default;
+
+// Set the total number of columns in your grid
+$grid-background-total-columns    : 24                          !default;
+// Set the width of your columns
+$grid-background-column-width     : 30px                        !default;
+// Set the width of your gutters
+$grid-background-gutter-width     : 10px                        !default;
+// Set the offset, if your columns are padded in from the container edge
+$grid-background-offset           : 0px                         !default;
+
+// Set the color of your baseline
+$grid-background-baseline-color   : rgba(0, 0, 0, 0.5)          !default;
+// Set the height of your baseline grid
+$grid-background-baseline-height  : 1.5em                       !default;
+
+// toggle your columns grids on and off
+$show-column-grid-backgrounds     : true                        !default;
+// toggle your vertical grids on and off
+$show-baseline-grid-backgrounds   : true                        !default;
+// toggle all your grids on and off
+$show-grid-backgrounds            : true                        !default;
+
+// optionally force your grid-image to remain fluid
+// no matter what units you used to declared your grid.
+$grid-background-force-fluid      : false                       !default;
+
+
+// Create the gradient needed for baseline grids
+@function get-baseline-gradient(
+  $color : $grid-background-baseline-color
+) {
+  $gradient: linear-gradient(to top, $color 5%, rgba($color,0) 5%);
+  @return $gradient;
+}
+
+// Create the color-stops needed for horizontal grids
+@function build-grid-background(
+  $total          : $grid-background-total-columns,
+  $column         : $grid-background-column-width,
+  $gutter         : $grid-background-gutter-width,
+  $offset         : $grid-background-offset,
+  $column-color   : $grid-background-column-color,
+  $gutter-color   : $grid-background-gutter-color
+) {
+  $grid: compact();
+  $grid: append($grid, $gutter-color $offset, comma);
+  @for $i from 0 to $total {
+
+    // $a represents the start of this column, initially equal to the offset
+    $a: $offset;
+    @if $i > 0 { $a: $a + (($column + $gutter) * $i); }
+
+    // $g represents the start of this gutter, equal to $a plus one column-width
+    $g: $a + $column;
+
+    // $z represents the end of a gutter, equal to $g plus one gutter-width
+    $z: $g + $gutter;
+
+    @if (unit($a) == "%") and ($i == ($total - 1)) {
+      $z: 100%;
+    }
+
+    // and we add this column/gutter pair to our grid
+    $grid: join($grid, (lighten($column-color, 5%) $a, darken($column-color, 5%) $g, $gutter-color $g, $gutter-color $z));
+  }
+
+  @return $grid;
+}
+
+// Return the gradient needed for horizontal grids
+@function get-column-gradient(
+  $total          : $grid-background-total-columns,
+  $column         : $grid-background-column-width,
+  $gutter         : $grid-background-gutter-width,
+  $offset         : $grid-background-offset,
+  $column-color   : $grid-background-column-color,
+  $gutter-color   : $grid-background-gutter-color,
+  $force-fluid    : $grid-background-force-fluid
+) {
+  $grid: unquote("");
+
+  // don't force fluid grids when they are already fluid.
+  @if unit($column) == "%" { $force-fluid: false; }
+
+  @if $force-fluid {
+    $grid: get-column-fluid-grid($total,$column,$gutter,$offset,$column-color,$gutter-color);
+  } @else {
+    $grid: build-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color);
+  }
+
+  // return the horizontal grid as a gradient
+  $gradient: linear-gradient(left, $grid);
+  @return $gradient;
+}
+
+// Convert a grid from fixed units into percentages.
+@function get-column-fluid-grid(
+  $total          : $grid-background-total-columns,
+  $column         : $grid-background-column-width,
+  $gutter         : $grid-background-gutter-width,
+  $offset         : $grid-background-offset,
+  $column-color   : $grid-background-column-color,
+  $gutter-color   : $grid-background-gutter-color
+) {
+  $context: ($column * $total) + ($gutter * ($total - 1) + ($offset * 2));
+  $offset: $offset / $context * 100%;
+  $column: $column / $context * 100%;
+  $gutter: $gutter / $context * 100%;
+
+  // return the horizontal grid as a set of color-stops
+  $grid: build-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color);
+  @return $grid;
+}
+
+
+// Add just the baseline grid to an element's background
+@mixin baseline-grid-background(
+  $baseline : $grid-background-baseline-height,
+  $color    : $grid-background-baseline-color
+) {
+  @if $show-grid-backgrounds and $show-baseline-grid-backgrounds {
+    @include background-image(get-baseline-gradient($color));
+    @include background-size(100% $baseline);
+    background-position: left top;
+  }
+}
+
+// Add just the horizontal grid to an element's background
+@mixin column-grid-background(
+  $total          : $grid-background-total-columns,
+  $column         : $grid-background-column-width,
+  $gutter         : $grid-background-gutter-width,
+  $offset         : $grid-background-offset,
+  $column-color   : $grid-background-column-color,
+  $gutter-color   : $grid-background-gutter-color,
+  $force-fluid    : $grid-background-force-fluid
+) {
+  @if $show-grid-backgrounds and $show-column-grid-backgrounds {
+    @include background-image(
+      get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid)
+    );
+    background-position: left top;
+  }
+}
+
+// Add both horizontal and baseline grids to an element's background
+@mixin grid-background(
+  $total          : $grid-background-total-columns,
+  $column         : $grid-background-column-width,
+  $gutter         : $grid-background-gutter-width,
+  $baseline       : $grid-background-baseline-height,
+  $offset         : $grid-background-offset,
+  $column-color   : $grid-background-column-color,
+  $gutter-color   : $grid-background-gutter-color,
+  $baseline-color : $grid-background-baseline-color,
+  $force-fluid    : $grid-background-force-fluid
+) {
+  @if $show-grid-backgrounds {
+    @if $show-baseline-grid-backgrounds and $show-column-grid-backgrounds {
+      @include background-image(
+        get-baseline-gradient($baseline-color),
+        get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid)
+      );
+      @include background-size(100% $baseline, auto);
+      background-position: left top;
+    } @else {
+      @include baseline-grid-background($baseline, $baseline-color);
+      @include column-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid);
+    }
+  }
+}

data/stylesheets/compass/layout/_sticky-footer.scss

@@ -0,0 +1,23 @@
+// Based on a [blog post by Ryan Fait](http://ryanfait.com/resources/footer-stick-to-bottom-of-page/).
+//
+// Must be mixed into the top level of your stylesheet.
+//
+// Footer element must be outside of root wrapper element.
+//
+// Footer must be a fixed height.
+
+@mixin sticky-footer($footer-height, $root-selector: unquote("#root"), $root-footer-selector: unquote("#root_footer"), $footer-selector: unquote("#footer")) {
+  html, body {
+    height: 100%; }
+  #{$root-selector} {
+    clear: both;
+    min-height: 100%;
+    height: auto !important;
+    height: 100%;
+    margin-bottom: -$footer-height;
+    #{$root-footer-selector} {
+      height: $footer-height; } }
+  #{$footer-selector} {
+    clear: both;
+    position: relative;
+    height: $footer-height; } }