Add utils

apps/front/src/styles/_utils.scss

@@ -0,0 +1,80 @@
+// Debug an element with an outline with custom size and color.
+@mixin debug($size:  1px, $color: red) {
+  outline: $size solid $color;
+}
+
+// Set bigger hit zone with :after.
+@mixin hitZone($horizontalSize:  10px, $verticalSize:  10px, $color: transparent) {
+  &:after {
+    content: "";
+    background-color: $color;
+    position: absolute;
+    top: -$verticalSize;
+    right: -$horizontalSize;
+    bottom: -$verticalSize;
+    left: -$horizontalSize;
+  }
+}
+
+// Hide text only visually to preserve SEO check
+@mixin visuallyHidden() {
+  clip: rect(1px,  1px,  1px,  1px);
+  clip-path: inset(50%);
+  height:  1px;
+  width:  1px;
+  margin: -1px;
+  overflow: hidden;
+  padding:  0;
+  position: absolute;
+}
+
+// Center with absolute and translate yx, y or x.
+@mixin absoluteCenter($axis: yx) {
+  @if $axis == yx {
+    position: absolute;
+    top:  50%;
+    left:  50%;
+    transform: translate(-50%, -50%);
+  } @else if $axis == y {
+    position: absolute;
+    top:  50%;
+    left: auto;
+    transform: translateY(-50%);
+  } @else if $axis == x {
+    position: absolute;
+    top: auto;
+    left:  50%;
+    transform: translateX(-50%);
+  }
+}
+
+// Remove touch callout on Safari mobile
+@mixin disableTouchCallout() {
+  -webkit-tap-highlight-color: rgba(255,  255,  255,  0);
+}
+
+// Patch scrolling on iOS
+@mixin hideScrollBar() {
+  overflow-scrolling: touch;
+  &::-webkit-scrollbar {
+    width:  0 !important;
+    height:  0 !important;
+  }
+}
+
+// Force scrollBar to be shown
+@mixin showScrollBar() {
+  -ms-overflow-style: scrollbar;
+  &::-webkit-scrollbar {
+    width: auto;
+    height: auto;
+  }
+}
+
+// Smooth fonts
+@mixin fontSmooth() {
+  font-smooth: always;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}

apps/front/src/styles/index.scss

@@ -7,6 +7,7 @@
 @import "./_ratio.scss";
 @import "./_reset.scss";
 @import "./_texts.scss";
+@import "./_utils.scss";
 @import "./_viewport.scss";
 
 :root {