spuit 0.0.6

data/assets/javascripts/spuit/extend.js

@@ -0,0 +1,46 @@
+// プロトタイプの拡張
+
+//全文置換を追加
+String.prototype.replaceAll = function (org, dest){
+  return this.split(org).join(dest);
+}
+
+//Fisher-Yates シャッフル
+Array.prototype.shuffle = function() {
+  var i = this.length;
+  while(i){
+      var j = Math.floor(Math.random()*i);
+      var t = this[--i];
+      this[i] = this[j];
+      this[j] = t;
+  }
+  return this;
+}
+
+//配列の複製
+Array.prototype.clone = function(){
+  return Array.apply(null,this)
+}
+
+//IEのArrayにはindexOfが無いので追加
+if (!Array.prototype.indexOf)
+{
+  Array.prototype.indexOf = function(elt /*, from*/)
+  {
+    var len = this.length;
+    var from = Number(arguments[1]) || 0;
+    from = (from < 0)
+         ? Math.ceil(from)
+         : Math.floor(from);
+    if (from < 0)
+      from += len;
+
+    for (; from < len; from++)
+    {
+      if (from in this &&
+          this[from] === elt)
+        return from;
+    }
+    return -1;
+  };
+}

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

@@ -0,0 +1,175 @@
+=body
+  $color-def: #222
+  $color-accent: #f22
+
+  width: 100%
+  text-align: left
+
+  > *
+    margin-bottom: 2rem
+    &:first-child
+      margin-top: 0
+    &:last-child
+      margin-bottom: 0
+
+  h1,h1 a,
+  h2,h2 a,
+  h3,h3 a,
+  h4,h4 a,
+  h5,h5 a,
+  h6,h6 a
+    +word-break
+    clear: both
+    color: $color-def
+    font-weight: normal
+  small
+    font-size: 0.8rem
+
+  h1,h1 a
+    font-size: 2rem
+    line-height: 3rem
+    margin-top: 2rem
+    margin-bottom: 2rem
+
+  h2,h2 a
+    font-size: 1.8rem
+    margin-top: 2rem
+    margin-bottom: 2rem
+
+  h3,h3 a
+    font-size: 1.4rem
+    margin-top: 2rem
+    margin-bottom: 2rem
+
+  h4,h4 a
+    font-size: 1rem
+    margin-bottom: 20px
+
+  h5,h5 a
+    font-size: 1rem
+    margin-bottom: 16px
+
+  h6,h6 a
+    font-size: 1rem
+    margin-bottom: 16px
+
+  dl, ul, p
+    font-size: 1rem
+
+  i
+    font-style: italic
+
+  strong
+    font-weight: normal !important
+    font-weight: bold !important
+    padding-left: 3px
+    padding-right: 3px
+
+  p
+    +font
+    clear: both
+    code
+      font-family: $font-code
+      margin: 0 4px
+      padding: 2px 6px
+      font-style: italic
+      color: #777
+      background: #f8f8f8
+      $c: #f8f8f8
+      border: 1px solid $c - 10
+
+  a
+    +font
+    color: $color-def
+    text-decoration: underline
+    &:hover
+      text-decoration: none
+
+  // アイコンつきリンク
+  // a[target="_blank"]
+  // > a[target="_blank"], p > a[target="_blank"], li > a[target="_blank"]
+  //   +icon-fa('\f08e')
+  //   &:before
+  //     opacity: 0.2
+  //     margin-left: 4px
+  //     font-size: 0.8rem
+
+  img
+    margin: 0
+    padding: 0
+    line-height: 0
+    border: none
+    max-width: 100%
+
+  > ul
+    margin-left: 20px
+    li
+      +font(0.9rem)
+      list-style-type: disc
+      a
+        +font(0.9rem)
+  > ol
+    margin-left: 20px
+    li
+      +font
+      list-style: decimal
+      + li
+        border-top: 1px dotted #ddd
+
+  > table
+    width: 100%
+    border-collapse: collapse
+    th
+      border-bottom: 1px solid #eee
+      padding: 5px 10px 5px 10px
+      +font(10px)
+    td
+      border-bottom: 1px solid #eee
+      padding: 5px 10px 5px 10px
+      +font(14px)
+
+  pre > code,
+  .highlight
+    width: auto !important
+    padding: 20px
+    margin-top: 2rem
+    margin-bottom: 2rem
+    display: block
+    background: #f8f8f8
+    border: 1px solid #eee
+      font-family: $font-code
+    font-size: 0.8rem
+    line-height: 1.6rem
+    overflow: auto
+    p
+      font-family: $font-code
+      font-size: 0.8rem
+    pre
+      margin-bottom: 0
+
+  blockquote
+    +clearfix
+    width: auto !important
+    text-align: left !important
+    margin-left: 0
+    padding-left: 20px
+    border-left: 4px solid #f2f2f2
+    cite
+      margin-top: 0
+      float: right
+      font-size: 12px
+      p, a
+        display: inline
+        font-weight: normal
+        font-style: normal
+        color: $color-def
+        font-size: 12px
+        a
+          text-decoration: underline
+          &:hover
+            color: $color-accent
+    p
+      font-weight: bold
+      font-style: italic
+      margin-bottom: 10px
+      text-align: left !important

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

