ultimate-base 0.4.1.0 → 0.5.0.0

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

@@ -1,130 +0,0 @@
-@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/_vendors.scss

@@ -1,44 +0,0 @@
-//  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

@@ -1,357 +0,0 @@
-// 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; }
-}