@iris.interactive/handcook 2.9.20 → 2.9.21

package/README.md

@@ -1,5 +1,5 @@
 # Welcome to HandCook 👨‍🍳
-![Version](https://img.shields.io/badge/version-2.9.20-blue.svg?cacheSeconds=2592000)
+![Version](https://img.shields.io/badge/version-2.9.21-blue.svg?cacheSeconds=2592000)
 ![Prerequisite](https://img.shields.io/badge/node-%3E%3D%2012.14.0-blue.svg)
 [![License: UNLICENSED](https://img.shields.io/badge/License-UNLICENSED-yellow.svg)](#)
 [![Twitter: captain\_iris](https://img.shields.io/twitter/follow/captain\_iris.svg?style=social)](https://twitter.com/captain\_iris)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iris.interactive/handcook",
-  "version": "2.9.20",
+  "version": "2.9.21",
   "description": "The web cooking by IRIS Interactive",
   "main": "./public/scripts/index.js",
   "scripts": {

package/public/styles/scss/mixins/_mixin-style.scss

@@ -131,3 +131,67 @@
     clip: rect(0, 0, 0, 0);
     border: 0;
 }
+
+/* Button
+/* ============================================= */
+@mixin button {
+    text-decoration: none;
+    box-shadow: none;
+    display: inline-flex;
+    align-items: center;
+    line-height: 1.4;
+    cursor: pointer;
+    border: none;
+    font-weight: $button-font-weight;
+    font-family: $button-font-family;
+    text-transform: $button-text-transform;
+    letter-spacing: $button-letter-spacing;
+    padding: $button-padding-y $button-padding-x;
+    border-radius: $button-border-radius;
+    font-size: $button-font-size--rem;
+    color: $button-color;
+    background-color: $button-background-color;
+    background-image: $button-background-image;
+    background-size: $button-gradient-background-image-size;
+    border: $button-border;
+    word-break: normal;
+    @include transition;
+
+    @include breakpoint(small) {
+        padding: $button-padding-y-small $button-padding-x-small;
+        font-size: $button-font-size-small--rem;
+    }
+
+    &:before,
+    &.fi:before,
+    .fi:before {
+        color: $button-color;
+        @include transition;
+    }
+
+    &:visited,
+    &:focus,
+    &:focus-within {
+        color: $button-color;
+        background-color: $button-background-color;
+        background-image: $button-background-image;
+        background-size: $button-gradient-background-image-size;
+        border: $button-border;
+    }
+
+    &--small {
+        padding: $button-padding-y-small $button-padding-x-small;
+        font-size: $button-font-size-small--rem;
+    }
+
+    @include hover {
+        color: $button-color-hover;
+        background-color: $button-background-color-hover;
+        border: $button-border-hover;
+        background-position: bottom right, top right;
+
+        &:before {
+            color: $button-color-hover;
+        }
+    }
+}