spuit 0.0.6

data/assets/stylesheets/spuit/elements/_dl.sass

@@ -0,0 +1,30 @@
+=dl-base
+  margin: 0
+  padding: 0
+  > *
+    +break-word
+    margin: 0
+    padding: 0
+    display: border-box
+
+=dl-flex($left: 30%, $p: 0.5rem 1rem)
+  +dl-base
+  display: flex
+  flex-flow: row wrap
+  justify-content: space-between
+  align-items: flex-start
+  align-content: flex-start
+  > dt
+    width: $left
+    padding: $p
+    padding-left: 0
+  > dd
+    width: 100% - $left
+    padding: $p
+    padding-right: 0
+
+=dl-border($border: 1px solid #ddd, $left: 30%, $p: 0.5rem 1rem)
+  +dl-flex($left, $p)
+  border-bottom: $border
+  > *
+    border-top: $border

data/assets/stylesheets/spuit/elements/_fieldset.sass

@@ -0,0 +1,46 @@
+=fieldset-base($legend-width: 100px, $gutter: 20px)
+  +clearfix
+  position: relative
+  padding-left: $legend-width + $gutter
+  padding-bottom: 0.5rem
+  +breakpoint-down(sm)
+    padding-left: 0
+    padding-bottom: 1rem
+
+  > legend
+    width: $legend-width
+    margin-left: -($legend-width + $gutter)
+    display: inline-block
+    vertical-align: middle
+    float: left
+
+    +breakpoint-down(sm)
+      display: block
+      float: none
+      width: auto
+      margin-left: 0
+
+  &.has-padding
+    > legend
+      padding-top: 0.5rem
+      +breakpoint-down(sm)
+        padding-top: 0
+
+//not <fieldset/>
+=fieldset-flex($legend-width: 30%, $gutter: 20px)
+  display: flex
+  justify-content: space-between
+  align-items: center
+  min-width: 0
+  padding: 0
+  margin: 0 0 10px
+  border: 0
+  &:last-child
+    margin-bottom: 0
+  label, legend
+    margin-bottom: 0
+  > legend
+    width: $legend-width
+    padding-right: $gutter
+  > *:not(legend)
+    flex: 1

data/assets/stylesheets/spuit/elements/_hr.sass

@@ -0,0 +1,36 @@
+=hr-center-border($w: 100px, $c: #000)
+  border: none
+  border-top: 1px solid $c
+  width: $w
+  margin-top: 50px
+  margin-bottom: 50px
+
+// Example:
+// .dotted
+//   +hr-dotted
+// .dotted--alt
+//   +hr-dotted(#000, 4, 1)
+
+=hr-dotted($color:rgba(#000, 1.0), $stripe: 1, $spacing: 4, $height:1)
+  +background-image(linear-gradient(left, $color 0%, $color ($stripe/($stripe+$spacing))*100%, transparent ($stripe/($stripe+$spacing))*100%, transparent 100%))
+  background-size: ($stripe+$spacing)*1px ($stripe+$spacing)*1px
+  height: $height*1px
+  border: none
+
+// Example:
+// .shaded
+//   +hr-shaded
+
+=hr-shaded($deg:135deg, $color:rgba(#000, 1.0), $stripe: 1, $spacing: 1, $height:10px)
+  $_stripe: $stripe
+  $_spacing: $spacing
+  $_diagonal: ceil(($_stripe+$_spacing)*1.414)
+  $_pattern: $deg, $color, $color ($_stripe)*1px, transparent ($_stripe)*1px, transparent ($_diagonal)*1px, $color ($_diagonal)*1px
+  background-image: -webkit-repeating-linear-gradient($_pattern)
+  background-image: -moz-repeating-linear-gradient($_pattern)
+  background-image: -o-repeating-linear-gradient($_pattern)
+  background-image: -ms-repeating-linear-grad§ient($_pattern)
+  background-image: repeating-linear-gradient($_pattern)
+  background-size: (($_stripe+$_spacing)*2)*1px (($_stripe+$_spacing)*2)*1px
+  height: $height
+  border: none

data/assets/stylesheets/spuit/elements/_input.sass

@@ -0,0 +1,27 @@
+=input-base($w: auto, $p: 10px 10px)
+  +reset-form
+  font-size: inherit
+  display: inline-block
+  width: $w
+  padding: $p
+  box-sizing: border-box
+  line-height: 1
+  &::placeholder
+    font-size: inherit
+  &:focus
+    outline: 0
+
+=input-normal($w: auto, $p: 10px 10px)
+  +reset-form
+  +input-base($w, $p)
+
+  $color-border: #ddd
+  $color-border-key: rgba(#529ef6, 0.5)
+  $color-bg-select: #fffff2
+
+  border: 1px solid $color-border
+  &::placeholder
+    color: #ddd
+  &:focus
+    border: 1px solid $color-border-key
+    background: $color-bg-select

data/assets/stylesheets/spuit/elements/_radio.sass

@@ -0,0 +1,47 @@
+=radio-default
+  margin: 0
+  display: inline-block
+  vertical-align: top
+
+  input[type=radio]
+    display: inline-block
+    margin: 0 4px 0 0
+  label
+    cursor: pointer
+    margin: 0
+
+=radio-base($tag: label, $w: 18px, $color-key: #529ef6)
+  +radio-default
+  $icon: 'DQo8c3ZnIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4IiB2aWV3Qm94PSIxMTEgMjMwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQyICgzNjc4MSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+DQogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+DQogICAgPGRlZnM+PC9kZWZzPg0KICAgIDxyZWN0IGlkPSJjaXJjbGUiIHN0cm9rZT0ibm9uZSIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiB4PSIxMTEiIHk9IjIzMCIgd2lkdGg9IjYiIGhlaWdodD0iNiIgcng9IjMiPjwvcmVjdD4NCjwvc3ZnPg=='
+
+  #{$tag}
+    margin: 0
+    padding: 0
+    line-height: 1
+    cursor: pointer
+    display: inline-block
+
+    &:before
+      content: url('data:image/svg+xml;base64,#{$icon}')
+      vertical-align: middle
+      box-sizing: border-box
+      text-align: center
+      background: #fff
+      width: $w
+      height: $w
+      line-height: $w - 8px
+      padding: 0
+      border: 1px solid #ddd
+      display: inline-block
+      border-radius: $w
+
+    &:hover
+      &:before
+        border-color: $color-key
+
+  input[type=radio]
+    display: none
+
+    &:checked + #{$tag}
+      &:before
+        background-color: $color-key

data/assets/stylesheets/spuit/elements/_select.sass

@@ -0,0 +1,54 @@
+=select-base($w: auto, $bg: #fff)
+  // $bg-image: linear-gradient(to top, #f2f2f2 0%, lighten(#f2f2f2, 10%) 100%)
+  $border: 1px solid #ddd
+  $r: 2px
+  $icon: 'DQo8c3ZnIHdpZHRoPSI2cHgiIGhlaWdodD0iMTBweCIgdmlld0JveD0iMTQ3IDIyNSA2IDEwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDIgKDM2NzgxKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4NCiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4NCiAgICA8ZGVmcz48L2RlZnM+DQogICAgPHBhdGggZD0iTTE1MCwyMjUgTDE1MywyMjkgTDE0NywyMjkgTDE1MCwyMjUgWiBNMTUwLDIzNSBMMTQ3LDIzMSBMMTUzLDIzMSBMMTUwLDIzNSBaIiBpZD0iQ29tYmluZWQtU2hhcGUiIHN0cm9rZT0ibm9uZSIgZmlsbD0iIzAwMDAwMCIgZmlsbC1ydWxlPSJldmVub2RkIj48L3BhdGg+DQo8L3N2Zz4='
+
+  box-sizing: border-box
+  border-radius: $r
+  position: relative
+  overflow: hidden
+  border: $border
+  width: $w
+  display: inline-block
+  padding-right: 20px
+
+  select
+    +reset-form
+    display: inline-block
+    box-sizing: content-box
+    width: 100%
+    padding: 10px 10px
+    // padding: 5px 10px
+    line-height: 1 !important
+    background: $bg
+    // background-image: $bg-image
+    color: $color-black
+    &:focus
+      outline: none
+      border: none
+
+    background-image: url('data:image/svg+xml;base64,#{$icon}')
+    background-repeat: no-repeat
+    background-position: right 34px top 13px
+    background-size: 6px 10px
+
+  select
+    width: 110% // IE9
+    &::-ms-expand
+      display: none // IE10
+
+  +select-firefox-hack
+
+=select-firefox-hack
+  @at-root
+    @-moz-document url-prefix()
+      #{&}
+        select
+          text-indent: 0.01px
+          text-overflow: ''
+          color: #000
+          padding: 5px 10px
+          &:-moz-focusring
+            // color: transparent
+            text-shadow: none

data/assets/stylesheets/spuit/elements/_table.sass

@@ -0,0 +1,58 @@
+=table-base($p: 5px 10px)
+  width: 100%
+  border-collapse: collapse
+  margin-bottom: 0
+  th
+    font-weight: bold
+  th, td
+    padding: $p
+
+//  .table--normal
+//    +table-normal
+=table-normal($p: 5px 10px, $border-top: 2px solid #eee, $border: 1px solid #eee)
+  +table-base($p)
+  border-top: $border
+  thead
+    tr
+      th, td
+        font-size: 0.8rem
+        border: $border
+        border-bottom: $border-top
+  tbody
+    tr
+      &:first-child
+        th, td
+          border-top: none
+    th
+      border: $border
+      border-bottom: $border-top
+    td
+      border: $border
+
+//  .table--line
+//    +table-line
+=table-line($border-top: 2px solid #eee, $border: 1px solid #eee)
+  +table-base
+  thead
+    tr
+      th, td
+        border-bottom: $border-top
+  tr
+    &:first-child
+      th, td
+        border-top: none
+  th, td
+    border-top: $border
+
+//  .table--stripe
+//    +table-stripe
+=table-stripe($color-thead: #fff, $color-even: #eee, $color-odd: #f8f8f8)
+  +table-base
+  thead
+    tr
+      background-color: $color-thead
+  tbody
+    tr:nth-child(even)
+      background-color: $color-even
+    tr:nth-child(odd)
+      background-color: $color-odd

data/assets/stylesheets/spuit/includes/_animations.scss

@@ -0,0 +1,55 @@
+// @include include-animations
+@mixin include-animations {
+  @at-root {
+
+    // animation: anim-spin 1.6s infinite linear
+    @keyframes anim-spin {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(359deg);
+      }
+    }
+
+    // animation: anim-float 0.8s ease-out infinite
+    @keyframes anim-float {
+      0% {
+        transform: translateY(0%);
+      }
+      50% {
+        transform: translateY(20%);
+      }
+      100% {
+        transform: translateY(0%);
+      }
+    }
+
+    // animation: anim-arrow 0.8s ease-out infinite
+    @keyframes anim-arrow {
+      0% {
+        transform: translateX(0%);
+      }
+      50% {
+        transform: translateX(20%);
+      }
+      100% {
+        transform: translateX(0%);
+      }
+    }
+
+    // animation: anim-scale 0.8s ease-out
+    @keyframes anim-scale {
+      0% {
+        transform: scale(1);;
+      }
+      50% {
+        transform: scale(1.2);
+      }
+      100% {
+        transform: scale(1);
+      }
+    }
+
+  }
+}

data/assets/stylesheets/spuit/includes/_grid.scss

@@ -0,0 +1,345 @@
+/*
+from: https://github.com/twbs/bootstrap/blob/v4-dev/
+*/
+
+// @include include-grid
+@mixin include-grid {
+  @at-root {
+    $enable-grid-classes: true !default;
+    $grid-columns: 12 !default;
+    $grid-gutter-width-base: 30px !default;
+    $grid-gutter-widths: (
+      xs: $grid-gutter-width-base,
+      sm: $grid-gutter-width-base,
+      md: $grid-gutter-width-base,
+      lg: $grid-gutter-width-base,
+      xl: $grid-gutter-width-base
+    ) !default;
+    $grid-breakpoints: (
+      xs: 0,
+      sm: 576px,
+      md: 768px,
+      lg: 992px,
+      xl: 1200px
+    ) !default;
+    $container-max-widths: (
+      sm: 540px,
+      md: 720px,
+      lg: 960px,
+      xl: 1140px
+    ) !default;
+
+    // Breakpoint viewport sizes and media queries.
+    //
+    // Breakpoints are defined as a map of (name: minimum width), order from small to large:
+    //
+    //    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+    //
+    // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+
+    // Name of the next breakpoint, or null for the last breakpoint.
+    //
+    //    >> breakpoint-next(sm)
+    //    md
+    //    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+    //    md
+    //    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+    //    md
+    @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+      $n: index($breakpoint-names, $name);
+      @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+    }
+
+    // Minimum breakpoint width. Null for the smallest (first) breakpoint.
+    //
+    //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+    //    576px
+    @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+      $min: map-get($breakpoints, $name);
+      @return if($min != 0, $min, null);
+    }
+
+    // Maximum breakpoint width. Null for the largest (last) breakpoint.
+    // The maximum value is calculated as the minimum of the next one less 0.1.
+    //
+    //    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+    //    767px
+    @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+      $next: breakpoint-next($name, $breakpoints);
+      @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
+    }
+
+    // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
+    // Useful for making responsive utilities.
+    //
+    //    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+    //    ""  (Returns a blank string)
+    //    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+    //    "-sm"
+    @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+      @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+    }
+
+
+    // Framework grid generation
+    //
+    // Used only by Bootstrap to generate the correct number of grid classes given
+    // any value of `$grid-columns`.
+
+    @mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints) {
+      // Common properties for all breakpoints
+      %grid-column {
+        position: relative;
+        width: 100%;
+        min-height: 1px; // Prevent columns from collapsing when empty
+
+        @include make-gutters($gutters);
+      }
+
+      @each $breakpoint in map-keys($breakpoints) {
+        $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+        // Allow columns to stretch full width below their breakpoints
+        @for $i from 1 through $columns {
+          .col#{$infix}-#{$i} {
+            @extend %grid-column;
+          }
+        }
+        .col#{$infix} {
+          @extend %grid-column;
+        }
+
+        @include media-breakpoint-up($breakpoint, $breakpoints) {
+          // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+          .col#{$infix} {
+            flex-basis: 0;
+            flex-grow: 1;
+            max-width: 100%;
+          }
+          .col#{$infix}-auto {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          @for $i from 1 through $columns {
+            .col#{$infix}-#{$i} {
+              @include make-col($i, $columns);
+            }
+          }
+
+          @each $modifier in (pull, push) {
+            @for $i from 0 through $columns {
+              .#{$modifier}#{$infix}-#{$i} {
+                @include make-col-modifier($modifier, $i, $columns)
+              }
+            }
+          }
+
+          // `$columns - 1` because offsetting by the width of an entire row isn't possible
+          @for $i from 0 through ($columns - 1) {
+            @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-xs-0
+              .offset#{$infix}-#{$i} {
+                @include make-col-modifier(offset, $i, $columns)
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+    // Makes the @content apply to the given breakpoint and wider.
+    @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+      $min: breakpoint-min($name, $breakpoints);
+      @if $min {
+        @media (min-width: $min) {
+          @content;
+        }
+      } @else {
+        @content;
+      }
+    }
+
+    // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+    // Makes the @content apply to the given breakpoint and narrower.
+    @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+      $max: breakpoint-max($name, $breakpoints);
+      @if $max {
+        @media (max-width: $max) {
+          @content;
+        }
+      } @else {
+        @content;
+      }
+    }
+
+    // Media that spans multiple breakpoint widths.
+    // Makes the @content apply between the min and max breakpoints
+    @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+      @include media-breakpoint-up($lower, $breakpoints) {
+        @include media-breakpoint-down($upper, $breakpoints) {
+          @content;
+        }
+      }
+    }
+
+    /// Grid system
+    //
+    // Generate semantic grid columns with these mixins.
+
+    @mixin make-container($gutters: $grid-gutter-widths) {
+      position: relative;
+      margin-right: auto;
+      margin-left: auto;
+      box-sizing: border-box;
+
+      @each $breakpoint in map-keys($gutters) {
+        @include media-breakpoint-up($breakpoint) {
+          $gutter: map-get($gutters, $breakpoint);
+          padding-right: ($gutter / 2);
+          padding-left:  ($gutter / 2);
+        }
+      }
+    }
+
+
+    // For each breakpoint, define the maximum width of the container in a media query
+    @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
+      @each $breakpoint, $container-max-width in $max-widths {
+        @include media-breakpoint-up($breakpoint, $breakpoints) {
+          width: $container-max-width;
+          max-width: 100%;
+          box-sizing: border-box;
+        }
+      }
+    }
+
+    @mixin make-gutters($gutters: $grid-gutter-widths) {
+      @each $breakpoint in map-keys($gutters) {
+        @include media-breakpoint-up($breakpoint) {
+          $gutter: map-get($gutters, $breakpoint);
+          padding-right: ($gutter / 2);
+          padding-left:  ($gutter / 2);
+          box-sizing: border-box;
+        }
+      }
+    }
+
+    @mixin make-row($gutters: $grid-gutter-widths) {
+      display: flex;
+      flex-wrap: wrap;
+      box-sizing: border-box;
+
+      @each $breakpoint in map-keys($gutters) {
+        @include media-breakpoint-up($breakpoint) {
+          $gutter: map-get($gutters, $breakpoint);
+          margin-right: ($gutter / -2);
+          margin-left:  ($gutter / -2);
+        }
+      }
+    }
+
+    @mixin make-col-ready($gutters: $grid-gutter-widths) {
+      position: relative;
+      // Prevent columns from becoming too narrow when at smaller grid tiers by
+      // always setting `width: 100%;`. This works because we use `flex` values
+      // later on to override this initial width.
+      width: 100%;
+      min-height: 1px; // Prevent collapsing
+
+      @each $breakpoint in map-keys($gutters) {
+        @include media-breakpoint-up($breakpoint) {
+          $gutter: map-get($gutters, $breakpoint);
+          padding-right: ($gutter / 2);
+          padding-left:  ($gutter / 2);
+        }
+      }
+    }
+
+    @mixin make-col($size, $columns: $grid-columns) {
+      flex: 0 0 percentage($size / $columns);
+      // width: percentage($size / $columns);
+      // Add a `max-width` to ensure content within each column does not blow out
+      // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+      // do not appear to require this.
+      max-width: percentage($size / $columns);
+    }
+
+    @mixin make-col-offset($size, $columns: $grid-columns) {
+      margin-left: percentage($size / $columns);
+    }
+
+    @mixin make-col-push($size, $columns: $grid-columns) {
+      left: if($size > 0, percentage($size / $columns), auto);
+    }
+
+    @mixin make-col-pull($size, $columns: $grid-columns) {
+      right: if($size > 0, percentage($size / $columns), auto);
+    }
+
+    @mixin make-col-modifier($type, $size, $columns) {
+      // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
+      @if $type == push {
+        @include make-col-push($size, $columns);
+      } @else if $type == pull {
+        @include make-col-pull($size, $columns);
+      } @else if $type == offset {
+        @include make-col-offset($size, $columns);
+      }
+    }
+
+
+    // Container widths
+    //
+    // Set the container width, and override it for fixed navbars in media queries.
+
+    @if $enable-grid-classes {
+      .container {
+        @include make-container();
+        @include make-container-max-widths();
+      }
+    }
+
+    // Fluid container
+    //
+    // Utilizes the mixin meant for fixed width containers, but without any defined
+    // width for fluid, full width layouts.
+
+    @if $enable-grid-classes {
+      .container-fluid {
+        @include make-container();
+      }
+    }
+
+    // Row
+    //
+    // Rows contain and clear the floats of your columns.
+
+    @if $enable-grid-classes {
+      .row {
+        @include make-row();
+      }
+
+      // Remove the negative margin from default .row, then the horizontal padding
+      // from all immediate children columns (to prevent runaway style inheritance).
+      .no-gutters {
+        margin-right: 0;
+        margin-left: 0;
+
+        > .col,
+        > [class*="col-"] {
+          padding-right: 0;
+          padding-left: 0;
+        }
+      }
+    }
+
+    // Columns
+    //
+    // Common styles for small and large grid columns
+
+    @if $enable-grid-classes {
+      @include make-grid-columns();
+    }
+  }
+}