Issue #620: Add SCUT to project

1 files changed, 1518 insertions, 0 deletions

diff --git a/web-ui/app/scss/vendor/_scut.scss b/web-ui/app/scss/vendor/_scut.scss
new file mode 100644
index 00000000..3e16fa65
--- /dev/null
+++ b/web-ui/app/scss/vendor/_scut.scss
@@ -0,0 +1,1518 @@
+/*
+* Scut, a collection of Sass utilities
+* to ease and improve our implementations of common style-code patterns.
+* v1.3.0
+* Docs at http://davidtheclark.github.io/scut
+*/
+
+@mixin scut-clearfix {
+
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+}
+
+%scut-clearfix {
+  @include scut-clearfix;
+}
+@mixin scut-list-unstyled(
+  $no-margin: true
+) {
+
+  list-style-type: none;
+  padding-left: 0;
+
+  @if $no-margin {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+}
+
+%scut-list-unstyled {
+  @include scut-list-unstyled();
+}
+// Depends on `list-unstyled` and `clearfix`.
+
+@mixin scut-list-floated (
+  $space: false,
+  $dir: left,
+  $no-margin: true
+) {
+
+  @include scut-list-unstyled($no-margin);
+  @include scut-clearfix;
+
+  & > li {
+    float: $dir;
+  }
+
+  @if $space {
+    & > li + li {
+      margin-#{$dir}: $space;
+    }
+  }
+
+}
+
+%scut-list-floated {
+  @include scut-list-floated;
+}
+
+@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);
+  }
+
+}
+@function scut-strip-unit (
+  $num
+) {
+
+  @return $num / ($num * 0 + 1);
+
+}
+// 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;
+  }
+
+}
+// Depends on `scut-strip-unit`.
+
+$scut-rem-base: 16 !default;
+
+@function scut-rem (
+  $pixels
+) {
+
+  $rem-vals: ();
+  @each $val in $pixels {
+    $val-in-rems: scut-strip-unit($val) / $scut-rem-base * 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;
+  }
+
+}
+@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."
+  }
+
+}
+@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;
+  }
+
+}
+@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;
+    }
+  }
+
+}
+@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) * 1dpi)) {
+    @content;
+  }
+
+}
+
+@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;
+}
+@mixin scut-image-replace {
+
+  text-indent: 102%;
+  white-space: nowrap;
+  overflow: hidden;
+  padding: 0;
+
+}
+
+%scut-image-replace {
+  @include scut-image-replace;
+}
+
+// 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;
+
+}
+@mixin scut-reset-border-box {
+  // Make everything a border-box, because why not?
+  html {
+    box-sizing: border-box;
+  }
+  *, *:before, *:after {
+    box-sizing: inherit;
+  }
+}
+
+@mixin scut-reset-antialias {
+  // Antialias!
+  body {
+    -webkit-font-smoothing: antialiased;
+  }
+  *, *:before, *:after {
+    -webkit-font-smoothing: inherit;
+  }
+}
+
+@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"],
+  input[type="submit"],
+  input[type="reset"] {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    margin: 0;
+    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;
+  }
+}
+
+@mixin scut-reset-media {
+  // You want these elements fluid, probably.
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+@mixin scut-reset-figure {
+  // Remove default margins.
+  figure {
+    margin: 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;
+  }
+  @if not(index($exclude, media)) {
+    @include scut-reset-media;
+  }
+  @if not(index($exclude, figure)) {
+    @include scut-reset-figure;
+  }
+}
+
+@mixin scut-selected (
+  $active: false
+) {
+
+  @if $active {
+    &:hover,
+    &:focus,
+    &:active {
+      @content;
+    }
+  }
+  @else {
+    &:hover,
+    &:focus {
+      @content;
+    }
+  }
+
+}
+@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;
+}
+@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);
+  }
+
+}
+@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;
+}
+
+@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);
+}
+
+@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;
+}
+@mixin scut-list-custom (
+  $content: "\2022",
+  $marker-width: 0.75em,
+  $pad: 0,
+  $no-margin: false
+) {
+
+  $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;
+
+  @if $no-margin {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  & > 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;
+    }
+  }
+
+}
+// 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,
+  $no-margin: true
+) {
+
+  @include scut-list-floated($dir: $dir, $no-margin: $no-margin);
+
+  $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("/");
+}
+// Depends on `list-unstyled`.
+
+@mixin scut-list-inline (
+  $space: false,
+  $no-margin: true
+) {
+
+  @include scut-list-unstyled($no-margin);
+
+  & > li {
+    display: inline-block;
+  }
+
+  @if $space {
+    & > li + li {
+      margin-left: $space;
+    }
+  }
+
+}
+
+%scut-list-inline {
+  @include scut-list-inline;
+}
+// Depends on `list-unstyled`.
+
+@mixin scut-list-punctuated (
+  $divider: ", ",
+  $display: inline,
+  $no-margin: true
+) {
+
+  @include scut-list-unstyled($no-margin);
+
+  & > li {
+    display: $display;
+    &:not(:last-child):after {
+      content: $divider;
+    }
+  }
+
+}
+
+%scut-list-comma {
+  @include scut-list-punctuated;
+}
+@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;
+    }
+  }
+
+}
+@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;
+    }
+  }
+}
+// Depends on `positioning-coordinates`.
+
+@mixin scut-absolute (
+  $coordinates: 0 n n 0
+) {
+
+  position: absolute;
+  @include scut-coords($coordinates);
+
+}
+
+%scut-absolute {
+  @include scut-absolute;
+}
+// Depends on `positioning-coordinates`.
+
+@mixin scut-fixed (
+  $coordinates: 0 n n 0
+) {
+
+  position: fixed;
+  @include scut-coords($coordinates);
+
+}
+
+%scut-fixed {
+  @include scut-fixed;
+}
+// Depends on `positioning-coordinates`.
+
+@mixin scut-relative (
+  $coordinates: n n n n
+) {
+
+  position: relative;
+  @include scut-coords($coordinates);
+
+}
+@mixin scut-ratio-box (
+  $ratio: 1/1
+) {
+
+  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%;
+  }
+
+}
+
+%scut-ratio-box {
+  @include scut-ratio-box;
+}
+@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);
+  }
+
+}
+@mixin scut-sticky-footer-fixed (
+  $height,
+  $wrapper: ".wrapper",
+  $footer: ".scut-sticky"
+) {
+
+  html,
+  body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  #{$wrapper} {
+    min-height: 100%;
+    margin-bottom: -$height;
+    &:after {
+      content: "";
+      display: block;
+    }
+  }
+
+  #{$wrapper}:after,
+  #{$footer} {
+    height: $height;
+  }
+
+}
+
+// deprecated
+@mixin scut-sticky-footer (
+  $height,
+  $wrapper: ".wrapper",
+  $footer: ".scut-sticky"
+){
+  @include scut-sticky-footer-fixed($height, $wrapper, $footer);
+}
+@mixin scut-sticky-footer-fluid (
+  $wrapper: ".wrapper",
+  $footer: ".scut-sticky"
+) {
+
+  html,
+  body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  #{$wrapper} {
+    display: table;
+    height: 100%;
+    width: 100%;
+  }
+
+  #{$footer} {
+    display: table-row;
+    height: 1px;
+  }
+
+}
+@mixin scut-vcenter-ib (
+  $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: if(length($inner) == 0, ".scut-inner", $inner);
+  @each $cell-selector in $inner {
+    $cell-selector: unquote($cell-selector);
+    & > #{$cell-selector} {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+
+}
+
+%scut-vcenter-ib {
+  @include scut-vcenter-ib;
+}
+
+@mixin scut-vcenter-lh (
+  $height
+) {
+
+  height: $height;
+  line-height: $height;
+
+}
+@mixin scut-vcenter-td (
+  $inner...
+) {
+
+  display: table;
+
+  $inner: if(length($inner) == 0, ".scut-inner", $inner);
+  @each $cell-selector in $inner {
+    $cell-selector: unquote($cell-selector);
+    & > #{$cell-selector} {
+      display: table-cell;
+      vertical-align: middle;
+    }
+  }
+
+}
+
+
+%scut-vcenter-td {
+  @include scut-vcenter-td;
+}
+
+// Depends on scut-center-transform
+
+@mixin scut-vcenter-tt () {
+  @include scut-center-transform(y);
+}
+
+%scut-vcenter-tt {
+  @include scut-vcenter-tt;
+}
+// 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";
+// square
+$scut-square: "\25a0";
+// white square
+$scut-whitesquare: "\25a1";
+// small square
+$scut-ssquare: "\25aa";
+// small white square
+$scut-swhitesquare: "\25ab";
+@function main-src($formats, $file-path, $font-family) {
+  // Return the list of `src` values, in order, that
+  // a good `@font-face` will need, including only
+  // those formats specified in the list `$formats`.
+  $result: ();
+  @if index($formats, eot) {
+    $eot-val: url('#{$file-path}.eot?#iefix') format('embedded-opentype');
+    $result: append($result, $eot-val, comma);
+  }
+  @if index($formats, woff2) {
+    $woff2-val: url('#{$file-path}.woff2') format('woff2');
+    $result: append($result, $woff2-val, comma);
+  }
+  @if index($formats, woff) {
+    $woff-val: url('#{$file-path}.woff') format('woff');
+    $result: append($result, $woff-val, comma);
+  }
+  @if index($formats, ttf) {
+    $ttf-val: url('#{$file-path}.ttf') format('truetype');
+    $result: append($result, $ttf-val, comma);
+  }
+  @if index($formats, svg) {
+    $svg-val: url('#{$file-path}.svg##{$font-family}') format('svg');
+    $result: append($result, $svg-val, comma);
+  }
+  @return $result;
+}
+
+@mixin scut-font-face (
+  $font-family,
+  $file-path,
+  $weight: normal,
+  $style: normal,
+  $formats: eot woff2 woff ttf svg
+) {
+
+  @if index('italic' 'oblique', $weight) {
+    $style: $weight;
+    $weight: normal;
+  }
+
+  @font-face {
+    font-family: $font-family;
+    font-weight: $weight;
+    font-style: $style;
+
+    @if index($formats, eot) {
+      src: url('#{$file-path}.eot');
+    }
+    src: main-src($formats, $file-path, $font-family);
+  }
+
+}
+
+@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;
+}
+@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;
+}
+@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;
+}
+@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 LINK UNSTYLED
+// http://davidtheclark.github.io/scut/#link-unstyled
+
+@mixin scut-link-unstyled() {
+
+  text-decoration: none;
+  color: inherit;
+
+}
+
+%scut-link-unstyled {
+  @include scut-link-unstyled();
+}
+
+@mixin scut-reverse-italics (
+  $elements: null
+) {
+
+  $element-list: em, cite, i;
+  font-style: italic;
+  #{join($element-list, $elements)} {
+    font-style: normal;
+  }
+
+}
+
+%scut-reverse-italics {
+  @include scut-reverse-italics;
+}
+
+@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;
+}
+@mixin scut-truncate {
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+}
+
+%scut-truncate {
+  @include scut-truncate;
+}
\ No newline at end of file