@iris.interactive/handcook 1.0.12 → 2.3.0

package/resources/assets/scripts/SmoothScroll.js

@@ -0,0 +1,41 @@
+const easeInCubic = function (t) { return t*t*t }
+
+const scrollToElem = (startTime, currentTime, duration, scrollEndElemTop, startScrollOffset) => {
+	const runtime = currentTime - startTime;
+	let progress = runtime / duration;
+
+	progress = Math.min(progress, 1);
+
+	const ease = easeInCubic(progress);
+
+	window.scroll(0, startScrollOffset + (scrollEndElemTop * ease));
+	if(runtime < duration){
+		requestAnimationFrame((timestamp) => {
+			const currentTime = timestamp || new Date().getTime();
+			scrollToElem(startTime, currentTime, duration, scrollEndElemTop, startScrollOffset);
+		})
+	}
+}
+
+const SmoothScroll = (triggerAttribute, durationAnimation = 1000 ) => {
+	const triggerElement = document.querySelectorAll( triggerAttribute );
+	triggerElement.forEach( ( element, key ) => {
+		element.addEventListener( 'click', ( event ) => {
+			event.preventDefault();
+			const target = ( element.getAttribute( 'href' ) != '' ) ? document.querySelector( element.getAttribute( 'href' ) ) : document.querySelector( element.dataset.href );
+			const shift = ( element.dataset.shift !== undefined ) ? element.dataset.shift : 0;
+
+			const anim = requestAnimationFrame((timestamp) => {
+				const stamp = timestamp || new Date().getTime();
+				const start = stamp;
+
+				const startScrollOffset = window.pageYOffset;
+				const scrollEndElemTop = target.getBoundingClientRect().top - shift;
+
+				scrollToElem(start, stamp, durationAnimation, scrollEndElemTop, startScrollOffset);
+			})
+		} );
+	} );
+}
+
+export default SmoothScroll;

package/resources/assets/styles/_utils.scss

