ultimate-mixins 0.1.0.0

data/app/assets/stylesheets/ultimate/mixins/_routines.scss

@@ -0,0 +1,130 @@
+@mixin deprecate($subject, $instead: false) {
+  @warn "\"#{$subject}\" DEPRECATED!#{if($instead, " Use instead: \"#{$instead}\"", '')}";
+}
+
+@function isset($v) {
+  @return $v != none and $v != false;
+}
+
+@function complex-isset($list, $l: length($list)) {
+  $i: 1;
+  @while $i <= $l and isset(nth($list, $i)) {
+    $i: $i + 1;
+  }
+  @return $i > $l;
+}
+
+@function list-rtrim($list, $count: 1) {
+  $r: ();
+  $l: length($list) - $count;
+  $i: 1;
+  @while $i <= $l {
+    $r: append($r, nth($list, $i));
+    $i: $i + 1;
+  }
+  @return $r;
+}
+
+@function complex-list($params) {
+  $l: length($params);
+  @if $l > 1 and nth($params, $l) == !important {
+    $params: list-rtrim($params);
+    $l: $l - 1;
+  }
+  @if $l < 4 {
+    @if $l < 3 {
+      $params: join($params, nth($params, 1));
+    }
+    @if $l > 1 {
+      $params: join($params, nth($params, 2));
+    } @else {
+      $params: join($params, $params);
+    }
+  }
+  @return $params;
+}
+
+@mixin complex-property($property, $params, $complex-params: false) {
+  @if isset($params) {
+    $l: length($params);
+    @if $l == 1 or complex-isset($params) {
+      #{$property}: $params;
+    } @else {
+      @if $l < 4 {
+        $params: if(length($complex-params) >= 4, $complex-params, complex-list($params));
+      }
+      $i: 0;
+      @each $side in top, right, bottom, left {
+        $i: $i + 1;
+        $p: nth($params, $i);
+        @if isset($p) {
+          #{$property}-#{$side}: $p;
+        }
+      }
+    }
+  }
+}
+
+@function strip-px($v) {
+  @return if(unit($v) == "px", $v / 1px, $v);
+}
+
+@function list-to-string($list, $separator: "") {
+  $result: "";
+  $first: true;
+  @each $cut in $list {
+    @if $first {
+      $first: false;
+      $result: $cut;
+    } @else {
+      $result: "#{$result}#{$separator}#{$cut}"
+    }
+  }
+  @return $result;
+}
+
+@function change-separator($list, $separator: comma) {
+  $result: ();
+  @each $value in $list {
+    $result: append($result, $value, $separator);
+  }
+  @return $result;
+}
+
+@function compact-list($list, $separator: comma) {
+  $result: ();
+  @each $value in $list {
+    @if isset($value) {
+      $result: append($result, $value, $separator);
+    }
+  }
+  @return $result;
+}
+
+@function hack-ie8($params) {
+  @return unquote("#{$params}\0/");
+}
+
+@function contains($list, $var) {
+  @each $item in $list { @if $item == $var { @return true; } }
+  @return false;
+}
+
+@function find-typed-item($list, $type, $default: false) {
+  @each $item in $list { @if type-of($item) == $type { @return $item; } }
+  @return $default;
+}
+
+@function find-color($list, $default: false) {
+  @return find-typed-item($list, color, $default);
+}
+
+@function _dec-size($value, $dec-list...) {
+  $value-unit: unit($value);
+  @each $dec-value in $dec-list {
+    @if unit($dec-value) == $value-unit {
+      $value: $value - $dec-value;
+    }
+  }
+  @return $value;
+}

data/app/assets/stylesheets/ultimate/mixins/_text-shadow_hard.scss

@@ -0,0 +1,40 @@
+
+$support-ie: true !default;
+
+//  Provide cross-browser CSS text-shadow with hardcore ie-hack.
+//    example:
+//      @include text-shadow(#3b3b3b 1px 1px 1px);
+//    produce:
+//      text-shadow: 0 2px #000;
+//      filter: shadow(Color=#3b3b3b, Direction=135, Strength=1.414);
+@mixin text-shadow_hard($params) {
+  $l: length($params);
+  $color: nth($params, $l);
+  @if $color == none {
+    text-shadow: none;
+    @if $support-ie {
+      filter: shadow(enabled=false);
+    }
+  } @else {
+    text-shadow: $params;
+    @if $support-ie {
+      $params-offset: 0;
+      @if type-of($color) != color {
+        $color: nth($params, 1);
+        @if type-of($color) == color {
+          $params-offset: 1;
+        } @else {
+          $color: #000;
+        }
+      }
+      $offset-x: 0;
+      $offset-y: 0;
+      @if $l > 2 {
+        $offset-x : nth($params, $params-offset + 1);
+        $offset-y : nth($params, $params-offset + 2);
+      }
+      $polar: polar($offset-x, $offset-y);
+      filter: shadow(Color=$color, Direction=nth($polar, 1), Strength=nth($polar, 2));
+    }
+  }
+}

