source: themes/berlin/scss/libs/_scut.scss @ 3427:75253b0af38a

/*
* Scut, a collection of Sass utilities to ease and improve our implementations of common style-code patterns.
* v0.8.0
* Docs at http://davidtheclark.github.io/scut
*/

// SCUT CLEARFIX
// http://davidtheclark.github.io/scut/#clearfix

@mixin scut-clearfix {

  &:after {
    content: "";
    display: table;
    clear: both;
  }

}

%scut-clearfix {
  @include scut-clearfix;
}

// SCUT LIST: UNSTYLED
// http://davidtheclark.github.io/scut/#list_unstyled

@mixin scut-list-unstyled {

  list-style-type: none;
  padding-left: 0;

}

%scut-list-unstyled {
  @include scut-list-unstyled;
}

// SCUT LIST: FLOATED
// http://davidtheclark.github.io/scut/#list_floated

// Depends on `list-unstyled` and `clearfix`.

@mixin scut-list-floated (
  $space: false,
  $dir: left
) {

  @include scut-list-unstyled;
  @include scut-clearfix;

  & > li {
    float: $dir;
  }

  @if $space {
    & > li + li {
      margin-#{$dir}: $space;
    }
  }

}

%scut-list-floated {
  @include scut-list-floated;
}


// SCUT POSITIONING: COORDINATES
// http://davidtheclark.github.io/scut/#positioning_coordinates

@function scut-autoOrValue ($val) {
  @if $val == a or $val == auto {
    @return auto;
  }
  @else {
    @return $val;
  }
}

@mixin scut-coords (
  $coordinates: n n n n
) {

  $top: nth($coordinates, 1);
  $right: nth($coordinates, 2);
  $bottom: nth($coordinates, 3);
  $left: nth($coordinates, 4);

  @if $top != n {
    top: scut-autoOrValue($top);
  }
  @if $right != n {
    right: scut-autoOrValue($right);
  }
  @if $bottom != n {
    bottom: scut-autoOrValue($bottom);
  }
  @if $left != n {
    left: scut-autoOrValue($left);
  }

}

// SCUT STRIP UNIT
// http://davidtheclark.github.io/scut/#strip_unit

@function scut-strip-unit (
  $num
) {

  @return $num / ($num * 0 + 1);

}

// SCUT PIXELS TO EMS
// http://davidtheclark.github.io/scut/#pixels-to-ems

// Depends on `scut-strip-unit`.

$scut-em-base: 16 !default;

@function scut-em (
  $pixels,
  $base: $scut-em-base
) {

  // $base could be in em or px (no unit = px).
  // Adjust accordingly to create a $divisor that
  // serves as context for $pixels.
  $multiplier: if(unit($base) == em, 16, 1);
  $divisor: scut-strip-unit($base) * $multiplier;

  $em-vals: ();
  @each $val in $pixels {
    $val-in-ems: (scut-strip-unit($val) / $divisor) * 1em;
    $em-vals: append($em-vals, $val-in-ems);
  }

  @if length($em-vals) == 1 {
    // return a single value instead of a list,
    // so it can be used in calculations
    @return nth($em-vals, 1);
  }
  @else {
    @return $em-vals;
  }

}

// SCUT PIXELS TO REMS
// http://davidtheclark.github.io/scut/#pixels-to-rems

// Depends on `scut-strip-unit`.

@function scut-rem (
  $pixels
) {

  $rem-vals: ();
  @each $val in $pixels {
    $val-in-rems: scut-strip-unit($val) / 16 * 1rem;
    $rem-vals: append($rem-vals, $val-in-rems);
  }

  @if length($rem-vals) == 1 {
    // return a single value instead of a list,
    // so it can be used in calculations
    @return nth($rem-vals, 1);
  }
  @else {
    @return $rem-vals;
  }

}

// SCUT BORDER
// http://davidtheclark.github.io/scut/#border

