@iris.interactive/handcook 7.2.3-beta → 8.0.0-alpha.10

package/public/styles/scss/_utils.scss

@@ -1,3 +1,7 @@
+@use "mixins/mixin-layout";
+@use "mixins/mixin-style";
+@use "variables";
+
 /*
   * Created by IRIS Interactive
   * User : IRIS Interactive
@@ -6,7 +10,7 @@
 /* Utils classes
 /* ============================================= */
 .stretched-link {
-    @include stretched-link;
+    @include mixin-style.stretched-link;
 }
 
 
@@ -76,13 +80,13 @@
 .hover-item {
 
     img {
-        @include transition;
+        @include mixin-style.transition;
         will-change: transform;
     }
 
     &:hover {
         img {
-            @include animate;
+            @include mixin-style.animate;
         }
     }
 }
@@ -90,55 +94,56 @@
 /* Opening
 /* ============================================= */
 .is-open {
-    color: $c-success;
+    color: variables.$c-success;
 }
 
 .soon-close {
-    color: $c-warning;
+    color: variables.$c-warning;
 }
 
 .is-close {
-    color: $c-error;
+    color: variables.$c-error;
 }
 
-/* Font
+/* Color icon
 /* ============================================= */
-.fi--color:before,
-.fi-color:after {
-    color: var(--iris--icon--color);
+@include fi-selector() {
+    &--color:after, &--color:before {
+        color: $icon-color;
+    }
 }
 
 /* Sizes
 /* ============================================= */
 .font-size-xsmall {
-    font-size: $font-size-xsmall--rem;
+    font-size: variables.$font-size-xsmall--rem;
 }
 
 .font-size-small {
-    font-size: $font-size-small--rem;
+    font-size: variables.$font-size-small--rem;
 }
 
 .font-size-regular {
-    font-size: $font-size-regular--rem;
+    font-size: variables.$font-size-regular--rem;
 
-    @include breakpoint(small) {
-        font-size: $font-size-regular--small--rem;
+    @include mixin-layout.breakpoint(small) {
+        font-size: variables.$font-size-regular--small--rem;
     }
 }
 
 .font-size-large {
-    font-size: $font-size-large--rem;
+    font-size: variables.$font-size-large--rem;
 
-    @include breakpoint(small) {
-        font-size: $font-size-large--small--rem;
+    @include mixin-layout.breakpoint(small) {
+        font-size: variables.$font-size-large--small--rem;
     }
 }
 
 .font-size-xlarge {
-    font-size: $font-size-extra-large--rem;
+    font-size: variables.$font-size-extra-large--rem;
 
-    @include breakpoint(small) {
-        font-size: $font-size-extra-large--small--rem;
+    @include mixin-layout.breakpoint(small) {
+        font-size: variables.$font-size-extra-large--small--rem;
     }
 }
 

package/public/styles/scss/handcook.scss

@@ -13,8 +13,8 @@
  * @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";
+@use "variables";
+@use "mixins/mixin-font";
+@use "mixins/mixin-layout";
+@use "mixins/mixin-style";
+@use "utils";

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

@@ -1,3 +1,5 @@
+@use "../variables";
+
 /*!
  * IRIS Interactive
  *
@@ -16,15 +18,26 @@
 
 /* Font icon
 /* ============================================= */
-@mixin fi($name) {
-    content: var(--font-icon--#{$name});
-    font-family: "collection-font";
+@mixin fi($name, $font: 'customer-font') {
+    content: var(--#{$font}--#{$name});
+    font-family: #{$font};
     font-style: initial;
     text-transform: none;
     font-weight: 400;
     font-display: swap;
 }
 
+/* Font icon selector
+/* ============================================= */
+@mixin fi-selector($prefix: '') {
+    #{$prefix}.ficore,
+    #{$prefix}.fiet,
+    #{$prefix}.figb,
+    #{$prefix}.fi {
+        @content;
+    }
+}
+
 /* Font size
 /* ============================================= */
 @function rem-size( $size ) {
@@ -33,7 +46,7 @@
 }
 
 @function vw-size( $size ) {
-    $ceil-size: ($container / 1px) / (1 - ($margin-xlarge / 100%) * 2);
+    $ceil-size: (variables.$container / 1px) / (1 - (variables.$margin-xlarge / 100%) * 2);
     @return calc(#{$size} * 100 / #{$ceil-size} * 1vw);
 }
 
@@ -45,7 +58,7 @@
 
 /* Text icon
 /* ============================================= */
-@mixin text-icon($icon: '', $format: '', $alignment: '', $icon-position: before) {
+@mixin text-icon($icon: '', $format: '', $alignment: '', $icon-position: before, $font: 'customer-font') {
     display: inline-flex;
     align-items: center;
 
@@ -59,14 +72,14 @@
     }
 
     @if $format == 'meta' {
-        font-size: #{$meta-font-size--rem};
+        font-size: #{variables.$meta-font-size--rem};
         line-height: 1.2;
     }
 
     @if $icon != '' {
         &:#{$icon-position} {
-            color: #{$icon-color};
-            @include fi(#{$icon});
+            color: #{variables.$icon-color};
+            @include fi(#{$icon}, #{$font});
         }
     }
 
@@ -74,4 +87,4 @@
     @if $alignment != '' {
         align-items: flex-#{$alignment};
     }
-}
+}

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

@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "../variables";
+
 /*
   * Created by IRIS Interactive
   * User : IRIS Interactive
@@ -7,7 +10,7 @@
 /* Main gutter
 / ================================================== */
 @function viewport-border($index) {
-    @return map_get($viewport-borders, $index);
+    @return map.get(variables.$viewport-borders, $index);
 }
 
 
@@ -16,27 +19,27 @@
 @mixin breakpoint($point) {
 
     @if $point == "xlarge" {
-        @media screen and (min-width: #{$breakpoint-xlarge}) {
+        @media screen and (min-width: #{variables.$breakpoint-xlarge}) {
             @content;
         }
     } @else if $point == "desktop" {
-        @media screen and (min-width: #{$breakpoint-desktop}) {
+        @media screen and (min-width: #{variables.$breakpoint-desktop}) {
             @content;
         }
     } @else if $point == "large" {
-        @media screen and (max-width: #{$breakpoint-large}) {
+        @media screen and (max-width: #{variables.$breakpoint-large}) {
             @content;
         }
     } @else if $point == "medium" {
-        @media screen and (max-width: #{$breakpoint-medium}) {
+        @media screen and (max-width: #{variables.$breakpoint-medium}) {
             @content;
         }
     } @else if $point == "small" {
-        @media screen and (max-width: #{$breakpoint-small}) {
+        @media screen and (max-width: #{variables.$breakpoint-small}) {
             @content;
         }
     } @else if $point == "xsmall" {
-        @media screen and (max-width: #{$breakpoint-xsmall}) {
+        @media screen and (max-width: #{variables.$breakpoint-xsmall}) {
             @content;
         }
     } @else {

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

@@ -1,3 +1,6 @@
+@use "../variables";
+@use "mixin-layout";
+
 /*
   * Created by IRIS Interactive
   * User : IRIS Interactive
@@ -36,19 +39,19 @@
         padding-bottom: $padding;
 
         @if $padding-medium != 0 {
-            @include breakpoint(medium) {
+            @include mixin-layout.breakpoint(medium) {
                 padding-bottom: $padding-medium;
             }
         }
 
         @if $padding-small != 0 {
-            @include breakpoint(small) {
+            @include mixin-layout.breakpoint(small) {
                 padding-bottom: $padding-small;
             }
         }
 
         @if $padding-small != 0 {
-            @include breakpoint(xsmall) {
+            @include mixin-layout.breakpoint(xsmall) {
                 padding-bottom: $padding-xsmall;
             }
         }
@@ -141,51 +144,51 @@
     line-height: 1.4;
     cursor: pointer;
     border: none;
-    font-weight: $button-font-weight;
-    font-family: $button-font-family;
-    text-transform: $button-text-transform;
-    letter-spacing: $button-letter-spacing;
-    padding: $button-padding-y $button-padding-x;
-    border-radius: $button-border-radius;
-    font-size: $button-font-size--rem;
-    color: $button-color;
-    background-color: $button-background-color;
-    background-image: $button-background-image;
-    background-size: $button-gradient-background-image-size;
-    background-position: $button-gradient-background-image-position;
-    border: $button-border;
+    font-weight: variables.$button-font-weight;
+    font-family: variables.$button-font-family;
+    text-transform: variables.$button-text-transform;
+    letter-spacing: variables.$button-letter-spacing;
+    padding: variables.$button-padding-y variables.$button-padding-x;
+    border-radius: variables.$button-border-radius;
+    font-size: variables.$button-font-size--rem;
+    color: variables.$button-color;
+    background-color: variables.$button-background-color;
+    background-image: variables.$button-background-image;
+    background-size: variables.$button-gradient-background-image-size;
+    background-position: variables.$button-gradient-background-image-position;
+    border: variables.$button-border;
     word-break: normal;
     @include transition;
 
-    @include breakpoint(small) {
-        padding: $button-padding-y-small $button-padding-x-small;
-        font-size: $button-font-size-small--rem;
+    @include mixin-layout.breakpoint(small) {
+        padding: variables.$button-padding-y-small variables.$button-padding-x-small;
+        font-size: variables.$button-font-size-small--rem;
     }
 
     &:before,
     &.fi:before,
     .fi:before {
-        color: $button-color;
+        color: variables.$button-color;
         @include transition;
     }
 
     &:visited {
-        color: $button-color;
-        background-color: $button-background-color;
-        background-image: $button-background-image;
-        background-size: $button-gradient-background-image-size;
-        background-position: $button-gradient-background-image-position;
-        border: $button-border;
+        color: variables.$button-color;
+        background-color: variables.$button-background-color;
+        background-image: variables.$button-background-image;
+        background-size: variables.$button-gradient-background-image-size;
+        background-position: variables.$button-gradient-background-image-position;
+        border: variables.$button-border;
     }
 
     @include hover-focus {
-        color: $button-color-hover;
-        background-color: $button-background-color-hover;
-        border: $button-border-hover;
-        background-position: $button-gradient-background-image-position-hover;
+        color: variables.$button-color-hover;
+        background-color: variables.$button-background-color-hover;
+        border: variables.$button-border-hover;
+        background-position: variables.$button-gradient-background-image-position-hover;
 
         &:before {
-            color: $button-color-hover;
+            color: variables.$button-color-hover;
         }
     }
 }
@@ -198,51 +201,51 @@
     line-height: 1.4;
     cursor: pointer;
     border: none;
-    font-weight: $secondary-button-font-weight;
-    font-family: $secondary-button-font-family;
-    text-transform: $secondary-button-text-transform;
-    letter-spacing: $secondary-button-letter-spacing;
-    padding: $secondary-button-padding-y $secondary-button-padding-x;
-    border-radius: $secondary-button-border-radius;
-    font-size: $secondary-button-font-size--rem;
-    color: $secondary-button-color;
-    background-color: $secondary-button-background-color;
-    background-image: $secondary-button-background-image;
-    background-size: $secondary-button-gradient-background-image-size;
-    background-position: $secondary-button-gradient-background-image-position;
-    border: $secondary-button-border;
+    font-weight: variables.$secondary-button-font-weight;
+    font-family: variables.$secondary-button-font-family;
+    text-transform: variables.$secondary-button-text-transform;
+    letter-spacing: variables.$secondary-button-letter-spacing;
+    padding: variables.$secondary-button-padding-y variables.$secondary-button-padding-x;
+    border-radius: variables.$secondary-button-border-radius;
+    font-size: variables.$secondary-button-font-size--rem;
+    color: variables.$secondary-button-color;
+    background-color: variables.$secondary-button-background-color;
+    background-image: variables.$secondary-button-background-image;
+    background-size: variables.$secondary-button-gradient-background-image-size;
+    background-position: variables.$secondary-button-gradient-background-image-position;
+    border: variables.$secondary-button-border;
     word-break: normal;
     @include transition;
 
-    @include breakpoint(small) {
-        padding: $secondary-button-padding-y-small $secondary-button-padding-x-small;
-        font-size: $secondary-button-font-size-small--rem;
+    @include mixin-layout.breakpoint(small) {
+        padding: variables.$secondary-button-padding-y-small variables.$secondary-button-padding-x-small;
+        font-size: variables.$secondary-button-font-size-small--rem;
     }
 
     &:before,
     &.fi:before,
     .fi:before {
-        color: $secondary-button-color;
+        color: variables.$secondary-button-color;
         @include transition;
     }
 
     &:visited {
-        color: $secondary-button-color;
-        background-color: $secondary-button-background-color;
-        background-image: $secondary-button-background-image;
-        background-size: $secondary-button-gradient-background-image-size;
-        background-position: $secondary-button-gradient-background-image-position;
-        border: $secondary-button-border;
+        color: variables.$secondary-button-color;
+        background-color: variables.$secondary-button-background-color;
+        background-image: variables.$secondary-button-background-image;
+        background-size: variables.$secondary-button-gradient-background-image-size;
+        background-position: variables.$secondary-button-gradient-background-image-position;
+        border: variables.$secondary-button-border;
     }
 
     @include hover-focus {
-        color: $secondary-button-color-hover;
-        background-color: $secondary-button-background-color-hover;
-        border: $secondary-button-border-hover;
-        background-position: $secondary-button-gradient-background-image-position-hover;
+        color: variables.$secondary-button-color-hover;
+        background-color: variables.$secondary-button-background-color-hover;
+        border: variables.$secondary-button-border-hover;
+        background-position: variables.$secondary-button-gradient-background-image-position-hover;
 
         &:before {
-            color: $secondary-button-color-hover;
+            color: variables.$secondary-button-color-hover;
         }
     }
-}
+}

package/public/styles/scss/style.css

@@ -12,175 +12,4 @@
  * @date        27/01/2022 14:32
  * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
  */
-/*
-  * Created by IRIS Interactive
-  * User : IRIS Interactive
-*/
-/* Layout
-/ ================================================== */
-/* Gutter
-/ ================================================== */
-/* Margin
-/ ================================================== */
-/* Margin
-/ ================================================== */
-/* Breakpoint
-/ ================================================== */
-/* Global
-/ ================================================== */
-/* Notifications
-/ ================================================== */
-/* Difficulty
-/ ================================================== */
-/*
-  * Created by IRIS Interactive
-  * User : IRIS Interactive
-*/
-/* Main gutter
-/ ================================================== */
-/* Breakpoints
-/* ============================================= */
-/* display flex
-/* ============================================= */
-/* Hover - TODO
-/* ============================================= */
-/* Touch
-/* ============================================= */
-/* Clear
-/* ============================================= */
-/*
-  * Created by IRIS Interactive
-  * User : IRIS Interactive
-*/
-/* Transition
-/* ============================================= */
-/* Hover
-/* ============================================= */
-/* Ellipsis
-/* ============================================= */
-/*  Adaptive height block
-/* ============================================= */
-/* Line clamp
-/* ============================================= */
-/* Object fit
-/* ============================================= */
-/* Linear Gradient
-/* ============================================= */
-/* fit-content
-/* ============================================= */
-/* stretched-link
-/* ============================================= */
-/* sr-only
-/* ============================================= */
-/*!
- * 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)
- */
-/* Font icon
-/* ============================================= */
-/* Font size
-/* ============================================= */
-/*
-  * Created by IRIS Interactive
-  * User : IRIS Interactive
-*/
-/* Utils classes
-/* ============================================= */
-.stretched-link:before {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1;
-  pointer-events: auto;
-  content: "";
-  background-color: transparent;
-}
-
-/* ============================================= */
-.list-flex {
-  display: flex;
-  flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.list-flex > * {
-  list-style-type: none;
-  margin: 0 10px 10px 0;
-}
-.list-flex > *:last-child {
-  margin-right: 0;
-}
-
-/* Animations
-/* ============================================= */
-@-webkit-keyframes loader {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@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;
-}
-.text-icon:before {
-  margin-right: 5px;
-}
-.text-icon:after {
-  margin-left: 5px;
-}
-
-/* Block with img animated on hover
-/* ============================================= */
-.hover-item img {
-  transition: 0.2s ease;
-  will-change: transform;
-}
-.hover-item:hover img {
-  transform: scale(1.02);
-}
-
-/* Opening
-/* ============================================= */
-.is-opened {
-  color: #009e55;
-}
-
-.soon-closed {
-  color: #ff890e;
-}
-
-.is-closed {
-  color: #f33;
-}
+.stretched-link:before{z-index:1;pointer-events:auto;content:"";background-color:#0000;position:absolute;top:0;bottom:0;left:0;right:0}.list-flex{flex-wrap:wrap;margin-bottom:0;display:flex}.list-flex>*{margin:0 10px 10px 0;list-style-type:none}.list-flex>:last-child{margin-right:0}@keyframes loader{to{transform:rotate(360deg)}}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.text-icon{align-items:center;display:inline-flex}.text-icon:before{margin-right:5px}.text-icon:after{margin-left:5px}.hover-item img{will-change:transform;transition:all .2s}.hover-item:hover img{transform:scale(1.02)}.is-opened{color:#009e55}.soon-closed{color:#ff890e}.is-closed{color:#f33}