spuit 0.1.2 → 0.2.1

data/scss/elements/_fieldset.scss

@@ -1,63 +1,35 @@
-@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;
+@mixin fieldset-horizontal {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
 
-    @include breakpoint-down(sm) {
-      display: block;
-      float: none;
-      width: auto;
-      margin-left: 0;
+  > * {
+    &:first-child {
+      flex: 0 0 30%;
+    }
+    &:not(:first-child) {
+      flex: 1 1 auto;
     }
   }
 
-  &.has-padding {
-    > legend {
-      padding-top: 0.5rem;
-      @include breakpoint-down(sm) {
-        padding-top: 0;
+  &.has-input {
+    > * {
+      &:first-child {
+        margin-top: 0.6rem;
       }
     }
   }
 }
 
-//not <fieldset/>
-@mixin fieldset-flex($legend-width: 30%, $gutter: 20px) {
+@mixin fieldset-vertical {
   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;
-  }
+  flex-wrap: wrap;
 
-  label, legend {
-    margin-bottom: 0;
-  }
+  > * {
+    flex-basis: 100%;
 
-  > legend {
-    width: $legend-width;
-    padding-right: $gutter;
-  }
-
-  > *:not(legend) {
-    flex: 1;
+    &:first-child {
+      margin-bottom: 0.5rem;
+    }
   }
 }

data/scss/elements/_input.scss

@@ -1,35 +1,50 @@
-@mixin input-base($w: auto, $p: 10px 10px) {
+@mixin input-base($w: auto, $p: 0.4rem 0.5rem) {
   @include reset-form;
+  
   font-size: inherit;
   display: inline-block;
   width: $w;
   padding: $p;
   box-sizing: border-box;
   line-height: 1;
+
   &::placeholder {
     font-size: inherit;
   }
+}
+
+@mixin input-normal($w: auto, $p: 0.4rem 0.5rem, $r: 2px, $c: rgba(#529ef6, 0.5)) {
+  @include input-base($w, $p);
+
+  border-radius: $r;
+  border: 1px solid #ddd;
+
+  &::placeholder {
+    color: #ddd;
+  }
+
+  &:hover {
+    border-color: $c;
+  }
+
   &:focus {
-    outline: 0;
+    border: 1px solid $c;
+    outline: 5px solid rgba($c, 0.2);
   }
 }
 
-@mixin input-normal($w: auto, $p: 10px 10px) {
-  @include reset-form;
+@mixin file-normal($w: auto, $p: 0.4rem 0.5rem, $r: 2px, $c: rgba(#529ef6, 0.5)) {
   @include input-base($w, $p);
 
-  $color-border: #ddd;
-  $color-border-key: rgba(#529ef6, 0.5);
-  $color-bg-select: #fffff2;
-
-  border: 1px solid $color-border;
+  border-radius: $r;
+  border: 1px solid #ddd;
 
   &::placeholder {
     color: #ddd;
   }
 
   &:focus {
-    border: 1px solid $color-border-key;
-    background: $color-bg-select;
+    border: 1px solid $c;
+    outline: 3px solid rgba($c, 0.2);
   }
 }

data/scss/elements/_radio.scss

@@ -0,0 +1,39 @@
+@mixin radio-normal {
+  display: flex;
+  align-items: center;
+
+  > input[type="radio"],
+  > input[type="checkbox"] {
+    cursor: pointer;
+    display: inline-block;
+    margin: 0;
+    transform: translateY(-0.05rem);
+    
+    &:active {
+      + label {
+        outline: $outline-active;
+      }
+    }
+  }
+
+  > label {
+    cursor: pointer;
+    margin: 0 0 0 0.2rem;
+
+    > input[type="radio"],
+    > input[type="checkbox"] {
+      cursor: pointer;
+      display: inline-block;
+      margin: 0 0.2rem 0 -0.2rem;
+      transform: translateY(-0.05rem);
+    }
+    
+    &:active {
+      outline: $outline-active;
+    }
+  }
+}
+
+@mixin checkbox-normal {
+  @include radio-nomal;
+}

data/scss/elements/_select.scss

@@ -1,5 +1,5 @@
-@mixin select-base($w: 200px, $h: 40px) {
-  $icon-select: 'DQo8c3ZnIHdpZHRoPSI2cHgiIGhlaWdodD0iMTBweCIgdmlld0JveD0iMTQ3IDIyNSA2IDEwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDIgKDM2NzgxKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4NCiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4NCiAgICA8ZGVmcz48L2RlZnM+DQogICAgPHBhdGggZD0iTTE1MCwyMjUgTDE1MywyMjkgTDE0NywyMjkgTDE1MCwyMjUgWiBNMTUwLDIzNSBMMTQ3LDIzMSBMMTUzLDIzMSBMMTUwLDIzNSBaIiBpZD0iQ29tYmluZWQtU2hhcGUiIHN0cm9rZT0ibm9uZSIgZmlsbD0iIzAwMDAwMCIgZmlsbC1ydWxlPSJldmVub2RkIj48L3BhdGg+DQo8L3N2Zz4=';
+@mixin select-normal($w: 200px, $h: 40px) {
+  $icon-select: "DQo8c3ZnIHdpZHRoPSI2cHgiIGhlaWdodD0iMTBweCIgdmlld0JveD0iMTQ3IDIyNSA2IDEwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDIgKDM2NzgxKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4NCiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4NCiAgICA8ZGVmcz48L2RlZnM+DQogICAgPHBhdGggZD0iTTE1MCwyMjUgTDE1MywyMjkgTDE0NywyMjkgTDE1MCwyMjUgWiBNMTUwLDIzNSBMMTQ3LDIzMSBMMTUzLDIzMSBMMTUwLDIzNSBaIiBpZD0iQ29tYmluZWQtU2hhcGUiIHN0cm9rZT0ibm9uZSIgZmlsbD0iIzAwMDAwMCIgZmlsbC1ydWxlPSJldmVub2RkIj48L3BhdGg+DQo8L3N2Zz4=";
 
   padding: 0;
   margin: 0;
@@ -8,11 +8,15 @@
   border-radius: 3px;
   overflow: hidden;
   background-color: #fff;
-  background-image: url('data:image/svg+xml;base64,#{$icon-select}');
+  background-image: url("data:image/svg+xml;base64,#{$icon-select}");
   background-repeat: no-repeat;
   background-position: right 12px top 15px;
   background-size: 6px 10px;
 
+  &:focus {
+    outline: $outline-active;
+  }
+  
   select {
     padding: 5px 12px;
     width: 130%;

data/scss/elements/_table.scss

@@ -1,4 +1,4 @@
-@mixin table-base($p: 5px 10px) {
+@mixin table-base($p: 0.5rem 1rem) {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 0;
@@ -13,9 +13,7 @@
   }
 }
 
-//  .table--normal
-//    +table-normal
-@mixin table-normal($p: 5px 10px, $border-top: 2px solid #eee, $border: 1px solid #eee) {
+@mixin table-normal($p: 0.5rem 1rem, $border-top: 2px solid #eee, $border: 1px solid #eee) {
   @include table-base($p);
   border-top: $border;
 
@@ -23,7 +21,6 @@
     tr {
       th,
       td {
-        font-size: 0.8rem;
         border: $border;
         border-bottom: $border-top;
       }
@@ -51,9 +48,7 @@
   }
 }
 
-//  .table--line
-//    +table-line
-@mixin table-line($border-top: 2px solid #eee, $border: 1px solid #eee) {
+@mixin table-line($p: 0.5rem 1rem, $border-top: 2px solid #eee, $border: 1px solid #eee) {
   @include table-base;
 
   thead {
@@ -80,9 +75,7 @@
   }
 }
 
-//  .table--stripe
-//    +table-stripe
-@mixin table-stripe($color-thead: #fff, $color-even: #eee, $color-odd: #f8f8f8) {
+@mixin table-stripe($p: 0.5rem 1rem, $color-thead: #fff, $color-even: #fff, $color-odd: #f8f8f8) {
   @include table-base;
 
   thead {

data/scss/includes/_spacers.scss

@@ -35,7 +35,7 @@ from: https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_spacing.scss
       )
     ) !default;
 
-    @each $breakpoint in map-keys($media-breakpoints) {
+    @each $breakpoint in map-keys($grid-breakpoints) {
       @include breakpoint-up($breakpoint) {
 
         @each $prop, $abbrev in (margin: m, padding: p) {

data/scss/modules/_reset.scss

@@ -1,3 +1,35 @@
+@mixin reset-button($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 {
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
 @mixin reset-form() {
   margin: 0;
   padding: 0;

data/scss/spuit.scss

@@ -6,6 +6,7 @@
 @import 'variables/media-queries';
 @import 'variables/colors';
 @import 'variables/svgs';
+@import 'variables/defaults';
 
 // module mixins
 @import 'modules/clearfix';
@@ -37,8 +38,11 @@
 // shortcut components, element
 @import 'components/button';
 @import 'components/switch';
+@import 'components/group';
+
 @import 'elements/table';
 @import 'elements/input';
 @import 'elements/fieldset';
-@import 'elements/custom-checkbox';
+@import 'elements/radio';
+@import 'elements/custom-radio';
 @import 'elements/select';

data/scss/variables/_defaults.scss

@@ -1,3 +1,4 @@
 $gradient: linear-gradient(to right bottom, #000 0%, lighten(#000, 10%) 100%) !default;
 $shadow: 0px 5px 10px rgba(0, 0, 0, 0.1) !default;
 $transition: all 0.2s ease-out !default;
+$outline-active: 3px solid rgba(#529ef6, 0.2) !default;

data/scss/variables/_fonts.scss

@@ -1,6 +1,51 @@
+// family
 $font-sans: -apple-system,BlinkMacSystemFont,Helvetica Neue,Hiragino Kaku Gothic Pro,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,Osaka,sans-serif !default;
 $font-serif: 'ヒラギノ明朝 Pro W6', 'Hiragino Mincho Pro', 'HGS明朝E', 'ＭＳ Ｐ明朝', serif !default;
 
 $font-yu: YuGothic, '游ゴシック',$font-sans !default;
 $font-yumin: YuMincho, '游明朝',$font-serif !default;
 $font-code: Consolas, 'Courier New', Courier, monospace !default;
+
+// hms
+// from: https://standard.shiftbrain.com/blog/harmonic-modular-scale-tools
+$font-size-7: calc(1rem * 8);//128
+$font-size-6: calc(1rem * 8 / 2);//64
+$font-size-5: calc(1rem * 8 / 3);//42.666
+$font-size-4: calc(1rem * 8 / 4);//32px
+$font-size-3: calc(1rem * 8 / 5);//25.6px
+$font-size-2: calc(1rem * 8 / 6);//21.333px
+$font-size-1: calc(1rem * 8 / 7);//18.286px
+$font-size-0: 1rem;//16px
+$font-size-m1: calc(1rem * 8 / 9);//14.222px
+$font-size-m2: calc(1rem * 8 / 10);//12.8px
+$font-size-m3: calc(1rem * 8 / 11);//11.636px
+$font-size-m4: calc(1rem * 8 / 12);//10.667px
+
+$line-height-3: calc(1em * 70 / 32);//28px
+$line-height-2: calc(1em * 60 / 32);//24px
+$line-height-1: calc(1em * 50 / 32);//20px
+$line-height-0: calc(1em * 40 / 32);//16px
+$line-height-m1: calc(1em * 30 / 32);//12px
+
+$font-sizes: (
+  0: $font-size-0,
+  1: $font-size-1,
+  2: $font-size-2,
+  3: $font-size-3,
+  4: $font-size-4,
+  5: $font-size-5,
+  6: $font-size-6,
+  7: $font-size-7,
+  -1: $font-size-m1,
+  -2: $font-size-m2,
+  -3: $font-size-m3,
+  -4: $font-size-m4
+);
+
+$line-heights: (
+  0: $line-height-0,
+  1: $line-height-1,
+  2: $line-height-2,
+  3: $line-height-3,
+  -1: $line-height-m1
+);

data/scss/variables/_media-queries.scss

@@ -1,4 +1,4 @@
-$grid-breakpoints: (
+$grid-breakpoints-em: (
   xs: 0,
   sm: 34em,
   md: 48em,
@@ -6,7 +6,7 @@ $grid-breakpoints: (
   xl: 75em
 ) !default;
 
-$grid-breakpoints-px: (
+$grid-breakpoints: (
   xs: 0,
   sm: 576px,
   md: 768px,

data/site/.gitignore

@@ -0,0 +1,117 @@
+
+# Created by https://www.gitignore.io/api/hugo,node,windows,osx
+
+### Hugo ###
+hugo.exe
+/public/
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+
+### OSX ###
+*.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+ehthumbs.db
+ehthumbs_vista.db
+
+# Folder config file
+Desktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+
+# End of https://www.gitignore.io/api/hugo,node,windows,osx