@iris.interactive/handcook 2.6.20 → 2.6.23

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 (7) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/public/scripts/components/slider/slider.component.js +3 -3
  4. package/public/scripts/handcook.js +39 -1
  5. package/public/styles/scss/_variables.scss +14 -2
  6. package/public/styles/scss/style.css +161 -2
  7. package/public/styles/style.css +166 -1
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  # Welcome to HandCook 👨‍🍳
2
- ![Version](https://img.shields.io/badge/version-2.6.20-blue.svg?cacheSeconds=2592000)
2
+ ![Version](https://img.shields.io/badge/version-2.6.23-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.6.20",
3
+ "version": "2.6.23",
4
4
  "description": "The web cooking by IRIS Interactive",
5
5
  "main": "./public/scripts/index.js",
6
6
  "scripts": {
package/public/scripts/components/slider/slider.component.js CHANGED
@@ -25,15 +25,15 @@ export class HcSlider {
25
25
 
26
26
  breakpoints = [{
27
27
  name: "medium",
28
- value: 650
28
+ value: 651
29
29
  },
30
30
  {
31
31
  name: "large",
32
- value: 1000
32
+ value: 1001
33
33
  },
34
34
  {
35
35
  name: "xlarge",
36
- value: 1453
36
+ value: 1454
37
37
  }];
38
38
 
39
39
  // Options
package/public/scripts/handcook.js CHANGED
@@ -1 +1,39 @@
1
- import hc_tooltip from"@package_script/components/tooltip/tooltip.component";import hc_smooth_scroll from"@package_script/components/smooth-scroll/smooth-scroll.component";import hc_modal from"@package_script/components/modal/modal.component";import hc_lightbox from"@package_script/components/lightbox/lightbox.component";import hc_dropdown from"@package_script/components/dropdown/dropdown.component";import hc_collapse from"@package_script/components/collapse/collapse.component";import hc_lazyload from"@package_script/components/lazyload/lazyload.component";import hc_tab from"@package_script/components/tab/tab.component";import hc_toggle from"@package_script/components/toggle/toggle.component";import hc_slider from"@package_script/components/slider/slider.component";const Handcook={hc_tooltip:hc_tooltip,hc_smooth_scroll:hc_smooth_scroll,hc_modal:hc_modal,hc_lightbox:hc_lightbox,hc_dropdown:hc_dropdown,hc_collapse:hc_collapse,hc_lazyload:hc_lazyload,hc_tab:hc_tab,hc_toggle:hc_toggle,hc_slider:hc_slider};export default Handcook;
1
+ /*
2
+ * IRIS Interactive
3
+ *
4
+ * NOTICE OF LICENSE
5
+ *
6
+ * This source file is no subject to a specific license
7
+ * but it belongs to the company IRIS Interactive.
8
+ * You can contact IRIS Interactive at the following
9
+ * address: contact@iris-interactive.fr
10
+ *
11
+ * @author Fabien SERRA
12
+ * @date 25/02/2022 12:04
13
+ * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
14
+ */
15
+
16
+ import hc_tooltip from '@package_script/components/tooltip/tooltip.component';
17
+ import hc_smooth_scroll from "@package_script/components/smooth-scroll/smooth-scroll.component";
18
+ import hc_modal from "@package_script/components/modal/modal.component";
19
+ import hc_lightbox from "@package_script/components/lightbox/lightbox.component";
20
+ import hc_dropdown from "@package_script/components/dropdown/dropdown.component";
21
+ import hc_collapse from "@package_script/components/collapse/collapse.component";
22
+ import hc_lazyload from "@package_script/components/lazyload/lazyload.component";
23
+ import hc_tab from "@package_script/components/tab/tab.component";
24
+ import hc_toggle from "@package_script/components/toggle/toggle.component";
25
+ import hc_slider from "@package_script/components/slider/slider.component";
26
+
27
+ const Handcook = {
28
+ hc_tooltip,
29
+ hc_smooth_scroll,
30
+ hc_modal,
31
+ hc_lightbox,
32
+ hc_dropdown,
33
+ hc_collapse,
34
+ hc_lazyload,
35
+ hc_tab,
36
+ hc_toggle,
37
+ hc_slider,
38
+ }
39
+ export default Handcook;
package/public/styles/scss/_variables.scss CHANGED
@@ -310,19 +310,21 @@ $switch-off: var(--iris--switch--color-off);
310
310
 
311
311
  // Highlight
312
312
  $highlight-color: var(--iris--highlight--color);
313
+ $highlight-title-color: var(--iris--highlight--color-title, var(--iris--highlight--color));
313
314
  $highlight-background-color: var(--iris--highlight--background-color);
314
315
  $highlight-link-color: var(--iris--highlight--color-link);
315
- $highlight-title-color: var(--iris--highlight--color-title);
316
316
  $highlight-link-color-hover: var(--iris--highlight--color-link-hover);
317
317
 
318
318
  // Single SIT highlight
319
319
  $detail-sit-highlight-color: var(--iris--detail-sit-highlight--color);
320
+ $detail-sit-highlight-color-title: var(--iris--detail-sit-highlight--color-title, var(--iris--detail-sit-highlight--color));
320
321
  $detail-sit-highlight-background-color: var(--iris--detail-sit-highlight--background-color);
321
322
  $detail-sit-highlight-link-color: var(--iris--detail-sit-highlight--color-link);
322
323
  $detail-sit-highlight-link-color-hover: var(--iris--detail-sit-highlight--color-link-hover);
323
324
 
324
325
  // Strate Full
325
326
  $stratefull-color: var(--iris--stratefull--color);
327
+ $stratefull-title-color: var(--iris--stratefull--color-title, var(--iris--stratefull--color));
326
328
  $stratefull-background-color: var(--iris--stratefull--background-color);
327
329
  $stratefull-link-color: var(--iris--stratefull--color-link);
328
330
  $stratefull-link-color-hover: var(--iris--stratefull--color-link-hover);
@@ -333,6 +335,7 @@ $stratefull-content-width: var(--iris--stratefull--content-width);
333
335
 
334
336
  // Brochures form
335
337
  $brochure-form-color: var(--iris--brochure-form--color);
338
+ $brochure-form-color-title: var(--iris--brochure-form--color-title, var(--iris--brochure-form--color));
336
339
  $brochure-form-background-color: var(--iris--brochure-form--background-color);
337
340
  $brochure-form-link-color: var(--iris--brochure-form--color-link);
338
341
  $brochure-form-link-color-hover: var(--iris--brochure-form--color-link-hover);
@@ -344,6 +347,7 @@ $brochure-form-field-color: var(--iris--brochure-form-field--color);
344
347
 
345
348
  // Alternative content
346
349
  $alternative-content-color: var(--iris--alternative-content--color);
350
+ $alternative-content-color-title: var(--iris--alternative-content--color-title, var(--iris--alternative-content--color));
347
351
  $alternative-content-background-color: var(--iris--alternative-content--background-color);
348
352
  $alternative-content-link-color: var(--iris--alternative-content--color-link);
349
353
  $alternative-content-link-color-hover: var(--iris--alternative-content--color-link-hover);
@@ -351,6 +355,7 @@ $alternative-content-link-color-hover: var(--iris--alternative-content--color-li
351
355
 
352
356
  // Relative content
353
357
  $relative-content-color: var(--iris--relative-content--color);
358
+ $relative-content-color-title: var(--iris--relative-content--color-title, var(--iris--relative-content--color));
354
359
  $relative-content-background-color: var(--iris--relative-content--background-color);
355
360
  $relative-content-link-color: var(--iris--relative-content--color-link);
356
361
  $relative-content-link-color-hover: var(--iris--relative-content--color-link-hover);
@@ -358,6 +363,7 @@ $relative-content-link-color-hover: var(--iris--relative-content--color-link-hov
358
363
 
359
364
  // Video highlight
360
365
  $video-highlight-color: var(--iris--video-highlight--color);
366
+ $video-highlight-color-title: var(--iris--video-highlight--color-title, var(--iris--video-highlight--color));
361
367
  $video-highlight-background-color: var(--iris--video-highlight--background-color);
362
368
  $video-highlight-link-color: var(--iris--video-highlight--color-link);
363
369
  $video-highlight-link-color-hover: var(--iris--video-highlight--color-link-hover);
@@ -365,6 +371,7 @@ $video-highlight-link-color-hover: var(--iris--video-highlight--color-link-hover
365
371
 
366
372
  // Authors
367
373
  $authors-color: var(--iris--authors--color);
374
+ $authors-color-title: var(--iris--authors--color-title, var(--iris--authors--color));
368
375
  $authors-background-color: var(--iris--authors--background-color);
369
376
  $authors-link-color: var(--iris--authors--color-link);
370
377
  $authors-link-color-hover: var(--iris--authors--color-link-hover);
@@ -372,20 +379,23 @@ $authors-link-color-hover: var(--iris--authors--color-link-hover);
372
379
 
373
380
  // Ma Plage
374
381
  $ma-plage-color: var(--iris--ma-plage--color);
382
+ $ma-plage-color-title: var(--iris--ma-plage--color-title, var(--iris--ma-plage--color));
375
383
  $ma-plage-background-color: var(--iris--ma-plage--background-color);
376
384
  $ma-plage-link-color: var(--iris--ma-plage--color-link);
377
385
  $ma-plage-link-color-hover: var(--iris--ma-plage--color-link-hover);
378
386
 
379
387
 
380
388
  // Tides
381
- $tides-background-color: var(--iris--tides--background-color);
382
389
  $tides-color: var(--iris--tides--color);
390
+ $tides-color-title: var(--iris--tides--color-title, var(--iris--tides--color));
391
+ $tides-background-color: var(--iris--tides--background-color);
383
392
  $tides-link-color: var(--iris--tides--color-link);
384
393
  $tides-link-color-hover: var(--iris--tides--color-link-hover);
385
394
 
386
395
 
387
396
  // Snow
388
397
  $snow-color: var(--iris--snow--color);
398
+ $snow-color-title: var(--iris--snow--color-title, var(--iris--snow--color));
389
399
  $snow-background-color: var(--iris--snow--background-color);
390
400
  $snow-link-color: var(--iris--snow--color-link);
391
401
  $snow-link-color-hover: var(--iris--snow--color-link-hover);
@@ -393,12 +403,14 @@ $snow-link-color-hover: var(--iris--snow--color-link-hover);
393
403
 
394
404
  // How to come
395
405
  $how-to-come-color: var(--iris--how-to-come--color);
406
+ $how-to-come-color-title: var(--iris--how-to-come--color-title, var(--iris--how-to-come--color));
396
407
  $how-to-come-background-color: var(--iris--how-to-come--background-color);
397
408
  $how-to-come-link-color: var(--iris--how-to-come--color-link);
398
409
  $how-to-come-link-color-hover: var(--iris--how-to-come--color-link-hover);
399
410
 
400
411
  // Trip
401
412
  $trip-color: var(--iris--trip--color);
413
+ $trip-color-title: var(--iris--trip--color-title, var(--iris--trip--color));
402
414
  $trip-background-color: var(--iris--trip--background-color);
403
415
  $trip-link-color: var(--iris--trip--color-link);
404
416
  $trip-link-color-hover: var(--iris--trip--color-link-hover);
package/public/styles/scss/style.css CHANGED
@@ -11,7 +11,68 @@
11
11
  * @author Lucas ROCHE
12
12
  * @date 27/01/2022 14:32
13
13
  * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
14
- *//*!
14
+ */
15
+ /*
16
+ * Created by IRIS Interactive
17
+ * User : IRIS Interactive
18
+ */
19
+ /* Layout
20
+ / ================================================== */
21
+ /* Gutter
22
+ / ================================================== */
23
+ /* Margin
24
+ / ================================================== */
25
+ /* Margin
26
+ / ================================================== */
27
+ /* Breakpoint
28
+ / ================================================== */
29
+ /* Global
30
+ / ================================================== */
31
+ /* Notifications
32
+ / ================================================== */
33
+ /* Difficulty
34
+ / ================================================== */
35
+ /*
36
+ * Created by IRIS Interactive
37
+ * User : IRIS Interactive
38
+ */
39
+ /* Main gutter
40
+ / ================================================== */
41
+ /* Breakpoints
42
+ /* ============================================= */
43
+ /* display flex
44
+ /* ============================================= */
45
+ /* Hover - TODO
46
+ /* ============================================= */
47
+ /* Touch
48
+ /* ============================================= */
49
+ /* Clear
50
+ /* ============================================= */
51
+ /*
52
+ * Created by IRIS Interactive
53
+ * User : IRIS Interactive
54
+ */
55
+ /* Transition
56
+ /* ============================================= */
57
+ /* Hover
58
+ /* ============================================= */
59
+ /* Ellipsis
60
+ /* ============================================= */
61
+ /* Adaptive height block
62
+ /* ============================================= */
63
+ /* Line clamp
64
+ /* ============================================= */
65
+ /* Object fit
66
+ /* ============================================= */
67
+ /* Linear Gradient
68
+ /* ============================================= */
69
+ /* fit-content
70
+ /* ============================================= */
71
+ /* stretched-link
72
+ /* ============================================= */
73
+ /* sr-only
74
+ /* ============================================= */
75
+ /*!
15
76
  * IRIS Interactive
16
77
  *
17
78
  * NOTICE OF LICENSE
@@ -24,4 +85,102 @@
24
85
  * @author Lucas ROCHE
25
86
  * @date 28/01/2022 07:41
26
87
  * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
27
- */.stretched-link:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:auto;content:"";background-color:transparent}.list-flex{display:flex;flex-wrap:wrap;margin-bottom:0}.list-flex>*{list-style-type:none;margin:0 10px 10px 0}.list-flex>:last-child{margin-right:0}@-webkit-keyframes loader{100%{transform:rotate(360deg)}}@keyframes loader{100%{transform:rotate(360deg)}}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.text-icon{display:inline-flex;align-items:center}.text-icon:before{margin-right:5px}.text-icon:after{margin-left:5px}.hover-item img{transition:.2s ease;will-change:transform}.hover-item:hover img{transform:scale(1.02)}.is-opened{color:#009e55}.soon-closed{color:#ff890e}.is-closed{color:#f33}
88
+ */
89
+ /* Font icon
90
+ /* ============================================= */
91
+ /* Font size
92
+ /* ============================================= */
93
+ /*
94
+ * Created by IRIS Interactive
95
+ * User : IRIS Interactive
96
+ */
97
+ /* Utils classes
98
+ /* ============================================= */
99
+ .stretched-link:before {
100
+ position: absolute;
101
+ top: 0;
102
+ right: 0;
103
+ bottom: 0;
104
+ left: 0;
105
+ z-index: 1;
106
+ pointer-events: auto;
107
+ content: "";
108
+ background-color: transparent;
109
+ }
110
+
111
+ /* ============================================= */
112
+ .list-flex {
113
+ display: flex;
114
+ flex-wrap: wrap;
115
+ margin-bottom: 0;
116
+ }
117
+ .list-flex > * {
118
+ list-style-type: none;
119
+ margin: 0 10px 10px 0;
120
+ }
121
+ .list-flex > *:last-child {
122
+ margin-right: 0;
123
+ }
124
+
125
+ /* Animations
126
+ /* ============================================= */
127
+ @-webkit-keyframes loader {
128
+ 100% {
129
+ transform: rotate(360deg);
130
+ }
131
+ }
132
+ @keyframes loader {
133
+ 100% {
134
+ transform: rotate(360deg);
135
+ }
136
+ }
137
+ /* Sr-only
138
+ /* ============================================= */
139
+ .sr-only {
140
+ clip: rect(0, 0, 0, 0);
141
+ border-width: 0;
142
+ height: 1px;
143
+ margin: -1px;
144
+ overflow: hidden;
145
+ padding: 0;
146
+ position: absolute;
147
+ white-space: nowrap;
148
+ width: 1px;
149
+ }
150
+
151
+ /* Text with icon before
152
+ /* ============================================= */
153
+ .text-icon {
154
+ display: inline-flex;
155
+ align-items: center;
156
+ }
157
+ .text-icon:before {
158
+ margin-right: 5px;
159
+ }
160
+ .text-icon:after {
161
+ margin-left: 5px;
162
+ }
163
+
164
+ /* Block with img animated on hover
165
+ /* ============================================= */
166
+ .hover-item img {
167
+ transition: 0.2s ease;
168
+ will-change: transform;
169
+ }
170
+ .hover-item:hover img {
171
+ transform: scale(1.02);
172
+ }
173
+
174
+ /* Opening
175
+ /* ============================================= */
176
+ .is-opened {
177
+ color: #009e55;
178
+ }
179
+
180
+ .soon-closed {
181
+ color: #ff890e;
182
+ }
183
+
184
+ .is-closed {
185
+ color: #f33;
186
+ }
package/public/styles/style.css CHANGED
@@ -12,6 +12,66 @@
12
12
  * @date 27/01/2022 14:32
13
13
  * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
14
14
  */
15
+ /*
16
+ * Created by IRIS Interactive
17
+ * User : IRIS Interactive
18
+ */
19
+ /* Layout
20
+ / ================================================== */
21
+ /* Gutter
22
+ / ================================================== */
23
+ /* Margin
24
+ / ================================================== */
25
+ /* Margin
26
+ / ================================================== */
27
+ /* Breakpoint
28
+ / ================================================== */
29
+ /* Global
30
+ / ================================================== */
31
+ /* Notifications
32
+ / ================================================== */
33
+ /* Difficulty
34
+ / ================================================== */
35
+ /*
36
+ * Created by IRIS Interactive
37
+ * User : IRIS Interactive
38
+ */
39
+ /* Main gutter
40
+ / ================================================== */
41
+ /* Breakpoints
42
+ /* ============================================= */
43
+ /* display flex
44
+ /* ============================================= */
45
+ /* Hover
46
+ /* ============================================= */
47
+ /* Touch
48
+ /* ============================================= */
49
+ /* Clear
50
+ /* ============================================= */
51
+ /*
52
+ * Created by IRIS Interactive
53
+ * User : IRIS Interactive
54
+ */
55
+ /* Transition
56
+ /* ============================================= */
57
+ /* Animate
58
+ /* ============================================= */
59
+ /* Ellipsis
60
+ /* ============================================= */
61
+ /* Adaptive height block
62
+ /* ============================================= */
63
+ /* Line clamp
64
+ /* ============================================= */
65
+ /* Object fit
66
+ /* ============================================= */
67
+ /* Linear Gradient
68
+ /* ============================================= */
69
+ /* fit-content
70
+ /* ============================================= */
71
+ /* stretched-link
72
+ /* ============================================= */
73
+ /* sr-only
74
+ /* ============================================= */
15
75
  /*!
16
76
  * IRIS Interactive
17
77
  *
@@ -25,4 +85,109 @@
25
85
  * @author Lucas ROCHE
26
86
  * @date 28/01/2022 07:41
27
87
  * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
28
- */.stretched-link:before{background-color:transparent;bottom:0;content:"";left:0;pointer-events:auto;position:absolute;right:0;top:0;z-index:1}.list-flex{display:flex;flex-wrap:wrap;margin-bottom:0}.list-flex>*{list-style-type:none;margin:0 10px 10px 0}.list-flex>:last-child{margin-right:0}@-webkit-keyframes loader{to{transform:rotate(1turn)}}@keyframes loader{to{transform:rotate(1turn)}}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.text-icon{align-items:center;display:inline-flex}.text-icon:before{margin-right:5px}.text-icon:after{margin-left:5px}.hover-item img{transition:.2s ease;will-change:transform}.hover-item:hover img{transform:scale(1.02)}.is-opened{color:#009e55}.soon-closed{color:#ff890e}.is-closed{color:#f33}.fi--color:before,.fi-color:after{color:var(--iris--icon--color)}
88
+ */
89
+ /* Font icon
90
+ /* ============================================= */
91
+ /* Font size
92
+ /* ============================================= */
93
+ /*
94
+ * Created by IRIS Interactive
95
+ * User : IRIS Interactive
96
+ */
97
+ /* Utils classes
98
+ /* ============================================= */
99
+ .stretched-link:before {
100
+ position: absolute;
101
+ top: 0;
102
+ right: 0;
103
+ bottom: 0;
104
+ left: 0;
105
+ z-index: 1;
106
+ pointer-events: auto;
107
+ content: "";
108
+ background-color: transparent;
109
+ }
110
+
111
+ /* ============================================= */
112
+ .list-flex {
113
+ display: flex;
114
+ flex-wrap: wrap;
115
+ margin-bottom: 0;
116
+ }
117
+ .list-flex > * {
118
+ list-style-type: none;
119
+ margin: 0 10px 10px 0;
120
+ }
121
+ .list-flex > *:last-child {
122
+ margin-right: 0;
123
+ }
124
+
125
+ /* Animations
126
+ /* ============================================= */
127
+ @-webkit-keyframes loader {
128
+ 100% {
129
+ transform: rotate(360deg);
130
+ }
131
+ }
132
+ @keyframes loader {
133
+ 100% {
134
+ transform: rotate(360deg);
135
+ }
136
+ }
137
+ /* Sr-only
138
+ /* ============================================= */
139
+ .sr-only {
140
+ clip: rect(0, 0, 0, 0);
141
+ border-width: 0;
142
+ height: 1px;
143
+ margin: -1px;
144
+ overflow: hidden;
145
+ padding: 0;
146
+ position: absolute;
147
+ white-space: nowrap;
148
+ width: 1px;
149
+ }
150
+
151
+ /* Text with icon before
152
+ /* ============================================= */
153
+ .text-icon {
154
+ display: inline-flex;
155
+ align-items: center;
156
+ }
157
+ .text-icon:before {
158
+ margin-right: 5px;
159
+ }
160
+ .text-icon:after {
161
+ margin-left: 5px;
162
+ }
163
+
164
+ /* Block with img animated on hover
165
+ /* ============================================= */
166
+ .hover-item img {
167
+ transition: 0.2s ease;
168
+ will-change: transform;
169
+ }
170
+ .hover-item:hover img {
171
+ transform: scale(1.02);
172
+ }
173
+
174
+ /* Opening
175
+ /* ============================================= */
176
+ .is-opened {
177
+ color: #009e55;
178
+ }
179
+
180
+ .soon-closed {
181
+ color: #ff890e;
182
+ }
183
+
184
+ .is-closed {
185
+ color: #f33;
186
+ }
187
+
188
+ /* Font
189
+ /* ============================================= */
190
+ .fi--color:before,
191
+ .fi-color:after {
192
+ color: var(--iris--icon--color);
193
+ }