@iris.interactive/handcook 2.10.33 → 2.10.34

package/README.md

@@ -1,5 +1,5 @@
 # Welcome to HandCook 👨‍🍳
-![Version](https://img.shields.io/badge/version-2.10.33-blue.svg?cacheSeconds=2592000)
+![Version](https://img.shields.io/badge/version-2.10.34-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.10.33",
+  "version": "2.10.34",
   "description": "The web cooking by IRIS Interactive",
   "main": "./public/scripts/index.js",
   "scripts": {

package/public/styles/scss/_variables.scss

@@ -339,6 +339,33 @@ $button-border-hover: var(--iris--button--border-hover, none);
 $button-background-color--force: var(--iris--button--border-color, $button-background-color);
 $button-background-color-hover--force: var(--iris--button--border-color-hover, $button-background-color-hover);
 
+// Secondary Button
+$secondary-button-font-weight: var(--iris--secondary-button--font-weight, 400);
+$secondary-button-font-family: var(--iris--secondary-button--font-family);
+$secondary-button-text-transform: var(--iris--secondary-button--text-transform);
+$secondary-button-letter-spacing: var(--iris--secondary-button--letter-spacing);
+$secondary-button-padding-x: var(--iris--secondary-button--padding-x);
+$secondary-button-padding-y: var(--iris--secondary-button--padding-y);
+$secondary-button-padding-x-small: var(--iris--secondary-button--padding-x--small, var(--iris--secondary-button--padding-x));
+$secondary-button-padding-y-small: var(--iris--secondary-button--padding-y--small, var(--iris--secondary-button--padding-y));
+$secondary-button-font-size: var(--iris--secondary-button--font-size);
+$secondary-button-font-size--rem: var(--iris--secondary-button--font-size--rem);
+$secondary-button-font-size-small: var(--iris--secondary-button--font-size--small, var(--iris--secondary-button--font-size));
+$secondary-button-font-size-small--rem: var(--iris--secondary-button--font-size--small--rem, var(--iris--secondary-button--font-size--rem));
+$secondary-button-border-radius: var(--iris--secondary-button--border-radius);
+$secondary-button-color: var(--iris--secondary-button--color);
+$secondary-button-background-color: var(--iris--secondary-button--background-color);
+$secondary-button-color-hover: var(--iris--secondary-button--color-hover);
+$secondary-button-background-color-hover: var(--iris--secondary-button--background-color-hover, none);
+$secondary-button-background-image: var(--iris--secondary-button--background-image, none);
+$secondary-button-gradient-background-image-size: var(--iris--secondary-button--background-size, var(--iris--global--gradient-background-size, (200% 100%)));
+$secondary-button-gradient-background-image-position: var(--iris--secondary-button--background-position, initial);
+$secondary-button-gradient-background-image-position-hover: var(--iris--secondary-button--background-position-hover, (bottom right, top right));
+$secondary-button-border: var(--iris--secondary-button--border, none);
+$secondary-button-border-hover: var(--iris--secondary-button--border-hover, none);
+$secondary-button-background-color--force: var(--iris--secondary-button--border-color, $secondary-button-background-color);
+$secondary-button-background-color-hover--force: var(--iris--secondary-button--border-color-hover, $secondary-button-background-color-hover);
+
 // Tags
 $tag-padding-top: var(--iris--tag--padding-top);
 $tag-padding-right: var(--iris--tag--padding-right);

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

@@ -191,4 +191,63 @@
             color: $button-color-hover;
         }
     }
+}
+
+@mixin secondary-button {
+    text-decoration: none;
+    box-shadow: none;
+    display: inline-flex;
+    align-items: center;
+    line-height: 1.4;
+    cursor: pointer;
+    border: none;
+    font-weight: $secondary-button-font-weight;
+    font-family: $secondary-button-font-family;
+    text-transform: $secondary-button-text-transform;
+    letter-spacing: $secondary-button-letter-spacing;
+    padding: $secondary-button-padding-y $secondary-button-padding-x;
+    border-radius: $secondary-button-border-radius;
+    font-size: $secondary-button-font-size--rem;
+    color: $secondary-button-color;
+    background-color: $secondary-button-background-color;
+    background-image: $secondary-button-background-image;
+    background-size: $secondary-button-gradient-background-image-size;
+    background-position: $secondary-button-gradient-background-image-position;
+    border: $secondary-button-border;
+    word-break: normal;
+    @include transition;
+
+    @include breakpoint(small) {
+        padding: $secondary-button-padding-y-small $secondary-button-padding-x-small;
+        font-size: $secondary-button-font-size-small--rem;
+    }
+
+    &:before,
+    &.fi:before,
+    .fi:before {
+        color: $secondary-button-color;
+        @include transition;
+    }
+
+    &:visited,
+    &:focus,
+    &:focus-within {
+        color: $secondary-button-color;
+        background-color: $secondary-button-background-color;
+        background-image: $secondary-button-background-image;
+        background-size: $secondary-button-gradient-background-image-size;
+        background-position: $secondary-button-gradient-background-image-position;
+        border: $secondary-button-border;
+    }
+
+    @include hover {
+        color: $secondary-button-color-hover;
+        background-color: $secondary-button-background-color-hover;
+        border: $secondary-button-border-hover;
+        background-position: $secondary-button-gradient-background-image-position-hover;
+
+        &:before {
+            color: $secondary-button-color-hover;
+        }
+    }
 }