From 1e889f75b9d7871d032a4afbcbd4d1ad1836ac7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laussel=20LO=C3=AFc?= <loic.laussel@orange.com>
Date: Mon, 12 Sep 2016 11:46:23 +0200
Subject: [PATCH] fix(o-scroll-up): fix scroll up position on mobile display.
 Add a dynamic bottom position adapted on breakpoints. Add a static version
 for display into a page

---
 js/src/o-scroll-up.js  |  2 +-
 scss/_custom.scss      |  2 +-
 scss/_o-scroll-up.scss | 44 ++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/js/src/o-scroll-up.js b/js/src/o-scroll-up.js
index ccbe0bb789..c28cd39f6a 100644
--- a/js/src/o-scroll-up.js
+++ b/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)'
   }
 
 
diff --git a/scss/_custom.scss b/scss/_custom.scss
index d6c3a5252b..8f3043a051 100644
--- a/scss/_custom.scss
+++ b/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
 
diff --git a/scss/_o-scroll-up.scss b/scss/_o-scroll-up.scss
index 961c8f03a2..23a9a89e04 100644
--- a/scss/_o-scroll-up.scss
+++ b/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;
+    }
+  }
 }