ultimate-base 0.2.0

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

@@ -0,0 +1,328 @@
+// Use compatibility tables from http://caniuse.com/
+// http://css3pie.com/documentation/supported-css3-features/#pie-watch-ancestors
+// http://css3pie.com/documentation/supported-css3-features/#pie-lazy-init
+// TODO use !default http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_defaults_
+
+$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";
+@import "ultimate/mixins/css3/text-shadow";
+
+//  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);
+  @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+
+//      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);
+  $repcents-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 + $repcents-by-stop;
+  }
+  $bg-color: nth(nth($stops, 1), 1);
+  background-color: $bg-color;
+  background-image: -webkit-gradient(linear, $wk_start, $wk_end, $wk_stops);
+  $linear-gradient: linear-gradient($corner_angle, $stops);
+  @include vendors-param(webkit moz ms o, background-image, $linear-gradient);
+  @if $support-ie and $pie-url {
+    -pie-background: $bg-color $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+
+//      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) {
+  // TODO may be deprecate background-image: -webkit-gradient(radial, $wk_start, $wk_end, unquote(list-to-string($wk_stops, ", ")));
+  @include vendors-param(webkit moz ms o, background-image, radial-gradient($position_angle, $shape_size, change-separator($stops)));
+}
+
+// EXPERIMENTAL
+@mixin border-gradient($color_start, $color_stop, $is_horizontal: false) {
+  $start: top;
+  $wk_start: left top;
+  $wk_stop: left bottom;
+  @if $is_horizontal {
+    $start: left;
+    $wk_stop: right top;
+  } @else {
+    $start: top;
+    $wk_stop: left bottom;
+  }
+  border-color: $color_start mix($color_start, $color_stop) $color_stop;
+  -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)
+  // TODO may be new -webkit-gradient?
+  -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 $pie-url {
+    -pie-background: $bg;
+  }
+}
+
+//    example:
+//      @include ellipsis;
+//    produce:
+//      overflow: hidden;           // need to work text-overflow
+//      -o-text-overflow: ellipsis; // Opera Mini and Opera Mobile
+//         text-overflow: ellipsis; // all
+@mixin ellipsis($overflow: hidden) {
+  @if $overflow != false {
+    overflow: $overflow;
+  }
+  @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!
+  }
+}
+
+// TODO
+//@mixin placeholder($params) {
+//  &::-webkit-input-placeholder, &:-moz-placeholder {
+//    #{$params};
+//  }
+//}
+//input::-webkit-input-placeholder { color: #a3a3a3 !important;}
+//input:-moz-placeholder { color: #a3a3a3 !important; }
+

data/app/assets/stylesheets/ultimate/mixins/decor.css.scss

@@ -0,0 +1,86 @@
+@mixin g-decor_state($offset, $sprite-offset, $state-index: 1) {
+  $state-offset: $offset + $sprite-offset * 3 * $state-index;
+  > .fill {
+    background-position: center (0 - $state-offset) !important;
+  }
+  > .left {
+    background-position: left (0 - $state-offset - $sprite-offset) !important;
+  }
+  > .right {
+    background-position: right (0 - $state-offset - $sprite-offset * 2) !important;
+  }
+}
+
+@mixin g-decor_type($texture, $offset, $sprite-offset, $decor_width: false) {
+  @if $decor_width {
+    padding: 0 $decor_width;
+    > .left, > .right {
+      width: $decor_width + 1 !important;
+    }
+  }
+  > .fill, > .left, > .right {
+    background-image: image-url("#{$texture}") !important;
+  }
+  @include g_decor_state($offset, $sprite-offset, 0);
+}
+
+@mixin g-decor($decor_width, $texture: false, $offset: 0, $sprite-offset: 0, $height: false) {
+  position: relative;
+  white-space: nowrap;
+  @if $height {
+    height: $height;
+  }
+  > .fill {
+    display: block;
+    position: relative;
+    height: 100%;
+  }
+  > .left, > .right {
+    display: block;
+    height: 100%;
+    position: absolute;
+    top: 0;
+  }
+  @if $texture {
+    @include g_decor_type($texture, $offset, $sprite-offset, $decor_width);
+  }
+  > .left {
+    left: 0;
+  }
+  > .right {
+    right: 0;
+  }
+}
+
+
+
+@mixin g-star-decor_state($sprite-offset, $state) {
+  $offset_top: 0 - ($state * $sprite-offset * 2);
+  $offset_bottom: $offset_top - $sprite-offset;
+  > .corner {
+    &.left.top { background-position: right $offset_bottom; }
+    &.right.top { background-position: left $offset_bottom; }
+    &.left.bottom { background-position: right $offset_top; }
+    &.right.bottom { background-position: left $offset_top; }
+  }
+}
+
+@mixin g-star-decor($texture, $size, $sprite-offset, $state: 0) {
+  > .corner {
+    width: $size;
+    height: $size;
+    position: absolute;
+    background: image-url("#{$texture}") no-repeat;
+    &.left { left: 0; }
+    &.right { right: 0; }
+    &.top {
+      top: 0;
+      *top: 1px;
+    }
+    &.bottom {
+      bottom: 0;
+      *bottom: 1px;
+    }
+  }
+  @include g-star-decor_state($sprite-offset, $state);
+}