@mixin scut-border (
  $style,
  $sides: n y
) {

  @if length($sides) == 2 {
    @if nth($sides, 1) != n {
      border-top: $style;
      border-bottom: $style;
    }
    @if nth($sides, 2) != n {
      border-left: $style;
      border-right: $style;
    }
  }

  @else if length($sides) == 4 {
    @if nth($sides, 1) != n {
      border-top: $style;
    }
    @if nth($sides, 2) != n {
      border-right: $style;
    }
    @if nth($sides, 3) != n {
      border-bottom: $style;
    }
    @if nth($sides, 4) != n {
      border-left: $style;
    }
  }

  @else {
    @warn "Scut-border requires a $sides argument of 2 or 4 values."
  }

}

// SCUT CIRCLE
// http://davidtheclark.github.io/scut/#circle

@mixin scut-circle (
  $size,
  $color: inherit
) {

  border-radius: 50%;
  display: inline-block;

  @if $color == inherit {
    // If user wants to inherit the color,
    // take advantage of the fact that border
    // color defaults to the text color of the element.
    border-width: $size / 2;
    border-style: solid;
    height: 0;
    width: 0;
  }
  @else {
    // Otherwise, just use background-color.
    background-color: $color;
    height: $size;
    width: $size;
  }

}

// SCUT COLOR SWAP
// http://davidtheclark.github.io/scut/#color_swap

@mixin scut-color-swap (
  $off,
  $on,
  $duration: 0,
  $bg: false
) {

  $transition-properties: null;
  $off-is-list: type-of($off) == list;
  $on-is-list: type-of($on) == list;

  // If $off IS a list,
  // assign color and background-color.
  @if $off-is-list {
    color: nth($off, 1);
    background-color: nth($off, 2);
    $transition-properties: background-color, color;
  }

  // If $off IS NOT a list and $bg is TRUE,
  // assign background-color.
  @else if $bg and not $off-is-list {
    background-color: $off;
    $transition-properties: background-color;
  }

  // If $off IS NOT a list and $bg is FALSE,
  // assign color.
  @else {
    color: $off;
    $transition-properties: color;
  }

  // Only set-up transition if $duration != 0.
  @if $duration != 0 {
    transition-property: $transition-properties;
    transition-duration: $duration;
  }

  &:hover,
  &:focus {

    // $on is treated the same as $off, above.
    @if $on-is-list {
      color: nth($on, 1);
      background-color: nth($on, 2);
    }

    @else if $bg and not $on-is-list {
      background-color: $on;
    }

    @else {
      color: $on;
    }
  }

}

// SCUT HD BREAKPOINT
// http://davidtheclark.github.io/scut/#hd_breakpoint

