spuit 0.0.6

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

@@ -0,0 +1,79 @@
+/*
+from: https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_spacing.scss
+*/
+
+// @include include-spacers
+@mixin include-spacers {
+  @at-root {
+    $spacer: 1rem !default;
+    $spacer-x: $spacer !default;
+    $spacer-y: $spacer !default;
+    $spacers: (
+      0: (
+        x: 0,
+        y: 0
+      ),
+      1: (
+        x: ($spacer-x * .25),
+        y: ($spacer-y * .25)
+      ),
+      2: (
+        x: ($spacer-x * .5),
+        y: ($spacer-y * .5)
+      ),
+      3: (
+        x: $spacer-x,
+        y: $spacer-y
+      ),
+      4: (
+        x: ($spacer-x * 1.5),
+        y: ($spacer-y * 1.5)
+      ),
+      5: (
+        x: ($spacer-x * 3),
+        y: ($spacer-y * 3)
+      )
+    ) !default;
+
+    @each $breakpoint in map-keys($media-breakpoints) {
+      @include breakpoint-up($breakpoint) {
+
+        @each $prop, $abbrev in (margin: m, padding: p) {
+          @each $size, $lengths in $spacers {
+            $length-x: map-get($lengths, x);
+            $length-y: map-get($lengths, y);
+
+            .#{$abbrev}-#{$size}  { #{$prop}: $length-y $length-x !important; }
+            .#{$abbrev}t-#{$size} { #{$prop}-top: $length-y !important; }
+            .#{$abbrev}r-#{$size} { #{$prop}-right: $length-x !important; }
+            .#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; }
+            .#{$abbrev}l-#{$size} { #{$prop}-left: $length-x !important; }
+            .#{$abbrev}x-#{$size} {
+              #{$prop}-right: $length-x !important;
+              #{$prop}-left:  $length-x !important;
+            }
+            .#{$abbrev}y-#{$size} {
+              #{$prop}-top:    $length-y !important;
+              #{$prop}-bottom: $length-y !important;
+            }
+          }
+        }
+
+        // Some special margin utils
+        .m-auto  { margin: auto !important; }
+        .mt-auto { margin-top: auto !important; }
+        .mr-auto { margin-right: auto !important; }
+        .mb-auto { margin-bottom: auto !important; }
+        .ml-auto { margin-left: auto !important; }
+        .mx-auto {
+          margin-right: auto !important;
+          margin-left: auto !important;
+        }
+        .my-auto {
+          margin-top: auto !important;
+          margin-bottom: auto !important;
+        }
+      }
+    }
+  }
+}

data/assets/stylesheets/spuit/includes/_spuit-utils.scss

@@ -0,0 +1,11 @@
+// @include include-spuit-utils
+@mixin include-spuit-utils {
+  @at-root {
+    .c {
+      clear: both;
+    }
+    .clearfix {
+      @include clearfix;
+    }
+  }
+}

data/assets/stylesheets/spuit/includes/_stickey-footer.scss

