spuit 0.0.14.2 → 0.1.0

data/scss/elements/_fieldset.scss

@@ -0,0 +1,63 @@
+@mixin fieldset-base($legend-width: 100px, $gutter: 20px) {
+  @include clearfix;
+  position: relative;
+  padding-left: $legend-width + $gutter;
+  padding-bottom: 0.5rem;
+
+  @include 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;
+
+    @include breakpoint-down(sm) {
+      display: block;
+      float: none;
+      width: auto;
+      margin-left: 0;
+    }
+  }
+
+  &.has-padding {
+    > legend {
+      padding-top: 0.5rem;
+      @include breakpoint-down(sm) {
+        padding-top: 0;
+      }
+    }
+  }
+}
+
+//not <fieldset/>
+@mixin 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/scss/elements/_hr.scss

@@ -0,0 +1,39 @@
+@mixin 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)
+
+@mixin hr-dotted($color:rgba(#000, 1.0), $stripe: 1, $spacing: 4, $height:1) {
+  @include 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
+
+@mixin 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/scss/elements/_input.scss

@@ -0,0 +1,35 @@
+@mixin input-base($w: auto, $p: 10px 10px) {
+  @include 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;
+  }
+}
+
+@mixin input-normal($w: auto, $p: 10px 10px) {
+  @include reset-form;
+  @include 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/scss/elements/_table.scss

@@ -0,0 +1,102 @@
+@mixin 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
+@mixin table-normal($p: 5px 10px, $border-top: 2px solid #eee, $border: 1px solid #eee) {
+  @include 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
+@mixin table-line($border-top: 2px solid #eee, $border: 1px solid #eee) {
+  @include 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
+@mixin table-stripe($color-thead: #fff, $color-even: #eee, $color-odd: #f8f8f8) {
+  @include 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/scss/spuit.scss

@@ -27,6 +27,7 @@
 @import 'includes/stickey-footer';
 @import 'includes/spuit-utils';
 @import 'includes/normalize';
+@import 'includes/icon';
 
 // shortcut mixins
 @import 'shortcuts/absolute';
@@ -34,14 +35,10 @@
 @import 'shortcuts/disc';
 
 // shortcut components, element
-// FIXME: 未整理、不要なものを削除するまでコメントアウト
-@import 'components/icon';
 @import 'components/button';
 @import 'components/switch';
 @import 'elements/table';
 @import 'elements/input';
 @import 'elements/fieldset';
-// @import 'elements/radio';
-// @import 'elements/checkbox';
 @import 'elements/custom-checkbox';
 @import 'elements/select';

data/scss/variables/_timing-functions.scss

@@ -0,0 +1,37 @@
+// from: https://github.com/thoughtbot/bourbon/blob/master/dist/addons/_timing-functions.scss
+// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
+// Timing functions are the same as demo'ed here: http://jqueryui.com/resources/demos/effect/easing.html
+
+// EASE IN
+$ease-in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530);
+$ease-in-cubic:     cubic-bezier(0.550,  0.055, 0.675, 0.190);
+$ease-in-quart:     cubic-bezier(0.895,  0.030, 0.685, 0.220);
+$ease-in-quint:     cubic-bezier(0.755,  0.050, 0.855, 0.060);
+$ease-in-sine:      cubic-bezier(0.470,  0.000, 0.745, 0.715);
+$ease-in-expo:      cubic-bezier(0.950,  0.050, 0.795, 0.035);
+$ease-in-circ:      cubic-bezier(0.600,  0.040, 0.980, 0.335);
+$ease-in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
+// EASE OUT
+$ease-out-quad:     cubic-bezier(0.250,  0.460, 0.450, 0.940);
+$ease-out-cubic:    cubic-bezier(0.215,  0.610, 0.355, 1.000);
+$ease-out-quart:    cubic-bezier(0.165,  0.840, 0.440, 1.000);
+$ease-out-quint:    cubic-bezier(0.230,  1.000, 0.320, 1.000);
+$ease-out-sine:     cubic-bezier(0.390,  0.575, 0.565, 1.000);
+$ease-out-expo:     cubic-bezier(0.190,  1.000, 0.220, 1.000);
+$ease-out-circ:     cubic-bezier(0.075,  0.820, 0.165, 1.000);
+$ease-out-back:     cubic-bezier(0.175,  0.885, 0.320, 1.275);
+
+// EASE IN OUT
+$ease-in-out-quad:  cubic-bezier(0.455,  0.030, 0.515, 0.955);
+$ease-in-out-cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000);
+$ease-in-out-quart: cubic-bezier(0.770,  0.000, 0.175, 1.000);
+$ease-in-out-quint: cubic-bezier(0.860,  0.000, 0.070, 1.000);
+$ease-in-out-sine:  cubic-bezier(0.445,  0.050, 0.550, 0.950);
+$ease-in-out-expo:  cubic-bezier(1.000,  0.000, 0.000, 1.000);
+$ease-in-out-circ:  cubic-bezier(0.785,  0.135, 0.150, 0.860);
+$ease-in-out-back:  cubic-bezier(0.680, -0.550, 0.265, 1.550);
+
+// (similar elastic).
+$ease-out-elastic: cubic-bezier(0.370, 1.650, 0.410, 0.780);
+$ease-in-elastic: cubic-bezier(0.370, 0.650, 0.410, -0.780);

data/spuit.scss

@@ -1,48 +1,3 @@
 @charset 'utf-8';
 
-// valiables
-@import 'scss/variables/defaults';
-@import 'scss/variables/fonts';
-@import 'scss/variables/timing-functions';
-@import 'scss/variables/media-queries';
-@import 'scss/variables/colors';
-@import 'scss/variables/svgs';
-
-// module mixins
-@import 'scss/modules/clearfix';
-@import 'scss/modules/breakpoints';
-@import 'scss/modules/hide-text';
-@import 'scss/modules/fa';
-@import 'scss/modules/font-face';
-@import 'scss/modules/background-image';
-@import 'scss/modules/inherit';
-@import 'scss/modules/word-break';
-@import 'scss/modules/text-overflow';
-@import 'scss/modules/reset';
-
-// create styles
-@import 'scss/includes/animations';
-@import 'scss/includes/hiddens';
-@import 'scss/includes/spacers';
-@import 'scss/includes/webfonts';
-@import 'scss/includes/stickey-footer';
-@import 'scss/includes/spuit-utils';
-@import 'scss/includes/normalize';
-
-// shortcut mixins
-@import 'scss/shortcuts/absolute';
-@import 'scss/shortcuts/centering';
-@import 'scss/shortcuts/disc';
-
-// shortcut components, element
-// FIXME: 未整理、不要なものを削除するまでコメントアウト
-@import 'scss/components/icon';
-@import 'scss/components/button';
-@import 'scss/components/switch';
-@import 'scss/elements/table';
-@import 'scss/elements/input';
-@import 'scss/elements/fieldset';
-// @import 'scss/elements/radio';
-// @import 'scss/elements/checkbox';
-@import 'scss/elements/custom-checkbox';
-@import 'scss/elements/select';
+@import 'scss/spuit';

data/webpack/css.webpack.config.js

@@ -1,9 +1,11 @@
 const path = require('path')
 const webpack = require('webpack')
 const ExtractTextPlugin = require("extract-text-webpack-plugin")
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
+const TerserPlugin = require('terser-webpack-plugin')
 
-let app = './assets';
-let dist = '../dist';
+let app = './assets'
+let dist = '../dist'
 
 module.exports = {
   entry: {
@@ -19,14 +21,41 @@ module.exports = {
         test: /\.css$/,
         loader: ExtractTextPlugin.extract({
           fallback: 'style-loader',
-          use: ['css-loader', 'postcss-loader']
+          use: [
+            {
+              loader: 'css-loader',
+              options: {
+                sourceMap: false,
+                includePaths: [path.resolve(__dirname, 'node_modules')],
+              },
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                sourceMap: false
+              },
+            },
+          ]
         })
       },
       {
         test: /\.scss$/,
         loader: ExtractTextPlugin.extract({
           fallback: 'style-loader',
-          use: ['css-loader?minimize', 'sass-loader']
+          use: [
+            {
+              loader: 'css-loader',
+              options: {
+                sourceMap: false,
+              },
+            },
+            {
+              loader: 'sass-loader',
+              options: {
+                sourceMap: false,
+              },
+            },
+          ]
         })
       },
       {
@@ -38,5 +67,8 @@ module.exports = {
   plugins: [
     require('autoprefixer'),
     new ExtractTextPlugin('stylesheets/[name].css')
-  ]
+  ],
+  optimization: {
+    minimizer: [new TerserPlugin({}), new OptimizeCSSAssetsPlugin({})],
+  },
 }

data/webpack/js.webpack.config.js

@@ -1,10 +1,10 @@
 const path = require('path')
 const webpack = require('webpack')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-// const HtmlWebpackPlugin = require('html-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 
-let app = './assets';
-let dist = '../dist';
+let app = './assets'
+let dist = '../dist'
 
 module.exports = {
   entry: {
@@ -19,11 +19,16 @@ module.exports = {
     port: 8080
   },
   plugins: [
-    new UglifyJsPlugin()
-    // new HtmlWebpackPlugin({
-    //   template: path.join(__dirname, '../app/html/index.ejs'),
-    //   minify: false
-    // })
+    new UglifyJsPlugin(),
+    new HtmlWebpackPlugin({
+      template: app+'/html/index.ejs',
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+      },
+      chunksSortMode: 'dependency'
+    })
   ],
   cache: true
 };