@@ -0,0 +1,116 @@
+=button-base($c: transparent)
+  box-sizing: border-box
+  box-shadow: none
+  appearance: none
+  display: inline-block
+  border-radius: 0
+  background-color: $c
+  background-image: linear-gradient(to top, $c, $c)
+  position: relative
+  cursor: pointer
+  text-align: center
+  font-weight: normal
+  margin: 0
+  padding: 0
+  border: none
+  outline: none
+  &:link, &:visited, &:hover, &:active, &:active
+    text-decoration: none
+  &:focus
+    outline: none
+  &:disabled,
+  &.is-disabled
+    +button-disabled
+    opacity: 0.2
+  // &.is-loading
+  //   +button-loading
+
+=button-disabled
+  cursor: default
+  pointer-events: none
+
+=button-loading
+  +button-disabled
+  +icon-loading
+  opacity: 0.6
+
+// .button-normal
+//   +button-normal(10px 10px, #529ef6, #fff, 2px)
+=button-normal($p: 10px 10px, $c: #529ef6, $c-text: #fff, $r: 2px)
+  +button-base
+  border-radius: $r
+  border: 1px solid $c
+  background-color: $c
+  color: $c-text
+  padding: $p
+  line-height: 1
+  &:focus
+    background-color: $c
+  &:hover,
+  &:active,
+  &.is-current
+    background-color: darken($c, 10%)
+    color: $c-text
+    border-color: $c
+
+// .button-semiflat
+//   +button-semiflat(10px 10px, #529ef6, 10%, #fff, 2px)
+=button-semiflat($p: 10px 10px, $c: #529ef6, $strangth: 5%, $c-text: #fff, $r: 4px)
+  +button-base
+  border-radius: $r
+  background-color: $c
+  background-image: linear-gradient(to top, $c, lighten($c, $strangth))
+  border: 1px solid lighten($c, $strangth)
+  color: $c-text
+  padding: $p
+  line-height: 1
+  &:focus
+    background-color: $c
+    background-image: linear-gradient(to top, $c, lighten($c, $strangth))
+  &:hover,
+  &:active,
+  &.is-current
+    background-color: darken($c, $strangth)
+    background-image: linear-gradient(to top, darken($c, $strangth), $c)
+
+// .button-border
+//   +button-border(10px 10px, #529ef6, #fff)
+=button-border($p: 10px 10px, $c: #529ef6, $c-text: #fff, $border: 1px, $r: 2px)
+  +button-base
+  border-radius: $r
+  background-color: transparent
+  padding: $p
+  border: $border solid $c
+  color: $c
+  line-height: 1
+  &:focus
+    background-color: transparent
+    border: $border solid $c
+  &:hover,
+  &:active,
+  &.is-current
+    background-color: $c
+    color: $c-text
+    border-color: transparet
+
+// .button-emboss
+//   +button-emboss(10px 10px, #529ef6, #fff, 6px, 4px)
+=button-emboss($p: 10px 10px, $c: #529ef6, $c-text: #fff, $thickness: 6px, $r: 4px)
+  +button-base
+  transition: all 0.05s ease-out
+  transform: translateY(-$thickness)
+  box-shadow: 0 $thickness 0 darken($c, 10%)
+  border-radius: $r
+  background-color: $c
+  color: $c-text
+  padding: $p
+  line-height: 1
+  &:focus
+    background-color: $c
+    box-shadow: 0 $thickness 0 darken($c, 10%)
+  &:hover,
+  &:active,
+  &.is-current
+    transform: translateY(0)
+    box-shadow: 0 0 0 $c
+    background-color: darken($c, 10%)

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

@@ -0,0 +1,44 @@
+=form
+  input[type=text],
+  textarea,
+  legend,
+  .select,
+  .radio,
+  .radio-inside,
+  .radio-default,
+  .checkbox,
+  .checkbox-inside,
+  .checkbox-default
+    font-size: 1rem
+    line-height: 1.6rem
+
+  p
+    margin-bottom: 0
+
+  input[type=text]
+    +input-base
+  textarea
+    +input-base
+  fieldset
+    +fieldset-base
+  .select
+    +select-base
+
+  .radio
+    +radio-base
+    padding-right: 1rem
+  .radio-inside
+    +radio-base(span)
+    padding-right: 1rem
+  .radio-default
+    +radio-default
+    padding-right: 1rem
+  .checkbox
+    +checkbox-base
+    padding-right: 1rem
+  .checkbox-inside
+    +checkbox-base(span)
+    padding-right: 1rem
+  .checkbox-default
+    +checkbox-default
+    padding-right: 1rem

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

@@ -0,0 +1,57 @@
+=gist
+  $_contents-width: 960px
+  $_break-point: 640px
+  $_ml: 100px
+  width: auto !important
+  margin-left: -$_ml !important
+  margin-right: -$_ml !important
+  margin-top: 30px
+  margin-bottom: 30px
+  position: relative
+  @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
+  table
+    margin-bottom: 0
+  .gist-file
+    border: none
+    .gist-data
+      border-bottom: none
+      background: #f8f8f8
+      .file-data
+        line-height: 1.4em
+        color: #444
+        position: relative
+        width: auto !important
+        .line-data
+          border-top: none
+          border-bottom: none
+          padding-left: 10px !important
+        .line-numbers,
+        .line-data,
+        .line-pre
+          border: none
+          font-size: 13px
+          background: #f8f8f8
+        .line-numbers
+          padding-right: 10px
+          width: 20px
+          .line-number
+            font-weight: normal
+            color: #ddd
+        .line-pre
+          font-family: Consolas, "Liberation Mono", Courier, monospace
+          color: #333
+    .gist-meta
+      $c: #f8f8f8
+      background-color: $c
+      border-top: 1px solid #eee
+      text-shadow: none
+
+    .gist-meta, .gist-meta a
+      font-size: 12px
+      font-weight: normal
+      text-shadow: 1px 1px rgba(255,255,255,0)

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

@@ -0,0 +1,44 @@
+=grid-container
+  +clearfix
+  box-sizing: border-box
+  margin-right: auto
+  margin-left: auto
+  position: relative
+
+=grid-row($gutter: 10px)
+  +clearfix
+  box-sizing: border-box
+  position: relative
+  margin-left:  -($gutter / 2)
+  margin-right: -($gutter / 2)
+  margin-top:  -($gutter / 2)
+  margin-bottom: -($gutter / 2)
+
+=grid-item($gutter: 10px)
+  box-sizing: border-box
+  position: relative
+  padding-left:  ($gutter / 2)
+  padding-right: ($gutter / 2)
+  padding-top:  ($gutter / 2)
+  padding-bottom: ($gutter / 2)
+  float: left
+  word-break: break-all
+
+=grids($grid-columns: 12, $grid-gutter: 10px, $debug: true)
+  @at-root
+    #{&}
+      +grid-container
+
+    #{&}__row
+      +grid-row($grid-gutter)
+
+    #{&}__item
+      @if $debug
+        +debug-block
+      +grid-item($grid-gutter)
+      width: percentage(3 / $grid-columns)
+      &.c
+        clear: both
+      @for $i from 0 through $grid-columns
+        &.is-col#{$i}
+          width: percentage($i / $grid-columns)