spuit 0.0.6

data/assets/stylesheets/spuit/components/_icon.scss

@@ -0,0 +1,68 @@
+/*
+necessary:
+@include include-fa;
+@include include-animations;
+*/
+@mixin icon-loading {
+  &::before {
+    @include fa('\f1ce');
+    animation: anim-spin 1.6s infinite linear;
+    margin-right: 5px;
+  }
+}
+
+@mixin icon-twitter {
+  &::before {
+    content: '';
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+    background-color: $color-twitter;
+    background-image: url("data:image/svg+xml, #{$svg-twitter}");
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 60% 60%;
+  }
+}
+
+@mixin icon-facebook {
+  &::before {
+    content: '';
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+    background-color: $color-facebook;
+    background-image: url("data:image/svg+xml, #{$svg-facebook}");
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 60% 60%
+  }
+}
+
+@mixin icon-hatena {
+  &::before {
+    content: '';
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+    background-color: $color-hatena;
+    background-image: url("data:image/svg+xml, #{$svg-hatena}");
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 50% 50%;
+  }
+}
+
+@mixin icon-hamburger {
+  &::before {
+    content: '';
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+    background-color: #000;
+    background-image: url("data:image/svg+xml, #{$svg-hamburger}");
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 45% 45%;
+  }
+}

data/assets/stylesheets/spuit/components/_markdown.sass

@@ -0,0 +1,182 @@
+=markdown
+  $_color-accent: #222
+  $_contents-width: 500px
+  $_break-point: 500px
+  $_margin-contents-bottom: 30px
+
+  // .md系
+  .md-img-left,
+  .md-img-right
+    clear: both
+  .md-img-left + p img,
+  .md-img-right + p img
+    width: 300px
+    margin-bottom: 20px
+    @media screen and (max-width: $_break-point + 300px)
+      position: relative
+      width: auto !important
+      margin-left: 0 !important
+      margin-right: 0 !important
+      float: none !important
+      width: 100% !important
+  .md-img-left + p img
+    float: left
+    margin-left: -100px
+    margin-right: 30px
+  .md-img-right + p img
+    float: right
+    margin-right: -100px
+    margin-left: 30px
+
+  // .md-step
+  .md-step + ul
+    $accent: #000
+    $background: #f2f2f2
+    $border: #fff
+    $h: 30px
+    list-style: none
+    padding: 0
+    margin: 0 0 20px 0
+    border: 1px solid $border
+    overflow: hidden
+    display: inline-block
+    background-color: $background
+    border: 1px solid $border
+    // +border-radius(4px)
+    li
+      float: left
+      color: #ccc
+      line-height: $h
+      padding: 0 10px 0 15px
+      font-size: 12px
+      text-align: center
+      position: relative
+      list-style: none
+      & + li
+        padding: 0 7px 0 $h*0.8
+      &:last-child
+        padding-right: 15px
+      &:after,
+      &:before
+        left: 100%
+        border: solid transparent
+        content: " "
+        height: 0
+        width: 0
+        position: absolute
+        pointer-events: none
+        z-index: 5
+      &:after
+        border-left-color: $background
+        border-width: $h/2
+        top: 50%
+        margin-top: -$h/2
+      &:before
+        border-left-color: $border
+        border-width: $h/2 + 1px
+        top: 50%
+        margin-top: -$h/2 - 1px
+    li
+      background-color: $accent
+      color: #fff
+      margin-bottom: 0
+      &:after
+        border-left-color: $accent
+      &:before
+        border-left-color: #ffffff
+
+  // .md-large + script + link + .gist,
+  .md-large + p,
+  .md-large + div
+    $_ml: 100px
+    width: auto !important
+    margin-left: -$_ml !important
+    margin-right: -$_ml !important
+    position: relative
+    img
+      width: 100%
+      height: auto
+    @media screen and (max-width: $_contents-width + ($_ml*2) + 20px)
+      margin-left: 0 !important
+      margin-right: 0 !important
+    @media screen and (max-width: $_break-point)
+      margin-left: 0 !important
+      margin-right: 0 !important
+
+  .md-frame-learge + p,
+  .md-frame + p
+    background: #f2f2f2
+    padding: 10px
+    margin-bottom: $_margin-contents-bottom
+  .md-frame-learge + p
+    $_ml: 100px
+    width: auto !important
+    margin-left: -$_ml !important
+    margin-right: -$_ml !important
+    margin-top: 30px
+    margin-bottom: 30px
+    position: relative
+
+  // .md-large
+  .md-photo + p
+    $_ml: 100px
+    $_ml2: 200px
+    $_ml3: 300px
+    width: auto !important
+    margin-left: -$_ml3 !important
+    margin-right: -$_ml3 !important
+    position: relative
+    img
+      width: 100%
+      height: auto
+    @media screen and (max-width: $_contents-width + ($_ml3*2) + 20px)
+      margin-left: -$_ml2 !important
+      margin-right: -$_ml2 !important
+    @media screen and (max-width: $_contents-width + ($_ml2*2) + 20px)
+      margin-left: -$_ml !important
+      margin-right: -$_ml !important
+    @media screen and (max-width: $_contents-width + ($_ml*2) + 20px)
+      margin-left: 0 !important
+      margin-right: 0 !important
+    @media screen and (max-width: $_break-point)
+      margin-left: 0 !important
+      margin-right: 0 !important
+
+  // footnote系
+  %footnote
+    font-size: 10px !important
+    background: $_color-accent
+    color: #000
+    text-decoration: none
+    padding: 2px
+    line-height: 1em
+  a[rel="footnote"]
+    @extend %footnote
+  .footnotes
+    ol
+      margin-bottom: $_margin-contents-bottom
+      padding: 10px 10px 10px 0px
+      border: 1px solid #dedede
+      // +border-radius(4px)
+      li
+        font-weight: normal
+        list-style: decimal
+        border-top: 1px dotted #dedede
+        padding: 5px 0 5px 0
+        margin-left: 30px
+        font-size: 12px !important
+        &:first-child
+          border-top: none
+        +transition(background-color 1s ease-out)
+        &.active
+          background-color: $_color-accent + 200
+        p
+          margin: 0
+          font-size: 12px !important
+          a, strong
+            font-size: 12px !important
+          a.reversefootnote,
+          a[rev="footnote"]
+            @extend %footnote
+
+

