@iris.interactive/handcook 2.3.2 → 2.3.7

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 (16) hide show
  1. package/package.json +1 -1
  2. package/public/styles/scss/_utils.scss +6 -0
  3. package/public/styles/scss/_variables.scss +1 -1
  4. package/public/styles/scss/mixins/_mixin-font.scss +1 -1
  5. package/public/styles/scss/mixins/_mixin-style.scss +2 -2
  6. package/public/styles/style.css +6 -0
  7. package/resources/assets/scripts/SmoothScroll.js +0 -41
  8. package/resources/assets/styles/_utils.scss +0 -96
  9. package/resources/assets/styles/_variables.scss +0 -419
  10. package/resources/assets/styles/handcook.scss +0 -20
  11. package/resources/assets/styles/mixins/_mixin-font.scss +0 -43
  12. package/resources/assets/styles/mixins/_mixin-layout.scss +0 -84
  13. package/resources/assets/styles/mixins/_mixin-style.scss +0 -133
  14. package/resources/index.html +0 -39
  15. package/resources/index.js +0 -18
  16. package/resources/style.scss +0 -21
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iris.interactive/handcook",
3
- "version": "2.3.2",
3
+ "version": "2.3.7",
4
4
  "description": "The web cooking by IRIS Interactive",
5
5
  "main": "./public/scripts/index.js",