@mixin scut-hd-bp (
  $ratio: 1.3
) {

  @media (-o-min-device-pixel-ratio: #{$ratio}/1),
         (-webkit-min-device-pixel-ratio: #{$ratio}),
         (min-resolution: #{round(96 * $ratio)}dpi) {
    @content;
  }

}

// SCUT HIDE VISUALLY
// http://davidtheclark.github.io/scut/#hide_visually

@mixin scut-hide-visually {

  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;

}

%scut-hide-visually {
  @include scut-hide-visually;
}

// SCUT IMAGE REPLACEMENT
// http://davidtheclark.github.io/scut/#image_replacement

@mixin scut-image-replace {

  text-indent: 102%;
  white-space: nowrap;
  overflow: hidden;

}

%scut-image-replace {
  @include scut-image-replace;
}

// SCUT REMS WITH FALLBACK
// http://davidtheclark.github.io/scut/#rems_with_fallback

// Depends on scut-rem and scut-strip-unit

@mixin scut-rem-fallback (
  $pixels,
  $property: font-size
) {

  $px-vals: null;
  @each $val in $pixels {
    $val-in-px: scut-strip-unit($val) * 1px;
    $px-vals: append($px-vals, $val-in-px);
  }
  $rem-vals: scut-rem($pixels);

  #{$property}: $px-vals;
  #{$property}: $rem-vals;

}

// SCUT RESET
// http://davidtheclark.github.io/scut/#reset

@mixin scut-reset-border-box {
  // Make everything a border-box, because why not?
  *, *:before, *:after {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}

@mixin scut-reset-antialias {
  // Antialias!
  body {
    -webkit-font-smoothing: antialiased;
  }
}

@mixin scut-reset-semanticize {
  // Make headers and <b> semantic, not presentational.
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 1em;
    font-weight: normal;
    margin: 0;
  }
  b {
    font-weight: normal;
  }
}

@mixin scut-reset-pointer {
  // Clickable form elements should have a pointer.
  label,
  select,
  option,
  button {
    cursor: pointer;
  }
}

@mixin scut-reset-form {
  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }
  textarea {
    resize: vertical;
  }
}

@mixin scut-reset-button {
  // Reset default button styles, which are never used.
  button,
  input[type="button"] {
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    margin: 0;
    outline: none;
    padding: 0;
    width: auto;
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    &::-moz-focus-inner {
      padding:0;
      border:0;
    }
  }
}

@mixin scut-reset-paragraph {
  // Some paragraph margins just get in the way.
  p:first-of-type {
    margin-top: 0;
  }
  p:last-of-type {
    margin-bottom: 0;
  }
}

// Call them all, minus exclusions!
@mixin scut-reset ($exclude: false) {
  @if not index($exclude, border-box) {
    @include scut-reset-border-box;
  }
  @if not index($exclude, antialias) {
    @include scut-reset-antialias;
  }
  @if not index($exclude, semanticize) {
    @include scut-reset-semanticize;
  }
  @if not index($exclude, pointer) {
    @include scut-reset-pointer;
  }
  @if not index($exclude, form) {
    @include scut-reset-form;
  }
  @if not index($exclude, button) {
    @include scut-reset-button;
  }
  @if not index($exclude, paragraph) {
    @include scut-reset-paragraph;
  }
}

// SCUT SELECTED
// http://davidtheclark.github.io/scut/#selected

@mixin scut-selected (
  $active: false
) {

  @if $active {
    &:hover,
    &:focus,
    &:active {
      @content;
    }
  }
  @else {
    &:hover,
    &:focus {
      @content;
    }
  }

}

// SCUT TRIANGLE
// http://davidtheclark.github.io/scut/#triangle

@mixin scut-triangle (
  $direction: right,
  $size: 0.75em,
  $color: inherit
) {

  display: inline-block;
  height: 0;
  width: 0;
  // For improved appearance in some Webkit browsers
  -webkit-transform: rotate(360deg);

  // Set up some variables
  $width: null;
  $height: null;
  $border-widths: null;

  @if type-of($size) == list {
    $width: nth($size, 1);
    $height: nth($size, 2);
  }
  @else {
    $width: $size;
    $height: $size;
  }

  @if ($direction == up) or ($direction == down) {
    // For up and down, width gets two borders but height only one,
    // so divide second border-width value by 2
    $border-widths: $height ($width / 2);
  }
  @else if ($direction == right) or ($direction == left) {
    // For right and left, height gets two borders but width only one,
    // so divide first border-width value by 2
    $border-widths: ($height / 2) $width;
  }
  @else {
    // For right triangles (the rest), both sides get two borders,
    // so divide both by 2
    $border-widths: ($height / 2) ($width / 2);
  }

  border-width: $border-widths;
  border-style: solid;


  // STANDARD TRIANGLES

  @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
    border-color: transparent;
    @if $direction == up {
      border-bottom-color: $color;
      border-top-width: 0;
    }
    @else if $direction == right {
      border-left-color: $color;
      border-right-width: 0;
    }
    @else if $direction == down {
      border-top-color: $color;
      border-bottom-width: 0;
    }
    @else if $direction == left {
      border-right-color: $color;
      border-left-width: 0;
    }
  }


  // CORNER TRIANGLES

  @else if ($direction == top-right) or ($direction == top-left) {
    border-top-color: $color;
    border-bottom-color: transparent;
    @if $direction == top-right {
      border-left-color: transparent;
      border-right-color: $color;
    }
    @else if $direction == top-left {
      border-left-color: $color;
      border-right-color: transparent;
    }
  }

  @else if ($direction == bottom-right) or ($direction == bottom-left) {
    border-top-color: transparent;
    border-bottom-color: $color;
    @if $direction == bottom-right {
      border-left-color: transparent;
      border-right-color: $color;
    }
    @else if $direction == bottom-left {
      border-left-color: $color;
      border-right-color: transparent;
    }
  }

}