data/app/assets/stylesheets/ultimate/mixins/_vendors.scss

@@ -0,0 +1,44 @@
+//  This mixin provides basic support for CSS properties with custom vendors implementations
+//  are identical except for the property prefix.
+//    example:
+//      @include vendors(webkit moz, border-radius, 5px);
+//    produce:
+//      -webkit-border-radius: 5px;
+//         -moz-border-radius: 5px;
+//              border-radius: 5px;
+@mixin vendors($vendors, $property, $params, $origin: true) {
+  @each $vendor in $vendors {
+    -#{$vendor}-#{$property}: $params;
+  }
+  @if $origin {
+    #{$property}: $params;
+  }
+}
+
+//  Same as vendors(), but for cases when the property is the same and the value is vendorized.
+//    examples:
+//      @include vendors-param(webkit moz ms o, background-image, linear-gradient(left top, #F00, #FF0 50%, #0F0));
+//    produce:
+//      background-image: -webkit-linear-gradient(left top, #F00, #FF0 50%, #0F0);
+//      background-image:    -moz-linear-gradient(left top, #F00, #FF0 50%, #0F0);
+//      background-image:     -ms-linear-gradient(left top, #F00, #FF0 50%, #0F0);
+//      background-image:      -o-linear-gradient(left top, #F00, #FF0 50%, #0F0);
+//      background-image:         linear-gradient(left top, #F00, #FF0 50%, #0F0);
+@mixin vendors-param($vendors, $property, $params, $origin: true) {
+  @each $vendor in $vendors {
+    #{$property}: -#{$vendor}-#{$params};
+  }
+  @if $origin {
+    #{$property}: $params;
+  }
+}
+
+// TODO docs
+@mixin vendors-full($vendors, $property, $params, $origin: true) {
+  @each $vendor in $vendors {
+    -#{$vendor}-#{$property}: -#{$vendor}-#{$params};
+  }
+  @if $origin {
+    #{$property}: $params;
+  }
+}

data/app/assets/stylesheets/ultimate/mixins/css3.scss

