spuit 0.1.2 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7d5d0ae0eb74464233d67d5e50880957780f3c5152ca1ea22169d9584b657e6a
-  data.tar.gz: 4875ecdea8fa1c5397ecea9af959e0d5c2c26fdf01d2384ba934c223e59c2549
+  metadata.gz: 40622a9217f5eb011f58aa8a744256ab833745569421c8785874e3b738035078
+  data.tar.gz: ff82cbf43f6be4a519e06889416952b5255d9af6f13b089de1ed4881a51c8a5f
 SHA512:
-  metadata.gz: 0c276fb77296b3e8b03accca9acab129185c15cad883528043fcd7d2e51523243c4839788ef59f2ec10e522bcd85c88c450ef3a694f1918352c048e6b7fb05fa
-  data.tar.gz: 477eb76eb340839eb03136a776f671ccb31547c34e4f559f6e8cab8ee99c4306d22c069b30e0813354649b3dde692d703cfc2365cc385d109e8dedda920358ff
+  metadata.gz: 2e846a2e5c9ac0649e7e4656ea438ea31ba14acae58473718709055291f81c34994f9310dc06352b3bb813851d80f35f69bc2da9795e8318fb2a6fce91f10ceb
+  data.tar.gz: 394eaa555f711887e083ece3f9bb064fa0f058a8344bb16bb90ed8e0413ee921e867a8088713cccacb1e85fe3e68ecdc1c1d480058c0663ff89b66010fc83ad7

data/.npmignore

@@ -1,9 +1,8 @@
 .sass-cache
 .DS_Store
-assets
 bin
 design
-dist
+site
 lib
 node_modules
 pkg

data/Makefile

@@ -0,0 +1,12 @@
+# hotwo:
+# $ make up
+
+up:
+	cd site;\
+	open http://localhost:1313 \
+	&& hugo server -D --watch
+
+dev:
+	cd site/themes/spuit;\
+	yarn install \
+	&& yarn run dev

data/README.md

@@ -17,7 +17,8 @@ import:
 ``` styles.scss
 @import "node_modules/spuit/spuit";
 ```