%scut-triangle {
  @include scut-triangle;
}

// SCUT CENTER ABSOLUTELY
// http://davidtheclark.github.io/scut/#center_absolutely

@mixin scut-center-absolutely (
  $dimensions
) {

  $width: nth($dimensions, 1);
  $height: nth($dimensions, 2);

  position: absolute;

  @if $width != n {
    width: $width;
    left: 50%;
    margin-left: (-$width / 2);
  }

  @if $height != n {
    height: $height;
    top: 50%;
    margin-top: (-$height / 2);
  }

}

// SCUT CENTER BLOCK
// http://davidtheclark.github.io/scut/#center_block

@mixin scut-center-block (
  $max-width: false
) {

  margin-left: auto;
  margin-right: auto;
  @if $max-width {
    max-width: $max-width;
  }

}

%scut-center-block {
  @include scut-center-block;
}


// SCUT CENTER TRANSFORM
// http://davidtheclark.github.io/scut/#center_transform

@mixin scut-center-transform (
  $axis: false // or x or y
) {

  position: absolute;

  @if $axis != x {
    top: 50%;
    margin-top: auto;
    margin-bottom: auto;
  }

  @if $axis != y {
    left: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  $translate-val: null;

  @if not $axis {
    $translate-val: translate(-50%, -50%);
  }
  @else if $axis != x {
    $translate-val: translateY(-50%);
  }
  @else if $axis != y {
    $translate-val: translateX(-50%);
  }

  -webkit-transform: $translate-val;
  -ms-transform: $translate-val;
  transform: $translate-val;
}

%scut-center-transform {
  @include scut-center-transform;
}

%scut-center-transform-x {
  @include scut-center-transform(x);
}

%scut-center-transform-y {
  @include scut-center-transform(y);
}


// SCUT FILL
// http://davidtheclark.github.io/scut/#fill

@mixin scut-fill (
  $width-height: false
) {

  position: absolute;
  left: 0;
  top: 0;
  @if $width-height {
    width: 100%;
    height: 100%;
  }
  @else {
    right: 0;
    bottom: 0;
  }

}

%scut-fill {
  @include scut-fill;
}

// SCUT FONTICON-LABEL
// http://davidtheclark.github.io/scut/#fonticon_label

@mixin scut-fonticon-label (
  $font,
  $glyph,
  $space: 0.25em,
  $side: before
) {

  &:#{$side} {
    content: $glyph;
    font-family: $font;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    vertical-align: middle;

    @if $side == before and $space != 0 {
      margin-right: $space;
    }
    @else if $side == after and $space != 0 {
      margin-left: $space;
    }

    // Add any additional styling.
    @content;

  }

}


// SCUT LIST: CUSTOM
// http://davidtheclark.github.io/scut/#list_custom

@mixin scut-list-custom (
  $content: "\2022",
  $marker-width: 0.75em,
  $pad: 0
) {

  $content-val: null;
  $counter: index($content, count);
  @if $counter {
    @if length($content) == 3 {
      $content-val: counter(scutlistcounter, nth($content, 3))nth($content,2);
    }
    @else if length($content) == 2 {
      $content-val: counter(scutlistcounter)nth($content,2);
    }
    @else {
      $content-val: counter(scutlistcounter);
    }
  }
  @else {
    $content-val: $content;
  }

  padding-left: $marker-width + $pad;
  list-style-type: none;

  & > li {
    position: relative;
    @if $counter {
      counter-increment: scutlistcounter;
    }
    &:before {
      content: $content-val;
      display: block;
      position: absolute;
      top: 0;
      left: -$marker-width;
      width: $marker-width;
      @content;
    }
  }

}

// SCUT LIST: DIVIDED
// http://davidtheclark.github.io/scut/#list_divided

// Depends on `list-floated`, which depends in turn on `list-unstyled` and `clearfix`.

