@iris.interactive/handcook 1.0.5 → 1.0.9

package/public/styles/scss/_variables.scss

@@ -0,0 +1,412 @@
+/*
+  * 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;
+
+
+/* Breakpoint
+/ ================================================== */
+$breakpoint-desktop: $container; // 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, 0);
+$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 + 10px);
+$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/public/styles/scss/lib/_etourisme-font.scss

@@ -4,11 +4,11 @@
     font-family: 'etourisme-font';
     font-weight: normal;
     font-style: normal;
-    src: url("../fonts/svgfont/etourisme/etourisme-font.eot"),
-    url("../fonts/svgfont/etourisme/etourisme-font.woff") format('woff'),
-    url("../fonts/svgfont/etourisme/etourisme-font.ttf") format('truetype'),
-    url("../fonts/svgfont/etourisme/etourisme-font.eot?#iefix") format('embedded-opentype'),
-    url("../fonts/svgfont/etourisme/etourisme-font.svg#etourisme-font") format('svg');
+    src: url("#{$svgfont_path}/etourisme/etourisme-font.eot"),
+    url("#{$svgfont_path}/etourisme/etourisme-font.woff") format('woff'),
+    url("#{$svgfont_path}/etourisme/etourisme-font.ttf") format('truetype'),
+    url("#{$svgfont_path}/etourisme/etourisme-font.eot?#iefix") format('embedded-opentype'),
+    url("#{$svgfont_path}/etourisme/etourisme-font.svg#etourisme-font") format('svg');
     font-display: swap;
 }
 
@@ -37,6 +37,7 @@ $allicons: map-merge($allicons, $etourisme-icons);
 
 .ei:before,
 .ei:after {
+    color: $icon-color;
     display: inline-block;
     vertical-align: middle;
     font-family: 'etourisme-font', sans-serif;

package/public/styles/scss/lib/_info-neige-font.scss

@@ -4,11 +4,11 @@
     font-family: 'info-neige-font';
     font-weight: normal;
     font-style: normal;
-    src: url('../fonts/svgfont/info-neige/info-neige-font.eot'),
-    url('../fonts/svgfont/info-neige/info-neige-font.woff') format('woff'),
-    url('../fonts/svgfont/info-neige/info-neige-font.ttf') format('truetype'),
-    url('../fonts/svgfont/info-neige/info-neige-font.eot?#iefix') format('embedded-opentype'),
-    url('../fonts/svgfont/info-neige/info-neige-font.svg#info-neige-font') format('svg');
+    src: url('#{$svgfont_path}/info-neige/info-neige-font.eot'),
+    url('#{$svgfont_path}/info-neige/info-neige-font.woff') format('woff'),
+    url('#{$svgfont_path}/info-neige/info-neige-font.ttf') format('truetype'),
+    url('#{$svgfont_path}/info-neige/info-neige-font.eot?#iefix') format('embedded-opentype'),
+    url('#{$svgfont_path}/info-neige/info-neige-font.svg#info-neige-font') format('svg');
     font-display: swap;
 }
 

package/public/styles/scss/lib/_iris-tides-font.scss

@@ -4,11 +4,11 @@
     font-family: 'iris-tides-font';
     font-weight: normal;
     font-style: normal;
-    src: url('../fonts/svgfont/iris-tides/iris-tides-font.eot'),
-    url('../fonts/svgfont/iris-tides/iris-tides-font.woff') format('woff'),
-    url('../fonts/svgfont/iris-tides/iris-tides-font.ttf') format('truetype'),
-    url('../fonts/svgfont/iris-tides/iris-tides-font.eot?#iefix') format('embedded-opentype'),
-    url('../fonts/svgfont/iris-tides/iris-tides-font.svg#iris-tides-font') format('svg');
+    src: url('#{$svgfont_path}/iris-tides/iris-tides-font.eot'),
+    url('#{$svgfont_path}/iris-tides/iris-tides-font.woff') format('woff'),
+    url('#{$svgfont_path}/iris-tides/iris-tides-font.ttf') format('truetype'),
+    url('#{$svgfont_path}/iris-tides/iris-tides-font.eot?#iefix') format('embedded-opentype'),
+    url('#{$svgfont_path}/iris-tides/iris-tides-font.svg#iris-tides-font') format('svg');
     font-display: swap;
 }
 

