@iris.interactive/handcook 8.1.5 → 8.1.7-beta

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 (8) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/public/index.js +6 -6
  4. package/public/scripts/hc_swiper_v11.js +1 -1
  5. package/public/styles/hc_swiper_v11.js +1 -1
  6. package/public/styles/scss/_variables.scss +99 -0
  7. package/public/styles/scss/mixins/_mixin-style.scss +2 -114
  8. package/public/styles/scss/mixins/mixin-style/_mixin-button.scss +176 -0
package/public/styles/hc_swiper_v11.js CHANGED
@@ -1 +1 @@
1
- "use strict";(self.webpackChunk_iris_interactive_handcook=self.webpackChunk_iris_interactive_handcook||[]).push([["728"],{376:function(i,e,c){c.r(e)}}]);
1
+ "use strict";(self.webpackChunk_iris_interactive_handcook=self.webpackChunk_iris_interactive_handcook||[]).push([["728"],{376(e,i,c){c.r(i)}}]);
package/public/styles/scss/_variables.scss CHANGED
@@ -405,6 +405,105 @@ $secondary-button-background-color-hover--force: var(
405
405
  $secondary-button-background-color-hover
406
406
  );
407
407
 
408
+ // Tertiary Button
409
+ $tertiary-button-font-weight: var(--iris--tertiary-button--font-weight, 400);
410
+ $tertiary-button-font-family: var(--iris--tertiary-button--font-family);
411
+ $tertiary-button-text-transform: var(--iris--tertiary-button--text-transform);
412
+ $tertiary-button-letter-spacing: var(--iris--tertiary-button--letter-spacing);
413
+ $tertiary-button-padding-x: var(--iris--tertiary-button--padding-x);
414
+ $tertiary-button-padding-y: var(--iris--tertiary-button--padding-y);
415
+ $tertiary-button-padding-x-small: var(
416
+ --iris--tertiary-button--padding-x--small,
417
+ var(--iris--tertiary-button--padding-x)
418
+ );
419
+ $tertiary-button-padding-y-small: var(
420
+ --iris--tertiary-button--padding-y--small,
421
+ var(--iris--tertiary-button--padding-y)
422
+ );
423
+ $tertiary-button-font-size: var(--iris--tertiary-button--font-size);
424
+ $tertiary-button-font-size--rem: var(--iris--tertiary-button--font-size--rem);
425
+ $tertiary-button-font-size-small: var(
426
+ --iris--tertiary-button--font-size--small,
427
+ var(--iris--tertiary-button--font-size)
428
+ );
429
+ $tertiary-button-font-size-small--rem: var(
430
+ --iris--tertiary-button--font-size--small--rem,
431
+ var(--iris--tertiary-button--font-size--rem)
432
+ );
433
+ $tertiary-button-border-radius: var(--iris--tertiary-button--border-radius);
434
+ $tertiary-button-color: var(--iris--tertiary-button--color);
435
+ $tertiary-button-background-color: var(--iris--tertiary-button--background-color);
436
+ $tertiary-button-color-hover: var(--iris--tertiary-button--color-hover);
437
+ $tertiary-button-background-color-hover: var(--iris--tertiary-button--background-color-hover, none);
438
+ $tertiary-button-background-image: var(--iris--tertiary-button--background-image, none);
439
+ $tertiary-button-gradient-background-image-size: var(
440
+ --iris--tertiary-button--background-size,
441
+ var(--iris--global--gradient-background-size, (200% 100%))
442
+ );
443
+ $tertiary-button-gradient-background-image-position: var(--iris--tertiary-button--background-position, initial);
444
+ $tertiary-button-gradient-background-image-position-hover: var(
445
+ --iris--tertiary-button--background-position-hover,
446
+ (right -1px bottom -1px)
447
+ );
448
+ $tertiary-button-border: var(--iris--tertiary-button--border, none);
449
+ $tertiary-button-border-hover: var(--iris--tertiary-button--border-hover, none);
450
+ $tertiary-button-background-color--force: var(--iris--tertiary-button--border-color, $tertiary-button-background-color);
451
+ $tertiary-button-background-color-hover--force: var(
452
+ --iris--tertiary-button--border-color-hover,
453
+ $tertiary-button-background-color-hover
454
+ );
455
+
456
+ // Quaternary Button
457
+ $quaternary-button-font-weight: var(--iris--quaternary-button--font-weight, 400);
458
+ $quaternary-button-font-family: var(--iris--quaternary-button--font-family);
459
+ $quaternary-button-text-transform: var(--iris--quaternary-button--text-transform);
460
+ $quaternary-button-letter-spacing: var(--iris--quaternary-button--letter-spacing);
461
+ $quaternary-button-padding-x: var(--iris--quaternary-button--padding-x);
462
+ $quaternary-button-padding-y: var(--iris--quaternary-button--padding-y);
463
+ $quaternary-button-padding-x-small: var(
464
+ --iris--quaternary-button--padding-x--small,
465
+ var(--iris--quaternary-button--padding-x)
466
+ );
467
+ $quaternary-button-padding-y-small: var(
468
+ --iris--quaternary-button--padding-y--small,
469
+ var(--iris--quaternary-button--padding-y)
470
+ );
471
+ $quaternary-button-font-size: var(--iris--quaternary-button--font-size);
472
+ $quaternary-button-font-size--rem: var(--iris--quaternary-button--font-size--rem);
473
+ $quaternary-button-font-size-small: var(
474
+ --iris--quaternary-button--font-size--small,
475
+ var(--iris--quaternary-button--font-size)
476
+ );
477
+ $quaternary-button-font-size-small--rem: var(
478
+ --iris--quaternary-button--font-size--small--rem,
479
+ var(--iris--quaternary-button--font-size--rem)
480
+ );
481
+ $quaternary-button-border-radius: var(--iris--quaternary-button--border-radius);
482
+ $quaternary-button-color: var(--iris--quaternary-button--color);
483
+ $quaternary-button-background-color: var(--iris--quaternary-button--background-color);
484
+ $quaternary-button-color-hover: var(--iris--quaternary-button--color-hover);
485
+ $quaternary-button-background-color-hover: var(--iris--quaternary-button--background-color-hover, none);
486
+ $quaternary-button-background-image: var(--iris--quaternary-button--background-image, none);
487
+ $quaternary-button-gradient-background-image-size: var(
488
+ --iris--quaternary-button--background-size,
489
+ var(--iris--global--gradient-background-size, (200% 100%))
490
+ );
491
+ $quaternary-button-gradient-background-image-position: var(--iris--quaternary-button--background-position, initial);
492
+ $quaternary-button-gradient-background-image-position-hover: var(
493
+ --iris--quaternary-button--background-position-hover,
494
+ (right -1px bottom -1px)
495
+ );
496
+ $quaternary-button-border: var(--iris--quaternary-button--border, none);
497
+ $quaternary-button-border-hover: var(--iris--quaternary-button--border-hover, none);
498
+ $quaternary-button-background-color--force: var(
499
+ --iris--quaternary-button--border-color,
500
+ $quaternary-button-background-color
501
+ );
502
+ $quaternary-button-background-color-hover--force: var(
503
+ --iris--quaternary-button--border-color-hover,
504
+ $quaternary-button-background-color-hover
505
+ );
506
+
408
507
  // Generic Button
