fix(o-scroll-up): fix scroll up position on mobile display. Add a dyn…

…amic bottom position adapted on breakpoints. Add a static version for display into a page

js/src/o-scroll-up.js

@@ -41,7 +41,7 @@ const ScrollUp = (($) => {
   }
 
   const Selector = {
-    SCROLL_TOP : '.o-scroll-up'
+    SCROLL_TOP : '.o-scroll-up:not(.static)'
   }
 
 

scss/_custom.scss

@@ -919,7 +919,7 @@ $padding-small-horizontal: .625rem;//10px;
 // o-scroll-up
 //
 //
-$o-scroll-up-height: 1.875rem; //30px
+$o-scroll-up-height: 2.5rem; //30px
 $o-scroll-up-width: $o-scroll-up-height; // 30px
 $o-scroll-up-font-size: 1.25rem; // 20px
 

scss/_o-scroll-up.scss

@@ -7,7 +7,7 @@
     &::before {
       font-family: icon-orange;
       font-size: 1.25rem;
-      line-height: 1.5;
+      line-height: 2;
       text-align: center;
       content: "\e93f";
     }
@@ -29,10 +29,50 @@
   bottom: 2.5rem;
   z-index: 100;
   display: none;
+  // put a safety space between the right of the screen and the scroll link
+  @each $breakpoint, $container-margin in $container-fluid-margin-widths {
+    @include media-breakpoint-up($breakpoint) {
+      right: $container-margin;
+    }
+  }
+  @include media-breakpoint-up(xs) {
+    bottom: .25rem;
+  }
+  @include media-breakpoint-up(sm) {
+    bottom: .375rem;
+  }
+  @include media-breakpoint-up(md) {
+    bottom: .75rem;
+  }
+  @include media-breakpoint-up(lg) {
+    bottom: 2rem;
+  }
+  @include media-breakpoint-up(xl) {
+    bottom: 2.5rem;
+  }
+  @include media-breakpoint-up(xxl) {
+    bottom: 3.75rem;
+  }
+
   .o-scroll-up-text {
     display: inline-block;
-    padding: .3125rem .625rem;
+    padding: (($o-scroll-up-height - 1.25) / 2) .625rem;
     background-color: #fff;
     opacity: .8;
   }
+  // custom class to allow a fixed position
+  &.static {
+    position: static;
+    z-index: auto;
+    display: inline;
+    float: left;
+    .o-scroll-up-text {
+      float: left;
+    }
+    .o-scroll-up-icon {
+      position: relative;
+      display: inline-block;
+      float: none;
+    }
+  }
 }