@iris.interactive/handcook 2.3.0 → 2.3.5
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.
- package/README.md +1 -1
- package/package.json +1 -1
- package/public/styles/scss/_utils.scss +6 -0
- package/public/styles/scss/_variables.scss +1 -16
- package/public/styles/scss/mixins/_mixin-font.scss +1 -1
- package/public/styles/scss/mixins/_mixin-layout.scss +0 -15
- package/public/styles/scss/mixins/_mixin-style.scss +2 -17
- package/public/styles/style.css +24 -0
- package/resources/assets/scripts/SmoothScroll.js +0 -41
- package/resources/assets/styles/_utils.scss +0 -96
- package/resources/assets/styles/_variables.scss +0 -419
- package/resources/assets/styles/handcook.scss +0 -20
- package/resources/assets/styles/mixins/_mixin-font.scss +0 -43
- package/resources/assets/styles/mixins/_mixin-layout.scss +0 -84
- package/resources/assets/styles/mixins/_mixin-style.scss +0 -133
- package/resources/index.html +0 -39
- package/resources/index.js +0 -18
- package/resources/style.scss +0 -20
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
# Welcome to HandCook 👨🍳
|
|
2
|
-
|
|
3
3
|
|
|
4
4
|
[](#)
|
|
5
5
|
[](https://twitter.com/captain\_iris)
|
package/package.json
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,
|
|
134
|
+
$advanced-link-underline-offset: var(--iris--advanced-link--underline-offset, 2px);
|
|
150
135
|
|
|
151
136
|
|
|
152
137
|
// List
|
|
@@ -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
|
|
@@ -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
|
|
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
|
+
}
|
|
@@ -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;
|
|
@@ -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
|
-
}
|
|
@@ -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;
|
|
@@ -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";
|
|
@@ -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
|
-
}
|
|
@@ -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
|
-
}
|
|
@@ -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,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 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/utils";
|