-ore
+
+or
 
 ``` styles.scss
 @import "~spuit";

data/lib/spuit/version.rb

@@ -1,3 +1,3 @@
 module Spuit
-  VERSION = "0.1.2"
+  VERSION = "0.2.1"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spuit",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "description": "JS + Sass Mixin Library",
   "main": "spuit.scss",
   "repository": {
@@ -9,39 +9,16 @@
   },
   "keywords": [],
   "author": "Yu Ishihara",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/is8r/spuit/issues"
   },
   "homepage": "https://github.com/is8r/spuit#readme",
   "devDependencies": {
-    "autoprefixer": "^9.6.0",
-    "bootstrap": "^4.3.1",
-    "css-loader": "^3.0.0",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^3.2.0",
-    "jquery": "^3.4.1",
-    "node-sass": "^4.12.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "popper.js": "^1.15.0",
-    "postcss-loader": "^3.0.0",
-    "sass-loader": "^7.1.0",
-    "spuit": "0.0.13",
-    "style-loader": "^0.23.1",
-    "terser-webpack-plugin": "^1.3.0",
-    "uglifyjs-webpack-plugin": "^2.1.3",
-    "webpack": "^4.34.0",
-    "webpack-cli": "^3.3.4",
-    "webpack-dev-server": "^3.7.1",
-    "webpack-manifest-plugin": "^2.0.4"
   },
   "dependencies": {
     "npm": "^6.9.0"
   },
   "scripts": {
-    "dev": "open http://localhost:8080/ && webpack-dev-server --progress --mode development --config webpack/webpack.config.js",
-    "watch": "webpack --watch --progress --mode development --config webpack/webpack.config.js",
-    "build": "webpack --progress --mode production --config webpack/webpack.config.js"
   }
 }

data/scss/components/_button.scss

@@ -1,31 +1,28 @@
 @mixin button-base($c: transparent) {
-  box-sizing: border-box;
-  box-shadow: none;
+  cursor: pointer;
   appearance: none;
+  box-sizing: border-box;
   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;
+  background-color: transparent;
+  background-image: none;
+  border: 0;
+  outline: 0;
   margin: 0;
   padding: 0;
-  border: none;
-  outline: none;
+  color: initial;
+  text-align: center;
+  
   &:link,
   &:visited,
   &:hover,
-  &:active,
+  &:focus,
   &:active {
     text-decoration: none;
   }
-  &:focus {
-    outline: none;
+  &:active {
+    outline: 3px solid rgba(#529ef6, 0.2);
   }
-  &:disabled,
-  &.is-disabled {
+  &:disabled {
     @include button-disabled;
     opacity: 0.2;
   }
@@ -39,11 +36,15 @@
 @mixin button-loading {
   @include button-disabled;
   @include icon-loading;
-  opacity: 0.6;
+  opacity: 0.2;
+  
+  &::before {
+    margin-right: 0.6rem;
+  }
 }
 
-// @include button-normal(10px 10px, #529ef6, #fff, 2px);
-@mixin button-normal($p: 10px 10px, $c: #529ef6, $c-text: #fff, $r: 2px) {
+// @include button-normal(0.6rem 1rem, #529ef6, #fff, 2px);
+@mixin button-normal($p: 0.6rem 1rem, $c: #529ef6, $c-text: #fff, $r: 2px) {
   @include button-base;
   border-radius: $r;
   border: 1px solid $c;
@@ -59,14 +60,14 @@
   &:hover,
   &:active,
   &.is-current {
-    background-color: darken($c, 10%);
     color: $c-text;
-    border-color: $c;
+    background-color: darken($c, 10%);
+    border-color: darken($c, 10%);
   }
 }
 
-// @include button-semiflat(10px 10px, #529ef6, 10%, #fff, 2px);
-@mixin button-semiflat($p: 10px 10px, $c: #529ef6, $strangth: 5%, $c-text: #fff, $r: 4px) {
+// @include button-semiflat(0.6rem 1rem, #529ef6, 10%, #fff, 2px);
+@mixin button-semiflat($p: 0.6rem 1rem, $c: #529ef6, $strangth: 10%, $c-text: #fff, $r: 2px) {
   @include button-base;
   border-radius: $r;
   background-color: $c;
@@ -89,8 +90,8 @@
   }
 }
 
-// @include button-border(10px 10px, #529ef6, #fff);
-@mixin button-border($p: 10px 10px, $c: #529ef6, $c-text: #fff, $border: 1px, $r: 2px) {
+// @include button-outline(0.6rem 1rem, #529ef6, #fff);
+@mixin button-outline($p: 0.6rem 1rem, $c: #529ef6, $c-text: #fff, $border: 1px, $r: 2px) {
   @include button-base;
   border-radius: $r;
   background-color: transparent;
@@ -113,8 +114,8 @@
   }
 }
 
-// +button-emboss(10px 10px, #529ef6, #fff, 6px, 4px);
-@mixin button-emboss($p: 10px 10px, $c: #529ef6, $c-text: #fff, $thickness: 6px, $r: 4px) {
+// +button-emboss(0.6rem 1rem, #529ef6, #fff, 6px, 4px);
+@mixin button-emboss($p: 0.6rem 1rem, $c: #529ef6, $c-text: #fff, $thickness: 6px, $r: 4px) {
   @include button-base;
   transition: all 0.05s ease-out;
   transform: translateY(-$thickness);

data/scss/components/_group.scss

@@ -0,0 +1,50 @@
+@mixin group-stretch {
+  @include reset-ul;
+  display: flex;
+  justify-content: space-between;
+
+  > * {
+    flex-grow: 1;
+
+    + * {
+      margin-left: 0.5rem;
+    }
+  }
+}
+
+@mixin group-center {
+  @include reset-ul;
+  display: flex;
+  justify-content: center;
+
+  > * {
+    + * {
+      margin-left: 0.5rem;
+    }
+  }
+}
+
+@mixin group-vertical {
+  @include reset-ul;
+  display: flex;
+  flex-wrap: wrap;
+
+  > * {
+    flex-basis: 100%;
+    flex-grow: 1;
+
+    + * {
+      margin-top: 0.5rem;
+    }
+  }
+}
+
+@mixin group-lined {
+  @include reset-ul;
+  display: block;
+  margin: -0.5rem -0.25rem 0;
+
+  > * {
+    margin: 0.5rem 0.25rem 0;
+  }
+}

data/scss/components/_switch.scss

@@ -1,40 +1,56 @@
-@mixin switch-base($w: 60px, $h: 30px, $c: green, $margin: 3px) {
-  input[type=checkbox]{
-  	display: none;
+@mixin switch-normal($w: 60px, $h: 30px, $c: #529ef6, $margin: 5px) {
+  $c-disabled: #777;
+
+  input[type="checkbox"] {
+    display: none;
   }
 
   label {
     cursor: pointer;
-  	text-indent: -9999px;
-  	width: $w;
-  	height: $h;
-  	background: grey;
-  	display: block;
-  	border-radius: $h;
-  	position: relative;
+    text-indent: -9999px;
+    width: $w;
+    height: $h;
+    background: $c-disabled;
+    display: block;
+    border-radius: $h;
+    position: relative;
 
     &:after {
-    	content: '';
-    	position: absolute;
-    	top: $margin;
-    	left: $margin;
-    	width: $h - ($margin*2);
-    	height: $h - ($margin*2);
-    	background: #fff;
-    	border-radius: $h - ($margin*2);
-    	transition: 0.3s;
+      content: "";
+      position: absolute;
+      top: $margin;
+      left: $margin;
+      width: $h - ($margin * 2);
+      height: $h - ($margin * 2);
+      background: #fff;
+      border-radius: $h - ($margin * 2);
+      transition: 0.3s;
+    }
+
+    &:hover {
+      background: darken($c-disabled, 5%);
+    }
+
+    &:active {
+      border-radius: $h - ($margin * 2);
+      outline: $outline-active;
     }
   }
 
-  input:checked + label {
-  	background: $c;
+  input[type="checkbox"]:checked + label {
+    background: $c;
+
     &:after {
-    	left: calc(100% - #{$margin});
-    	transform: translateX(-100%);
+      left: calc(100% - #{$margin});
+      transform: translateX(-100%);
+    }
+
+    &:hover {
+      background: darken($c, 5%);
     }
   }
 
   label:active:after {
-  	width: $h;
+    width: $h;
   }
 }

data/scss/components/_triangle.scss

@@ -1,7 +1,7 @@
 // Example:
-// @include triangle(#2dd, 15px, 10px, 50%, 0, "down", "after");
+// @include triangle(#2dd, 15px, 10px, 50%, 0, "bottom", "after");
 
-@mixin triangle($c: #2dd, $w: 15px, $h: 10px, $l: 50%, $t: 0, $direction: "down", $element: "after") {
+@mixin triangle($c: #2dd, $w: 15px, $h: 10px, $l: 50%, $t: 0, $direction: "bottom", $element: "after") {
   position: relative;
 
   &:#{$element} {
@@ -13,7 +13,7 @@
     width: 0;
   }
 
-  @if $direction == "up" {
+  @if $direction == "top" {
     &:#{$element} {
       border-color: transparent transparent $c;
       border-width: 0 ($w / 2) $h;
@@ -27,7 +27,7 @@
       right: $l - $w;
       top: calc(#{$t} - #{$h/2});
     }
-  } @else if $direction == "down" {
+  } @else if $direction == "bottom" {
     &:#{$element} {
       border-color: $c transparent transparent;
       border-width: $h ($w / 2) 0;

data/scss/elements/{_custom-checkbox.scss → _custom-radio.scss}

@@ -1,33 +1,33 @@
-@mixin selectable-default {
-  display: inline-block;
-  margin: 0;
-
-  input[type=radio] {
+@mixin custom-radio-base {
+  input[type="radio"],
+  input[type="checkbox"] {
     display: inline-block;
     margin: 0;
+    vertical-align: baseline;
   }
 
   label {
     cursor: pointer;
     margin: 0;
+    vertical-align: baseline;
   }
 }
 
-@mixin selectable-content($icon, $r) {
+@mixin replace-custom-radio($icon, $r) {
   display: flex;
   align-items: center;
   align-content: center;
   justify-content: flex-start;
   margin: 0;
-  padding: 0 1rem 0 0;
+  padding: 0;
   line-height: 1;
   cursor: pointer;
 
   &::before {
-    content: '';
+    content: "";
     display: inline-block;
     position: relative;
-    background-image: url('data:image/svg+xml;base64,#{$icon}');
+    background-image: url("data:image/svg+xml;base64,#{$icon}");
     background-repeat: no-repeat;
     background-position: center center;
     flex: 0 0 $r;
@@ -37,25 +37,30 @@
     line-height: 1;
     background-color: #fff;
     border: 1px solid #ddd;
-    margin: 0 .4rem 0 0;
+    margin: 0 0.4rem 0 0;
     padding: 0;
   }
 }
 
-@mixin checkbox-base($tag: label, $r: 18px, $color-key: #529ef6) {
-  @include selectable-default;
-  $icon: 'DQo8c3ZnIHdpZHRoPSIxMXB4IiBoZWlnaHQ9IjExcHgiIHZpZXdCb3g9Ijg2IDIyNiAxMSAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQyICgzNjc4MSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+DQogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+DQogICAgPGRlZnM+PC9kZWZzPg0KICAgIDxwYXRoIGQ9Ik04OS4yOTI4OTMyLDIzMi43MDcxMDcgTDk1LjI5Mjg5MzIsMjMyLjcwNzEwNyBMOTUuMjkyODkzMiwyMzQuNzA3MTA3IEw4Ny4yOTI4OTMyLDIzNC43MDcxMDcgTDg3LjI5Mjg5MzIsMjMzLjcwNzEwNyBMODcuMjkyODkzMiwyMjguNzA3MTA3IEw4OS4yOTI4OTMyLDIyOC43MDcxMDcgTDg5LjI5Mjg5MzIsMjMyLjcwNzEwNyBaIiBpZD0iY2hlY2siIHN0cm9rZT0ibm9uZSIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5MS4yOTI4OTMsIDIzMS43MDcxMDcpIHJvdGF0ZSgtNDUuMDAwMDAwKSB0cmFuc2xhdGUoLTkxLjI5Mjg5MywgLTIzMS43MDcxMDcpICI+PC9wYXRoPg0KPC9zdmc+';
-  
+@mixin custom-checkbox-normal($tag: label, $r: 18px, $color-key: #529ef6) {
+  @include custom-radio-base;
+  $icon: "DQo8c3ZnIHdpZHRoPSIxMXB4IiBoZWlnaHQ9IjExcHgiIHZpZXdCb3g9Ijg2IDIyNiAxMSAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQyICgzNjc4MSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+DQogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+DQogICAgPGRlZnM+PC9kZWZzPg0KICAgIDxwYXRoIGQ9Ik04OS4yOTI4OTMyLDIzMi43MDcxMDcgTDk1LjI5Mjg5MzIsMjMyLjcwNzEwNyBMOTUuMjkyODkzMiwyMzQuNzA3MTA3IEw4Ny4yOTI4OTMyLDIzNC43MDcxMDcgTDg3LjI5Mjg5MzIsMjMzLjcwNzEwNyBMODcuMjkyODkzMiwyMjguNzA3MTA3IEw4OS4yOTI4OTMyLDIyOC43MDcxMDcgTDg5LjI5Mjg5MzIsMjMyLjcwNzEwNyBaIiBpZD0iY2hlY2siIHN0cm9rZT0ibm9uZSIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5MS4yOTI4OTMsIDIzMS43MDcxMDcpIHJvdGF0ZSgtNDUuMDAwMDAwKSB0cmFuc2xhdGUoLTkxLjI5Mjg5MywgLTIzMS43MDcxMDcpICI+PC9wYXRoPg0KPC9zdmc+";
+
   #{$tag} {
-    @include selectable-content($icon, $r);
+    @include replace-custom-radio($icon, $r);
+
     &::before {
       background-size: 16px 14px;
       background-position: center 0;
-      border-radius: .2rem;
+      border-radius: 0.2rem;
+    }
+
+    &:active {
+      outline: $outline-active;
     }
   }
 
-  input[type=checkbox] {
+  input[type="checkbox"] {
     display: none;
 
     &:checked + #{$tag} {
@@ -67,20 +72,24 @@
   }
 }
 
-@mixin radio-base($tag: label, $r: 18px, $color-key: #529ef6) {
-  @include selectable-default;
-  $icon: 'DQo8c3ZnIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4IiB2aWV3Qm94PSIxMTEgMjMwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQyICgzNjc4MSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+DQogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+DQogICAgPGRlZnM+PC9kZWZzPg0KICAgIDxyZWN0IGlkPSJjaXJjbGUiIHN0cm9rZT0ibm9uZSIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiB4PSIxMTEiIHk9IjIzMCIgd2lkdGg9IjYiIGhlaWdodD0iNiIgcng9IjMiPjwvcmVjdD4NCjwvc3ZnPg==';
+@mixin custom-radio-normal($tag: label, $r: 18px, $color-key: #529ef6) {
+  @include custom-radio-base;
+  $icon: "DQo8c3ZnIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4IiB2aWV3Qm94PSIxMTEgMjMwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQyICgzNjc4MSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+DQogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+DQogICAgPGRlZnM+PC9kZWZzPg0KICAgIDxyZWN0IGlkPSJjaXJjbGUiIHN0cm9rZT0ibm9uZSIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiB4PSIxMTEiIHk9IjIzMCIgd2lkdGg9IjYiIGhlaWdodD0iNiIgcng9IjMiPjwvcmVjdD4NCjwvc3ZnPg==";
 
   #{$tag} {
-    @include selectable-content($icon, $r);
+    @include replace-custom-radio($icon, $r);
 
     &::before {
       background-size: 8px 8px;
       border-radius: $r;
     }
+
+    &:active {
+      outline: $outline-active;
+    }
   }
 
-  input[type=radio] {
+  input[type="radio"] {
     display: none;
 
     &:checked + #{$tag} {