data/app/assets/stylesheets/ultimate/mixins/fonts.css.scss

@@ -0,0 +1,100 @@
+// === overloadable in base.scss settings =========
+
+$font-family_base: Tahoma, Verdana, sans-serif;
+$font-size_base: 11px;
+$font-family_custom: "PFDinTextCondProThin", Tahoma, Arial, Verdana, sans-serif;
+$font-family_custom_bold: "PFDinTextCondProRegular", Verdana, sans-serif;
+// DEPRECATED:
+$line-height-addition_base: 3px;
+$font-family_accident: "PFDinTextCondProThin", Tahoma, Arial, Verdana, sans-serif;
+$font-family_accident_bold: "PFDinTextCondProRegular", Verdana, sans-serif;
+
+
+@mixin font-face($family, $url-without-ext, $font-weight: normal, $font-style: normal) {
+  @font-face {
+    font-family: "#{$family}";
+    src: font-url("#{$url-without-ext}.eot");
+    src: font-url("#{$url-without-ext}.eot?#iefix") format("embedded-opentype"),
+         font-url("#{$url-without-ext}.woff") format("woff"),
+         font-url("#{$url-without-ext}.ttf") format("truetype"),
+         font-url("#{$url-without-ext}.svg##{$family}") format("svg");
+    font-weight: $font-weight;
+    font-style: $font-style;
+  }
+}
+
+@mixin font($font-family, $font-size: false, $line-height: false) {
+  font-family: $font-family;
+  @if $font-size {
+    font-size: $font-size;
+  }
+  @if $line-height {
+    line-height: $line-height;
+  }
+}
+
+@mixin g-font_base($font-size: $font-size_base, $line-height: false) {
+  @include deprecate("g-font_base", "font_base");
+  font-family: $font-family_base;
+  @if $font-size {
+    font-size: $font-size;
+  }
+  @if $line-height {
+    line-height: $line-height;
+  } @else {
+    @if $font-size {
+      line-height: $font-size + $line-height-addition_base;
+    }
+  }
+}
+
+@mixin font_base($font-size: $font-size_base, $line-height: false) {
+  @include font($font-family_base, $font-size, $line-height);
+}
+
+@mixin font_custom($font-size: false, $line-height: false, $font-family: $font-family_custom) {
+  font-weight: normal;
+  font-style: normal;
+  @include font($font-family, $font-size, $line-height);
+}
+
+// TODO http://paulirish.com/2010/font-face-gotchas/
+// TODO -webkit-font-smoothing: antialiased; /* This needs to be set or some font faced fonts look bold on Mac. */
+@mixin g-font_accident_bold($font-size: false, $line-height: false) {
+  @include deprecate("g-font_accident_bold", "font_custom");
+  font-family: $font-family_accident_bold;
+  font-weight: normal;
+  font-style: normal;
+  @if $font-size {
+    font-size: $font-size;
+  }
+  @if $line-height {
+    line-height: $line-height;
+  } @else {
+    @if $font-size {
+      line-height: $font-size + $line-height-addition_base;
+    }
+  }
+}
+
+@mixin g-font_accident($font-size: false, $line-height: false) {
+  @include deprecate("g-font_accident", "font_custom");
+  font-family: $font-family_accident;
+  font-weight: normal;
+  font-style: normal;
+  @if $font-size {
+    font-size: $font-size;
+  }
+  @if $line-height {
+    line-height: $line-height;
+  } @else {
+    @if $font-size {
+      line-height: $font-size + $line-height-addition_base;
+    }
+  }
+  @if $font-family_accident_bold {
+    .bold {
+      @include g-font_accident_bold;
+    }
+  }
+}

data/app/assets/stylesheets/ultimate/mixins/microstructures.css.scss

