@iris.interactive/handcook 1.0.4 → 1.0.8

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

@@ -0,0 +1,133 @@
+/*
+  * Created by IRIS Interactive
+  * User : IRIS Interactive
+*/
+
+/* Transition
+/* ============================================= */
+@mixin transition($delay : 0.2s) {
+    transition: $delay ease;
+}
+
+/* Hover
+/* ============================================= */
+@mixin animate {
+    transform: scale(1.02);
+}
+
+/* Ellipsis
+/* ============================================= */
+@mixin ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+
+/*  Adaptive height block
+/* ============================================= */
+@mixin adaptive-height($padding : 115%, $padding-medium : 0, $padding-small : 0, $padding-xsmall:0) {
+    position: relative;
+    overflow: hidden;
+
+    &:after {
+        content: "";
+        display: block;
+        padding-bottom: $padding;
+
+        @if $padding-medium != 0 {
+            @include breakpoint(medium) {
+                padding-bottom: $padding-medium;
+            }
+        }
+
+        @if $padding-small != 0 {
+            @include breakpoint(small) {
+                padding-bottom: $padding-small;
+            }
+        }
+
+        @if $padding-small != 0 {
+            @include breakpoint(xsmall) {
+                padding-bottom: $padding-xsmall;
+            }
+        }
+    }
+
+    // TODO
+    img:not(.emoji) {
+        margin: 0 auto;
+        @include object-fit(absolute);
+        @include transition(0.4s);
+    }
+}
+
+/* Line clamp
+/* ============================================= */
+@mixin line-clamp($line : 0) {
+    display: -webkit-box;
+    line-clamp: $line;
+    -webkit-line-clamp: $line;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+/* Object fit
+/* ============================================= */
+@mixin object-fit($position : '') {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+
+    @if $position == 'absolute' {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+}
+
+
+/* Linear Gradient
+/* ============================================= */
+@mixin linear-gradient {
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
+}
+
+/* fit-content
+/* ============================================= */
+@mixin fit-content {
+
+    > *:last-child {
+        margin-bottom: 0;
+    }
+}
+
+/* stretched-link
+/* ============================================= */
+@mixin stretched-link {
+
+    &:before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1;
+        pointer-events: auto;
+        content: "";
+        background-color: rgba(0, 0, 0, 0);
+    }
+}
+
+/* sr-only
+/* ============================================= */
+@mixin sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}

package/public/styles/style.css

@@ -2,6 +2,26 @@
   * Created by IRIS Interactive
   * User : IRIS Interactive
 */
+/* Layout
+/ ================================================== */
+/* Gutter
+/ ================================================== */
+/* Margin
+/ ================================================== */
+/* Margin
+/ ================================================== */
+/* Breakpoint
+/ ================================================== */
+/* Global
+/ ================================================== */
+/* Notifications
+/ ================================================== */
+/* Difficulty
+/ ================================================== */
+/*
+  * Created by IRIS Interactive
+  * User : IRIS Interactive
+*/
 /* Import
 /* ============================================= */
 /* Fonticon
@@ -10,10 +30,349 @@
   * Created by IRIS Interactive
   * User : IRIS Interactive
 */
-/* Import
+/* Main gutter
+/ ================================================== */
+/* display flex
 /* ============================================= */
