@iris.interactive/handcook 1.0.3 → 1.0.7

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

@@ -0,0 +1,134 @@
+
+// Fonts file
+@font-face {
+    font-family: 'theme-font';
+    font-weight: normal;
+    font-style: normal;
+    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;
+}
+
+// Array fonts to mixin
+$theme-icons: (
+    'theme':
+	(
+		"activites": "\ea01",
+		"add-location-alt-line": "\ea02",
+		"add-location-alt": "\ea03",
+		"add": "\ea04",
+		"arrow-back": "\ea05",
+		"arrow-downward": "\ea06",
+		"arrow-forward": "\ea07",
+		"arrow-upward": "\ea08",
+		"beenhere": "\ea09",
+		"by-a-boat": "\ea0a",
+		"by-car": "\ea0b",
+		"by-plane": "\ea0c",
+		"by-train": "\ea0d",
+		"calendar-today": "\ea0e",
+		"call": "\ea0f",
+		"capacity-banquet": "\ea10",
+		"capacity-carre": "\ea11",
+		"capacity-class": "\ea12",
+		"capacity-cocktail": "\ea13",
+		"capacity-modular": "\ea14",
+		"capacity-theatre": "\ea15",
+		"capacity-u": "\ea16",
+		"category": "\ea17",
+		"centered-position": "\ea18",
+		"check-box": "\ea19",
+		"chevron-bottom": "\ea1a",
+		"chevron-left": "\ea1b",
+		"chevron-right": "\ea1c",
+		"chevron-top": "\ea1d",
+		"circle": "\ea1e",
+		"close": "\ea1f",
+		"computer": "\ea20",
+		"confirmation-number": "\ea21",
+		"credit-score": "\ea22",
+		"delete-forever": "\ea23",
+		"direction-run": "\ea24",
+		"edit": "\ea25",
+		"email": "\ea26",
+		"error": "\ea27",
+		"event-available": "\ea28",
+		"facebook": "\ea29",
+		"favorite-filled": "\ea2a",
+		"favorite": "\ea2b",
+		"file-download": "\ea2c",
+		"file-upload": "\ea2d",
+		"filter": "\ea2e",
+		"forward-to-inbox": "\ea2f",
+		"fullscreen": "\ea30",
+		"group": "\ea31",
+		"hebergement": "\ea32",
+		"hebergements": "\ea33",
+		"hotel": "\ea34",
+		"infos-pratiques": "\ea35",
+		"instagram": "\ea36",
+		"layers": "\ea37",
+		"local-activity": "\ea38",
+		"location-on-line": "\ea39",
+		"location-on": "\ea3a",
+		"map": "\ea3b",
+		"menu-book": "\ea3c",
+		"mic": "\ea3d",
+		"photo-camera": "\ea3e",
+		"picture-as-pdf": "\ea3f",
+		"play-circle": "\ea40",
+		"print": "\ea41",
+		"question-answer": "\ea42",
+		"quote": "\ea43",
+		"remove": "\ea44",
+		"replay": "\ea45",
+		"reply": "\ea46",
+		"reset": "\ea47",
+		"restaurant": "\ea48",
+		"restaurants": "\ea49",
+		"schedule": "\ea4a",
+		"search": "\ea4b",
+		"sell": "\ea4c",
+		"share": "\ea4d",
+		"shopping-cart": "\ea4e",
+		"sites-visites": "\ea4f",
+		"support": "\ea50",
+		"thermostat": "\ea51",
+		"thumb-down": "\ea52",
+		"thumb-up": "\ea53",
+		"toggle-off": "\ea54",
+		"toggle-on": "\ea55",
+		"twitter": "\ea56",
+		"videocam": "\ea57",
+		"visibility": "\ea58",
+		"volume-off": "\ea59",
+		"volume-up": "\ea5a",
+		"whatsapp": "\ea5b",
+		"work": "\ea5c",
+		"youtube": "\ea5d"
+	)
+
+);
+
+$allicons: map-merge($allicons, $theme-icons);
+
+.fi:before,
+.fi:after {
+    display: inline-block;
+    vertical-align: middle;
+    font-family: 'theme-font', sans-serif;
+    font-style: initial;
+}
+
+@each $name, $icon in map-get($theme-icons,'theme') {
+        .fi--#{$name}:not(.fi--after):before {
+            content: $icon;
+        }
+
+        .fi--#{$name}.fi--after:after {
+            content: $icon;
+        }
+    }

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

@@ -0,0 +1,31 @@
+/*
+  * Created by IRIS Interactive
+  * User : IRIS Interactive
+*/
+
+/* Import
+/* ============================================= */
+$allicons: ();
+$svgfont_path: '../fonts/svgfont' !default;
+
+/* Fonticon
+/* ============================================= */
+@mixin fi($name, $position : '', $plugin: 'theme') {
+    $content: "";
+
+    @each $label, $icon in map-get($allicons, '#{$plugin}') {
+        @if $label == $name {
+            $content: $icon;
+        }
+    }
+
+    content: $content;
+    font-family: '#{$plugin}-font';
+
+    @if $position == "before" {
+        margin-right: 10px;
+    } @else if $position == "after" {
+        margin-left: 10px;
+    }
+}
+

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;
+    }
+}

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;
+}