@@ -0,0 +1,188 @@
+@import "ultimate/mixins/routines";
+
+$support-ie: true !default;
+
+//  example:
+//    @include complex-padding(10px 20px none);
+//  same:
+//    padding: {
+//      top: 10px;
+//      right: 20px;
+//      left: 20px;
+//    }
+//  produce:
+//    padding-top: 10px;
+//    padding-right: 20px;
+//    padding-left: 20px;
+@mixin complex-padding($params) {
+  $params: complex-list($params);
+  @include complex-property(padding, $params);
+}
+
+//  Provide complex box metrics.
+//    example:
+//      @include box(400px, none, 10px 20px none, 0 auto);
+//    produce:
+//      padding-top: 10px;
+//      padding-right: 20px;
+//      padding-left: 20px;
+//      margin: 0 auto;
+//      width: 360px;
+//  TODO border as 2px solid black
+@mixin box($width,
+           $height          : false,
+           $padding         : false,
+           $margin          : false,
+           $border          : false,
+           $include-padding : true,
+           $include-margin  : false,
+           $include-border  : true) {
+  $properties: $padding $margin $border;
+  $include-properties: $include-padding $include-margin $include-border;
+  $i: 0;
+  @each $property-name in padding, margin, border {
+    $i: $i + 1;
+    $property: nth($properties, $i);
+    @if $property {
+      $complex: false;
+      @if nth($include-properties, $i) and $property {
+        $complex: complex-list($property);
+        @if isset($width) {
+          $width: $width - nth($complex, 2) - nth($complex, 4);
+        }
+        @if isset($height) {
+          $height: $height - nth($complex, 1) - nth($complex, 3);
+        }
+      }
+      @include complex-property($property-name, $property, $complex);
+    }
+  }
+  @if isset($width) {
+    width: $width;
+  }
+  @if isset($height) {
+    height: $height;
+  }
+}
+
+//  Set to container includes float blocks.
+@mixin g-line {
+  @include deprecate("@include g-line;", "overflow: hidden;");
+  @if $support-ie {
+    *zoom: 1;
+    _height: 0;
+  }
+  &:after {
+    content: " ";
+    display: block;
+    clear: both;
+    height: 0;
+  }
+}
+
+//  Set to element which disappear after animation in IE6-7.
+@mixin fix-disapp {
+  @include deprecate("@include fix-disapp;");
+  *overflow: hidden;
+  _zoom: 1;
+}
+
+//  Provides a cross-browser method to implement `display: inline-block;`
+//    example:
+//      @include inline-block(80px, 20px);
+//    produce:
+//      display: inline-block;
+//      *display: inline;
+//      *zoom: 1;
+//      width: 80px;
+//      height: 20px;
+//      vertical-align: middle;
+@mixin inline-block($width: false, $height: false, $vertical-align: middle) {
+  display: inline-block;
+  @if $support-ie {
+    *display: inline;
+    *zoom: 1;
+  }
+  @if $width != none and $width != false {
+    width: $width;
+  }
+  @if $height != none and $height != false {
+    height: $height;
+  }
+  @if $vertical-align != none and $vertical-align != false {
+    vertical-align: $vertical-align;
+  }
+}
+
+@mixin g-justify($item: unquote(".item")) {
+  text-align: justify;
+  @if $support-ie {
+    text-justify: newspaper;
+    text-align-last: justify;
+  }
+  font-size: 2px;
+  line-height: 0;
+  > #{$item}, &:after {
+    @include inline-block;
+    text-align: left;
+  }
+  &:after {
+    content: "";
+    height: 0;
+    width: 99%;
+  }
+}
+
+@mixin inline-block-list($item: "li") {
+  position: relative;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  #{$item} {
+    @include inline-block;
+  }
+}
+
+@mixin block-list($item: "li") {
+  overflow: hidden; // @include g-line;
+  position: relative;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  #{$item} {
+    display: block;
+    position: relative;
+    float: left;
+  }
+}
+
+@mixin simple-block-list($item: "li") {
+  position: relative;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  #{$item} {
+    display: block;
+    position: relative;
+  }
+}
+
+@mixin sticky-footer($layout-padding-bottom, $footer-selector: ".l-page__footer", $layout-selector: ".l-page") {
+  html {
+    height: 100%;
+  }
+  body {
+    position: relative;
+    min-height: 100%;
+  }
+  #{$layout-selector} {
+    position: static;
+    padding-bottom: $layout-padding-bottom;
+    #{$footer-selector} {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+    }
+  }
+}