@iris.interactive/handcook 2.3.1 → 2.3.6

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 (17) 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 -16
  4. package/public/styles/scss/mixins/_mixin-font.scss +1 -1
  5. package/public/styles/scss/mixins/_mixin-layout.scss +0 -15
  6. package/public/styles/scss/mixins/_mixin-style.scss +2 -17
  7. package/public/styles/style.css +24 -0
  8. package/resources/assets/scripts/SmoothScroll.js +0 -41
  9. package/resources/assets/styles/_utils.scss +0 -96
  10. package/resources/assets/styles/_variables.scss +0 -419
  11. package/resources/assets/styles/handcook.scss +0 -20
  12. package/resources/assets/styles/mixins/_mixin-font.scss +0 -43
  13. package/resources/assets/styles/mixins/_mixin-layout.scss +0 -84
  14. package/resources/assets/styles/mixins/_mixin-style.scss +0 -133
  15. package/resources/index.html +0 -39
  16. package/resources/index.js +0 -18
  17. 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.1",
3
+ "version": "2.3.6",
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:before {
101
+ color: var(--iris--icon--color);
102
+ }
package/public/styles/scss/_variables.scss CHANGED
@@ -1,18 +1,3 @@
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:51
13
- * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
14
- */
15
-
16
1
  /*
17
2
  * Created by IRIS Interactive
18
3
  * User : IRIS Interactive
@@ -146,7 +131,7 @@ $advanced-link-font-size-rem: var(--iris--advanced-link--font-size--rem);
146
131
  $advanced-link-color: var(--iris--advanced-link--color);
147
132
  $advanced-link-color-hover: var(--iris--advanced-link--color-hover);
148
133
  $advanced-link-text-decoration: var(--iris--advanced-link--text-decoration, none);
149
- $advanced-link-underline-offset: var(--iris--advanced-link--underline-offset, 0);
134
+ $advanced-link-underline-offset: var(--iris--advanced-link--underline-offset, 2px);
150
135
 
151
136
 
152
137
  // List
package/public/styles/scss/mixins/_mixin-font.scss CHANGED
@@ -17,7 +17,7 @@
17
17
  /* Font icon
18
18
  /* ============================================= */
19
19
  @mixin fi($unicode) {
20
- content: $unicode;
20
+ content: #{'"\\' + $unicode + '"'};
21
21
  font-family: "collection-font";
22
22
  font-style: normal;
23
23
  font-weight: 400;
package/public/styles/scss/mixins/_mixin-layout.scss CHANGED
@@ -1,18 +1,3 @@
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:51
13
- * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
14
- */
15
-
16
1
  /*
17
2
  * Created by IRIS Interactive
18
3
  * User : IRIS Interactive
package/public/styles/scss/mixins/_mixin-style.scss CHANGED
@@ -1,18 +1,3 @@
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:51
13
- * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
14
- */
15
-
16
1
  /*
17
2
  * Created by IRIS Interactive
18
3
  * User : IRIS Interactive
@@ -104,8 +89,8 @@
104
89
 
105
90
  /* Linear Gradient
106
91
  /* ============================================= */
107
- @mixin linear-gradient {
108
- 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%);
109
94
  }
110
95
 
111
96
  /* fit-content
package/public/styles/style.css CHANGED
@@ -72,6 +72,24 @@
72
72
  /* ============================================= */
73
73
  /* sr-only
74
74
  /* ============================================= */
75
+ /*!
76
+ * IRIS Interactive
77
+ *
78
+ * NOTICE OF LICENSE
79
+ *
80
+ * This source file is no subject to a specific license
81
+ * but it belongs to the company IRIS Interactive.
82
+ * You can contact IRIS Interactive at the following
83
+ * address: contact@iris-interactive.fr
84
+ *
85
+ * @author Lucas ROCHE
86
+ * @date 28/01/2022 07:41
87
+ * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
88
+ */
89
+ /* Font icon
90
+ /* ============================================= */
91
+ /* Font size
92
+ /* ============================================= */
75
93
  /*
76
94
  * Created by IRIS Interactive
77
95
  * User : IRIS Interactive
@@ -166,3 +184,9 @@
166
184
  .is-closed {
167
185
  color: #f33;
168
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";