@iris.interactive/handcook 2.10.33 → 2.10.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/public/scripts/components/scrollspy/scrollspy.component.js +3 -1
  4. package/public/styles/scss/_variables.scss +27 -0
  5. package/public/styles/scss/mixins/_mixin-style.scss +59 -0
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  # Welcome to HandCook 👨‍🍳
2
- ![Version](https://img.shields.io/badge/version-2.10.33-blue.svg?cacheSeconds=2592000)
2
+ ![Version](https://img.shields.io/badge/version-2.10.35-blue.svg?cacheSeconds=2592000)
3
3
  ![Prerequisite](https://img.shields.io/badge/node-%3E%3D%2012.14.0-blue.svg)
4
4
  [![License: UNLICENSED](https://img.shields.io/badge/License-UNLICENSED-yellow.svg)](#)
5
5
  [![Twitter: captain\_iris](https://img.shields.io/twitter/follow/captain\_iris.svg?style=social)](https://twitter.com/captain\_iris)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iris.interactive/handcook",
3
- "version": "2.10.33",
3
+ "version": "2.10.35",
4
4
  "description": "The web cooking by IRIS Interactive",
5
5
  "main": "./public/scripts/index.js",
6
6
  "scripts": {
package/public/scripts/components/scrollspy/scrollspy.component.js CHANGED
@@ -9,7 +9,9 @@ export class HcScrollspy {
9
9
  document.querySelectorAll(elements).forEach(element => {
10
10
  const navElement = document.querySelector(element.dataset.hcScrollspy);
11
11
  const shift = element.getAttribute('data-hc-scrollspy-shift') !== null ? parseInt(element.getAttribute('data-hc-scrollspy-shift')) : 0;
12
- this.activeItem(navElement, ElementEnum.scrollSmooth, shift);
12
+ if (navElement !== null) {
13
+ this.activeItem(navElement, ElementEnum.scrollSmooth, shift);
14
+ }
13
15
  });
14
16
  }
15
17
 
package/public/styles/scss/_variables.scss CHANGED
@@ -339,6 +339,33 @@ $button-border-hover: var(--iris--button--border-hover, none);
339
339
  $button-background-color--force: var(--iris--button--border-color, $button-background-color);
340
340
  $button-background-color-hover--force: var(--iris--button--border-color-hover, $button-background-color-hover);
341
341
 
342
+ // Secondary Button
343
+ $secondary-button-font-weight: var(--iris--secondary-button--font-weight, 400);
344
+ $secondary-button-font-family: var(--iris--secondary-button--font-family);
345
+ $secondary-button-text-transform: var(--iris--secondary-button--text-transform);
346
+ $secondary-button-letter-spacing: var(--iris--secondary-button--letter-spacing);
347
+ $secondary-button-padding-x: var(--iris--secondary-button--padding-x);
348
+ $secondary-button-padding-y: var(--iris--secondary-button--padding-y);
349
+ $secondary-button-padding-x-small: var(--iris--secondary-button--padding-x--small, var(--iris--secondary-button--padding-x));
350
+ $secondary-button-padding-y-small: var(--iris--secondary-button--padding-y--small, var(--iris--secondary-button--padding-y));
351
+ $secondary-button-font-size: var(--iris--secondary-button--font-size);
352
+ $secondary-button-font-size--rem: var(--iris--secondary-button--font-size--rem);
353
+ $secondary-button-font-size-small: var(--iris--secondary-button--font-size--small, var(--iris--secondary-button--font-size));
354
+ $secondary-button-font-size-small--rem: var(--iris--secondary-button--font-size--small--rem, var(--iris--secondary-button--font-size--rem));
355
+ $secondary-button-border-radius: var(--iris--secondary-button--border-radius);
356
+ $secondary-button-color: var(--iris--secondary-button--color);
357
+ $secondary-button-background-color: var(--iris--secondary-button--background-color);
358
+ $secondary-button-color-hover: var(--iris--secondary-button--color-hover);
359
+ $secondary-button-background-color-hover: var(--iris--secondary-button--background-color-hover, none);
360
+ $secondary-button-background-image: var(--iris--secondary-button--background-image, none);
361
+ $secondary-button-gradient-background-image-size: var(--iris--secondary-button--background-size, var(--iris--global--gradient-background-size, (200% 100%)));
362
+ $secondary-button-gradient-background-image-position: var(--iris--secondary-button--background-position, initial);
363
+ $secondary-button-gradient-background-image-position-hover: var(--iris--secondary-button--background-position-hover, (bottom right, top right));
364
+ $secondary-button-border: var(--iris--secondary-button--border, none);
365
+ $secondary-button-border-hover: var(--iris--secondary-button--border-hover, none);
366
+ $secondary-button-background-color--force: var(--iris--secondary-button--border-color, $secondary-button-background-color);
367
+ $secondary-button-background-color-hover--force: var(--iris--secondary-button--border-color-hover, $secondary-button-background-color-hover);
368
+
342
369
  // Tags
343
370
  $tag-padding-top: var(--iris--tag--padding-top);
344
371
  $tag-padding-right: var(--iris--tag--padding-right);
package/public/styles/scss/mixins/_mixin-style.scss CHANGED
@@ -191,4 +191,63 @@
191
191
  color: $button-color-hover;
192
192
  }
193
193
  }
194
+ }
195
+
196
+ @mixin secondary-button {
197
+ text-decoration: none;
198
+ box-shadow: none;
199
+ display: inline-flex;
200
+ align-items: center;
201
+ line-height: 1.4;
202
+ cursor: pointer;
203
+ border: none;
204
+ font-weight: $secondary-button-font-weight;
205
+ font-family: $secondary-button-font-family;
206
+ text-transform: $secondary-button-text-transform;
207
+ letter-spacing: $secondary-button-letter-spacing;
208
+ padding: $secondary-button-padding-y $secondary-button-padding-x;
209
+ border-radius: $secondary-button-border-radius;
210
+ font-size: $secondary-button-font-size--rem;
211
+ color: $secondary-button-color;
212
+ background-color: $secondary-button-background-color;
213
+ background-image: $secondary-button-background-image;
214
+ background-size: $secondary-button-gradient-background-image-size;
215
+ background-position: $secondary-button-gradient-background-image-position;
216
+ border: $secondary-button-border;
217
+ word-break: normal;
218
+ @include transition;
219
+
220
+ @include breakpoint(small) {
221
+ padding: $secondary-button-padding-y-small $secondary-button-padding-x-small;
222
+ font-size: $secondary-button-font-size-small--rem;
223
+ }
224
+
225
+ &:before,
226
+ &.fi:before,
227
+ .fi:before {
228
+ color: $secondary-button-color;
229
+ @include transition;
230
+ }
231
+
232
+ &:visited,
233
+ &:focus,
234
+ &:focus-within {
235
+ color: $secondary-button-color;
236
+ background-color: $secondary-button-background-color;
237
+ background-image: $secondary-button-background-image;
238
+ background-size: $secondary-button-gradient-background-image-size;
239
+ background-position: $secondary-button-gradient-background-image-position;
240
+ border: $secondary-button-border;
241
+ }
242
+
243
+ @include hover {
244
+ color: $secondary-button-color-hover;
245
+ background-color: $secondary-button-background-color-hover;
246
+ border: $secondary-button-border-hover;
247
+ background-position: $secondary-button-gradient-background-image-position-hover;
248
+
249
+ &:before {
250
+ color: $secondary-button-color-hover;
251
+ }
252
+ }
194
253
  }