@iris.interactive/handcook 2.0.0 → 2.3.0
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/scripts/SmoothScroll.js +41 -1
- package/public/scripts/index.js +250 -1
- package/public/styles/scss/_variables.scss +15 -0
- package/public/styles/scss/handcook.scss +1 -0
- package/public/styles/scss/mixins/_mixin-font.scss +43 -0
- package/public/styles/scss/mixins/_mixin-layout.scss +15 -18
- package/public/styles/scss/mixins/_mixin-style.scss +15 -0
- package/public/styles/style.css +155 -1
- package/resources/assets/styles/handcook.scss +1 -0
- package/resources/assets/styles/mixins/_mixin-font.scss +43 -0
- package/resources/assets/styles/mixins/_mixin-layout.scss +0 -18
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 +1,41 @@
|
|
|
1
|
-
const easeInCubic=function
|
|
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/public/scripts/index.js
CHANGED
|
@@ -1 +1,250 @@
|
|
|
1
|
-
|
|
1
|
+
/******/ (() => { // webpackBootstrap
|
|
2
|
+
/******/ "use strict";
|
|
3
|
+
/******/ var __webpack_modules__ = ({
|
|
4
|
+
|
|
5
|
+
/***/ "./resources/assets/scripts/SmoothScroll.js":
|
|
6
|
+
/*!**************************************************!*\
|
|
7
|
+
!*** ./resources/assets/scripts/SmoothScroll.js ***!
|
|
8
|
+
\**************************************************/
|
|
9
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
10
|
+
|
|
11
|
+
__webpack_require__.r(__webpack_exports__);
|
|
12
|
+
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
13
|
+
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
|
|
14
|
+
/* harmony export */ });
|
|
15
|
+
var easeInCubic = function easeInCubic(t) {
|
|
16
|
+
return t * t * t;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
var scrollToElem = function scrollToElem(startTime, currentTime, duration, scrollEndElemTop, startScrollOffset) {
|
|
20
|
+
var runtime = currentTime - startTime;
|
|
21
|
+
var progress = runtime / duration;
|
|
22
|
+
progress = Math.min(progress, 1);
|
|
23
|
+
var ease = easeInCubic(progress);
|
|
24
|
+
window.scroll(0, startScrollOffset + scrollEndElemTop * ease);
|
|
25
|
+
|
|
26
|
+
if (runtime < duration) {
|
|
27
|
+
requestAnimationFrame(function (timestamp) {
|
|
28
|
+
var currentTime = timestamp || new Date().getTime();
|
|
29
|
+
scrollToElem(startTime, currentTime, duration, scrollEndElemTop, startScrollOffset);
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
var SmoothScroll = function SmoothScroll(triggerAttribute) {
|
|
35
|
+
var durationAnimation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
|
|
36
|
+
var triggerElement = document.querySelectorAll(triggerAttribute);
|
|
37
|
+
triggerElement.forEach(function (element, key) {
|
|
38
|
+
element.addEventListener('click', function (event) {
|
|
39
|
+
event.preventDefault();
|
|
40
|
+
var target = element.getAttribute('href') != '' ? document.querySelector(element.getAttribute('href')) : document.querySelector(element.dataset.href);
|
|
41
|
+
var shift = element.dataset.shift !== undefined ? element.dataset.shift : 0;
|
|
42
|
+
var anim = requestAnimationFrame(function (timestamp) {
|
|
43
|
+
var stamp = timestamp || new Date().getTime();
|
|
44
|
+
var start = stamp;
|
|
45
|
+
var startScrollOffset = window.pageYOffset;
|
|
46
|
+
var scrollEndElemTop = target.getBoundingClientRect().top - shift;
|
|
47
|
+
scrollToElem(start, stamp, durationAnimation, scrollEndElemTop, startScrollOffset);
|
|
48
|
+
});
|
|
49
|
+
});
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SmoothScroll);
|
|
54
|
+
|
|
55
|
+
/***/ }),
|
|
56
|
+
|
|
57
|
+
/***/ "./resources/index.js":
|
|
58
|
+
/*!****************************!*\
|
|
59
|
+
!*** ./resources/index.js ***!
|
|
60
|
+
\****************************/
|
|
61
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
62
|
+
|
|
63
|
+
__webpack_require__.r(__webpack_exports__);
|
|
64
|
+
/* harmony import */ var _package_script_SmoothScroll__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @package_script/SmoothScroll */ "./resources/assets/scripts/SmoothScroll.js");
|
|
65
|
+
/*
|
|
66
|
+
* IRIS Interactive
|
|
67
|
+
*
|
|
68
|
+
* NOTICE OF LICENSE
|
|
69
|
+
*
|
|
70
|
+
* This source file is no subject to a specific license
|
|
71
|
+
* but it belongs to the company IRIS Interactive.
|
|
72
|
+
* You can contact IRIS Interactive at the following
|
|
73
|
+
* address: contact@iris-interactive.fr
|
|
74
|
+
*
|
|
75
|
+
* @author Lucas ROCHE
|
|
76
|
+
* @date 27/01/2022 14:32
|
|
77
|
+
* @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
|
|
78
|
+
*/
|
|
79
|
+
|
|
80
|
+
exports.SmoothScroll = _package_script_SmoothScroll__WEBPACK_IMPORTED_MODULE_0__["default"];
|
|
81
|
+
|
|
82
|
+
/***/ }),
|
|
83
|
+
|
|
84
|
+
/***/ "./resources/style.scss":
|
|
85
|
+
/*!******************************!*\
|
|
86
|
+
!*** ./resources/style.scss ***!
|
|
87
|
+
\******************************/
|
|
88
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
89
|
+
|
|
90
|
+
__webpack_require__.r(__webpack_exports__);
|
|
91
|
+
// extracted by mini-css-extract-plugin
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
/***/ })
|
|
95
|
+
|
|
96
|
+
/******/ });
|
|
97
|
+
/************************************************************************/
|
|
98
|
+
/******/ // The module cache
|
|
99
|
+
/******/ var __webpack_module_cache__ = {};
|
|
100
|
+
/******/
|
|
101
|
+
/******/ // The require function
|
|
102
|
+
/******/ function __webpack_require__(moduleId) {
|
|
103
|
+
/******/ // Check if module is in cache
|
|
104
|
+
/******/ var cachedModule = __webpack_module_cache__[moduleId];
|
|
105
|
+
/******/ if (cachedModule !== undefined) {
|
|
106
|
+
/******/ return cachedModule.exports;
|
|
107
|
+
/******/ }
|
|
108
|
+
/******/ // Create a new module (and put it into the cache)
|
|
109
|
+
/******/ var module = __webpack_module_cache__[moduleId] = {
|
|
110
|
+
/******/ // no module.id needed
|
|
111
|
+
/******/ // no module.loaded needed
|
|
112
|
+
/******/ exports: {}
|
|
113
|
+
/******/ };
|
|
114
|
+
/******/
|
|
115
|
+
/******/ // Execute the module function
|
|
116
|
+
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
|
117
|
+
/******/
|
|
118
|
+
/******/ // Return the exports of the module
|
|
119
|
+
/******/ return module.exports;
|
|
120
|
+
/******/ }
|
|
121
|
+
/******/
|
|
122
|
+
/******/ // expose the modules object (__webpack_modules__)
|
|
123
|
+
/******/ __webpack_require__.m = __webpack_modules__;
|
|
124
|
+
/******/
|
|
125
|
+
/************************************************************************/
|
|
126
|
+
/******/ /* webpack/runtime/chunk loaded */
|
|
127
|
+
/******/ (() => {
|
|
128
|
+
/******/ var deferred = [];
|
|
129
|
+
/******/ __webpack_require__.O = (result, chunkIds, fn, priority) => {
|
|
130
|
+
/******/ if(chunkIds) {
|
|
131
|
+
/******/ priority = priority || 0;
|
|
132
|
+
/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
|
|
133
|
+
/******/ deferred[i] = [chunkIds, fn, priority];
|
|
134
|
+
/******/ return;
|
|
135
|
+
/******/ }
|
|
136
|
+
/******/ var notFulfilled = Infinity;
|
|
137
|
+
/******/ for (var i = 0; i < deferred.length; i++) {
|
|
138
|
+
/******/ var [chunkIds, fn, priority] = deferred[i];
|
|
139
|
+
/******/ var fulfilled = true;
|
|
140
|
+
/******/ for (var j = 0; j < chunkIds.length; j++) {
|
|
141
|
+
/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
|
|
142
|
+
/******/ chunkIds.splice(j--, 1);
|
|
143
|
+
/******/ } else {
|
|
144
|
+
/******/ fulfilled = false;
|
|
145
|
+
/******/ if(priority < notFulfilled) notFulfilled = priority;
|
|
146
|
+
/******/ }
|
|
147
|
+
/******/ }
|
|
148
|
+
/******/ if(fulfilled) {
|
|
149
|
+
/******/ deferred.splice(i--, 1)
|
|
150
|
+
/******/ var r = fn();
|
|
151
|
+
/******/ if (r !== undefined) result = r;
|
|
152
|
+
/******/ }
|
|
153
|
+
/******/ }
|
|
154
|
+
/******/ return result;
|
|
155
|
+
/******/ };
|
|
156
|
+
/******/ })();
|
|
157
|
+
/******/
|
|
158
|
+
/******/ /* webpack/runtime/define property getters */
|
|
159
|
+
/******/ (() => {
|
|
160
|
+
/******/ // define getter functions for harmony exports
|
|
161
|
+
/******/ __webpack_require__.d = (exports, definition) => {
|
|
162
|
+
/******/ for(var key in definition) {
|
|
163
|
+
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
|
164
|
+
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|
165
|
+
/******/ }
|
|
166
|
+
/******/ }
|
|
167
|
+
/******/ };
|
|
168
|
+
/******/ })();
|
|
169
|
+
/******/
|
|
170
|
+
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
171
|
+
/******/ (() => {
|
|
172
|
+
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
|
173
|
+
/******/ })();
|
|
174
|
+
/******/
|
|
175
|
+
/******/ /* webpack/runtime/make namespace object */
|
|
176
|
+
/******/ (() => {
|
|
177
|
+
/******/ // define __esModule on exports
|
|
178
|
+
/******/ __webpack_require__.r = (exports) => {
|
|
179
|
+
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
180
|
+
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
181
|
+
/******/ }
|
|
182
|
+
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
183
|
+
/******/ };
|
|
184
|
+
/******/ })();
|
|
185
|
+
/******/
|
|
186
|
+
/******/ /* webpack/runtime/jsonp chunk loading */
|
|
187
|
+
/******/ (() => {
|
|
188
|
+
/******/ // no baseURI
|
|
189
|
+
/******/
|
|
190
|
+
/******/ // object to store loaded and loading chunks
|
|
191
|
+
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
|
|
192
|
+
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
|
|
193
|
+
/******/ var installedChunks = {
|
|
194
|
+
/******/ "/scripts/index": 0,
|
|
195
|
+
/******/ "styles/style": 0
|
|
196
|
+
/******/ };
|
|
197
|
+
/******/
|
|
198
|
+
/******/ // no chunk on demand loading
|
|
199
|
+
/******/
|
|
200
|
+
/******/ // no prefetching
|
|
201
|
+
/******/
|
|
202
|
+
/******/ // no preloaded
|
|
203
|
+
/******/
|
|
204
|
+
/******/ // no HMR
|
|
205
|
+
/******/
|
|
206
|
+
/******/ // no HMR manifest
|
|
207
|
+
/******/
|
|
208
|
+
/******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
|
|
209
|
+
/******/
|
|
210
|
+
/******/ // install a JSONP callback for chunk loading
|
|
211
|
+
/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
|
|
212
|
+
/******/ var [chunkIds, moreModules, runtime] = data;
|
|
213
|
+
/******/ // add "moreModules" to the modules object,
|
|
214
|
+
/******/ // then flag all "chunkIds" as loaded and fire callback
|
|
215
|
+
/******/ var moduleId, chunkId, i = 0;
|
|
216
|
+
/******/ if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
|
|
217
|
+
/******/ for(moduleId in moreModules) {
|
|
218
|
+
/******/ if(__webpack_require__.o(moreModules, moduleId)) {
|
|
219
|
+
/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
|
|
220
|
+
/******/ }
|
|
221
|
+
/******/ }
|
|
222
|
+
/******/ if(runtime) var result = runtime(__webpack_require__);
|
|
223
|
+
/******/ }
|
|
224
|
+
/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
|
|
225
|
+
/******/ for(;i < chunkIds.length; i++) {
|
|
226
|
+
/******/ chunkId = chunkIds[i];
|
|
227
|
+
/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
|
|
228
|
+
/******/ installedChunks[chunkId][0]();
|
|
229
|
+
/******/ }
|
|
230
|
+
/******/ installedChunks[chunkIds[i]] = 0;
|
|
231
|
+
/******/ }
|
|
232
|
+
/******/ return __webpack_require__.O(result);
|
|
233
|
+
/******/ }
|
|
234
|
+
/******/
|
|
235
|
+
/******/ var chunkLoadingGlobal = self["webpackChunk_iris_interactive_handcook"] = self["webpackChunk_iris_interactive_handcook"] || [];
|
|
236
|
+
/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
|
|
237
|
+
/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
|
|
238
|
+
/******/ })();
|
|
239
|
+
/******/
|
|
240
|
+
/************************************************************************/
|
|
241
|
+
/******/
|
|
242
|
+
/******/ // startup
|
|
243
|
+
/******/ // Load entry module and return exports
|
|
244
|
+
/******/ // This entry module depends on other loaded chunks and execution need to be delayed
|
|
245
|
+
/******/ __webpack_require__.O(undefined, ["styles/style"], () => (__webpack_require__("./resources/index.js")))
|
|
246
|
+
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["styles/style"], () => (__webpack_require__("./resources/style.scss")))
|
|
247
|
+
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
|
|
248
|
+
/******/
|
|
249
|
+
/******/ })()
|
|
250
|
+
;
|
|
@@ -1,3 +1,18 @@
|
|
|
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
|
+
|
|
1
16
|
/*
|
|
2
17
|
* Created by IRIS Interactive
|
|
3
18
|
* User : IRIS Interactive
|
|
@@ -0,0 +1,43 @@
|
|
|
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,3 +1,18 @@
|
|
|
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
|
+
|
|
1
16
|
/*
|
|
2
17
|
* Created by IRIS Interactive
|
|
3
18
|
* User : IRIS Interactive
|
|
@@ -55,24 +70,6 @@
|
|
|
55
70
|
flex-direction: $direction;
|
|
56
71
|
}
|
|
57
72
|
|
|
58
|
-
/* Font size
|
|
59
|
-
/* ============================================= */
|
|
60
|
-
@function rem-size( $size ) {
|
|
61
|
-
$remSize: math.div($size, 16);
|
|
62
|
-
@return #{$remSize}rem;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
@function vw-size( $size ) {
|
|
66
|
-
$ceil-size: math.div(math.div($container, 1px), 1 - math.div($margin-xlarge, 100%) * 2);
|
|
67
|
-
@return calc(#{$size} * 100 / #{$ceil-size} * 1vw);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
// Breakpoint large recalcule font-size
|
|
71
|
-
@function clamp-size( $min, $value, $max) {
|
|
72
|
-
$val: vw-size($value);
|
|
73
|
-
@return clamp(#{$min}, #{$val}, #{$max});
|
|
74
|
-
}
|
|
75
|
-
|
|
76
73
|
/* Hover - TODO
|
|
77
74
|
/* ============================================= */
|
|
78
75
|
@mixin hover {
|
|
@@ -1,3 +1,18 @@
|
|
|
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
|
+
|
|
1
16
|
/*
|
|
2
17
|
* Created by IRIS Interactive
|
|
3
18
|
* User : IRIS Interactive
|
package/public/styles/style.css
CHANGED
|
@@ -11,4 +11,158 @@
|
|
|
11
11
|
* @author Lucas ROCHE
|
|
12
12
|
* @date 27/01/2022 14:32
|
|
13
13
|
* @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
|
|
14
|
-
|
|
14
|
+
*/
|
|
15
|
+
/*
|
|
16
|
+
* Created by IRIS Interactive
|
|
17
|
+
* User : IRIS Interactive
|
|
18
|
+
*/
|
|
19
|
+
/* Layout
|
|
20
|
+
/ ================================================== */
|
|
21
|
+
/* Gutter
|
|
22
|
+
/ ================================================== */
|
|
23
|
+
/* Margin
|
|
24
|
+
/ ================================================== */
|
|
25
|
+
/* Margin
|
|
26
|
+
/ ================================================== */
|
|
27
|
+
/* Breakpoint
|
|
28
|
+
/ ================================================== */
|
|
29
|
+
/* Global
|
|
30
|
+
/ ================================================== */
|
|
31
|
+
/* Notifications
|
|
32
|
+
/ ================================================== */
|
|
33
|
+
/* Difficulty
|
|
34
|
+
/ ================================================== */
|
|
35
|
+
/*
|
|
36
|
+
* Created by IRIS Interactive
|
|
37
|
+
* User : IRIS Interactive
|
|
38
|
+
*/
|
|
39
|
+
/* Main gutter
|
|
40
|
+
/ ================================================== */
|
|
41
|
+
/* Breakpoints
|
|
42
|
+
/* ============================================= */
|
|
43
|
+
/* display flex
|
|
44
|
+
/* ============================================= */
|
|
45
|
+
/* Hover - TODO
|
|
46
|
+
/* ============================================= */
|
|
47
|
+
/* Touch
|
|
48
|
+
/* ============================================= */
|
|
49
|
+
/* Clear
|
|
50
|
+
/* ============================================= */
|
|
51
|
+
/*
|
|
52
|
+
* Created by IRIS Interactive
|
|
53
|
+
* User : IRIS Interactive
|
|
54
|
+
*/
|
|
55
|
+
/* Transition
|
|
56
|
+
/* ============================================= */
|
|
57
|
+
/* Hover
|
|
58
|
+
/* ============================================= */
|
|
59
|
+
/* Ellipsis
|
|
60
|
+
/* ============================================= */
|
|
61
|
+
/* Adaptive height block
|
|
62
|
+
/* ============================================= */
|
|
63
|
+
/* Line clamp
|
|
64
|
+
/* ============================================= */
|
|
65
|
+
/* Object fit
|
|
66
|
+
/* ============================================= */
|
|
67
|
+
/* Linear Gradient
|
|
68
|
+
/* ============================================= */
|
|
69
|
+
/* fit-content
|
|
70
|
+
/* ============================================= */
|
|
71
|
+
/* stretched-link
|
|
72
|
+
/* ============================================= */
|
|
73
|
+
/* sr-only
|
|
74
|
+
/* ============================================= */
|
|
75
|
+
/*
|
|
76
|
+
* Created by IRIS Interactive
|
|
77
|
+
* User : IRIS Interactive
|
|
78
|
+
*/
|
|
79
|
+
/* Utils classes
|
|
80
|
+
/* ============================================= */
|
|
81
|
+
.stretched-link:before {
|
|
82
|
+
position: absolute;
|
|
83
|
+
top: 0;
|
|
84
|
+
right: 0;
|
|
85
|
+
bottom: 0;
|
|
86
|
+
left: 0;
|
|
87
|
+
z-index: 1;
|
|
88
|
+
pointer-events: auto;
|
|
89
|
+
content: "";
|
|
90
|
+
background-color: transparent;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* ============================================= */
|
|
94
|
+
.list-flex {
|
|
95
|
+
display: flex;
|
|
96
|
+
flex-wrap: wrap;
|
|
97
|
+
margin-bottom: 0;
|
|
98
|
+
}
|
|
99
|
+
.list-flex > * {
|
|
100
|
+
list-style-type: none;
|
|
101
|
+
margin: 0 10px 10px 0;
|
|
102
|
+
}
|
|
103
|
+
.list-flex > *:last-child {
|
|
104
|
+
margin-right: 0;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* Animations
|
|
108
|
+
/* ============================================= */
|
|
109
|
+
@-webkit-keyframes loader {
|
|
110
|
+
100% {
|
|
111
|
+
transform: rotate(360deg);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
@keyframes loader {
|
|
115
|
+
100% {
|
|
116
|
+
transform: rotate(360deg);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
/* Sr-only
|
|
120
|
+
/* ============================================= */
|
|
121
|
+
.sr-only {
|
|
122
|
+
clip: rect(0, 0, 0, 0);
|
|
123
|
+
border-width: 0;
|
|
124
|
+
height: 1px;
|
|
125
|
+
margin: -1px;
|
|
126
|
+
overflow: hidden;
|
|
127
|
+
padding: 0;
|
|
128
|
+
position: absolute;
|
|
129
|
+
white-space: nowrap;
|
|
130
|
+
width: 1px;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/* Text with icon before
|
|
134
|
+
/* ============================================= */
|
|
135
|
+
.text-icon {
|
|
136
|
+
display: inline-flex;
|
|
137
|
+
align-items: center;
|
|
138
|
+
}
|
|
139
|
+
.text-icon:before {
|
|
140
|
+
margin-right: 5px;
|
|
141
|
+
}
|
|
142
|
+
.text-icon:after {
|
|
143
|
+
margin-left: 5px;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/* Block with img animated on hover
|
|
147
|
+
/* ============================================= */
|
|
148
|
+
.hover-item img {
|
|
149
|
+
transition: 0.2s ease;
|
|
150
|
+
will-change: transform;
|
|
151
|
+
}
|
|
152
|
+
.hover-item:hover img {
|
|
153
|
+
transform: scale(1.02);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
/* Opening
|
|
157
|
+
/* ============================================= */
|
|
158
|
+
.is-opened {
|
|
159
|
+
color: #009e55;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.soon-closed {
|
|
163
|
+
color: #ff890e;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.is-closed {
|
|
167
|
+
color: #f33;
|
|
168
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
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
|
+
}
|
|
@@ -55,24 +55,6 @@
|
|
|
55
55
|
flex-direction: $direction;
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
/* Font size
|
|
59
|
-
/* ============================================= */
|
|
60
|
-
@function rem-size( $size ) {
|
|
61
|
-
$remSize: math.div($size, 16);
|
|
62
|
-
@return #{$remSize}rem;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
@function vw-size( $size ) {
|
|
66
|
-
$ceil-size: math.div(math.div($container, 1px), 1 - math.div($margin-xlarge, 100%) * 2);
|
|
67
|
-
@return calc(#{$size} * 100 / #{$ceil-size} * 1vw);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
// Breakpoint large recalcule font-size
|
|
71
|
-
@function clamp-size( $min, $value, $max) {
|
|
72
|
-
$val: vw-size($value);
|
|
73
|
-
@return clamp(#{$min}, #{$val}, #{$max});
|
|
74
|
-
}
|
|
75
|
-
|
|
76
58
|
/* Hover - TODO
|
|
77
59
|
/* ============================================= */
|
|
78
60
|
@mixin hover {
|