@@ -0,0 +1,357 @@
+// Use compatibility tables from http://caniuse.com/
+// http://css3pie.com/documentation/supported-css3-features/#pie-lazy-init
+
+$support-ie: true !default;
+$pie-url: asset-url("polyfills/PIE.htc", '') !default;
+$boxsizing-url: asset-url("polyfills/boxsizing.htc", '') !default;
+
+
+@mixin pie($poll: none, $watch-ancestors: 0) {
+  @if $support-ie and $pie-url {
+    behavior: $pie-url;
+    // http://css3pie.com/documentation/supported-css3-features/#pie-poll
+    @if $poll != none {
+      -pie-poll: $poll;
+    }
+    // http://css3pie.com/documentation/supported-css3-features/#pie-watch-ancestors
+    @if $watch-ancestors > 0 {
+      -pie-watch-ancestors: $watch-ancestors;
+    }
+  }
+}
+
+@import "ultimate/mixins/vendors";
+@import "ultimate/mixins/routines";
+
+//  Round all corners by a specific amount.
+//    example:
+//      @include border-radius(5px 5px 0 0);
+//    produce:
+//      -webkit-border-radius: 5px 5px 0 0; // iOS-Safari <= 3.2, Android <= 2.1
+//              border-radius: 5px 5px 0 0;
+@mixin border-radius($params) {
+  @include vendors(webkit, border-radius, $params);
+}
+
+//  Round mentioned corners by a specific amounts without muted corners by none or false.
+//    example:
+//      @include border-radius__complex(5px 7px none);
+//    produce:
+//      -webkit-border-top-left-radius: 5px; // iOS-Safari <= 3.2, Android <= 2.1
+//              border-top-left-radius: 5px;
+//      -webkit-border-top-right-radius: 7px;
+//              border-top-right-radius: 7px;
+//      -webkit-border-bottom-left-radius: 7px;
+//              border-bottom-left-radius: 7px;
+@mixin border-radius_complex($params) {
+  @if isset($params) {
+    $l: length($params);
+    @if $l == 1 or complex-isset($params) {
+      @include border-radius($params);
+    } @else {
+      @if $l < 4 {
+        $params: complex-list($params);
+      }
+      $i: 0;
+      @each $corner in top-left, top-right, bottom-right, bottom-left {
+        $i: $i + 1;
+        $p: nth($params, $i);
+        @if isset($p) {
+          @include vendors(webkit, border-#{$corner}-radius, $p);
+        }
+      }
+    }
+  }
+}
+
+//  Provide CSS3 box-shadow property.
+//    example:
+//      @include box-shadow(#00F -10px 0 10px, #F00 10px 0 10px);
+//    produce:
+//      -webkit-box-shadow: #00F -10px 0 10px, #F00 10px 0 10px; // Safari 5.0, iOS-Safari <= 4.3, Android <= 4.0      missing "inset" and blur radius value support for iOS-Safari <= 3.2, Android <= 3.0
+//              box-shadow: #00F -10px 0 10px, #F00 10px 0 10px;
+@mixin box-shadow($shadow0, $shadow1: false, $shadow2: false, $shadow3: false, $shadow4: false, $shadow5: false, $shadow6: false, $shadow7: false, $shadow8: false, $shadow9: false) {
+  $shadows: compact-list($shadow0 $shadow1 $shadow2 $shadow3 $shadow4 $shadow5 $shadow6 $shadow7 $shadow8 $shadow9);
+  @if length($shadows) == 0 {
+    $shadows: none;
+  }
+  @include vendors(webkit, box-shadow, $shadows);
+}
+
+//  Change the box model of element.
+//    example:
+//      @include box-sizing;
+//    produce:
+//      -webkit-box-sizing: border-box; // Safari <= 5.0, iOS-Safari <= 4.3, Android <= 3.0
+//         -moz-box-sizing: border-box; // actual
+//              box-sizing: border-box; //
+//      *behavior: url("/assets/polyfills/boxsizing.htc"); // IE 6-7
+@mixin box-sizing($params: border-box) {
+  @include vendors(webkit moz, box-sizing, $params);
+  @if $support-ie and $boxsizing-url {
+    // https://github.com/Schepp/box-sizing-polyfill
+    *behavior: $boxsizing-url; // IE 6-7
+  }
+}
+
+//  Provide CSS3 linear-gradient as background image.
+//    params:
+//      $corner:
+//        Represents the position of the starting-point of the gradient line.
+//        It consists of two keywords: the first one indicates the horizontal side, `left` or `right`,
+//        and the second one the vertical side, `top` or `bottom`.
+//        The order is not relevant and each of the keyword is optional.
+//        The values `to top`, `to bottom`, `to left` and `to right`
+//        are translated into the angles `0deg`, `180deg`, `270deg`, `90deg` respectively.
+//        The others are translated into an angle that let the starting-point to be in the same quadrant
+//        than the described corner and so that the line defined by the starting-point and the corner
+//        is perpendicular to the gradient line. That way, the color described by the <color-stop>
+//        will exactly apply to the corner point. This is sometimes called the "magic corner" property.
+//        The end-point of the gradient line is the symmetrical point of the starting-point
+//        on the other direction of the center box.
+//      _angle:
+//        An angle of direction for the gradient. See <angle> (https://developer.mozilla.org/en/CSS/angle).
+//      $stops:
+//        This value is comprised of a <color> value, followed by an optional stop position
+//        (either a percentage between 0% and 100% or a <length> along the gradient axis).
+//        Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.
+//    example:
+//      @include linear-gradient(right, (green, orange 20%, red 100%));
+//    produce:
+//      background-color: $bg-color;
+//      background-image:        -webkit-gradient(linear, right top, left top, color-stop(0%, green), color-stop(20%, orange), color-stop(100%, red)); // old webkit (Safari <= 5.0, iOS-Safari <= 4.3, Android <= 3.0)
+//      background-image: -webkit-linear-gradient(right, green, orange 20%, red 100%); // Chrome 10+, Safari 5.1+, Android 4.0+
+//      background-image:    -moz-linear-gradient(right, green, orange 20%, red 100%); // FF 3.6+
+//      background-image:     -ms-linear-gradient(right, green, orange 20%, red 100%); // IE 10+
+//      background-image:      -o-linear-gradient(right, green, orange 20%, red 100%); // Opera 11.1+
+//      background-image:         linear-gradient(right, green, orange 20%, red 100%); // future
+//      -pie-background: $bg-c    linear-gradient(right, green, orange 20%, red 100%); // IE 6-9
+@mixin linear-gradient($corner_angle, $stops) {
+  $wk_start: left top;
+  $wk_end: left bottom;
+  $start: nth($corner_angle, 1);
+  @if $start == top {
+    $wk_start: left top;
+    $wk_end: left bottom;
+  } @else if $start == bottom {
+    $wk_start: left bottom;
+    $wk_end: left top;
+  } @else if $start == left {
+    $wk_start: left top;
+    $wk_end: right top;
+  } @else if $start == right {
+    $wk_start: right top;
+    $wk_end: left top;
+  }
+  $wk_stops: ();
+  $stops_length: length($stops);
+  $percents-by-stop: 100 / ($stops_length - 1);
+  $i: 0;
+  $p: 0;
+  @each $stop in $stops {
+    $i: $i + 1;
+    $cp: "#{$p}%";
+    @if length($stop) > 1 {
+      $cp: nth($stop, 2);
+    }
+    $stop: "#{$cp}, #{nth($stop, 1)}";
+    $wk_stops: append($wk_stops, color-stop(#{$stop}), comma);
+    $p: $p + $percents-by-stop;
+  }
+  $bg-color: nth(nth($stops, 1), 1);
+  // TODO: need check all color stops
+  @if alpha($bg-color) == 1 {
+    background-color: $bg-color;
+  }
+  background-image: -webkit-gradient(linear, $wk_start, $wk_end, $wk_stops);
+  $linear-gradient: linear-gradient($corner_angle, change-separator($stops));
+  @include vendors-param(webkit moz ms o, background-image, $linear-gradient);
+  @if $support-ie and $pie-url {
+    @if alpha($bg-color) == 1 {
+      -pie-background: $bg-color $linear-gradient;
+    } else {
+      -pie-background: $linear-gradient;
+    }
+  }
+}
+
+//  Provide CSS3 radial-gradient as background image.
+//    params:
+//      $position:
+//        A position, interpreted in the same way as background-position or transform-origin. If omitted, the default is center.
+//      _angle:
+//        An angle establishing the gradient line, which extends from the starting point at this angle; this is 0deg by default.
+//      $shape:
+//        circle            Meaning that the gradient's shape is a circle with constant radius.
+//        ellipse           Meaning that the shape is an axis-aligned ellipse.
+//      _size:
+//        closest-side      The gradient's shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).
+//        closest-corner    The gradient's shape is sized so it exactly meets the closest corner of the box from its center.
+//        farthest-side     Similar to closest-side, except the shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).
+//        farthest-corner   The gradient's shape is sized so it exactly meets the farthest corner of the box from its center.
+//        contain           A synonym for closest-side.
+//        cover             A synonym for farthest-corner.
+//    example:
+//      @include radial-gradient(center 45deg, circle closest-side, (orange 0%, red 100%));
+//    produce:
+//      background-image: -webkit-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); // Chrome 10+, Safari 5.1+, Android 4.0+
+//      background-image:    -moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); // FF 3.6+
+//      background-image:     -ms-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); // IE 10+
+//      background-image:      -o-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); // Opera 11.6+
+//      background-image:         radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); // future
+@mixin radial-gradient($position_angle, $shape_size, $stops) {
+  @include vendors-param(webkit moz ms o, background-image, radial-gradient($position_angle, $shape_size, change-separator($stops)));
+}
+
+@mixin border-gradient_simple($color_start, $color_stop, $is_horizontal: false) {
+  $color_mix: mix($color_start, $color_stop);
+  @if $is_horizontal {
+    border-color: $color_mix $color_stop $color_mix $color_start;
+  } @else {
+    border-color: $color_start $color_mix $color_stop;
+  }
+}
+
+// EXPERIMENTAL
+// Temporary remove webkit support, because find bug in Chromium 20
+@mixin border-gradient($color_start, $color_stop, $is_horizontal: false) {
+  @include border-gradient_simple($color_start, $color_stop, $is_horizontal);
+  $start: top;
+  //$wk_start: left top;
+  //$wk_stop: left bottom;
+  @if $is_horizontal {
+    $start: left;
+    //$wk_stop: right top;
+  }
+  // -webkit-border-image: -webkit-gradient(linear, $wk_start, $wk_stop, from($color_start), to($color_stop)); // old webkit (Safari <= 5.0, iOS-Safari <= 4.3, Android <= 3.0)
+  @include vendors-full(moz ms o, border-image, linear-gradient($start, $color_start, $color_stop));
+  //-webkit-border-image: -webkit-linear-gradient($start, $color_start, $color_stop); // Chrome 10+, Safari 5.1+, Android 4.0+
+  //   -moz-border-image:    -moz-linear-gradient($start, $color_start, $color_stop); // FF 3.5+
+  //    -ms-border-image:     -ms-linear-gradient($start, $color_start, $color_stop); // IE 10+
+  //     -o-border-image:      -o-linear-gradient($start, $color_start, $color_stop); // Opera 11.0+
+  //        border-image:         linear-gradient($start, $color_start, $color_stop); // future
+}
+
+//  Provide cross-browser CSS opacity.
+//    example:
+//      @include opacity(0.3);
+//    produce:
+//      opacity: 0.3;
+//      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); // IE <= 8.0
+@mixin opacity($value: 0.5) {
+  opacity: $value;
+  @if $support-ie {
+    $value: round($value * 100);
+    @if $value < 100 {
+      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=#{$value});
+    } @else {
+      filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
+    }
+  }
+}
+
+// For rgba()
+@mixin pie-bg($bg) {
+  background: $bg;
+  @if $support-ie and $pie-url and type-of($bg) == color and alpha($bg) < 1 {
+    -pie-background: $bg;
+  }
+}
+
+//    example:
+//      @include ellipsis;
+//    produce:
+//      overflow: hidden;           // need to work text-overflow
+//      white-space: nowrap;        // need to work text-overflow
+//      -o-text-overflow: ellipsis; // Opera Mini and Opera Mobile
+//         text-overflow: ellipsis; // all
+@mixin ellipsis($overflow: hidden, $nowrap: true) {
+  @if isset($overflow) {
+    overflow: $overflow;
+  }
+  @if $nowrap {
+    white-space: nowrap;
+  }
+  @include vendors(o, text-overflow, ellipsis);
+}
+
+//    $param: none || text || all || element
+//    example:
+//      @include user-select;
+//    produce:
+//      -webkit-user-select: none;
+//         -moz-user-select: none;
+//          -ms-user-select: none; // IE 10+
+//           -o-user-select: none;
+//              user-select: none;
+@mixin user-select($param: none) {
+  @include vendors(webkit moz ms o, user-select, $param);
+}
+
+//  Provide vendorized CSS transition.
+//    example:
+//      @include transition(all, 0.5s);
+//    produce:
+//      -webkit-transition: all 0.5s ease; // actual
+//         -moz-transition: all 0.5s ease; // FF 8+
+//          -ms-transition: all 0.5s ease; // IE 10+
+//           -o-transition: all 0.5s ease; // Opera 11.6+
+//    without:
+//              transition: all 0.5s ease; // future
+@mixin transition($what, $time, $method: ease) {
+  @include vendors(webkit moz ms o, transition, $what $time $method, false);
+}
+
+//  Provide vendorized CSS transform.
+//    example:
+//      @include transform(scale(1.2, 1.2));
+//    produce:
+//      -webkit-transform: scale(1.2, 1.2); // actual
+//         -moz-transform: scale(1.2, 1.2); // actual
+//          -ms-transform: scale(1.2, 1.2); // IE 9+
+//           -o-transform: scale(1.2, 1.2); // actual
+//    without:
+//              transform: scale(1.2, 1.2); // future
+@mixin transform($params) {
+  @include vendors(webkit moz ms o, transform, $params, false);
+}
+
+//  Scale an object along the x and y axis. IE < 9 only proportional scale by $scale-x.
+//    example:
+//      @include scale(1.2);
+//    produce:
+//      -webkit-transform: scale(1.2, 1.2); // actual
+//         -moz-transform: scale(1.2, 1.2); // actual
+//          -ms-transform: scale(1.2, 1.2); // IE 9+
+//           -o-transform: scale(1.2, 1.2); // actual
+//                  *zoom: 1.2;             // IE 5.5-7
+//                   zoom: 1.2\0/;          // IE 8
+//    without:
+//              transform: scale(1.2, 1.2); // future
+@mixin scale($scale-x, $scale-y: $scale-x) {
+  @include transform(scale($scale-x, $scale-y));
+  @if $support-ie {
+    *zoom: $scale-x;
+    //zoom: hack-ie8($scale-x); TODO temp!
+  }
+}
+
+@mixin rotate($angle) {
+  @include transform(rotate($angle));
+  //filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); === -90deg
+}
+
+//  Style the html5 input placeholder in browsers that support it.
+//  The styles for the input placeholder are passed as mixin content.
+//  Mostly supported properties: color, font-*, letter-spacing.
+//    example:
+//      @include input-placeholder {
+//        color: #bfbfbf;
+//        font-style: italic;
+//      }
+@mixin input-placeholder {
+  &::-webkit-input-placeholder { @content; }
+  &:-moz-placeholder { @content; }
+  &::-moz-placeholder { @content; }
+  &:-ms-input-placeholder { @content; }
+}