@@ -0,0 +1,96 @@
+/*
+  * Created by IRIS Interactive
+  * User : IRIS Interactive
+*/
+
+/* Utils classes
+/* ============================================= */
+.stretched-link {
+    @include stretched-link;
+}
+
+
+/* ============================================= */
+.list-flex {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 0;
+
+    > * {
+        list-style-type: none;
+        margin: 0 10px 10px 0;
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+}
+
+/* Animations
+/* ============================================= */
+@keyframes loader {
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+/* Sr-only
+/* ============================================= */
+.sr-only {
+    clip: rect(0, 0, 0, 0);
+    border-width: 0;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
+
+/* Text with icon before
+/* ============================================= */
+.text-icon {
+    display: inline-flex;
+    align-items: center;
+
+    &:before {
+        margin-right: 5px;
+    }
+
+    // If icon after
+    &:after {
+        margin-left: 5px;
+    }
+}
+
+/* Block with img animated on hover
+/* ============================================= */
+.hover-item {
+
+    img {
+        @include transition;
+        will-change: transform;
+    }
+
+    &:hover {
+        img {
+            @include animate;
+        }
+    }
+}
+
+/* Opening
+/* ============================================= */
+.is-opened {
+    color: $c-success;
+}
+
+.soon-closed {
+    color: $c-warning;
+}
+
+.is-closed {
+    color: $c-error;
+}

package/resources/assets/styles/_variables.scss

@@ -0,0 +1,419 @@
+/*
+  * Created by IRIS Interactive
+  * User : IRIS Interactive
+*/
+@use "sass:math";
+
+/* Layout
+/ ================================================== */
+$container: 1220px;
+$article: 800px;
+$sidebar: 360px;
+
+$header: 120px; //TODO: Hérité du plugin customer ?
+$header-small: 80px; //TODO: Hérité du plugin customer ?
+
+
+/* Gutter
+/ ================================================== */
+$gutter: 40px;
+$gutter-large: $gutter*2;
+$gutter-medium: 20px;
+$gutter-small: 20px;
+
+
+/* Margin
+/ ================================================== */
+$section-margin-top: 100px;
+$section-margin-bottom: 60px;
+$section-margin-top-small: 40px;
+$section-margin-bottom-small: 40px;
+$text-margin-bottom: 20px;
+
+$title-margin-top: 60px;
+$title-margin-bottom: 40px;
+$title-margin-top-small: 40px;
+$title-margin-bottom-small: 20px;
+
+$block-margin-top: 60px;
+$block-margin-top-medium: 60px;
+$block-margin-top-small: 30px;
+$block-margin-bottom: 60px;
+$block-margin-bottom-medium: 60px;
+$block-margin-bottom-small: 30px;
+
+
+/* Margin
+/ ================================================== */
+$margin-xlarge: 8%;
+$margin-large: 60px;
+$margin-medium: 40px;
+$margin-small: 20px;
+$margin-xsmall: 20px;
+
+$viewport-borders: (
+    "large": $margin-large,
+    "medium": $margin-medium,
+    "small": $margin-small,
+    "xsmall": $margin-xsmall,
+);
+
+
+/* Breakpoint
+/ ================================================== */
+$breakpoint-desktop: 1000.1px; // min-width
+$breakpoint-xlarge: math.div($container, 1 - math.div($margin-xlarge, 100%) * 2)+1; // min-width
+$breakpoint-large: math.div($container, 1 - math.div($margin-xlarge, 100%) * 2); // max-width
+$breakpoint-medium: 1000px; // max-width
+$breakpoint-small: 650px; // max-width
+$breakpoint-xsmall: 370px; // max-width
+
+
+/* Global
+/ ================================================== */
+$font-family: var(--iris--global--font-family);
+$font-weight: var(--iris--global--font-weight);
+$font-size: var(--iris--global--font-size-regular);
+$font-size--rem: var(--iris--global--font-size-regular--rem);
+$line-height: 1.75;
+$color: var(--iris--global--color);
+$background-color: var(--iris--global--background-color);
+
+$border-color: var(--iris--global--border-color);
+$border-radius: var(--iris--global--border-radius);
+$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);
+
+$font-size-xsmall: var(--iris--global--font-size-xsmall);
+$font-size-xsmall--rem: var(--iris--global--font-size-xsmall--rem);
+$font-size-small: var(--iris--global--font-size-small);
+$font-size-small--rem: var(--iris--global--font-size-small--rem);
+$font-size-regular: $font-size;
+$font-size-regular--rem: $font-size--rem;
+$font-size-large: var(--iris--global--font-size-large);
+$font-size-large--rem: var(--iris--global--font-size-large--rem);
+$font-size-large--small: var(--iris--global--font-size-large--small);
+$font-size-large--small--rem: var(--iris--global--font-size-large--small--rem);
+$font-size-extra-large: var(--iris--global--font-size-extra-large);
+$font-size-extra-large--rem: var(--iris--global--font-size-extra-large--rem);
+$font-size-extra-large--small: var(--iris--global--font-size-extra-large--small);
+$font-size-extra-large--small--rem: var(--iris--global--font-size-extra-large--small--rem);
+
+
+//Icon
+$icon-color: var(--iris--icon--color);
+
+
+//Rank
+$rank-color: #ffc400; // var(--iris--rank--color)
+
+
+//Meta
+$meta-color: var(--iris--meta--color);
+$meta-font-size: $font-size-small;
+$meta-font-size--rem: $font-size-small--rem;
+
+// Links
+$link-color: var(--iris--link--color);
+$link-color-hover: var(--iris--link--color-hover);
+$link-text-decoration: var(--iris--link--text-decoration, none);
+$link-box-shadow: var(--iris--link--box-shadow, none);
+$link-underline-offset: var(--iris--link--underline-offset, 2px);
+$link-font-weight: var(--iris--link--font-weight);
+
+
+// Advanced Links
+$advanced-link-font-weight: var(--iris--advanced-link--font-weight);
+$advanced-link-font-family: var(--iris--advanced-link--font-family);
+$advanced-link-text-transform: var(--iris--advanced-link--text-transform);
+$advanced-link-letter-spacing: var(--iris--advanced-link--letter-spacing);
+$advanced-link-font-size: var(--iris--advanced-link--font-size);
+$advanced-link-font-size-rem: var(--iris--advanced-link--font-size--rem);
+$advanced-link-color: var(--iris--advanced-link--color);
+$advanced-link-color-hover: var(--iris--advanced-link--color-hover);
+$advanced-link-text-decoration: var(--iris--advanced-link--text-decoration, none);
+$advanced-link-underline-offset: var(--iris--advanced-link--underline-offset, 0);
+
+
+// List
+$list-color: var(--iris--list--color);
+$list-style-type: var(--iris--list--style-type, 50%);
+$list-padding-left: calc(#{$font-size} * 1px + 10px);
+
+
+//Heading
+$h1-font-family: var(--iris--h1--font-family);
+$h1-font-weight: var(--iris--h1--font-weight, 400);
+$h1-font-size: var(--iris--h1--font-size);
+$h1-font-size--rem: var(--iris--h1--font-size--rem);
+$h1-font-size-medium: var(--iris--h1--font-size--medium);
+$h1-font-size-medium--rem: var(--iris--h1--font-size--medium--rem);
+$h1-font-size-small: var(--iris--h1--font-size--small);
+$h1-font-size-small--rem: var(--iris--h1--font-size--small--rem);
+$h1-color: var(--iris--h1--color);
+$h1-text-align: var(--iris--h1--text-align);
+$h1-text-transform: var(--iris--h1--text-transform);
+
+$h2-font-family: var(--iris--h2--font-family);
+$h2-font-weight: var(--iris--h2--font-weight, 400);
+$h2-font-size: var(--iris--h2--font-size);
+$h2-font-size--rem: var(--iris--h2--font-size--rem);
+$h2-font-size-small: var(--iris--h2--font-size--small);
+$h2-font-size-small--rem: var(--iris--h2--font-size--small--rem);
+$h2-color: var(--iris--h2--color);
+$h2-text-align: var(--iris--h2--text-align);
+$h2-text-transform: var(--iris--h2--text-transform);
+
+$h3-font-family: var(--iris--h3--font-family);
+$h3-font-weight: var(--iris--h3--font-weight, 400);
+$h3-font-size: var(--iris--h3--font-size);
+$h3-font-size--rem: var(--iris--h3--font-size--rem);
+$h3-font-size-medium: var(--iris--h3--font-size--medium);
+$h3-font-size-medium--rem: var(--iris--h3--font-size--medium--rem);
+$h3-font-size-small: var(--iris--h3--font-size--small);
+$h3-font-size-small--rem: var(--iris--h3--font-size--small--rem);
+$h3-color: var(--iris--h3--color);
+$h3-text-align: var(--iris--h3--text-align);
+$h3-text-transform: var(--iris--h3--text-transform);
+
+$h4-font-family: var(--iris--h4--font-family);
+$h4-font-weight: var(--iris--h4--font-weight, 400);
+$h4-font-size: var(--iris--h4--font-size);
+$h4-font-size--rem: var(--iris--h4--font-size--rem);
+$h4-font-size-medium: var(--iris--h4--font-size--medium);
+$h4-font-size-medium--rem: var(--iris--h4--font-size--medium--rem);
+$h4-font-size-small: var(--iris--h4--font-size--small);
+$h4-font-size-small--rem: var(--iris--h4--font-size--small--rem);
+$h4-color: var(--iris--h4--color);
+$h4-text-align: var(--iris--h4--text-align);
+$h4-text-transform: var(--iris--h4--text-transform);
+
+$h5-font-family: var(--iris--h5--font-family);
+$h5-font-weight: var(--iris--h5--font-weight, 400);
+$h5-font-size: var(--iris--h5--font-size);
+$h5-font-size--rem: var(--iris--h5--font-size--rem);
+$h5-font-size-medium: var(--iris--h5--font-size--medium);
+$h5-font-size-medium--rem: var(--iris--h5--font-size--medium--rem);
+$h5-font-size-small: var(--iris--h5--font-size--small);
+$h5-font-size-small--rem: var(--iris--h5--font-size--small--rem);
+$h5-color: var(--iris--h5--color);
+$h5-text-align: var(--iris--h5--text-align);
+$h5-text-transform: var(--iris--h5--text-transform);
+
+$h6-font-family: var(--iris--h6--font-family);
+$h6-font-weight: var(--iris--h6--font-weight, 400);
+$h6-font-size: var(--iris--h6--font-size);
+$h6-font-size--rem: var(--iris--h6--font-size--rem);
+$h6-font-size-medium: var(--iris--h6--font-size--medium);
+$h6-font-size-medium--rem: var(--iris--h6--font-size--medium--rem);
+$h6-font-size-small: var(--iris--h6--font-size--small);
+$h6-font-size-small--rem: var(--iris--h6--font-size--small--rem);
+$h6-color: var(--iris--h6--color);
+$h6-text-align: var(--iris--h6--text-align);
+$h6-text-transform: var(--iris--h6--text-transform);
+
+
+// Blockquote
+$blockquote-color: var(--iris--blockquote--color);
+$blockquote-font-family: var(--iris--blockquote--font-family);
+$blockquote-font-weight: var(--iris--blockquote--font-weight);
+$blockquote-font-style: var(--iris--blockquote--font-style);
+$blockquote-font-size: var(--iris--blockquote--font-size);
+$blockquote-font-size--rem: var(--iris--blockquote--font-size--rem);
+$blockquote-font-size-small: var(--iris--blockquote--font-size--small);
+$blockquote-font-size-small--rem: var(--iris--blockquote--font-size--small--rem);
+$blockquote-padding-left: calc(#{$blockquote-font-size} * 1px + 20px);
+$blockquote-text-align: var(--iris--blockquote--text-align);
+
+
+// Excerpt
+$excerpt-font-family: var(--iris--excerpt--font-family);
+$excerpt-font-weight: var(--iris--excerpt--font-weight);
+$excerpt-font-style: var(--iris--excerpt--font-style);
+$excerpt-font-size: var(--iris--excerpt--font-size);
+$excerpt-font-size--rem: var(--iris--excerpt--font-size--rem);
+$excerpt-font-size-small: var(--iris--excerpt--font-size--small);
+$excerpt-font-size-small--rem: var(--iris--excerpt--font-size--small--rem);
+$excerpt-color: var(--iris--excerpt--color);
+$excerpt-text-align: var(--iris--excerpt--text-align);
+
+
+// Separator
+$hr-height: var(--iris--hr--height);
+$hr-width: var(--iris--hr--width);
+
+
+// Table
+$table-thead-color: var(--iris--table--thead--color);
+$table-thead-background-color: var(--iris--table--thead--background-color);
+$table-even-background-color: var(--iris--table--even--background-color);
+
+// Form
+$form-field-color: var(--iris--form-field--color);
+$form-field-background-color: var(--iris--form-field--background-color, transparent);
+$form-field-border-color: var(--iris--form-field--border-color, transparent);
+$form-field-border-style: var(--iris--form-field--border-style);
+$form-field-border: var(--iris--form-field--border);
+$form-field-height: var(--iris--form-field--height);
+$form-field-border-radius: var(--iris--form-field--border-radius);
+
+
+// Button
+$button-font-weight : var(--iris--button--font-weight, 400);
+$button-font-family : var(--iris--button--font-family);
+$button-text-transform : var(--iris--button--text-transform);
+$button-letter-spacing : var(--iris--button--letter-spacing);
+$button-padding-x: var(--iris--button--padding-x);
+$button-padding-y: var(--iris--button--padding-y);
+$button-font-size: var(--iris--button--font-size);
+$button-font-size--rem: var(--iris--button--font-size--rem);
+$button-border-radius: var(--iris--button--border-radius);
+$button-color: var(--iris--button--color);
+$button-background-color: var(--iris--button--background-color);
+$button-color-hover: var(--iris--button--color-hover);
+$button-background-color-hover: var(--iris--button--background-color-hover, none);
+$button-background-image: var(--iris--button--background-image, none);
+$button-gradient-background-image-size: var(--iris--global--gradient-background-size, (200% 100%));
+$button-border: var(--iris--button--border, none);
+$button-border-hover: var(--iris--button--border-hover, none);
+
+// Tags
+$tag-padding-top: var(--iris--tag--padding-top);
+$tag-padding-right: var(--iris--tag--padding-right);
+$tag-padding-bottom: var(--iris--tag--padding-bottom);
+$tag-padding-left: var(--iris--tag--padding-left);
+$tag-font-size: var(--iris--tag--font-size);
+$tag-font-size--rem: var(--iris--tag--font-size--rem);
+
+// Tags border
+$border-tag-color: var(--iris--tag--border--text-color);
+$border-tag-border-color: var(--iris--tag--border--border-color);
+
+//Tags background
+$background-tag-color: var(--iris--tag--background--text-color);
+$background-tag-background-color: var(--iris--tag--background--background-color);
+
+// Tooltip
+$tooltip-color: var(--iris--tooltip--color);
+$tooltip-background-color: var(--iris--tooltip--background-color);
+
+// Popover
+$popover-color: var(--iris--popover--color);
+$popover-background-color: var(--iris--popover--background-color);
+
+
+// Switch
+$switch-on: var(--iris--switch--color-on);
+$switch-off: var(--iris--switch--color-off);
+
+
+// Highlight
+$highlight-color: var(--iris--highlight--color);
+$highlight-background-color: var(--iris--highlight--background-color);
+$highlight-link-color: var(--iris--highlight--color-link);
+$highlight-link-color-hover: var(--iris--highlight--color-link-hover);
+
+// Highlight
+$highlight-color: var(--iris--highlight--color);
+$highlight-background-color: var(--iris--highlight--background-color);
+$highlight-link-color: var(--iris--highlight--color-link);
+$highlight-link-color-hover: var(--iris--highlight--color-link-hover);
+
+// Single SIT highlight
+$detail-sit-highlight-color: var(--iris--detail-sit-highlight--color);
+$detail-sit-highlight-background-color: var(--iris--detail-sit-highlight--background-color);
+$detail-sit-highlight-link-color: var(--iris--detail-sit-highlight--color-link);
+$detail-sit-highlight-link-color-hover: var(--iris--detail-sit-highlight--color-link-hover);
+
+// Strate Full
+$stratefull-color: var(--iris--stratefull--color);
+$stratefull-background-color: var(--iris--stratefull--background-color);
+$stratefull-link-color: var(--iris--stratefull--color-link);
+$stratefull-link-color-hover: var(--iris--stratefull--color-link-hover);
+$stratefull-content-x: var(--iris--stratefull--content-x);
+$stratefull-content-y: var(--iris--stratefull--content-y);
+$stratefull-content-width: var(--iris--stratefull--content-width);
+
+
+// Brochures form
+$brochure-form-color: var(--iris--brochure-form--color);
+$brochure-form-background-color: var(--iris--brochure-form--background-color);
+$brochure-form-link-color: var(--iris--brochure-form--color-link);
+$brochure-form-link-color-hover: var(--iris--brochure-form--color-link-hover);
+$brochure-form-field-background-color: var(--iris--brochure-form-field--background-color);
+$brochure-form-field-border-color: var(--iris--brochure-form-field--border-color);
+$brochure-form-field-border: var(--iris--brochure-form-field--border);
+$brochure-form-field-color: var(--iris--brochure-form-field--color);
+
+
+// Alternative content
+$alternative-content-color: var(--iris--alternative-content--color);
+$alternative-content-background-color: var(--iris--alternative-content--background-color);
+$alternative-content-link-color: var(--iris--alternative-content--color-link);
+$alternative-content-link-color-hover: var(--iris--alternative-content--color-link-hover);
+
+
+// Relative content
+$relative-content-color: var(--iris--relative-content--color);
+$relative-content-background-color: var(--iris--relative-content--background-color);
+$relative-content-link-color: var(--iris--relative-content--color-link);
+$relative-content-link-color-hover: var(--iris--relative-content--color-link-hover);
+
+
+// Video highlight
+$video-highlight-color: var(--iris--video-highlight--color);
+$video-highlight-background-color: var(--iris--video-highlight--background-color);
+$video-highlight-link-color: var(--iris--video-highlight--color-link);
+$video-highlight-link-color-hover: var(--iris--video-highlight--color-link-hover);
+
+
+// Authors
+$authors-color: var(--iris--authors--color);
+$authors-background-color: var(--iris--authors--background-color);
+$authors-link-color: var(--iris--authors--color-link);
+$authors-link-color-hover: var(--iris--authors--color-link-hover);
+
+
+// Ma Plage
+$ma-plage-color: var(--iris--ma-plage--color);
+$ma-plage-background-color: var(--iris--ma-plage--background-color);
+$ma-plage-link-color: var(--iris--ma-plage--color-link);
+$ma-plage-link-color-hover: var(--iris--ma-plage--color-link-hover);
+
+
+// Tides
+$tides-background-color: var(--iris--tides--background-color);
+$tides-color: var(--iris--tides--color);
+$tides-link-color: var(--iris--tides--color-link);
+$tides-link-color-hover: var(--iris--tides--color-link-hover);
+
+
+// Snow
+$snow-color: var(--iris--snow--color);
+$snow-background-color: var(--iris--snow--background-color);
+$snow-link-color: var(--iris--snow--color-link);
+$snow-link-color-hover: var(--iris--snow--color-link-hover);
+
+
+// How to come
+$how-to-come-color: var(--iris--how-to-come--color);
+$how-to-come-background-color: var(--iris--how-to-come--background-color);
+$how-to-come-link-color: var(--iris--how-to-come--color-link);
+$how-to-come-link-color-hover: var(--iris--how-to-come--color-link-hover);
+
+// Trip
+$trip-color: var(--iris--trip--color);
+$trip-background-color: var(--iris--trip--background-color);
+$trip-link-color: var(--iris--trip--color-link);
+$trip-link-color-hover: var(--iris--trip--color-link-hover);
+
+/* Notifications
+/ ================================================== */
+$c-error: #f33;
+$c-success: #009e55;
+$c-warning: #ff890e;
+
+/* Difficulty
+/ ================================================== */
+$c-easy: #9ccc65;
+$c-medium: #ff890e;
+$c-hard: #ef5350;

package/resources/assets/styles/handcook.scss

@@ -0,0 +1,20 @@
+/*!
+ * IRIS Interactive
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is no subject to a specific license
+ * but it belongs to the company IRIS Interactive.
+ * You can contact IRIS Interactive at the following
+ * address: contact@iris-interactive.fr
+ *
+ * @author      Fabien SERRA
+ * @date        27/01/2022 13:39
+ * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
+ */
+
+@import "variables";
+@import "mixins/mixin-font";
+@import "mixins/mixin-layout";
+@import "mixins/mixin-style";
+@import "utils";

package/resources/assets/styles/mixins/_mixin-font.scss

@@ -0,0 +1,43 @@
+/*!
+ * IRIS Interactive
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is no subject to a specific license
+ * but it belongs to the company IRIS Interactive.
+ * You can contact IRIS Interactive at the following
+ * address: contact@iris-interactive.fr
+ *
+ * @author      Lucas ROCHE
+ * @date        28/01/2022 07:41
+ * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
+ */
+@use "sass:math";
+
+/* Font icon
+/* ============================================= */
+@mixin fi($unicode) {
+    content: $unicode;
+    font-family: "collection-font";
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+}
+
+/* Font size
+/* ============================================= */
+@function rem-size( $size ) {
+    $remSize: math.div($size, 16);
+    @return #{$remSize}rem;
+}
+
+@function vw-size( $size ) {
+    $ceil-size: math.div(math.div($container, 1px), 1 - math.div($margin-xlarge, 100%) * 2);
+    @return calc(#{$size} * 100 / #{$ceil-size} * 1vw);
+}
+
+// Breakpoint large recalcule font-size
+@function clamp-size( $min, $value, $max) {
+    $val: vw-size($value);
+    @return clamp(#{$min}, #{$val}, #{$max});
+}

package/resources/assets/styles/mixins/_mixin-layout.scss

@@ -0,0 +1,84 @@
+/*
+  * Created by IRIS Interactive
+  * User : IRIS Interactive
+*/
+@use "sass:math";
+
+/* Main gutter
+/ ================================================== */
+@function viewport-border($index) {
+    @return map_get($viewport-borders, $index);
+}
+
+
+/* Breakpoints
+/* ============================================= */
+@mixin breakpoint($point) {
+
+    @if $point == "xlarge" {
+        @media screen and (min-width: #{$breakpoint-xlarge}) {
+            @content;
+        }
+    } @else if $point == "desktop" {
+        @media screen and (min-width: #{$breakpoint-desktop}) {
+            @content;
+        }
+    } @else if $point == "large" {
+        @media screen and (max-width: #{$breakpoint-large}) {
+            @content;
+        }
+    } @else if $point == "medium" {
+        @media screen and (max-width: #{$breakpoint-medium}) {
+            @content;
+        }
+    } @else if $point == "small" {
+        @media screen and (max-width: #{$breakpoint-small}) {
+            @content;
+        }
+    } @else if $point == "xsmall" {
+        @media screen and (max-width: #{$breakpoint-xsmall}) {
+            @content;
+        }
+    } @else {
+        @media screen and (max-width: $point) {
+            @content;
+        }
+    }
+}
+
+/* display flex
+/* ============================================= */
+@mixin d-flex( $position-x, $position-y, $direction : row, $display : flex ) {
+    display: $display;
+    justify-content: $position-x;
+    align-items: $position-y;
+    flex-direction: $direction;
+}
+
+/* Hover - TODO
+/* ============================================= */
+@mixin hover {
+    &:hover {
+        @content;
+    }
+}
+
+/* Touch
+/* ============================================= */
+@mixin touch {
+
+    .touchevents & {
+        @content;
+    }
+}
+
+/* Clear
+/* ============================================= */
+@mixin clear {
+
+    &:after {
+        content: "";
+        display: block;
+        clear: both;
+    }
+}