@mixin scut-list-divided (
  $divider: "|",
  $space: 0.5em,
  $dir: left,
  $height: false
) {

  @include scut-list-floated($dir: $dir);

  $pseudo: if($dir == left, 'before', 'after');

  // If an explicit height is passed,
  // things are different: All <li>s
  // need the pseudo-element (to force height),
  // but the first's must be hidden.

  @if $height {
    & > li {
      height: $height;
    }
    & > li:#{$pseudo} {
      height: $height;
      content: $divider;
      display: inline-block;
      vertical-align: middle;
      @content;
    }
    & > li:first-child:#{$pseudo} {
      width: 0;
      overflow: hidden;
    }
  }

  & > li + li:#{$pseudo} {
    @if not $height {
      content: $divider;
      display: inline-block;
      @content;
    }
    margin-left: $space;
    margin-right: $space;
  }

}

%scut-list-bar {
  @include scut-list-divided;
}

%scut-list-breadcrumb {
  @include scut-list-divided("/");
}

// SCUT LIST: INLINE
// http://davidtheclark.github.io/scut/#list_inline

// Depends on `list-unstyled`.

@mixin scut-list-inline (
  $space: false
) {

  @include scut-list-unstyled;

  & > li {
    display: inline-block;
  }

  @if $space {
    & > li + li {
      margin-left: $space;
    }
  }

}

%scut-list-inline {
  @include scut-list-inline;
}

// SCUT LIST: PUNCTUATED
// http://davidtheclark.github.io/scut/#list_punctuated

// Depends on `list-unstyled`.

@mixin scut-list-punctuated (
  $divider: ", ",
  $display: inline
) {

  @include scut-list-unstyled;
  margin-top: 0;
  margin-bottom: 0;

  & > li {
    display: $display;
    &:not(:last-child):after {
      content: $divider;
    }
  }

}

%scut-list-comma {
  @include scut-list-punctuated;
}

// SCUT MARGIN
// http://davidtheclark.github.io/scut/#margin

@mixin scut-margin (
  $margin
) {

  @if length($margin) == 1 and $margin != n {
    margin-top: $margin;
    margin-right: $margin;
    margin-bottom: $margin;
    margin-left: $margin;
  }

  @if length($margin) == 2 {
    $margin-y: nth($margin, 1);
    $margin-x: nth($margin, 2);
    @if $margin-y != n {
      margin-top: $margin-y;
      margin-bottom: $margin-y;
    }
    @if $margin-x != n {
      margin-left: $margin-x;
      margin-right: $margin-x;
    }
  }

  @if length($margin) == 3 {
    $margin-y-top: nth($margin, 1);
    $margin-x: nth($margin, 2);
    $margin-y-bottom: nth($margin, 3);
    @if $margin-y-top != n {
      margin-top: $margin-y-top;
    }
    @if $margin-x != n {
      margin-right: $margin-x;
      margin-left: $margin-x;
    }
    @if $margin-y-bottom != n {
      margin-bottom: $margin-y-bottom;
    }
  }

  @if length($margin) == 4 {
    $margin-top: nth($margin, 1);
    $margin-right: nth($margin, 2);
    $margin-bottom: nth($margin, 3);
    $margin-left: nth($margin, 4);
    @if $margin-top != n {
      margin-top: $margin-top;
    }
    @if $margin-right != n {
      margin-right: $margin-right;
    }
    @if $margin-bottom != n {
      margin-bottom: $margin-bottom;
    }
    @if $margin-left != n {
      margin-left: $margin-left;
    }
  }

}

// SCUT PADDING
// http://davidtheclark.github.io/scut/#padding