package/public/styles/scss/lib/_iris-weather-font.scss

@@ -4,11 +4,11 @@
     font-family: 'iris-weather-font';
     font-weight: normal;
     font-style: normal;
-    src: url('../fonts/svgfont/iris-weather/iris-weather-font.eot'),
-    url('../fonts/svgfont/iris-weather/iris-weather-font.woff') format('woff'),
-    url('../fonts/svgfont/iris-weather/iris-weather-font.ttf') format('truetype'),
-    url('../fonts/svgfont/iris-weather/iris-weather-font.eot?#iefix') format('embedded-opentype'),
-    url('../fonts/svgfont/iris-weather/iris-weather-font.svg#iris-weather-font') format('svg');
+    src: url('#{$svgfont_path}/iris-weather/iris-weather-font.eot'),
+    url('#{$svgfont_path}/iris-weather/iris-weather-font.woff') format('woff'),
+    url('#{$svgfont_path}/iris-weather/iris-weather-font.ttf') format('truetype'),
+    url('#{$svgfont_path}/iris-weather/iris-weather-font.eot?#iefix') format('embedded-opentype'),
+    url('#{$svgfont_path}/iris-weather/iris-weather-font.svg#iris-weather-font') format('svg');
     font-display: swap;
 }
 

package/public/styles/scss/lib/_theme-font.scss

@@ -4,11 +4,11 @@
     font-family: 'theme-font';
     font-weight: normal;
     font-style: normal;
-    src: url("../fonts/svgfont/theme/theme-font.eot"),
-    url("../fonts/svgfont/theme/theme-font.woff") format('woff'),
-    url("../fonts/svgfont/theme/theme-font.ttf") format('truetype'),
-    url("../fonts/svgfont/theme/theme-font.eot?#iefix") format('embedded-opentype'),
-    url("../fonts/svgfont/theme/theme-font.svg#theme-font") format('svg');
+    src: url("#{$svgfont_path}/theme/theme-font.eot"),
+    url("#{$svgfont_path}/theme/theme-font.woff") format('woff'),
+    url("#{$svgfont_path}/theme/theme-font.ttf") format('truetype'),
+    url("#{$svgfont_path}/theme/theme-font.eot?#iefix") format('embedded-opentype'),
+    url("#{$svgfont_path}/theme/theme-font.svg#theme-font") format('svg');
     font-display: swap;
 }
 
@@ -117,6 +117,7 @@ $allicons: map-merge($allicons, $theme-icons);
 
 .fi:before,
 .fi:after {
+    color: $icon-color;
     display: inline-block;
     vertical-align: middle;
     font-family: 'theme-font', sans-serif;

package/public/styles/scss/{_mixin-font.scss → mixins/_mixin-font.scss}

@@ -6,6 +6,7 @@
 /* Import
 /* ============================================= */
 $allicons: ();
+$svgfont_path: '../fonts/svgfont' !default;
 
 /* Fonticon
 /* ============================================= */

package/public/styles/scss/mixins/_mixin-layout.scss

@@ -0,0 +1,103 @@
+/*
+  * Created by IRIS Interactive
+  * User : IRIS Interactive
+*/
+@use "sass:math";
+
+/* Main gutter
+/ ================================================== */
+@mixin breakpoint($point) {
+
+    @if $point == "xlarge" {
+        @media screen and (min-width: #{$breakpoint-xlarge}) {
+            @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 if $point == "desktop" {
+        @media screen and (min-width: #{$breakpoint-desktop}) {
+            @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;
+}
+
+/* Font size
+/* ============================================= */
+@function rem-size( $size ) {
+    $remSize:  math.div($size, 16);
+    @return #{$remSize}rem;
+}
+
+// TODO : n'est plus utilisé
+@function rem-size-ratio( $size, $ratio ) {
+    @return calc((#{$size} / 16 * 1rem) * #{$ratio});
+}
+
+@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});
+}
+
+/* Hover - TODO
+/* ============================================= */
+@mixin hover {
+
+    .no-touchevents & {
+        &:hover {
+            @content;
+        }
+    }
+}
+
+/* Touch
+/* ============================================= */
+@mixin touch {
+
+    .touchevents & {
+        @content;
+    }
+}
+
+/* Clear
+/* ============================================= */
+@mixin clear {
+
+    &:after {
+        content: "";
+        display: block;
+        clear: both;
+    }
+}