-/* Fonticon
+/* Font size
+/* ============================================= */
+/* 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
+/* ============================================= */
+/*
+  * Created by IRIS Interactive
+  * User : IRIS Interactive
+*/
+*,
+*:after,
+*:before {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: var(--iris--global--background-color);
+  color: var(--iris--global--color);
+  font-family: var(--iris--global--font-family);
+  line-height: 1.75;
+  font-weight: var(--iris--global--font-weight);
+  font-size: var(--iris--global--font-size-regular--rem);
+}
+
+/*
+  * Created by IRIS Interactive
+  * User : IRIS Interactive
+*/
+body.fullscreen .header {
+  height: 120px;
+}
+@media screen and (max-width: 1000px) {
+  body.fullscreen .header {
+    height: 80px;
+  }
+}
+body.fullscreen .alignheight {
+  height: calc(100vh - 120px);
+}
+@media screen and (max-width: 1000px) {
+  body.fullscreen .alignheight {
+    height: calc(100vh - 80px);
+  }
+}
+body.fullscreen .header .banner,
+body.fullscreen .footer,
+body.fullscreen .prefooter {
+  display: none;
+}
+
+/* Margin section
+/ ================================================== */
+.section {
+  position: relative;
+  margin-top: 100px;
+  margin-bottom: 60px;
+}
+@media screen and (max-width: 1000px) {
+  .section {
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+}
+.fullscreen .section {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.section-tools {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  margin-left: 30px;
+}
+@media screen and (max-width: 1452.380952381px) {
+  .section-tools {
+    display: none;
+  }
+}
+
+.section-tools__item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  margin-bottom: 20px;
+}
+@media screen and (max-width: 1452.380952381px) {
+  .section-tools__item {
+    font-size: var(--iris--global--font-size-small);
+  }
+}
+@media screen and (max-width: 1000px) {
+  .section-tools__item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+  }
+  .section-tools__item > * {
+    margin: 0 3px;
+  }
+  .section-tools__item > *:first-child {
+    margin-left: 0;
+  }
+}
+@media screen and (max-width: 650px) {
+  .section-tools__item {
+    margin: 0 20px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    width: calc(100% - 20px * 2);
+  }
+}
+@media screen and (max-width: 370px) {
+  .section-tools__item {
+    margin: 0 20px;
+    width: calc(100% - 20px * 2);
+  }
+}
+
+/* Width element
+/ ================================================== */
+.article > *:not(.alignwide):not(.alignfull) {
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+}
+@media screen and (max-width: 1452.380952381px) {
+  .article > *:not(.alignfull) {
+    width: calc(100% - 8% * 2);
+  }
+}
+@media screen and (max-width: 1000px) {
+  .article > *:not(.alignfull) {
+    width: calc(100% - 60px * 2);
+  }
+}
+@media screen and (max-width: 650px) {
+  .article > *:not(.alignfull) {
+    width: calc(100% - 20px * 2);
+  }
+}
+@media screen and (max-width: 370px) {
+  .article > *:not(.alignfull) {
+    width: calc(100% - 20px * 2);
+  }
+}
+
+.alignwide {
+  max-width: 1220px;
+  margin: 0 auto;
+}
+
+.alignheight {
+  height: 100vh;
+}
+
+.full-width {
+  margin-left: calc(50% - 50vw);
+  margin-right: calc(50% - 50vw);
+}
+
+/* Margin element
+/ ================================================== */
+.hentry > h1,
+.hentry > h2,
+.hentry > h3,
+.hentry > h4,
+.hentry > h5,
+.hentry > h6 {
+  margin-top: 60px;
+  margin-bottom: 40px;
+}
+@media screen and (max-width: 650px) {
+  .hentry > h1,
+.hentry > h2,
+.hentry > h3,
+.hentry > h4,
+.hentry > h5,
+.hentry > h6 {
+    margin-top: 40px;
+    margin-bottom: 20px;
+  }
+}
+.hentry ul:not(.not-list-style),
+.hentry ol:not(.not-list-style),
+.hentry p {
+  margin-bottom: 20px;
+}
+.hentry > *[class] {
+  margin-top: 60px;
+  margin-bottom: 60px;
+}
+@media screen and (max-width: 650px) {
+  .hentry > *[class] {
+    margin-top: 30px;
+    margin-bottom: 30px;
+  }
+}
+
+/* TODO
+/ ================================================== */
+/*
+  * 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: rgba(0, 0, 0, 0);
+}
+
+/* ============================================= */
+.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);
+}
+
+/* Masquer un element
+/* ============================================= */
+.hide {
+  display: none;
+}
+
+/* Opening
+/* ============================================= */
+.is-opened {
+  color: #009e55;
+}
+
+.soon-closed {
+  color: #ff890e;
+}
+
+.is-closed {
+  color: #f33;
+}
+
 @font-face {
   font-family: "etourisme-font";
   font-weight: normal;
@@ -23,6 +382,7 @@
 }
 .ei:before,
 .ei:after {
+  color: var(--iris--icon--color);
   display: inline-block;
   vertical-align: middle;
   font-family: "etourisme-font", sans-serif;
@@ -133,14 +493,6 @@
   content: "\ea0d";
 }
 
-/*
-  * Created by IRIS Interactive
-  * User : IRIS Interactive
-*/
-/* Import
-/* ============================================= */
-/* Fonticon
-/* ============================================= */
 @font-face {
   font-family: "info-neige-font";
   font-weight: normal;
@@ -157,14 +509,6 @@
   content: "\ea01";
 }
 
-/*
-  * Created by IRIS Interactive
-  * User : IRIS Interactive
-*/
-/* Import
-/* ============================================= */
-/* Fonticon
-/* ============================================= */
 @font-face {
   font-family: "iris-tides-font";
   font-weight: normal;
@@ -189,14 +533,6 @@
   content: "\ea03";
 }
 
-/*
-  * Created by IRIS Interactive
-  * User : IRIS Interactive
-*/
-/* Import
-/* ============================================= */
-/* Fonticon
-/* ============================================= */
 @font-face {
   font-family: "iris-weather-font";
   font-weight: normal;
@@ -257,14 +593,6 @@
   content: "\ea0c";
 }
 
-/*
-  * Created by IRIS Interactive
-  * User : IRIS Interactive
-*/
-/* Import
-/* ============================================= */
-/* Fonticon
-/* ============================================= */
 @font-face {
   font-family: "theme-font";
   font-weight: normal;
@@ -274,6 +602,7 @@
 }
 .fi:before,
 .fi:after {
+  color: var(--iris--icon--color);
   display: inline-block;
   vertical-align: middle;
   font-family: "theme-font", sans-serif;