409
508
  $generic-button-color: var(--iris--generic-button--color, #fff);
410
509
  $generic-button-background-color: var(
package/public/styles/scss/mixins/_mixin-style.scss CHANGED
@@ -1,6 +1,8 @@
1
1
  @use "../variables";
2
2
  @use "mixin-layout";
3
3
 
4
+ @import "mixin-style/mixin-button";
5
+
4
6
  /*
5
7
  * Created by IRIS Interactive
6
8
  * User : IRIS Interactive
@@ -136,120 +138,6 @@
136
138
  border: 0;
137
139
  }
138
140
 
139
- /* Button
140
- /* ============================================= */
141
- @mixin button {
142
- text-decoration: none;
143
- box-shadow: none;
144
- display: inline-flex;
145
- align-items: center;
146
- line-height: 1.4;
147
- cursor: pointer;
148
- font-weight: variables.$button-font-weight;
149
- font-family: variables.$button-font-family;
150
- text-transform: variables.$button-text-transform;
151
- letter-spacing: variables.$button-letter-spacing;
152
- padding: variables.$button-padding-y variables.$button-padding-x;
153
- border-radius: variables.$button-border-radius;
154
- font-size: variables.$button-font-size--rem;
155
- color: variables.$button-color;
156
- background-color: variables.$button-background-color;
157
- background-image: variables.$button-background-image;
158
- background-size: variables.$button-gradient-background-image-size;
159
- background-position: variables.$button-gradient-background-image-position;
160
- border: variables.$button-border;
161
- word-break: normal;
162
- @include transition;
163
-
164
- @include mixin-layout.breakpoint(small) {
165
- padding: variables.$button-padding-y-small variables.$button-padding-x-small;
166
- font-size: variables.$button-font-size-small--rem;
167
- }
168
-
169
- &:before,
170
- &.fi:before,
171
- .fi:before {
172
- color: variables.$button-color;
173
- @include transition;
174
- }
175
-
176
- &:visited {
177
- color: variables.$button-color;
178
- background-color: variables.$button-background-color;
179
- background-image: variables.$button-background-image;
180
- background-size: variables.$button-gradient-background-image-size;
181
- background-position: variables.$button-gradient-background-image-position;
182
- border: variables.$button-border;
183
- }
184
-
185
- @include hover-focus {
186
- color: variables.$button-color-hover;
187
- background-color: variables.$button-background-color-hover;
188
- border: variables.$button-border-hover;
189
- background-position: variables.$button-gradient-background-image-position-hover;
190
-
191
- &:before {
192
- color: variables.$button-color-hover;
193
- }
194
- }
195
- }
196
-
197
- @mixin secondary-button {
198
- text-decoration: none;
199
- box-shadow: none;
200
- display: inline-flex;
201
- align-items: center;
202
- line-height: 1.4;
203
- cursor: pointer;
204
- font-weight: variables.$secondary-button-font-weight;
205
- font-family: variables.$secondary-button-font-family;
206
- text-transform: variables.$secondary-button-text-transform;
207
- letter-spacing: variables.$secondary-button-letter-spacing;
208
- padding: variables.$secondary-button-padding-y variables.$secondary-button-padding-x;
209
- border-radius: variables.$secondary-button-border-radius;
210
- font-size: variables.$secondary-button-font-size--rem;
211
- color: variables.$secondary-button-color;
212
- background-color: variables.$secondary-button-background-color;
213
- background-image: variables.$secondary-button-background-image;
214
- background-size: variables.$secondary-button-gradient-background-image-size;
215
- background-position: variables.$secondary-button-gradient-background-image-position;
216
- border: variables.$secondary-button-border;
217
- word-break: normal;
218
- @include transition;
219
-
220
- @include mixin-layout.breakpoint(small) {
221
- padding: variables.$secondary-button-padding-y-small variables.$secondary-button-padding-x-small;
222
- font-size: variables.$secondary-button-font-size-small--rem;
223
- }
224
-
225
- &:before,
226
- &.fi:before,
227
- .fi:before {
228
- color: variables.$secondary-button-color;
229
- @include transition;
230
- }
231
-
232
- &:visited {
233
- color: variables.$secondary-button-color;
234
- background-color: variables.$secondary-button-background-color;
235
- background-image: variables.$secondary-button-background-image;
236
- background-size: variables.$secondary-button-gradient-background-image-size;
237
- background-position: variables.$secondary-button-gradient-background-image-position;
238
- border: variables.$secondary-button-border;
239
- }
240
-
241
- @include hover-focus {
242
- color: variables.$secondary-button-color-hover;
243
- background-color: variables.$secondary-button-background-color-hover;
244
- border: variables.$secondary-button-border-hover;
245
- background-position: variables.$secondary-button-gradient-background-image-position-hover;
246
-
247
- &:before {
248
- color: variables.$secondary-button-color-hover;
249
- }
250
- }
251
- }
252
-
253
141
  @mixin advanced-link {
254
142
  all: unset;
255
143
  cursor: pointer;
package/public/styles/scss/mixins/mixin-style/_mixin-button.scss ADDED
@@ -0,0 +1,176 @@
1
+ @use "../../variables";
2
+ @use "../mixin-layout";
3
+ @use "sass:map";
4
+
5
+ $buttons: (
6
+ "button-font-weight": variables.$button-font-weight,
7
+ "button-font-family": variables.$button-font-family,
8
+ "button-text-transform": variables.$button-text-transform,
9
+ "button-letter-spacing": variables.$button-letter-spacing,
10
+ "button-padding-x": variables.$button-padding-x,
11
+ "button-padding-y": variables.$button-padding-y,
12
+ "button-padding-x-small": variables.$button-padding-x-small,
13
+ "button-padding-y-small": variables.$button-padding-y-small,
14
+ "button-font-size": variables.$button-font-size,
15
+ "button-font-size--rem": variables.$button-font-size--rem,
16
+ "button-font-size-small": variables.$button-font-size-small,
17
+ "button-font-size-small--rem": variables.$button-font-size-small--rem,
18
+ "button-border-radius": variables.$button-border-radius,
19
+ "button-color": variables.$button-color,
20
+ "button-background-color": variables.$button-background-color,
21
+ "button-color-hover": variables.$button-color-hover,
22
+ "button-background-color-hover": variables.$button-background-color-hover,
23
+ "button-background-image": variables.$button-background-image,
24
+ "button-gradient-background-image-size": variables.$button-gradient-background-image-size,
25
+ "button-gradient-background-image-position": variables.$button-gradient-background-image-position,
26
+ "button-gradient-background-image-position-hover": variables.$button-gradient-background-image-position-hover,
27
+ "button-border": variables.$button-border,
28
+ "button-border-hover": variables.$button-border-hover,
29
+ "button-border-color": variables.$button-border-color,
30
+ "button-border-color-hover": variables.$button-border-color-hover,
31
+ "button-background-color--force": variables.$button-background-color--force,
32
+ "button-background-color-hover--force": variables.$button-background-color-hover--force,
33
+ "secondary-button-font-weight": variables.$secondary-button-font-weight,
34
+ "secondary-button-font-family": variables.$secondary-button-font-family,
35
+ "secondary-button-text-transform": variables.$secondary-button-text-transform,
36
+ "secondary-button-letter-spacing": variables.$secondary-button-letter-spacing,
37
+ "secondary-button-padding-x": variables.$secondary-button-padding-x,
38
+ "secondary-button-padding-y": variables.$secondary-button-padding-y,
39
+ "secondary-button-padding-x-small": variables.$secondary-button-padding-x-small,
40
+ "secondary-button-padding-y-small": variables.$secondary-button-padding-y-small,
41
+ "secondary-button-font-size": variables.$secondary-button-font-size,
42
+ "secondary-button-font-size--rem": variables.$secondary-button-font-size--rem,
43
+ "secondary-button-font-size-small": variables.$secondary-button-font-size-small,
44
+ "secondary-button-font-size-small--rem": variables.$secondary-button-font-size-small--rem,
45
+ "secondary-button-border-radius": variables.$secondary-button-border-radius,
46
+ "secondary-button-color": variables.$secondary-button-color,
47
+ "secondary-button-background-color": variables.$secondary-button-background-color,
48
+ "secondary-button-color-hover": variables.$secondary-button-color-hover,
49
+ "secondary-button-background-color-hover": variables.$secondary-button-background-color-hover,
50
+ "secondary-button-background-image": variables.$secondary-button-background-image,
51
+ "secondary-button-gradient-background-image-size": variables.$secondary-button-gradient-background-image-size,
52
+ "secondary-button-gradient-background-image-position":
53
+ variables.$secondary-button-gradient-background-image-position,
54
+ "secondary-button-gradient-background-image-position-hover":
55
+ variables.$secondary-button-gradient-background-image-position-hover,
56
+ "secondary-button-border": variables.$secondary-button-border,
57
+ "secondary-button-border-hover": variables.$secondary-button-border-hover,
58
+ "secondary-button-background-color--force": variables.$secondary-button-background-color--force,
59
+ "secondary-button-background-color-hover--force": variables.$secondary-button-background-color-hover--force,
60
+ "tertiary-button-font-weight": variables.$tertiary-button-font-weight,
61
+ "tertiary-button-font-family": variables.$tertiary-button-font-family,
62
+ "tertiary-button-text-transform": variables.$tertiary-button-text-transform,
63
+ "tertiary-button-letter-spacing": variables.$tertiary-button-letter-spacing,
64
+ "tertiary-button-padding-x": variables.$tertiary-button-padding-x,
65
+ "tertiary-button-padding-y": variables.$tertiary-button-padding-y,
66
+ "tertiary-button-padding-x-small": variables.$tertiary-button-padding-x-small,
67
+ "tertiary-button-padding-y-small": variables.$tertiary-button-padding-y-small,
68
+ "tertiary-button-font-size": variables.$tertiary-button-font-size,
69
+ "tertiary-button-font-size--rem": variables.$tertiary-button-font-size--rem,
70
+ "tertiary-button-font-size-small": variables.$tertiary-button-font-size-small,
71
+ "tertiary-button-font-size-small--rem": variables.$tertiary-button-font-size-small--rem,
72
+ "tertiary-button-border-radius": variables.$tertiary-button-border-radius,
73
+ "tertiary-button-color": variables.$tertiary-button-color,
74
+ "tertiary-button-background-color": variables.$tertiary-button-background-color,
75
+ "tertiary-button-color-hover": variables.$tertiary-button-color-hover,
76
+ "tertiary-button-background-color-hover": variables.$tertiary-button-background-color-hover,
77
+ "tertiary-button-background-image": variables.$tertiary-button-background-image,
78
+ "tertiary-button-gradient-background-image-size": variables.$tertiary-button-gradient-background-image-size,
79
+ "tertiary-button-gradient-background-image-position": variables.$tertiary-button-gradient-background-image-position,
80
+ "tertiary-button-gradient-background-image-position-hover":
81
+ variables.$tertiary-button-gradient-background-image-position-hover,
82
+ "tertiary-button-border": variables.$tertiary-button-border,
83
+ "tertiary-button-border-hover": variables.$tertiary-button-border-hover,
84
+ "tertiary-button-background-color--force": variables.$tertiary-button-background-color--force,
85
+ "tertiary-button-background-color-hover--force": variables.$tertiary-button-background-color-hover--force,
86
+ "quaternary-button-font-weight": variables.$quaternary-button-font-weight,
87
+ "quaternary-button-font-family": variables.$quaternary-button-font-family,
88
+ "quaternary-button-text-transform": variables.$quaternary-button-text-transform,
89
+ "quaternary-button-letter-spacing": variables.$quaternary-button-letter-spacing,
90
+ "quaternary-button-padding-x": variables.$quaternary-button-padding-x,
91
+ "quaternary-button-padding-y": variables.$quaternary-button-padding-y,
92
+ "quaternary-button-padding-x-small": variables.$quaternary-button-padding-x-small,
93
+ "quaternary-button-padding-y-small": variables.$quaternary-button-padding-y-small,
94
+ "quaternary-button-font-size": variables.$quaternary-button-font-size,
95
+ "quaternary-button-font-size--rem": variables.$quaternary-button-font-size--rem,
96
+ "quaternary-button-font-size-small": variables.$quaternary-button-font-size-small,
97
+ "quaternary-button-font-size-small--rem": variables.$quaternary-button-font-size-small--rem,
98
+ "quaternary-button-border-radius": variables.$quaternary-button-border-radius,
99
+ "quaternary-button-color": variables.$quaternary-button-color,
100
+ "quaternary-button-background-color": variables.$quaternary-button-background-color,
101
+ "quaternary-button-color-hover": variables.$quaternary-button-color-hover,
102
+ "quaternary-button-background-color-hover": variables.$quaternary-button-background-color-hover,
103
+ "quaternary-button-background-image": variables.$quaternary-button-background-image,
104
+ "quaternary-button-gradient-background-image-size": variables.$quaternary-button-gradient-background-image-size,
105
+ "quaternary-button-gradient-background-image-position":
106
+ variables.$quaternary-button-gradient-background-image-position,
107
+ "quaternary-button-gradient-background-image-position-hover":
108
+ variables.$quaternary-button-gradient-background-image-position-hover,
109
+ "quaternary-button-border": variables.$quaternary-button-border,
110
+ "quaternary-button-border-hover": variables.$quaternary-button-border-hover,
111
+ "quaternary-button-background-color--force": variables.$quaternary-button-background-color--force,
112
+ "quaternary-button-background-color-hover--force": variables.$quaternary-button-background-color-hover--force,
113
+ );
114
+
115
+ /* Button
116
+ /* ============================================= */
117
+ @mixin button($prefix: "button") {
118
+ text-decoration: none;
119
+ box-shadow: none;
120
+ display: inline-flex;
121
+ align-items: center;
122
+ line-height: 1.4;
123
+ cursor: pointer;
124
+ font-weight: map.get($buttons, "#{$prefix}-font-weight");
125
+ font-family: map.get($buttons, "#{$prefix}-font-family");
126
+ text-transform: map.get($buttons, "#{$prefix}-text-transform");
127
+ letter-spacing: map.get($buttons, "#{$prefix}-letter-spacing");
128
+ padding: map.get($buttons, "#{$prefix}-padding-y") map.get($buttons, "#{$prefix}-padding-x");
129
+ border-radius: map.get($buttons, "#{$prefix}-border-radius");
130
+ font-size: map.get($buttons, "#{$prefix}-font-size--rem");
131
+ color: map.get($buttons, "#{$prefix}-color");
132
+ background-color: map.get($buttons, "#{$prefix}-background-color");
133
+ background-image: map.get($buttons, "#{$prefix}-background-image");
134
+ background-size: map.get($buttons, "#{$prefix}-gradient-background-image-size");
135
+ background-position: map.get($buttons, "#{$prefix}-gradient-background-image-position");
136
+ border: map.get($buttons, "#{$prefix}-border");
137
+ word-break: normal;
138
+ @include transition;
139
+
140
+ @include mixin-layout.breakpoint(small) {
141
+ padding: map.get($buttons, "#{$prefix}-padding-y-small") map.get($buttons, "#{$prefix}-padding-x-small");
142
+ font-size: map.get($buttons, "#{$prefix}-font-size-small--rem");
143
+ }
144
+
145
+ &:before,
146
+ &.fi:before,
147
+ .fi:before {
148
+ color: map.get($buttons, "#{$prefix}-color");
149
+ @include transition;
150
+ }
151
+
152
+ &:visited {
153
+ color: map.get($buttons, "#{$prefix}-color");
154
+ background-color: map.get($buttons, "#{$prefix}-background-color");
155
+ background-image: map.get($buttons, "#{$prefix}-background-image");
156
+ background-size: map.get($buttons, "#{$prefix}-gradient-background-image-size");
157
+ background-position: map.get($buttons, "#{$prefix}-gradient-background-image-position");
158
+ border: map.get($buttons, "#{$prefix}-border");
159
+ }
160
+
161
+ @include hover-focus {
162
+ color: map.get($buttons, "#{$prefix}-color-hover");
163
+ background-color: map.get($buttons, "#{$prefix}-background-color-hover");
164
+ border: map.get($buttons, "#{$prefix}-border-hover");
165
+ background-position: map.get($buttons, "#{$prefix}-gradient-background-image-position-hover");
166
+
167
+ &:before {
168
+ color: map.get($buttons, "#{$prefix}-color-hover");
169
+ }
170
+ }
171
+ }
172
+
173
+ // Retrocompat
174
+ @mixin secondary-button {
175
+ @include button("secondary-button");
176
+ }