@@ -0,0 +1,18 @@
+// @include include-stickey-footer
+@mixin include-stickey-footer($footer-height: 100px, $class: '.footer') {
+  @at-root {
+    html {
+      position: relative;
+      min-height: 100%;
+    }
+    body {
+      margin-bottom: $footer-height;
+    }
+    body > #{$class} {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: $footer-height;
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+// @include include-fa
+@mixin include-fa {
+  @at-root {
+    @import url('//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css');
+  }
+}
+
+// @include include-noto
+// font-family: 'Noto Sans Japanese', san-serif;
+@mixin include-noto {
+  @at-root {
+    @import url('//fonts.googleapis.com/earlyaccess/notosansjapanese.css');
+  }
+}
+
+// @include include-roboto
+// font-family: 'Roboto', sans-serif;
+@mixin include-roboto {
+  @at-root {
+    @import url('//fonts.googleapis.com/css?family=Roboto');
+  }
+}
+
+// @include include-opensans
+// font-family: 'Open Sans', sans-serif;
+@mixin include-opensans {
+  @at-root {
+    @import url('//fonts.googleapis.com/css?family=Open+Sans:400,300,700')
+  }
+}

data/assets/stylesheets/spuit/modules/_background-image.scss

@@ -0,0 +1,63 @@
+@mixin background-image($w: 50px, $h: 50px, $path: '/images/xxx', $extension: 'png') {
+  background-image: url('#{$path}.#{$extension}');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  display: inline-block;
+  width: $w;
+  height: $h;
+  @include breakpoint-retina {
+    background-image: url('#{$path}@2x.#{$extension}');
+  }
+}
+
+@mixin replace-background-image($w: 50px, $h: 50px, $path: '/images/xxx', $extension: 'png') {
+  @include hide-text;
+  display: inline-block;
+  width: $w;
+  line-height: $h;
+  height: $h;
+  position: relative;
+  vertical-align: middle;
+
+  &:after {
+    @include background-image($w, $h, $path);
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+//for rails
+@mixin background-image-url($w: 50px, $h: 50px, $path: '/images/xxx', $extension: 'png') {
+  display: inline-block;
+  background-image: image-url('#{$path}.#{$extension}');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: $w;
+  height: $h;
+  @include breakpoint-retina {
+    background-image: image-url('#{$path}@2x.#{$extension}');
+  }
+}
+
+//for rails
+@mixin replace-background-image-url($w: 50px, $h: 50px, $path: '/images/xxx', $extension: 'png') {
+  @include hide-text;
+  display: inline-block;
+  width: $w;
+  line-height: $h;
+  height: $h;
+  position: relative;
+  vertical-align: middle;
+
+  &:after {
+    @include background-image-url($w, $h, $path);
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}

data/assets/stylesheets/spuit/modules/_breakpoints.scss

@@ -0,0 +1,19 @@
+@mixin breakpoint-down($name: md, $breakpoints: $grid-breakpoints) {
+  $map: map-get($breakpoints, $name);
+  @media (max-width: $map) {
+    @content;
+  }
+}
+
+@mixin breakpoint-up($name: md, $breakpoints: $grid-breakpoints) {
+  $map: map-get($breakpoints, $name);
+  @media (min-width: $map + 1px) {
+    @content;
+  }
+}
+
+@mixin breakpoint-retina {
+  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    @content;
+  }
+}

data/assets/stylesheets/spuit/modules/_clearfix.scss

@@ -0,0 +1,7 @@
+@mixin clearfix {
+  &:after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}

data/assets/stylesheets/spuit/modules/_fa.scss

@@ -0,0 +1,28 @@
+@mixin fa($content: '\f105') {
+  display: inline-block;
+  font-family: FontAwesome;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  text-indent: 0;
+  @if ($content) {
+    content: $content;
+  }
+}
+
+@mixin replace-fa($content: '\f105', $size: 1rem, $r: 1rem) {
+  @include hide-text;
+  display: inline-block;
+  width: $r;
+  height: $r;
+  line-height: $r;
+
+  &:after {
+    @include fa($content);
+    font-size: $size;
+    width: $r;
+    height: $r;
+    line-height: $r;
+    text-align: center;
+  }
+}

data/assets/stylesheets/spuit/modules/_font-face.scss

@@ -0,0 +1,31 @@
+/*
+example:
+@include font-face('fontello', 'fontello/fontello');
+@mixin font-fontello($size: 1rem, $line-height: normal, $weight: normal) {
+  font-family: 'fontello';
+  font-size: $size;
+  font-weight: $weight;
+  line-height: $line-height;
+}
+*/
+
+@mixin font-face($name, $path) {
+  @at-root {
+    @font-face {
+      font-family: $name;
+      src: url('#{$path}.eot');
+      src: url('#{$path}.eot?iefix') format('eot'), url('#{$path}.woff') format("woff"), url('#{$path}.ttf') format('truetype'), url('#{$path}.svg#font') format('svg');
+    }
+  }
+}
+
+//for rails
+@mixin font-face-url($name, $path) {
+  @at-root {
+    @font-face {
+      font-family: $name;
+      src: font-url('#{$path}.eot');
+      src: font-url('#{$path}.eot?iefix') format('eot'), font-url('#{$path}.woff') format("woff"), font-url('#{$path}.ttf') format('truetype'), font-url('#{$path}.svg#font') format('svg');
+    }
+  }
+}

data/assets/stylesheets/spuit/modules/_hide-text.scss

@@ -0,0 +1,9 @@
+@mixin hide-text {
+  overflow: hidden;
+  &:before {
+    content: '';
+    display: block;
+    width: 0;
+    height: 100%;
+  }
+}

data/assets/stylesheets/spuit/modules/_inherit.scss

@@ -0,0 +1,6 @@
+@mixin inherit() {
+  color: inherit;
+  font-family: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+}

data/assets/stylesheets/spuit/modules/_reset.scss

@@ -0,0 +1,55 @@
+@mixin reset-form($c: transparent) {
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  background-image: linear-gradient(transparent, transparent);
+  background: transparent;
+  appearance: none;
+  border: none;
+  outline: none;
+  text-decoration: none;
+  &:focus {
+    border: none;
+    outline: none;
+  }
+}
+
+@mixin reset-ul() {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: inline-block;
+  > li {
+    display: inline-block;
+  }
+}
+
+@mixin reset-img() {
+  margin: 0;
+  padding: 0;
+  line-height: 0;
+  vertical-align: baseline;
+  border: none;
+}
+
+@mixin reset-heading() {
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+  border: none;
+}
+
+@mixin reset-button() {
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+  vertical-align: baseline;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  &:focus,
+  &:active {
+    border: none;
+    outline: none;
+  }
+}

data/assets/stylesheets/spuit/modules/_text-overflow.scss

@@ -0,0 +1,15 @@
+@mixin text-overflow($line: 1) {
+  @if $line == 1 {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  } @else {
+    // FIXME: atoprefixerがwebkit-box-orientを消してしまう
+    // work: IE9^, Chrome, Safari
+    // not work: Firefox
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $line;
+    overflow: hidden;
+  }
+}

data/assets/stylesheets/spuit/modules/_word-break.scss

@@ -0,0 +1,11 @@
+@mixin word-break($break: true) {
+  @if $break == true {
+    white-space: normal;
+    word-break: break-all;
+    word-wrap: break-word;
+  } @else {
+    white-space: nowrap;
+    word-break: keep-all;
+    word-wrap: normal;
+  }
+}

data/assets/stylesheets/spuit/shortcuts/_absolute.scss

@@ -0,0 +1,17 @@
+@mixin absolute($l: 0, $t: 0, $positionX: 'left', $positionY: 'top') {
+  position: absolute;
+  @if $positionX == 'left' {
+    left: $l;
+    right: auto;
+  } @else {
+    left: auto;
+    right: $l;
+  }
+  @if $positionY == 'top' {
+    top: $t;
+    bottom: auto;
+  } @else {
+    top: auto;
+    bottom: $t;
+  }
+}

data/assets/stylesheets/spuit/shortcuts/_centering.scss

@@ -0,0 +1,6 @@
+@mixin centering($pos: absolute, $x: 50%, $y: 50%) {
+  transform: translateX(-$x) translateY(-$y);
+  position: $pos;
+  top: $y;
+  left: $x;
+}

data/assets/stylesheets/spuit/shortcuts/_disc.scss

@@ -0,0 +1,6 @@
+@mixin disc($r: 40px) {
+  border-radius: $r;
+  width: $r;
+  height: $r;
+  line-height: $r;
+}

data/assets/stylesheets/spuit/variables/_colors.scss

@@ -0,0 +1,3 @@
+$color-twitter: #1DA1F2;
+$color-hatena: #2D92BA;
+$color-facebook: #3C5999;