@mixin scut-padding (
  $padding
) {

  @if length($padding) == 1 and $padding != n {
    padding-top: $padding;
    padding-right: $padding;
    padding-bottom: $padding;
    padding-left: $padding;
  }

  @if length($padding) == 2 {
    $padding-y: nth($padding, 1);
    $padding-x: nth($padding, 2);
    @if $padding-y != n {
      padding-top: $padding-y;
      padding-bottom: $padding-y;
    }
    @if $padding-x != n {
      padding-left: $padding-x;
      padding-right: $padding-x;
    }
  }

  @if length($padding) == 3 {
    $padding-y-top: nth($padding, 1);
    $padding-x: nth($padding, 2);
    $padding-y-bottom: nth($padding, 3);
    @if $padding-y-top != n {
      padding-top: $padding-y-top;
    }
    @if $padding-x != n {
      padding-right: $padding-x;
      padding-left: $padding-x;
    }
    @if $padding-y-bottom != n {
      padding-bottom: $padding-y-bottom;
    }
  }

  @if length($padding) == 4 {
    $padding-top: nth($padding, 1);
    $padding-right: nth($padding, 2);
    $padding-bottom: nth($padding, 3);
    $padding-left: nth($padding, 4);
    @if $padding-top != n {
      padding-top: $padding-top;
    }
    @if $padding-right != n {
      padding-right: $padding-right;
    }
    @if $padding-bottom != n {
      padding-bottom: $padding-bottom;
    }
    @if $padding-left != n {
      padding-left: $padding-left;
    }
  }
}

// SCUT POSITIONING: ABSOLUTE
// http://davidtheclark.github.io/scut/#positioning_absolute

// Depends on `positioning-coordinates`.

@mixin scut-absolute (
  $coordinates: 0 n n 0
) {

  position: absolute;
  @include scut-coords($coordinates);

}

%scut-absolute {
  @include scut-absolute;
}

// SCUT POSITIONING: FIXED
// http://davidtheclark.github.io/scut/#positioning_fixed

// Depends on `positioning-coordinates`.

@mixin scut-fixed (
  $coordinates: 0 n n 0
) {

  position: fixed;
  @include scut-coords($coordinates);

}

%scut-fixed {
  @include scut-fixed;
}

// SCUT POSITIONING: RELATIVE
// http://davidtheclark.github.io/scut/#positioning_relative

// Depends on `positioning-coordinates`.

@mixin scut-relative (
  $coordinates: n n n n
) {

  position: relative;
  @include scut-coords($coordinates);

}

// SCUT RATIO-BOX
// http://davidtheclark.github.io/scut/#ratio-box

@mixin scut-ratio-box (
  $ratio: 1/1,
  $inner: ".scut-inner"
) {

  overflow: hidden;
  position: relative;

  // The container's height, as a percentage of the
  // container's width, is set by assigning
  // padding-top to a pseudo-element.
  &:before {
    content: "";
    display: block;
    height: 0;
    padding-top: (1 / $ratio) * 100%;
  }

  // The inner element simply fills up the container.
  & > #{$inner} {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

}

%scut-ratio-box {
  @include scut-ratio-box;
}

// SCUT SIZE
// http://davidtheclark.github.io/scut/#size

@mixin scut-size(
  $size
) {

  @if length($size) == 1 {
    width:  $size;
    height: $size;
  }
  @else if length($size) == 2 {
    width:  nth($size, 1);
    height: nth($size, 2);
  }

}

// SCUT STICKY FOOTER
// http://davidtheclark.github.io/scut/#sticky_footer

@mixin scut-sticky-footer (
  $height,
  $wrapper: ".wrapper",
  $footer: ".scut-sticky"
) {

  html,
  body {
    height: 100%;
  }

  #{$wrapper} {
    min-height: 100%;
    margin-bottom: -$height;
    &:after {
      content: "";
      display: block;
    }
  }
  #{$wrapper}:after,
  #{$footer} {
    height: $height;
  }

}

// SCUT V-CENTER: INLINE-BLOCK
// http://davidtheclark.github.io/scut/#v-center_inline-block

@mixin scut-vcenter-ib (
  $inner: ".scut-inner"
) {

  // The inner element is vertically centered
  // by middle-aligning it with an inline pseudo-element
  // whose height is 100%.

  &:before {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    // A small negative right margin is set
    // to account for the default
    // word-spacing of inline-block.
    margin-right: -0.25em;
  }

  & > #{$inner} {
    display: inline-block;
    vertical-align: middle;
  }

}

%scut-vcenter-ib {
  @include scut-vcenter-ib;
}


// SCUT V-CENTER: LINE-HEIGHT
// http://davidtheclark.github.io/scut/#v-center_line-height

@mixin scut-vcenter-lh (
  $height
) {

  height: $height;
  line-height: $height;

}

