@iris.interactive/handcook 8.1.1 → 8.1.2-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 (4) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/public/styles/scss/_variables.scss +101 -71
  4. package/public/styles/scss/mixins/_mixin-style.scss +39 -11
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  # Welcome to HandCook 👨‍🍳
2
- ![Version](https://img.shields.io/badge/version-8.1.1-blue.svg?cacheSeconds=2592000)
2
+ ![Version](https://img.shields.io/badge/version-8.1.2-beta-blue.svg?cacheSeconds=2592000)
3
3
  ![Prerequisite](https://img.shields.io/badge/node-%3E%3D%2023.6.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": "8.1.1",
3
+ "version": "8.1.2-beta",
4
4
  "description": "The web cooking by IRIS Interactive",
5
5
  "main": "./public/scripts/index.js",
6
6
  "scripts": {
package/public/styles/scss/_variables.scss CHANGED
@@ -17,11 +17,10 @@ $navbar-fixed-height: var(--iris--navbar--fixed--height, 0px);
17
17
  /* Gutter
18
18
  / ================================================== */
19
19
  $gutter: 40px;
20
- $gutter-large: $gutter*2;
20
+ $gutter-large: $gutter * 2;
21
21
  $gutter-medium: 20px;
22
22
  $gutter-small: 20px;
23
23
 
24
-
25
24
  /* Margin
26
25
  / ================================================== */
27
26
  $section-margin-top: 100px;
@@ -49,7 +48,6 @@ $block-margin-highest-small: var(--iris--global--block-margin-highest--small, 30
49
48
  $sit-widget-margin-top: 60px;
50
49
  $sit-widget-margin-bottom: 60px;
51
50
 
52
-
53
51
  /* Margin
54
52
  / ================================================== */
55
53
  $margin-xlarge: 8%;
@@ -59,13 +57,12 @@ $margin-small: 20px;
59
57
  $margin-xsmall: 20px;
60
58
 
61
59
  $viewport-borders: (
62
- "large": $margin-large,
63
- "medium": $margin-medium,
64
- "small": $margin-small,
65
- "xsmall": $margin-xsmall,
60
+ "large": $margin-large,
61
+ "medium": $margin-medium,
62
+ "small": $margin-small,
63
+ "xsmall": $margin-xsmall,
66
64
  );
67
65
 
68
-
69
66
  /* Breakpoint
70
67
  / ================================================== */
71
68
  $breakpoint-desktop: 1000.1px; // min-width
@@ -87,7 +84,9 @@ $background-color: var(--iris--global--background-color);
87
84
 
88
85
  $border-color: var(--iris--global--border-color);
89
86
  $border-radius: var(--iris--global--border-radius);
90
- $box-shadow: var(--iris--global--box-shadow-color) var(--iris--global--box-shadow-offset-x) var(--iris--global--box-shadow-offset-y) var(--iris--global--box-shadow-blur-radius) var(--iris--global--box-shadow-spread-radius);
87
+ $box-shadow: var(--iris--global--box-shadow-color, rgb(0, 0, 0, 0.2)) var(--iris--global--box-shadow-offset-x, 0)
88
+ var(--iris--global--box-shadow-offset-y, 0) var(--iris--global--box-shadow-blur-radius, 10px)
89
+ var(--iris--global--box-shadow-spread-radius, 0);
91
90
 
92
91
  $font-size-xsmall: var(--iris--global--font-size-xsmall);
93
92
  $font-size-xsmall--rem: var(--iris--global--font-size-xsmall--rem);
@@ -106,33 +105,26 @@ $font-size-extra-large--rem: var(--iris--global--font-size-extra-large--rem);
106
105
  $font-size-extra-large--small: var(--iris--global--font-size-extra-large--small);
107
106
  $font-size-extra-large--small--rem: var(--iris--global--font-size-extra-large--small--rem);
108
107
 
109
-
110
- //Cursor
108
+ // Cursor
111
109
  $cursor-color: var(--iris--cursor--color, #000);
112
110
 
113
-
114
- //Ripple effect
111
+ // Ripple effect
115
112
  $ripple-effect-color: var(--iris--ripple-effect--color, #aaa);
116
113
 
117
-
118
- //Bottom bar
114
+ // Bottom bar
119
115
  $iris-bottom-bar-min-height: var(--iris--bottom-bar--min-height, 80px);
120
116
 
121
-
122
- //Customer Bottom bar
117
+ // Customer Bottom bar
123
118
  $customer-bottom-bar-height: var(--iris--customer-bottom-bar--height, 60px);
124
119
 
125
-
126
- //Icon
120
+ // Icon
127
121
  $icon-color: var(--iris--icon--color);
128
122
  $icon-font-size: 20px;
129
123
 
130
-
131
- //Rank
124
+ // Rank
132
125
  $rank-color: #ffc400; // var(--iris--rank--color)
133
126
 
134
-
135
- //Meta
127
+ // Meta
136
128
  $meta-color: var(--iris--meta--color);
137
129
  $meta-font-size: $font-size-small;
138
130
  $meta-font-size--rem: $font-size-small--rem;
@@ -144,12 +136,12 @@ $link-text-decoration-line: var(--iris--link--text-decoration-line, none);
144
136
  $link-text-decoration-style: var(--iris--link--text-decoration-style, solid);
145
137
  $link-text-decoration-color: var(--iris--link--text-decoration-color, $link-color);
146
138
  $link-text-decoration-thickness: var(--iris--link--text-decoration-tickness, 1px);
147
- $link-text-decoration: $link-text-decoration-line $link-text-decoration-style $link-text-decoration-color $link-text-decoration-thickness;
139
+ $link-text-decoration: $link-text-decoration-line $link-text-decoration-style $link-text-decoration-color
140
+ $link-text-decoration-thickness;
148
141
  $link-box-shadow: var(--iris--link--box-shadow, none);
149
142
  $link-underline-offset: var(--iris--link--underline-offset, 2px);
150
143
  $link-font-weight: var(--iris--link--font-weight);
151
144
 
152
-
153
145
  // Advanced Links
154
146
  $advanced-link-font-weight: var(--iris--advanced-link--font-weight);
155
147
  $advanced-link-font-family: var(--iris--advanced-link--font-family);
@@ -162,19 +154,21 @@ $advanced-link-color-hover: var(--iris--advanced-link--color-hover, $color);
162
154
  $advanced-link-text-decoration-line: var(--iris--advanced-link--text-decoration-line, none);
163
155
  $advanced-link-text-decoration-style: var(--iris--advanced-link--text-decoration-style, solid);
164
156
  $advanced-link-text-decoration-color: var(--iris--advanced-link--underline-color, $advanced-link-color);
165
- $advanced-link-text-decoration-color-hover: var(--iris--advanced-link--underline-color-hover, $advanced-link-color-hover);
157
+ $advanced-link-text-decoration-color-hover: var(
158
+ --iris--advanced-link--underline-color-hover,
159
+ $advanced-link-color-hover
160
+ );
166
161
  $advanced-link-text-decoration-thickness: var(--iris--advanced-link--underline-thickness, 1px);
167
- $advanced-link-text-decoration: $advanced-link-text-decoration-line $advanced-link-text-decoration-style $advanced-link-text-decoration-color $advanced-link-text-decoration-thickness;
162
+ $advanced-link-text-decoration: $advanced-link-text-decoration-line $advanced-link-text-decoration-style
163
+ $advanced-link-text-decoration-color $advanced-link-text-decoration-thickness;
168
164
  $advanced-link-underline-offset: var(--iris--advanced-link--underline-offset, 2px);
169
165
 
170
-
171
166
  // List
172
167
  $list-color: var(--iris--list--color);
173
168
  $list-style-type: var(--iris--list--style-type, 50%);
174
169
  $list-padding-left: calc(#{$font-size} * 1px + 10px);
175
170
 
176
-
177
- //Heading
171
+ // Heading
178
172
  $h1-font-family: var(--iris--h1--font-family);
179
173
  $h1-font-weight: var(--iris--h1--font-weight, 400);
180
174
  $h1-font-size: var(--iris--h1--font-size);
@@ -251,8 +245,7 @@ $h6-text-align: var(--iris--h6--text-align);
251
245
  $h6-text-transform: var(--iris--h6--text-transform, none);
252
246
  $h6-font-style: var(--iris--h6--font-style, normal);
253
247
 
254
-
255
- //Over-title
248
+ // Over-title
256
249
  $over-title-font-family: var(--iris--over-title--font-family, $font-family);
257
250
  $over-title-font-weight: var(--iris--over-title--font-weight, 400);
258
251
  $over-title-font-size: var(--iris--over-title--font-size, $font-size);
@@ -266,14 +259,15 @@ $over-title-text-align: var(--iris--over-title--text-align, left);
266
259
  $over-title-text-transform: var(--iris--over-title--text-transform, none);
267
260
  $over-title-font-style: var(--iris--over-title--font-style, normal);
268
261
 
269
-
270
262
  // Appearance
271
263
  $appearance-color: var(--iris--appearance--color, var(--iris--global--color));
272
264
  $appearance-background: var(--iris--appearance--background, var(--iris--global--background-color));
273
265
  $appearance-background-color: var(--iris--appearance--background-color, var(--iris--global--background-color));
274
- $appearance-background-size: var(--iris--appearance--background-size, 'auto');
275
- $appearance-background-repeat: var(--iris--appearance--background-repeat, 'repeat');
276
- $appearance-background-position: var(--iris--appearance--background-pos-x, '0%') var(--iris--appearance--background-pos-y, '0%'), 0% 0%;
266
+ $appearance-background-size: var(--iris--appearance--background-size, "auto");
267
+ $appearance-background-repeat: var(--iris--appearance--background-repeat, "repeat");
268
+ $appearance-background-position:
269
+ var(--iris--appearance--background-pos-x, "0%") var(--iris--appearance--background-pos-y, "0%"),
270
+ 0% 0%;
277
271
  $appearance-color-title: var(--iris--appearance--color-title, var(--iris--h2--color));
278
272
  $appearance-color-link: var(--iris--appearance--color-link, var(--iris--link--color));
279
273
  $appearance-color-link-hover: var(--iris--appearance--color-hover, var(--iris--link--color-hover));
@@ -281,7 +275,6 @@ $appearance-color-icon: var(--iris--appearance--color-icon, var(--iris--icon--co
281
275
  $appearance-color-meta: var(--iris--appearance--color-meta, var(--iris--meta--color));
282
276
  $appearance-color-border: var(--iris--appearance--color-icon, var(--iris--global--border-color));
283
277
 
284
-
285
278
  // Blockquote
286
279
  $blockquote-color: var(--iris--blockquote--color);
287
280
  $blockquote-font-family: var(--iris--blockquote--font-family);
@@ -294,7 +287,6 @@ $blockquote-font-size-small--rem: var(--iris--blockquote--font-size--small--rem)
294
287
  $blockquote-padding-left: calc(#{$blockquote-font-size} * 1px + 20px);
295
288
  $blockquote-text-align: var(--iris--blockquote--text-align);
296
289
 
297
-
298
290
  // Excerpt
299
291
  $excerpt-font-family: var(--iris--excerpt--font-family);
300
292
  $excerpt-font-weight: var(--iris--excerpt--font-weight);
@@ -306,7 +298,6 @@ $excerpt-font-size-small--rem: var(--iris--excerpt--font-size--small--rem);
306
298
  $excerpt-color: var(--iris--excerpt--color);
307
299
  $excerpt-text-align: var(--iris--excerpt--text-align);
308
300
 
309
-
310
301
  // Separator
311
302
  $hr-height: var(--iris--hr--height);
312
303
  $hr-width: var(--iris--hr--width);
@@ -327,7 +318,6 @@ $form-field-height: var(--iris--form-field--height);
327
318
  $form-field-border-radius: var(--iris--form-field--border-radius);
328
319
  $form-field-padding-x: 15px;
329
320
 
330
-
331
321
  // Button
332
322
  $button-font-weight: var(--iris--button--font-weight, 400);
333
323
  $button-font-family: var(--iris--button--font-family);
@@ -347,9 +337,15 @@ $button-background-color: var(--iris--button--background-color);
347
337
  $button-color-hover: var(--iris--button--color-hover);
348
338
  $button-background-color-hover: var(--iris--button--background-color-hover, none);
349
339
  $button-background-image: var(--iris--button--background-image, none);
350
- $button-gradient-background-image-size: var(--iris--button--background-size, var(--iris--global--gradient-background-size, (200% 100%)));
340
+ $button-gradient-background-image-size: var(
341
+ --iris--button--background-size,
342
+ var(--iris--global--gradient-background-size, (200% 100%))
343
+ );
351
344
  $button-gradient-background-image-position: var(--iris--button--background-position, initial);
352
- $button-gradient-background-image-position-hover: var(--iris--button--background-position-hover, (right -1px bottom -1px));
345
+ $button-gradient-background-image-position-hover: var(
346
+ --iris--button--background-position-hover,
347
+ (right -1px bottom -1px)
348
+ );
353
349
  $button-border: var(--iris--button--border, none);
354
350
  $button-border-hover: var(--iris--button--border-hover, none);
355
351
  $button-border-color: var(--iris--button--border-color);
@@ -364,31 +360,61 @@ $secondary-button-text-transform: var(--iris--secondary-button--text-transform);
364
360
  $secondary-button-letter-spacing: var(--iris--secondary-button--letter-spacing);
365
361
  $secondary-button-padding-x: var(--iris--secondary-button--padding-x);
366
362
  $secondary-button-padding-y: var(--iris--secondary-button--padding-y);
367
- $secondary-button-padding-x-small: var(--iris--secondary-button--padding-x--small, var(--iris--secondary-button--padding-x));
368
- $secondary-button-padding-y-small: var(--iris--secondary-button--padding-y--small, var(--iris--secondary-button--padding-y));
363
+ $secondary-button-padding-x-small: var(
364
+ --iris--secondary-button--padding-x--small,
365
+ var(--iris--secondary-button--padding-x)
366
+ );
367
+ $secondary-button-padding-y-small: var(
368
+ --iris--secondary-button--padding-y--small,
369
+ var(--iris--secondary-button--padding-y)
370
+ );
369
371
  $secondary-button-font-size: var(--iris--secondary-button--font-size);
370
372
  $secondary-button-font-size--rem: var(--iris--secondary-button--font-size--rem);
371
- $secondary-button-font-size-small: var(--iris--secondary-button--font-size--small, var(--iris--secondary-button--font-size));
372
- $secondary-button-font-size-small--rem: var(--iris--secondary-button--font-size--small--rem, var(--iris--secondary-button--font-size--rem));
373
+ $secondary-button-font-size-small: var(
374
+ --iris--secondary-button--font-size--small,
375
+ var(--iris--secondary-button--font-size)
376
+ );
377
+ $secondary-button-font-size-small--rem: var(
378
+ --iris--secondary-button--font-size--small--rem,
379
+ var(--iris--secondary-button--font-size--rem)
380
+ );
373
381
  $secondary-button-border-radius: var(--iris--secondary-button--border-radius);
374
382
  $secondary-button-color: var(--iris--secondary-button--color);
375
383
  $secondary-button-background-color: var(--iris--secondary-button--background-color);
376
384
  $secondary-button-color-hover: var(--iris--secondary-button--color-hover);
377
385
  $secondary-button-background-color-hover: var(--iris--secondary-button--background-color-hover, none);
378
386
  $secondary-button-background-image: var(--iris--secondary-button--background-image, none);
379
- $secondary-button-gradient-background-image-size: var(--iris--secondary-button--background-size, var(--iris--global--gradient-background-size, (200% 100%)));
387
+ $secondary-button-gradient-background-image-size: var(
388
+ --iris--secondary-button--background-size,
389
+ var(--iris--global--gradient-background-size, (200% 100%))
390
+ );
380
391
  $secondary-button-gradient-background-image-position: var(--iris--secondary-button--background-position, initial);
381
- $secondary-button-gradient-background-image-position-hover: var(--iris--secondary-button--background-position-hover, (right -1px bottom -1px));
392
+ $secondary-button-gradient-background-image-position-hover: var(
393
+ --iris--secondary-button--background-position-hover,
394
+ (right -1px bottom -1px)
395
+ );
382
396
  $secondary-button-border: var(--iris--secondary-button--border, none);
383
397
  $secondary-button-border-hover: var(--iris--secondary-button--border-hover, none);
384
- $secondary-button-background-color--force: var(--iris--secondary-button--border-color, $secondary-button-background-color);
385
- $secondary-button-background-color-hover--force: var(--iris--secondary-button--border-color-hover, $secondary-button-background-color-hover);
398
+ $secondary-button-background-color--force: var(
399
+ --iris--secondary-button--border-color,
400
+ $secondary-button-background-color
401
+ );
402
+ $secondary-button-background-color-hover--force: var(
403
+ --iris--secondary-button--border-color-hover,
404
+ $secondary-button-background-color-hover
405
+ );
386
406
 
387
407
  // Generic Button
388
408
  $generic-button-color: var(--iris--generic-button--color, #fff);
389
- $generic-button-background-color: var(--iris--generic-button--background-color, var(--iris--button--border-color, var(--iris--button--background-color, #000)));
409
+ $generic-button-background-color: var(
410
+ --iris--generic-button--background-color,
411
+ var(--iris--button--border-color, var(--iris--button--background-color, #000))
412
+ );
390
413
  $generic-button-color-hover: var(--iris--generic-button--color-hover, #fff);
391
- $generic-button-background-color-hover: var(--iris--generic-button--background-color-hover, var(--iris--button--border-color-hover, var(--iris--button--background-color-hover, #000)));
414
+ $generic-button-background-color-hover: var(
415
+ --iris--generic-button--background-color-hover,
416
+ var(--iris--button--border-color-hover, var(--iris--button--background-color-hover, #000))
417
+ );
392
418
 
393
419
  // Tags
394
420
  $tag-padding-top: var(--iris--tag--padding-top);
@@ -402,7 +428,7 @@ $tag-font-size--rem: var(--iris--tag--font-size--rem);
402
428
  $border-tag-color: var(--iris--tag--border--text-color);
403
429
  $border-tag-border-color: var(--iris--tag--border--border-color);
404
430
 
405
- //Tags background
431
+ // Tags background
406
432
  $background-tag-color: var(--iris--tag--background--text-color);
407
433
  $background-tag-background-color: var(--iris--tag--background--background-color);
408
434
 
@@ -445,11 +471,17 @@ $highlight-link-color-hover: var(--iris--highlight--color-link-hover);
445
471
  $highlight-font-size: var(--iris--highlight--font-size, var(--iris--global--font-size-large));
446
472
  $highlight-font-size--rem: var(--iris--highlight--font-size--rem, var(--iris--global--font-size-large--rem));
447
473
  $highlight-font-size-small: var(--iris--highlight--font-size--small, var(--iris--global--font-size-large--small));
448
- $highlight-font-size-small--rem: var(--iris--highlight--font-size--small--rem, var(--iris--global--font-size-large--small--rem));
474
+ $highlight-font-size-small--rem: var(
475
+ --iris--highlight--font-size--small--rem,
476
+ var(--iris--global--font-size-large--small--rem)
477
+ );
449
478
 
450
479
  // Single SIT highlight
451
480
  $detail-sit-highlight-color: var(--iris--detail-sit-highlight--color);
452
- $detail-sit-highlight-color-title: var(--iris--detail-sit-highlight--color-title, var(--iris--detail-sit-highlight--color));
481
+ $detail-sit-highlight-color-title: var(
482
+ --iris--detail-sit-highlight--color-title,
483
+ var(--iris--detail-sit-highlight--color)
484
+ );
453
485
  $detail-sit-highlight-background-color: var(--iris--detail-sit-highlight--background-color);
454
486
  $detail-sit-highlight-link-color: var(--iris--detail-sit-highlight--color-link);
455
487
  $detail-sit-highlight-link-color-hover: var(--iris--detail-sit-highlight--color-link-hover);
@@ -466,8 +498,10 @@ $stratefull-content-width: var(--iris--stratefull--content-width);
466
498
  $stratefull-font-size: var(--iris--stratefull--font-size, var(--iris--global--font-size-large));
467
499
  $stratefull-font-size--rem: var(--iris--stratefull--font-size--rem, var(--iris--global--font-size-large--rem));
468
500
  $stratefull-font-size-small: var(--iris--stratefull--font-size--small, var(--iris--global--font-size-large--small));
469
- $stratefull-font-size-small--rem: var(--iris--stratefull--font-size--small--rem, var(--iris--global--font-size-large--small--rem));
470
-
501
+ $stratefull-font-size-small--rem: var(
502
+ --iris--stratefull--font-size--small--rem,
503
+ var(--iris--global--font-size-large--small--rem)
504
+ );
471
505
 
472
506
  // Brochures single
473
507
  $brochure-single-color: var(--iris--brochure--color);
@@ -476,15 +510,16 @@ $brochure-single-background-color: var(--iris--brochure--background-color);
476
510
  $brochure-single-link-color: var(--iris--brochure--color-link);
477
511
  $brochure-single-link-color-hover: var(--iris--brochure--color-link-hover);
478
512
 
479
-
480
513
  // Alternative content
481
514
  $alternative-content-color: var(--iris--alternative-content--color);
482
- $alternative-content-color-title: var(--iris--alternative-content--color-title, var(--iris--alternative-content--color));
515
+ $alternative-content-color-title: var(
516
+ --iris--alternative-content--color-title,
517
+ var(--iris--alternative-content--color)
518
+ );
483
519
  $alternative-content-background-color: var(--iris--alternative-content--background-color);
484
520
  $alternative-content-link-color: var(--iris--alternative-content--color-link);
485
521
  $alternative-content-link-color-hover: var(--iris--alternative-content--color-link-hover);
486
522
 
487
-
488
523
  // Relative content
489
524
  $relative-content-color: var(--iris--relative-content--color);
490
525
  $relative-content-color-title: var(--iris--relative-content--color-title, var(--iris--relative-content--color));
@@ -492,7 +527,6 @@ $relative-content-background-color: var(--iris--relative-content--background-col
492
527
  $relative-content-link-color: var(--iris--relative-content--color-link);
493
528
  $relative-content-link-color-hover: var(--iris--relative-content--color-link-hover);
494
529
 
495
-
496
530
  // Video highlight
497
531
  $video-highlight-color: var(--iris--video-highlight--color);
498
532
  $video-highlight-color-title: var(--iris--video-highlight--color-title, var(--iris--video-highlight--color));
@@ -500,7 +534,6 @@ $video-highlight-background-color: var(--iris--video-highlight--background-color
500
534
  $video-highlight-link-color: var(--iris--video-highlight--color-link);
501
535
  $video-highlight-link-color-hover: var(--iris--video-highlight--color-link-hover);
502
536
 
503
-
504
537
  // Webcam
505
538
  $webcam-color: var(--iris--webcam--color);
506
539
  $webcam-color-title: var(--iris--webcam--color-title, var(--iris--webcam--color));
@@ -508,15 +541,16 @@ $webcam-background-color: var(--iris--webcam--background-color);
508
541
  $webcam-link-color: var(--iris--webcam--color-link);
509
542
  $webcam-link-color-hover: var(--iris--webcam--color-link-hover);
510
543
 
511
-
512
544
  // Video Library Slider
513
545
  $video-library-slider-color: var(--iris--video-library-slider--color);
514
- $video-library-slider-color-title: var(--iris--video-library-slider--color-title, var(--iris--video-library-slider--color));
546
+ $video-library-slider-color-title: var(
547
+ --iris--video-library-slider--color-title,
548
+ var(--iris--video-library-slider--color)
549
+ );
515
550
  $video-library-slider-background-color: var(--iris--video-library-slider--background-color);
516
551
  $video-library-slider-link-color: var(--iris--video-library-slider--color-link);
517
552
  $video-library-slider-link-color-hover: var(--iris--video-library-slider--color-link-hover);
518
553
 
519
-
520
554
  // Authors
521
555
  $authors-color: var(--iris--authors--color);
522
556
  $authors-color-title: var(--iris--authors--color-title, var(--iris--authors--color));
@@ -524,7 +558,6 @@ $authors-background-color: var(--iris--authors--background-color);
524
558
  $authors-link-color: var(--iris--authors--color-link);
525
559
  $authors-link-color-hover: var(--iris--authors--color-link-hover);
526
560
 
527
-
528
561
  // Ma Plage
529
562
  $ma-plage-color: var(--iris--ma-plage--color);
530
563
  $ma-plage-color-title: var(--iris--ma-plage--color-title, var(--iris--ma-plage--color));
@@ -532,7 +565,6 @@ $ma-plage-background-color: var(--iris--ma-plage--background-color);
532
565
  $ma-plage-link-color: var(--iris--ma-plage--color-link);
533
566
  $ma-plage-link-color-hover: var(--iris--ma-plage--color-link-hover);
534
567
 
535
-
536
568
  // Tides
537
569
  $tides-color: var(--iris--tides--color);
538
570
  $tides-color-title: var(--iris--tides--color-title, var(--iris--tides--color));
@@ -540,7 +572,6 @@ $tides-background-color: var(--iris--tides--background-color);
540
572
  $tides-link-color: var(--iris--tides--color-link);
541
573
  $tides-link-color-hover: var(--iris--tides--color-link-hover);
542
574
 
543
-
544
575
  // Snow
545
576
  $snow-color: var(--iris--snow--color);
546
577
  $snow-color-title: var(--iris--snow--color-title, var(--iris--snow--color));
@@ -548,7 +579,6 @@ $snow-background-color: var(--iris--snow--background-color);
548
579
  $snow-link-color: var(--iris--snow--color-link);
549
580
  $snow-link-color-hover: var(--iris--snow--color-link-hover);
550
581
 
551
-
552
582
  // How to come
553
583
  $how-to-come-color: var(--iris--how-to-come--color);
554
584
  $how-to-come-color-title: var(--iris--how-to-come--color-title, var(--iris--how-to-come--color));
@@ -593,7 +623,7 @@ $ecobar-color-secondary: var(--iris--ecobar--color--secondary, #fff);
593
623
  $ecobar-background-color-secondary: var(--iris--ecobar--background-color--secondary, $ecobar-alternative-color-main);
594
624
  $ecobar-alternative-color-secondary: var(--iris--ecobar--alternative-color--secondary, $ecobar-color-main);
595
625
 
596
- //Comments
626
+ // Comments
597
627
  $comments-form-field-background-color: var(--iris--comments-form-field--background-color);
598
628
  $comments-form-field-border: var(--iris--comments-form-field--border);
599
629
  $comments-form-field-color: var(--iris--comments-form-field--color);
@@ -623,4 +653,4 @@ $c-veryhard: #000;
623
653
  /* Gray
624
654
  / ================================================== */
625
655
  $c-gray: #757575;
626
- $c-lightgray: #ddd;
656
+ $c-lightgray: #ddd;
package/public/styles/scss/mixins/_mixin-style.scss CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  /* Transition
10
10
  /* ============================================= */
11
- @mixin transition($delay : 0.2s) {
11
+ @mixin transition($delay: 0.2s) {
12
12
  transition: $delay ease;
13
13
  }
14
14
 
@@ -26,10 +26,15 @@
26
26
  white-space: nowrap;
27
27
  }
28
28
 
29
-
30
29
  /* Adaptive height block
31
30
  /* ============================================= */
32
- @mixin adaptive-height($padding : 115%, $padding-medium : 0, $padding-small : 0, $padding-xsmall:0, $object-fit-position: absolute) {
31
+ @mixin adaptive-height(
32
+ $padding: 115%,
33
+ $padding-medium: 0,
34
+ $padding-small: 0,
35
+ $padding-xsmall: 0,
36
+ $object-fit-position: absolute
37
+ ) {
33
38
  position: relative;
34
39
  overflow: hidden;
35
40
 
@@ -67,7 +72,7 @@
67
72
 
68
73
  /* Line clamp
69
74
  /* ============================================= */
70
- @mixin line-clamp($line : 0) {
75
+ @mixin line-clamp($line: 0) {
71
76
  display: -webkit-box;
72
77
  line-clamp: $line;
73
78
  -webkit-line-clamp: $line;
@@ -77,19 +82,18 @@
77
82
 
78
83
  /* Object fit
79
84
  /* ============================================= */
80
- @mixin object-fit($position : '') {
85
+ @mixin object-fit($position: "") {
81
86
  width: 100%;
82
87
  height: 100%;
83
88
  object-fit: cover;
84
89
 
85
- @if $position == 'absolute' {
90
+ @if $position == "absolute" {
86
91
  position: absolute;
87
92
  top: 0;
88
93
  left: 0;
89
94
  }
90
95
  }
91
96
 
92
-
93
97
  /* Linear Gradient
94
98
  /* ============================================= */
95
99
  @mixin linear-gradient($direction: top, $start_color: rgba(0, 0, 0, 0.7), $end_color: rgba(0, 0, 0, 0)) {
@@ -99,7 +103,6 @@
99
103
  /* fit-content
100
104
  /* ============================================= */
101
105
  @mixin fit-content {
102
-
103
106
  > *:last-child {
104
107
  margin-bottom: 0;
105
108
  }
@@ -108,7 +111,6 @@
108
111
  /* stretched-link
109
112
  /* ============================================= */
110
113
  @mixin stretched-link {
111
-
112
114
  &:before {
113
115
  position: absolute;
114
116
  top: 0;
@@ -143,7 +145,6 @@
143
145
  align-items: center;
144
146
  line-height: 1.4;
145
147
  cursor: pointer;
146
- border: none;
147
148
  font-weight: variables.$button-font-weight;
148
149
  font-family: variables.$button-font-family;
149
150
  text-transform: variables.$button-text-transform;
@@ -200,7 +201,6 @@
200
201
  align-items: center;
201
202
  line-height: 1.4;
202
203
  cursor: pointer;
203
- border: none;
204
204
  font-weight: variables.$secondary-button-font-weight;
205
205
  font-family: variables.$secondary-button-font-family;
206
206
  text-transform: variables.$secondary-button-text-transform;
@@ -249,3 +249,31 @@
249
249
  }
250
250
  }
251
251
  }
252
+
253
+ @mixin advanced-link {
254
+ all: unset;
255
+ cursor: pointer;
256
+ font-weight: $advanced-link-font-weight;
257
+ font-family: $advanced-link-font-family;
258
+ text-transform: $advanced-link-text-transform;
259
+ letter-spacing: $advanced-link-letter-spacing;
260
+ font-size: $advanced-link-font-size-rem;
261
+ color: $advanced-link-color;
262
+ text-decoration-line: $advanced-link-text-decoration-line !important;
263
+ text-decoration-style: $advanced-link-text-decoration-style;
264
+ text-decoration-color: $advanced-link-text-decoration-color;
265
+ text-decoration-thickness: $advanced-link-text-decoration-thickness;
266
+ text-underline-offset: $advanced-link-underline-offset;
267
+ @include transition;
268
+
269
+ &:visited {
270
+ color: $advanced-link-color;
271
+ }
272
+
273
+ @include hover-focus-active {
274
+ color: $advanced-link-color-hover;
275
+ text-decoration-color: $advanced-link-text-decoration-color-hover;
276
+ background-color: transparent;
277
+ border: none;
278
+ }
279
+ }