6
6
  "scripts": {
package/public/styles/scss/_utils.scss CHANGED
@@ -94,3 +94,9 @@
94
94
  .is-closed {
95
95
  color: $c-error;
96
96
  }
97
+
98
+ /* Font
99
+ /* ============================================= */
100
+ .fi--color {
101
+ color: var(--iris--icon--color);
102
+ }
package/public/styles/scss/_variables.scss CHANGED
@@ -131,7 +131,7 @@ $advanced-link-font-size-rem: var(--iris--advanced-link--font-size--rem);
131
131
  $advanced-link-color: var(--iris--advanced-link--color);
132
132
  $advanced-link-color-hover: var(--iris--advanced-link--color-hover);
133
133
  $advanced-link-text-decoration: var(--iris--advanced-link--text-decoration, none);
134
- $advanced-link-underline-offset: var(--iris--advanced-link--underline-offset, 0);
134
+ $advanced-link-underline-offset: var(--iris--advanced-link--underline-offset, 2px);
135
135
 
136
136
 
137
137
  // List
package/public/styles/scss/mixins/_mixin-font.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  * address: contact@iris-interactive.fr
10
10
  *
11
11
  * @author Lucas ROCHE
12
- * @date 28/01/2022 12:40
12
+ * @date 28/01/2022 07:41
13
13
  * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
14
14
  */
15
15
  @use "sass:math";
package/public/styles/scss/mixins/_mixin-style.scss CHANGED
@@ -89,8 +89,8 @@
89
89
 
90
90
  /* Linear Gradient
91
91
  /* ============================================= */
92
- @mixin linear-gradient {
93
- background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
92
+ @mixin linear-gradient($direction: top, $start_color: rgba(0, 0, 0, 0.7), $end_color: rgba(0, 0, 0, 0)) {
93
+ background: linear-gradient(to $direction, $start_color 0%, $end_color 100%);
94
94
  }
95
95
 
96
96
  /* fit-content
package/public/styles/style.css CHANGED
@@ -184,3 +184,9 @@
184
184
  .is-closed {
185
185
  color: #f33;
186
186
  }
187
+
188
+ /* Font
189
+ /* ============================================= */
190
+ .fi--color {
191
+ color: var(--iris--icon--color);
192
+ }
package/resources/assets/scripts/SmoothScroll.js DELETED
@@ -1,41 +0,0 @@
1
- const easeInCubic = function (t) { return t*t*t }
2
-
3
- const scrollToElem = (startTime, currentTime, duration, scrollEndElemTop, startScrollOffset) => {
4
- const runtime = currentTime - startTime;
5
- let progress = runtime / duration;
6
-
7
- progress = Math.min(progress, 1);
8
-
9
- const ease = easeInCubic(progress);
10
-
11
- window.scroll(0, startScrollOffset + (scrollEndElemTop * ease));
12
- if(runtime < duration){
13
- requestAnimationFrame((timestamp) => {
14
- const currentTime = timestamp || new Date().getTime();
15
- scrollToElem(startTime, currentTime, duration, scrollEndElemTop, startScrollOffset);
16
- })
17
- }
18
- }
19
-
20
- const SmoothScroll = (triggerAttribute, durationAnimation = 1000 ) => {
21
- const triggerElement = document.querySelectorAll( triggerAttribute );
22
- triggerElement.forEach( ( element, key ) => {
23
- element.addEventListener( 'click', ( event ) => {
24
- event.preventDefault();
25
- const target = ( element.getAttribute( 'href' ) != '' ) ? document.querySelector( element.getAttribute( 'href' ) ) : document.querySelector( element.dataset.href );
26
- const shift = ( element.dataset.shift !== undefined ) ? element.dataset.shift : 0;
27
-
28
- const anim = requestAnimationFrame((timestamp) => {
29
- const stamp = timestamp || new Date().getTime();
30
- const start = stamp;
31
-
32
- const startScrollOffset = window.pageYOffset;
33
- const scrollEndElemTop = target.getBoundingClientRect().top - shift;
34
-
35
- scrollToElem(start, stamp, durationAnimation, scrollEndElemTop, startScrollOffset);
36
- })
37
- } );
38
- } );
39
- }
40
-
41
- export default SmoothScroll;
package/resources/assets/styles/_utils.scss DELETED
@@ -1,96 +0,0 @@
1
- /*
2
- * Created by IRIS Interactive
3
- * User : IRIS Interactive
4
- */
5
-
6
- /* Utils classes
7
- /* ============================================= */
8
- .stretched-link {
9
- @include stretched-link;
10
- }
11
-
12
-
13
- /* ============================================= */
14
- .list-flex {
15
- display: flex;
16
- flex-wrap: wrap;
17
- margin-bottom: 0;
18
-
19
- > * {
20
- list-style-type: none;
21
- margin: 0 10px 10px 0;
22
-
23
- &:last-child {
24
- margin-right: 0;
25
- }
26
- }
27
- }
28
-
29
- /* Animations
30
- /* ============================================= */
31
- @keyframes loader {
32
-
33
- 100% {
34
- transform: rotate(360deg);
35
- }
36
- }
37
-
38
- /* Sr-only
39
- /* ============================================= */
40
- .sr-only {
41
- clip: rect(0, 0, 0, 0);
42
- border-width: 0;
43
- height: 1px;
44
- margin: -1px;
45
- overflow: hidden;
46
- padding: 0;
47
- position: absolute;
48
- white-space: nowrap;
49
- width: 1px;
50
- }
51
-
52
- /* Text with icon before
53
- /* ============================================= */
54
- .text-icon {
55
- display: inline-flex;
56
- align-items: center;
57
-
58
- &:before {
59
- margin-right: 5px;
60
- }
61
-
62
- // If icon after
63
- &:after {
64
- margin-left: 5px;
65
- }
66
- }
67
-
68
- /* Block with img animated on hover
69
- /* ============================================= */
70
- .hover-item {
71
-
72
- img {
73
- @include transition;
74
- will-change: transform;
75
- }
76
-
77
- &:hover {
78
- img {
79
- @include animate;
80
- }
81
- }
82
- }
83
-
84
- /* Opening
85
- /* ============================================= */
86
- .is-opened {
87
- color: $c-success;
88
- }
89
-
90
- .soon-closed {
91
- color: $c-warning;
92
- }
93
-
94
- .is-closed {
95
- color: $c-error;
96
- }
package/resources/assets/styles/_variables.scss DELETED
@@ -1,419 +0,0 @@
1
- /*
2
- * Created by IRIS Interactive
3
- * User : IRIS Interactive
4
- */
5
- @use "sass:math";
6
-
7
- /* Layout
8
- / ================================================== */
9
- $container: 1220px;
10
- $article: 800px;
11
- $sidebar: 360px;
12
-
13
- $header: 120px; //TODO: Hérité du plugin customer ?
14
- $header-small: 80px; //TODO: Hérité du plugin customer ?
15
-
16
-
17
- /* Gutter
18
- / ================================================== */
19
- $gutter: 40px;
20
- $gutter-large: $gutter*2;
21
- $gutter-medium: 20px;
22
- $gutter-small: 20px;
23
-
24
-
25
- /* Margin
26
- / ================================================== */
27
- $section-margin-top: 100px;
28
- $section-margin-bottom: 60px;
29
- $section-margin-top-small: 40px;
30
- $section-margin-bottom-small: 40px;
31
- $text-margin-bottom: 20px;
32
-
33
- $title-margin-top: 60px;
34
- $title-margin-bottom: 40px;
35
- $title-margin-top-small: 40px;
36
- $title-margin-bottom-small: 20px;
37
-
38
- $block-margin-top: 60px;
39
- $block-margin-top-medium: 60px;
40
- $block-margin-top-small: 30px;
41
- $block-margin-bottom: 60px;
42
- $block-margin-bottom-medium: 60px;
43
- $block-margin-bottom-small: 30px;
44
-
45
-
46
- /* Margin
47
- / ================================================== */
48
- $margin-xlarge: 8%;
49
- $margin-large: 60px;
50
- $margin-medium: 40px;
51
- $margin-small: 20px;
52
- $margin-xsmall: 20px;
53
-
54
- $viewport-borders: (
55
- "large": $margin-large,
56
- "medium": $margin-medium,
57
- "small": $margin-small,
58
- "xsmall": $margin-xsmall,
59
- );
60
-
61
-
62
- /* Breakpoint
63
- / ================================================== */
64
- $breakpoint-desktop: 1000.1px; // min-width
65
- $breakpoint-xlarge: math.div($container, 1 - math.div($margin-xlarge, 100%) * 2)+1; // min-width
66
- $breakpoint-large: math.div($container, 1 - math.div($margin-xlarge, 100%) * 2); // max-width
67
- $breakpoint-medium: 1000px; // max-width
68
- $breakpoint-small: 650px; // max-width
69
- $breakpoint-xsmall: 370px; // max-width
70
-
71
-
72
- /* Global
73
- / ================================================== */
74
- $font-family: var(--iris--global--font-family);
75
- $font-weight: var(--iris--global--font-weight);
76
- $font-size: var(--iris--global--font-size-regular);
77
- $font-size--rem: var(--iris--global--font-size-regular--rem);
78
- $line-height: 1.75;
79
- $color: var(--iris--global--color);
80
- $background-color: var(--iris--global--background-color);
81
-
82
- $border-color: var(--iris--global--border-color);
83
- $border-radius: var(--iris--global--border-radius);
84
- $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);
85
-
86
- $font-size-xsmall: var(--iris--global--font-size-xsmall);
87
- $font-size-xsmall--rem: var(--iris--global--font-size-xsmall--rem);
88
- $font-size-small: var(--iris--global--font-size-small);
89
- $font-size-small--rem: var(--iris--global--font-size-small--rem);
90
- $font-size-regular: $font-size;
91
- $font-size-regular--rem: $font-size--rem;
92
- $font-size-large: var(--iris--global--font-size-large);
93
- $font-size-large--rem: var(--iris--global--font-size-large--rem);
94
- $font-size-large--small: var(--iris--global--font-size-large--small);
95
- $font-size-large--small--rem: var(--iris--global--font-size-large--small--rem);
96
- $font-size-extra-large: var(--iris--global--font-size-extra-large);
97
- $font-size-extra-large--rem: var(--iris--global--font-size-extra-large--rem);
98
- $font-size-extra-large--small: var(--iris--global--font-size-extra-large--small);
99
- $font-size-extra-large--small--rem: var(--iris--global--font-size-extra-large--small--rem);
100
-
101
-
102
- //Icon
103
- $icon-color: var(--iris--icon--color);
104
-
105
-
106
- //Rank
107
- $rank-color: #ffc400; // var(--iris--rank--color)
108
-
109
-
110
- //Meta
111
- $meta-color: var(--iris--meta--color);
112
- $meta-font-size: $font-size-small;
113
- $meta-font-size--rem: $font-size-small--rem;
114
-
115
- // Links
116
- $link-color: var(--iris--link--color);
117
- $link-color-hover: var(--iris--link--color-hover);
118
- $link-text-decoration: var(--iris--link--text-decoration, none);
119
- $link-box-shadow: var(--iris--link--box-shadow, none);
120
- $link-underline-offset: var(--iris--link--underline-offset, 2px);
121
- $link-font-weight: var(--iris--link--font-weight);
122
-
123
-
124
- // Advanced Links
125
- $advanced-link-font-weight: var(--iris--advanced-link--font-weight);
126
- $advanced-link-font-family: var(--iris--advanced-link--font-family);
127
- $advanced-link-text-transform: var(--iris--advanced-link--text-transform);
128
- $advanced-link-letter-spacing: var(--iris--advanced-link--letter-spacing);
129
- $advanced-link-font-size: var(--iris--advanced-link--font-size);
130
- $advanced-link-font-size-rem: var(--iris--advanced-link--font-size--rem);
131
- $advanced-link-color: var(--iris--advanced-link--color);
132
- $advanced-link-color-hover: var(--iris--advanced-link--color-hover);
133
- $advanced-link-text-decoration: var(--iris--advanced-link--text-decoration, none);
134
- $advanced-link-underline-offset: var(--iris--advanced-link--underline-offset, 0);
135
-
136
-
137
- // List
138
- $list-color: var(--iris--list--color);
139
- $list-style-type: var(--iris--list--style-type, 50%);
140
- $list-padding-left: calc(#{$font-size} * 1px + 10px);
141
-
142
-
143
- //Heading
144
- $h1-font-family: var(--iris--h1--font-family);
145
- $h1-font-weight: var(--iris--h1--font-weight, 400);
146
- $h1-font-size: var(--iris--h1--font-size);
147
- $h1-font-size--rem: var(--iris--h1--font-size--rem);
148
- $h1-font-size-medium: var(--iris--h1--font-size--medium);
149
- $h1-font-size-medium--rem: var(--iris--h1--font-size--medium--rem);
150
- $h1-font-size-small: var(--iris--h1--font-size--small);
151
- $h1-font-size-small--rem: var(--iris--h1--font-size--small--rem);
152
- $h1-color: var(--iris--h1--color);
153
- $h1-text-align: var(--iris--h1--text-align);
154
- $h1-text-transform: var(--iris--h1--text-transform);
155
-
156
- $h2-font-family: var(--iris--h2--font-family);
157
- $h2-font-weight: var(--iris--h2--font-weight, 400);
158
- $h2-font-size: var(--iris--h2--font-size);
159
- $h2-font-size--rem: var(--iris--h2--font-size--rem);
160
- $h2-font-size-small: var(--iris--h2--font-size--small);
161
- $h2-font-size-small--rem: var(--iris--h2--font-size--small--rem);
162
- $h2-color: var(--iris--h2--color);
163
- $h2-text-align: var(--iris--h2--text-align);
164
- $h2-text-transform: var(--iris--h2--text-transform);
165
-
166
- $h3-font-family: var(--iris--h3--font-family);
167
- $h3-font-weight: var(--iris--h3--font-weight, 400);
168
- $h3-font-size: var(--iris--h3--font-size);
169
- $h3-font-size--rem: var(--iris--h3--font-size--rem);
170
- $h3-font-size-medium: var(--iris--h3--font-size--medium);
171
- $h3-font-size-medium--rem: var(--iris--h3--font-size--medium--rem);
172
- $h3-font-size-small: var(--iris--h3--font-size--small);
173
- $h3-font-size-small--rem: var(--iris--h3--font-size--small--rem);
174
- $h3-color: var(--iris--h3--color);
175
- $h3-text-align: var(--iris--h3--text-align);
176
- $h3-text-transform: var(--iris--h3--text-transform);
177
-
178
- $h4-font-family: var(--iris--h4--font-family);
179
- $h4-font-weight: var(--iris--h4--font-weight, 400);
180
- $h4-font-size: var(--iris--h4--font-size);
181
- $h4-font-size--rem: var(--iris--h4--font-size--rem);
182
- $h4-font-size-medium: var(--iris--h4--font-size--medium);
183
- $h4-font-size-medium--rem: var(--iris--h4--font-size--medium--rem);
184
- $h4-font-size-small: var(--iris--h4--font-size--small);
185
- $h4-font-size-small--rem: var(--iris--h4--font-size--small--rem);
186
- $h4-color: var(--iris--h4--color);
187
- $h4-text-align: var(--iris--h4--text-align);
188
- $h4-text-transform: var(--iris--h4--text-transform);
189
-
190
- $h5-font-family: var(--iris--h5--font-family);
191
- $h5-font-weight: var(--iris--h5--font-weight, 400);
192
- $h5-font-size: var(--iris--h5--font-size);
193
- $h5-font-size--rem: var(--iris--h5--font-size--rem);
194
- $h5-font-size-medium: var(--iris--h5--font-size--medium);
195
- $h5-font-size-medium--rem: var(--iris--h5--font-size--medium--rem);
196
- $h5-font-size-small: var(--iris--h5--font-size--small);
197
- $h5-font-size-small--rem: var(--iris--h5--font-size--small--rem);
198
- $h5-color: var(--iris--h5--color);
199
- $h5-text-align: var(--iris--h5--text-align);
200
- $h5-text-transform: var(--iris--h5--text-transform);
201
-
202
- $h6-font-family: var(--iris--h6--font-family);
203
- $h6-font-weight: var(--iris--h6--font-weight, 400);
204
- $h6-font-size: var(--iris--h6--font-size);
205
- $h6-font-size--rem: var(--iris--h6--font-size--rem);
206
- $h6-font-size-medium: var(--iris--h6--font-size--medium);
207
- $h6-font-size-medium--rem: var(--iris--h6--font-size--medium--rem);
208
- $h6-font-size-small: var(--iris--h6--font-size--small);
209
- $h6-font-size-small--rem: var(--iris--h6--font-size--small--rem);
210
- $h6-color: var(--iris--h6--color);
211
- $h6-text-align: var(--iris--h6--text-align);
212
- $h6-text-transform: var(--iris--h6--text-transform);
213
-
214
-
215
- // Blockquote
216
- $blockquote-color: var(--iris--blockquote--color);
217
- $blockquote-font-family: var(--iris--blockquote--font-family);
218
- $blockquote-font-weight: var(--iris--blockquote--font-weight);
219
- $blockquote-font-style: var(--iris--blockquote--font-style);
220
- $blockquote-font-size: var(--iris--blockquote--font-size);
221
- $blockquote-font-size--rem: var(--iris--blockquote--font-size--rem);
222
- $blockquote-font-size-small: var(--iris--blockquote--font-size--small);
223
- $blockquote-font-size-small--rem: var(--iris--blockquote--font-size--small--rem);
224
- $blockquote-padding-left: calc(#{$blockquote-font-size} * 1px + 20px);
225
- $blockquote-text-align: var(--iris--blockquote--text-align);
226
-
227
-
228
- // Excerpt
229
- $excerpt-font-family: var(--iris--excerpt--font-family);
230
- $excerpt-font-weight: var(--iris--excerpt--font-weight);
231
- $excerpt-font-style: var(--iris--excerpt--font-style);
232
- $excerpt-font-size: var(--iris--excerpt--font-size);
233
- $excerpt-font-size--rem: var(--iris--excerpt--font-size--rem);
234
- $excerpt-font-size-small: var(--iris--excerpt--font-size--small);
235
- $excerpt-font-size-small--rem: var(--iris--excerpt--font-size--small--rem);
236
- $excerpt-color: var(--iris--excerpt--color);
237
- $excerpt-text-align: var(--iris--excerpt--text-align);
238
-
239
-
240
- // Separator
241
- $hr-height: var(--iris--hr--height);
242
- $hr-width: var(--iris--hr--width);
243
-
244
-
245
- // Table
246
- $table-thead-color: var(--iris--table--thead--color);
247
- $table-thead-background-color: var(--iris--table--thead--background-color);
248
- $table-even-background-color: var(--iris--table--even--background-color);
249
-
250
- // Form
251
- $form-field-color: var(--iris--form-field--color);
252
- $form-field-background-color: var(--iris--form-field--background-color, transparent);
253
- $form-field-border-color: var(--iris--form-field--border-color, transparent);
254
- $form-field-border-style: var(--iris--form-field--border-style);
255
- $form-field-border: var(--iris--form-field--border);
256
- $form-field-height: var(--iris--form-field--height);
257
- $form-field-border-radius: var(--iris--form-field--border-radius);
258
-
259
-
260
- // Button
261
- $button-font-weight : var(--iris--button--font-weight, 400);
262
- $button-font-family : var(--iris--button--font-family);
263
- $button-text-transform : var(--iris--button--text-transform);
264
- $button-letter-spacing : var(--iris--button--letter-spacing);
265
- $button-padding-x: var(--iris--button--padding-x);
266
- $button-padding-y: var(--iris--button--padding-y);
267
- $button-font-size: var(--iris--button--font-size);
268
- $button-font-size--rem: var(--iris--button--font-size--rem);
269
- $button-border-radius: var(--iris--button--border-radius);
270
- $button-color: var(--iris--button--color);
271
- $button-background-color: var(--iris--button--background-color);
272
- $button-color-hover: var(--iris--button--color-hover);
273
- $button-background-color-hover: var(--iris--button--background-color-hover, none);
274
- $button-background-image: var(--iris--button--background-image, none);
275
- $button-gradient-background-image-size: var(--iris--global--gradient-background-size, (200% 100%));
276
- $button-border: var(--iris--button--border, none);
277
- $button-border-hover: var(--iris--button--border-hover, none);
278
-
279
- // Tags
280
- $tag-padding-top: var(--iris--tag--padding-top);
281
- $tag-padding-right: var(--iris--tag--padding-right);
282
- $tag-padding-bottom: var(--iris--tag--padding-bottom);
283
- $tag-padding-left: var(--iris--tag--padding-left);
284
- $tag-font-size: var(--iris--tag--font-size);
285
- $tag-font-size--rem: var(--iris--tag--font-size--rem);
286
-
287
- // Tags border
288
- $border-tag-color: var(--iris--tag--border--text-color);
289
- $border-tag-border-color: var(--iris--tag--border--border-color);
290
-
291
- //Tags background
292
- $background-tag-color: var(--iris--tag--background--text-color);
293
- $background-tag-background-color: var(--iris--tag--background--background-color);
294
-
295
- // Tooltip
296
- $tooltip-color: var(--iris--tooltip--color);
297
- $tooltip-background-color: var(--iris--tooltip--background-color);
298
-
299
- // Popover
300
- $popover-color: var(--iris--popover--color);
301
- $popover-background-color: var(--iris--popover--background-color);
302
-
303
-
304
- // Switch
305
- $switch-on: var(--iris--switch--color-on);
306
- $switch-off: var(--iris--switch--color-off);
307
-
308
-
309
- // Highlight
310
- $highlight-color: var(--iris--highlight--color);
311
- $highlight-background-color: var(--iris--highlight--background-color);
312
- $highlight-link-color: var(--iris--highlight--color-link);
313
- $highlight-link-color-hover: var(--iris--highlight--color-link-hover);
314
-
315
- // Highlight
316
- $highlight-color: var(--iris--highlight--color);
317
- $highlight-background-color: var(--iris--highlight--background-color);
318
- $highlight-link-color: var(--iris--highlight--color-link);
319
- $highlight-link-color-hover: var(--iris--highlight--color-link-hover);
320
-
321
- // Single SIT highlight
322
- $detail-sit-highlight-color: var(--iris--detail-sit-highlight--color);
323
- $detail-sit-highlight-background-color: var(--iris--detail-sit-highlight--background-color);
324
- $detail-sit-highlight-link-color: var(--iris--detail-sit-highlight--color-link);
325
- $detail-sit-highlight-link-color-hover: var(--iris--detail-sit-highlight--color-link-hover);
326
-
327
- // Strate Full
328
- $stratefull-color: var(--iris--stratefull--color);
329
- $stratefull-background-color: var(--iris--stratefull--background-color);
330
- $stratefull-link-color: var(--iris--stratefull--color-link);
331
- $stratefull-link-color-hover: var(--iris--stratefull--color-link-hover);
332
- $stratefull-content-x: var(--iris--stratefull--content-x);
333
- $stratefull-content-y: var(--iris--stratefull--content-y);
334
- $stratefull-content-width: var(--iris--stratefull--content-width);
335
-
336
-
337
- // Brochures form
338
- $brochure-form-color: var(--iris--brochure-form--color);
339
- $brochure-form-background-color: var(--iris--brochure-form--background-color);
340
- $brochure-form-link-color: var(--iris--brochure-form--color-link);
341
- $brochure-form-link-color-hover: var(--iris--brochure-form--color-link-hover);
342
- $brochure-form-field-background-color: var(--iris--brochure-form-field--background-color);
343
- $brochure-form-field-border-color: var(--iris--brochure-form-field--border-color);
344
- $brochure-form-field-border: var(--iris--brochure-form-field--border);
345
- $brochure-form-field-color: var(--iris--brochure-form-field--color);
346
-
347
-
348
- // Alternative content
349
- $alternative-content-color: var(--iris--alternative-content--color);
350
- $alternative-content-background-color: var(--iris--alternative-content--background-color);
351
- $alternative-content-link-color: var(--iris--alternative-content--color-link);
352
- $alternative-content-link-color-hover: var(--iris--alternative-content--color-link-hover);
353
-
354
-
355
- // Relative content
356
- $relative-content-color: var(--iris--relative-content--color);
357
- $relative-content-background-color: var(--iris--relative-content--background-color);
358
- $relative-content-link-color: var(--iris--relative-content--color-link);
359
- $relative-content-link-color-hover: var(--iris--relative-content--color-link-hover);
360
-
361
-
362
- // Video highlight
363
- $video-highlight-color: var(--iris--video-highlight--color);
364
- $video-highlight-background-color: var(--iris--video-highlight--background-color);
365
- $video-highlight-link-color: var(--iris--video-highlight--color-link);
366
- $video-highlight-link-color-hover: var(--iris--video-highlight--color-link-hover);
367
-
368
-
369
- // Authors
370
- $authors-color: var(--iris--authors--color);
371
- $authors-background-color: var(--iris--authors--background-color);
372
- $authors-link-color: var(--iris--authors--color-link);
373
- $authors-link-color-hover: var(--iris--authors--color-link-hover);
374
-
375
-
376
- // Ma Plage
377
- $ma-plage-color: var(--iris--ma-plage--color);
378
- $ma-plage-background-color: var(--iris--ma-plage--background-color);
379
- $ma-plage-link-color: var(--iris--ma-plage--color-link);
380
- $ma-plage-link-color-hover: var(--iris--ma-plage--color-link-hover);
381
-
382
-
383
- // Tides
384
- $tides-background-color: var(--iris--tides--background-color);
385
- $tides-color: var(--iris--tides--color);
386
- $tides-link-color: var(--iris--tides--color-link);
387
- $tides-link-color-hover: var(--iris--tides--color-link-hover);
388
-
389
-
390
- // Snow
391
- $snow-color: var(--iris--snow--color);
392
- $snow-background-color: var(--iris--snow--background-color);
393
- $snow-link-color: var(--iris--snow--color-link);
394
- $snow-link-color-hover: var(--iris--snow--color-link-hover);
395
-
396
-
397
- // How to come
398
- $how-to-come-color: var(--iris--how-to-come--color);
399
- $how-to-come-background-color: var(--iris--how-to-come--background-color);
400
- $how-to-come-link-color: var(--iris--how-to-come--color-link);
401
- $how-to-come-link-color-hover: var(--iris--how-to-come--color-link-hover);
402
-
403
- // Trip
404
- $trip-color: var(--iris--trip--color);
405
- $trip-background-color: var(--iris--trip--background-color);
406
- $trip-link-color: var(--iris--trip--color-link);
407
- $trip-link-color-hover: var(--iris--trip--color-link-hover);
408
-
409
- /* Notifications
410
- / ================================================== */
411
- $c-error: #f33;
412
- $c-success: #009e55;
413
- $c-warning: #ff890e;
414
-
415
- /* Difficulty
416
- / ================================================== */
417
- $c-easy: #9ccc65;
418
- $c-medium: #ff890e;
419
- $c-hard: #ef5350;
package/resources/assets/styles/handcook.scss DELETED
@@ -1,20 +0,0 @@
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 27/01/2022 13:39
13
- * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
14
- */
15
-
16
- @import "variables";
17
- @import "mixins/mixin-font";
18
- @import "mixins/mixin-layout";
19
- @import "mixins/mixin-style";
20
- @import "utils";
package/resources/assets/styles/mixins/_mixin-font.scss DELETED
@@ -1,43 +0,0 @@
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 Lucas ROCHE
12
- * @date 28/01/2022 07:41
13
- * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
14
- */
15
- @use "sass:math";
16
-
17
- /* Font icon
18
- /* ============================================= */
19
- @mixin fi($unicode) {
20
- content: #{'"\\' + $unicode + '"'};
21
- font-family: "collection-font";
22
- font-style: normal;
23
- font-weight: 400;
24
- font-display: block;
25
- }
26
-
27
- /* Font size
28
- /* ============================================= */
29
- @function rem-size( $size ) {
30
- $remSize: math.div($size, 16);
31
- @return #{$remSize}rem;
32
- }
33
-
34
- @function vw-size( $size ) {
35
- $ceil-size: math.div(math.div($container, 1px), 1 - math.div($margin-xlarge, 100%) * 2);
36
- @return calc(#{$size} * 100 / #{$ceil-size} * 1vw);
37
- }
38
-
39
- // Breakpoint large recalcule font-size
40
- @function clamp-size( $min, $value, $max) {
41
- $val: vw-size($value);
42
- @return clamp(#{$min}, #{$val}, #{$max});
43
- }
package/resources/assets/styles/mixins/_mixin-layout.scss DELETED
@@ -1,84 +0,0 @@
1
- /*
2
- * Created by IRIS Interactive
3
- * User : IRIS Interactive
4
- */
5
- @use "sass:math";
6
-
7
- /* Main gutter
8
- / ================================================== */
9
- @function viewport-border($index) {
10
- @return map_get($viewport-borders, $index);
11
- }
12
-
13
-
14
- /* Breakpoints
15
- /* ============================================= */
16
- @mixin breakpoint($point) {
17
-
18
- @if $point == "xlarge" {
19
- @media screen and (min-width: #{$breakpoint-xlarge}) {
20
- @content;
21
- }
22
- } @else if $point == "desktop" {
23
- @media screen and (min-width: #{$breakpoint-desktop}) {
24
- @content;
25
- }
26
- } @else if $point == "large" {
27
- @media screen and (max-width: #{$breakpoint-large}) {
28
- @content;
29
- }
30
- } @else if $point == "medium" {
31
- @media screen and (max-width: #{$breakpoint-medium}) {
32
- @content;
33
- }
34
- } @else if $point == "small" {
35
- @media screen and (max-width: #{$breakpoint-small}) {
36
- @content;
37
- }
38
- } @else if $point == "xsmall" {
39
- @media screen and (max-width: #{$breakpoint-xsmall}) {
40
- @content;
41
- }
42
- } @else {
43
- @media screen and (max-width: $point) {
44
- @content;
45
- }
46
- }
47
- }
48
-
49
- /* display flex
50
- /* ============================================= */
51
- @mixin d-flex( $position-x, $position-y, $direction : row, $display : flex ) {
52
- display: $display;
53
- justify-content: $position-x;
54
- align-items: $position-y;
55
- flex-direction: $direction;
56
- }
57
-
58
- /* Hover - TODO
59
- /* ============================================= */
60
- @mixin hover {
61
- &:hover {
62
- @content;
63
- }
64
- }
65
-
66
- /* Touch
67
- /* ============================================= */
68
- @mixin touch {
69
-
70
- .touchevents & {
71
- @content;
72
- }
73
- }
74
-
75
- /* Clear
76
- /* ============================================= */
77
- @mixin clear {
78
-
79
- &:after {
80
- content: "";
81
- display: block;
82
- clear: both;
83
- }
84
- }
package/resources/assets/styles/mixins/_mixin-style.scss DELETED
@@ -1,133 +0,0 @@
1
- /*
2
- * Created by IRIS Interactive
3
- * User : IRIS Interactive
4
- */
5
-
6
- /* Transition
7
- /* ============================================= */
8
- @mixin transition($delay : 0.2s) {
9
- transition: $delay ease;
10
- }
11
-
12
- /* Hover
13
- /* ============================================= */
14
- @mixin animate {
15
- transform: scale(1.02);
16
- }
17
-
18
- /* Ellipsis
19
- /* ============================================= */
20
- @mixin ellipsis {
21
- overflow: hidden;
22
- text-overflow: ellipsis;
23
- white-space: nowrap;
24
- }
25
-
26
-
27
- /* Adaptive height block
28
- /* ============================================= */
29
- @mixin adaptive-height($padding : 115%, $padding-medium : 0, $padding-small : 0, $padding-xsmall:0) {
30
- position: relative;
31
- overflow: hidden;
32
-
33
- &:after {
34
- content: "";
35
- display: block;
36
- padding-bottom: $padding;
37
-
38
- @if $padding-medium != 0 {
39
- @include breakpoint(medium) {
40
- padding-bottom: $padding-medium;
41
- }
42
- }
43
-
44
- @if $padding-small != 0 {
45
- @include breakpoint(small) {
46
- padding-bottom: $padding-small;
47
- }
48
- }
49
-
50
- @if $padding-small != 0 {
51
- @include breakpoint(xsmall) {
52
- padding-bottom: $padding-xsmall;
53
- }
54
- }
55
- }
56
-
57
- // TODO
58
- img:not(.emoji) {
59
- margin: 0 auto;
60
- @include object-fit(absolute);
61
- @include transition(0.4s);
62
- }
63
- }
64
-
65
- /* Line clamp
66
- /* ============================================= */
67
- @mixin line-clamp($line : 0) {
68
- display: -webkit-box;
69
- line-clamp: $line;
70
- -webkit-line-clamp: $line;
71
- -webkit-box-orient: vertical;
72
- overflow: hidden;
73
- }
74
-
75
- /* Object fit
76
- /* ============================================= */
77
- @mixin object-fit($position : '') {
78
- width: 100%;
79
- height: 100%;
80
- object-fit: cover;
81
-
82
- @if $position == 'absolute' {
83
- position: absolute;
84
- top: 0;
85
- left: 0;
86
- }
87
- }
88
-
89
-
90
- /* Linear Gradient
91
- /* ============================================= */
92
- @mixin linear-gradient {
93
- background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
94
- }
95
-
96
- /* fit-content
97
- /* ============================================= */
98
- @mixin fit-content {
99
-
100
- > *:last-child {
101
- margin-bottom: 0;
102
- }
103
- }
104
-
105
- /* stretched-link
106
- /* ============================================= */
107
- @mixin stretched-link {
108
-
109
- &:before {
110
- position: absolute;
111
- top: 0;
112
- right: 0;
113
- bottom: 0;
114
- left: 0;
115
- z-index: 1;
116
- pointer-events: auto;
117
- content: "";
118
- background-color: transparent;
119
- }
120
- }
121
-
122
- /* sr-only
123
- /* ============================================= */
124
- @mixin sr-only {
125
- position: absolute;
126
- width: 1px;
127
- height: 1px;
128
- padding: 0;
129
- margin: -1px;
130
- overflow: hidden;
131
- clip: rect(0, 0, 0, 0);
132
- border: 0;
133
- }
package/resources/index.html DELETED
@@ -1,39 +0,0 @@
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 Lucas ROCHE
12
- ~ @date 27/01/2022 14:31
13
- ~ @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
14
- -->
15
-
16
- <html>
17
- <head>
18
- <title>IRIStyle</title>
19
- <script type="text/javascript">var exports = {};</script>
20
- <script type="text/javascript" src="scripts/index.js"></script>
21
- <link rel="stylesheet" href="styles/style.css">
22
-
23
- </head>
24
- <body>
25
- <div id="step-1" style="height: 1800px; background-color: red;">
26
- <a href="#step-2" data-trigger="wpiris-scroll">To step 2</a>
27
- </div>
28
- <div id="step-2" style="height: 1800px; background-color: green;">
29
- <a href="#step-3" data-trigger="wpiris-scroll">To step 3</a>
30
- </div>
31
- <div id="step-3" style="height: 1800px; background-color: yellow;">
32
- <a href="#step-1" data-trigger="wpiris-scroll">To step 1</a>
33
- </div>
34
- </body>
35
- <script type="text/javascript">
36
- const SmoothScroll = exports.SmoothScroll;
37
- SmoothScroll( '[data-trigger="wpiris-scroll"]', 1000 );
38
- </script>
39
- </html>
package/resources/index.js DELETED
@@ -1,18 +0,0 @@
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 Lucas ROCHE
12
- * @date 27/01/2022 14:32
13
- * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
14
- */
15
-
16
- import SmoothScroll from '@package_script/SmoothScroll';
17
-
18
- exports.SmoothScroll = SmoothScroll;
package/resources/style.scss DELETED
@@ -1,21 +0,0 @@
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 Lucas ROCHE
12
- * @date 27/01/2022 14:32
13
- * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
14
- */
15
-
16
-
17
- @import "assets/styles/variables";
18
- @import "assets/styles/mixins/mixin-layout";
19
- @import "assets/styles/mixins/mixin-style";
20
- @import "assets/styles/mixins/mixin-font";
21
- @import "assets/styles/utils";