// SCUT V-CENTER: TABLE DISPLAY
// http://davidtheclark.github.io/scut/#v-center_table_display

@mixin scut-vcenter-td (
  $inner: ".scut-inner"
) {

  display: table;

  & > #{$inner} {
    display: table-cell;
    vertical-align: middle;
  }

}


%scut-vcenter-td {
  @include scut-vcenter-td;
}

// SCUT V-CENTER: TRANSFORM
// http://davidtheclark.github.io/scut/#v-center_transform

// Depends on scut-center-transform

@mixin scut-vcenter-tt () {
  @include scut-center-transform(y);
}

%scut-vcenter-tt {
  @include scut-vcenter-tt;
}

// BOOKENDS
// http://davidtheclark.github.io/scut/#bookends

@mixin scut-bookends (
  $space: 0.5em,
  $content: ""
) {

  $content-list: length($content) == 2;

  // If $content is a list or there $space exist,
  // set some pseudo-element-specific rules.
  @if $content-list or $space {
    &:before {
      @if $content-list {
        content: nth($content, 1);
      }
      @if $space {
        margin-right: $space;
      }
    }
    &:after {
      @if $content-list {
        content: nth($content, 2);
      }
      @if $space {
        margin-left: $space;
      }
    }
  }

  // Then set some rules that apply to both
  // pseudo-elements.
  &:before,
  &:after {
    display: inline-block;

    @if $content and length($content) == 1 {
      content: $content;
    }

    // Any additional styling applies to both.
    @content;

  }

}

// SCUT CSS CHARACTERS
// http://davidtheclark.github.io/scut/#characters

// space
$scut-space: "\0020";
// non-breaking space
$scut-nbsp: "\00a0";

// quotation mark
$scut-quot: "\0022";
// left single curly quote
$scut-lsquo: "\2018";
// right single curly quote
$scut-rsquo: "\2019";
// left double curly quote
$scut-ldquo: "\201C";
// right double curly quote
$scut-rdquo: "\201D";
// left single angle quote (guillemet)
$scut-lsaquo: "\2039";
// right single angle quote (guillemet)
$scut-rsaquo: "\203A";
// left double angle quote (guillemet)
$scut-laquo: "\00ab";
// right double angle quote (guillemet)
$scut-raquo: "\00bb";

// em dash (mutton)
$scut-mdash: "\2014";
// en dash (nut)
$scut-ndash: "\2013";
// hyphen
$scut-hyphen: "\2010";

// ampersand
$scut-amp: "\0026";
// greater than
$scut-gt: "\003e";
// less than
$scut-lt: "\003c";
// times
$scut-times: "\00D7";
// big times
$scut-bigtimes: "\2715";
// checkmark
$scut-checkmark: "\2713";

// section sign (double S, hurricane, sectional symbol, the legal doughnut, signum sectionis)
$scut-sect: "\00a7";
// paragraph symbol (pilcrow)
$scut-para: "\00b6";

// middot (interpunct, interpoint)
$scut-middot: "\00b7";
// o-slash (slashed o)
$scut-oslash: "\00f8";
// bullet
$scut-bull: "\2022";
// white bullet
$scut-whibull: "\25E6";
// horizontal ellipsis
$scut-hellip: "\2026";
// vertical ellipsis
$scut-vellip: "\22EE";
// midline horizontal ellipsis
$scut-midhellip: "\22EF";

// up-pointing triangle
$scut-utri: "\25b2";
// down-pointing triangle
$scut-dtri: "\25bc";
// left-pointing triangle
$scut-ltri: "\25c0";
// right-pointing triangle
$scut-rtri: "\25b6";
// up-pointing small triangle
$scut-ustri: "\25b4";
// down-pointing small triangle
$scut-dstri: "\25be";
// left-pointing small triangle
$scut-lstri: "\25c2";
// right-pointing small triangle
$scut-rstri: "\25b8";
// diamond
$scut-diamond: "\25c6";
// fisheye
$scut-fisheye: "\25c9";
// bullseye
$scut-bullseye: "\25ce";
// circle
$scut-circle: "\25cf";
// white circle
$scut-whitecircle: "\25cb";