data/assets/stylesheets/spuit/components/_messages.sass

@@ -0,0 +1,18 @@
+=message-element($name: info, $color: #3498DB)
+  box-sizing: border-box
+  padding: 12px
+  border-radius: 3px
+  display: block
+
+  &.is-#{$name}
+    color: $color
+    background: rgba($color, 0.1)
+    border: 1px solid rgba($color, 0.15)
+
+=util-messages($color-info: #3498DB, $color-success: #1ABC9C, $color-warning: #F1C40F, $color-danger: #E74C3C)
+  @at-root
+    .message
+      +message-element(info, $color-info)
+      +message-element(success, $color-success)
+      +message-element(warning, $color-warning)
+      +message-element(danger, $color-danger)

data/assets/stylesheets/spuit/components/_shoulder.sass

@@ -0,0 +1,13 @@
+// %h2
+//   %ul.shoulder
+//     %li
+//       = link_to 'shoulder', '#'
+//     %li
+//       = link_to 'shoulder', '#'
+//   Heading and shoulder links.
+
+=shoulder
+  +reset-ul
+  display: inline-block
+  float: right
+  padding-left: 10px

data/assets/stylesheets/spuit/components/_split.sass

@@ -0,0 +1,32 @@
+// Example:
+
+// Simple Grid System - ie9-
+@function split-width($column: 5, $gutter: 2)
+  $parcent: (1/$column) * 100
+  $margin: ($gutter * ($column - 1)) / $column
+  @return ($parcent - $margin)
+
+=split($column: 5, $gutter: 2, $debug: false)
+  @at-root
+    #{&}
+      +clearfix
+      +reset-ul
+      position: relative
+      > *
+        @if $debug
+          +debug-block
+        display: inline-block
+        float: left
+        box-sizing: border-box
+        width: split-width($column, $gutter) * 1%
+        margin-left: $gutter * 1%
+        @for $i from 0 through 150
+          @if $i%$column == 1
+            &:nth-child(#{$i})
+              clear: both
+              margin-left: 0
+          @else
+            &:nth-child(#{$i})
+              clear: none
+              margin-left: $gutter * 1%
+        margin-bottom: 10px

data/assets/stylesheets/spuit/components/_triangle.sass

@@ -0,0 +1,40 @@
+// Example:
+// +triangle(#222, 12px, $w/2, 0, 'left')
+
+=triangle($c: #2dd, $w:20px, $l: 0, $t: 0, $direction: "right", $element: "after")
+  position: relative
+  &:#{$element}
+    content: ""
+    position: absolute
+    width: 0
+    height: 0
+    border: $w solid transparent
+    border-top-color: $c
+  @if $direction == "left"
+    &:#{$element}
+      transform: translateX(-$w*2) translateY(-$w) rotate(90deg)
+      left: $l
+      right: auto
+      top: $t
+  @if $direction == "right"
+    &:#{$element}
+      transform: translateX($w*2) translateY(-$w) rotate(-90deg)
+      left: auto
+      right: $l
+      top: $t
+  @if $direction == "top"
+    &:#{$element}
+      transform: translateX(-$w) translateY(-$w*2) rotate(180deg)
+      right: auto
+      left: $l
+      top: $t
+  @if $direction == "bottom"
+    &:#{$element}
+      transform: translateX(-$w) translateY($w*2) rotate(0)
+      right: auto
+      left: $l
+      bottom: $t
+
+=tri($c: #2dd, $w:20px, $l: 0, $t: 0, $direction: "right", $element: "after")
+  +triangle($c, $w, $l, $t, $direction, $element)
+

data/assets/stylesheets/spuit/components/_wordwrap-fadeout.sass

@@ -0,0 +1,19 @@
+=wordwrap-fadeout($h: 40px, $m: 10px, $c: #fff)
+  position: relative
+  overflow: hidden
+  &:before
+    content: ''
+    position: absolute
+    bottom: 0
+    left: 0
+    width: 100%
+    height: $m
+    background: $c
+  &:after
+    background-image: linear-gradient(to top, rgba($c,1), rgba($c,0))
+    content: ''
+    position: absolute
+    bottom: $m
+    left: 0
+    width: 100%
+    height: $h

data/assets/stylesheets/spuit/components/_wrap.sass

@@ -0,0 +1,22 @@
+=wrap($n: 960px, $margin: 10px)
+  width: 100%
+  margin: 0
+  padding: 0
+  text-align: center
+  min-width: $n
+  +breakpoint-down(sm)
+    width: auto
+    min-width: 0
+
+  @at-root
+    #{&}__inner
+      box-sizing: border-box
+      position: relative
+      display: block
+      width: $n
+      margin: 0 auto
+      text-align: left
+      +breakpoint-down(sm)
+        width: 100%
+        padding-left: $margin
+        padding-right: $margin

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

@@ -0,0 +1,46 @@
+=checkbox-default
+  margin: 0
+  display: inline-block
+  vertical-align: top
+
+  input[type=checkbox]
+    display: inline-block
+    margin: 0 4px 0 0
+  label
+    cursor: pointer
+    margin: 0
+
+=checkbox-base($tag: label, $w: 18px, $color-key: #529ef6)
+  +checkbox-default
+  $icon: 'DQo8c3ZnIHdpZHRoPSIxMXB4IiBoZWlnaHQ9IjExcHgiIHZpZXdCb3g9Ijg2IDIyNiAxMSAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQyICgzNjc4MSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+DQogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+DQogICAgPGRlZnM+PC9kZWZzPg0KICAgIDxwYXRoIGQ9Ik04OS4yOTI4OTMyLDIzMi43MDcxMDcgTDk1LjI5Mjg5MzIsMjMyLjcwNzEwNyBMOTUuMjkyODkzMiwyMzQuNzA3MTA3IEw4Ny4yOTI4OTMyLDIzNC43MDcxMDcgTDg3LjI5Mjg5MzIsMjMzLjcwNzEwNyBMODcuMjkyODkzMiwyMjguNzA3MTA3IEw4OS4yOTI4OTMyLDIyOC43MDcxMDcgTDg5LjI5Mjg5MzIsMjMyLjcwNzEwNyBaIiBpZD0iY2hlY2siIHN0cm9rZT0ibm9uZSIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5MS4yOTI4OTMsIDIzMS43MDcxMDcpIHJvdGF0ZSgtNDUuMDAwMDAwKSB0cmFuc2xhdGUoLTkxLjI5Mjg5MywgLTIzMS43MDcxMDcpICI+PC9wYXRoPg0KPC9zdmc+'
+
+  #{$tag}
+    margin: 0
+    padding: 0
+    line-height: 1
+    cursor: pointer
+
+    &: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 - 5px
+      padding: 0 0 0 1px
+      border: 1px solid #ddd
+      display: inline-block
+      border-radius: 3px
+
+    &:hover
+      &:before
+        border-color: $color-key
+
+  input[type=checkbox]
+    display: none
+
+    &:checked + #{$tag}
+      &:before
+        background: $color-key