// SCUT FONT-FACE
// http://davidtheclark.github.io/scut/#font-face

@mixin scut-font-face (
  $font-family,
  $file-path,
  $weight: normal,
  $style: normal
) {

  @font-face {
    font-family: $font-family;
    font-weight: $weight;
    font-style: $style;

    src: url('#{$file-path}.eot');
    src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
         url('#{$file-path}.woff') format('woff'),
         url('#{$file-path}.ttf') format('truetype'),
         url('#{$file-path}.svg##{$font-family}') format('svg');
  }

}

// SCUT HANGING INDENT
// http://davidtheclark.github.io/scut/#hanging_indent

@mixin scut-hanging-indent (
  $indent: 1em
) {

  // padding-left creates the indent,
  // while text-indent pulls the first line
  // back to the edge.

  padding-left: $indent;
  text-indent: -$indent;

}

%scut-hanging-indent {
  @include scut-hanging-indent;
}

// SCUT INDENTED PARAGRAPHS
// http://davidtheclark.github.io/scut/#indented_paragraphs

@mixin scut-indented-ps (
  $indent: 1.5em,
  $no-first-indent: true
) {

  p {
    margin: 0;
    text-indent: $indent;
  }

  @if $no-first-indent {
    p:first-of-type {
      text-indent: 0;
    }
  }

}

%scut-indented-ps {
  @include scut-indented-ps;
}

// SCUT KEY-VALUE
// http://davidtheclark.github.io/scut/#key-value

@mixin scut-key-val (
  $divider: ":",
  $pad: 0.25em,
  $indent: 1em,
  $spacing: 0,
  $pad-left: 0
) {

  & > dt {
    clear: both;
    float: left;
    &:after {
      content: $divider;
      margin-right: $pad;
      @if $pad-left != 0 {
        margin-left: $pad-left;
      }
    }
  }

  & > dd {
    margin-left: $indent;
    @if $spacing != 0 {
      margin-bottom: $spacing;
    }
  }

}

%scut-key-val {
  @include scut-key-val;
}

// SCUT LINK: BOTTOM-BORDERED
// http://davidtheclark.github.io/scut/#link_bottom-bordered

@mixin scut-link-bb (
  $color: inherit,
  $style: solid,
  $width: 1px
) {

  text-decoration: none;

  border-bottom-width: $width;
  border-bottom-style: $style;
  @if $color != inherit {
    border-bottom-color: $color;
  }

}

%scut-link-bb {
  @include scut-link-bb;
}

// SCUT REVERSE ITALICS
// http://davidtheclark.github.io/scut/#reverse-italics

@mixin scut-reverse-italics (
  $elements: null
) {

  $element-list: em, cite, i;
  @each $el in $elements {
    $element-list: append($element-list, unquote($el), comma)
  }

  font-style: italic;
  #{$element-list} {
    font-style: normal;
  }

}

%scut-reverse-italics {
  @include scut-reverse-italics;
}

// SCUT SIDE-LINED
// http://davidtheclark.github.io/scut/#side-lined

@mixin scut-side-lined (
  $height: 1px,
  $space: 0.5em,
  $color: inherit,
  $style: solid,
  $v-adjust: false,
  $double: false
) {

  display: block;
  overflow: hidden;
  text-align: center;

  &:before,
  &:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 50%;

    border-top-style: $style;
    border-top-width: $height;

    @if $color != inherit {
      border-top-color: $color;
    }

    @if $v-adjust != false {
      bottom: $v-adjust;
    }

    @if $double != false {
      height: $double;
      border-bottom-style: $style;
      border-bottom-width: $height;
      @if $color != inherit {
        border-bottom-color: $color;
      }
    }
  }

  &:before {
    right: $space;
    margin-left: -50%;
  }
  &:after {
    left: $space;
    margin-right: -50%;
  }

}

%scut-side-lined {
  @include scut-side-lined;
}

// SCUT TRUNCATE
// http://davidtheclark.github.io/scut/#truncate

@mixin scut-truncate {

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

%scut-truncate {
  @include scut-truncate;
}