feat(o-scroll-up): use the same chevron icon than in pagination, arro…

…w links and breadcrumbs + clean up CSS and JS
Orange-OpenSource · Oct 31, 2019 · e29caa7 · e29caa7
1 parent 75848c9
commit e29caa7
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 97 deletions.
diff --git a/js/src/o-scroll-up.js b/js/src/o-scroll-up.js
@@ -61,7 +61,7 @@ class ScrollUp {
 
     $(window).on(Event.SCROLL, $.proxy(this._process, this))
     $(Selector.SCROLL_TOP).on(Event.CLICK_SCROLL, $.proxy(this._backToTop, this))
-    $(this._element).addClass('is-fixed')
+    $(this._element).addClass('is-fixed d-none')
     this._process()
   }
 
@@ -109,11 +109,7 @@ class ScrollUp {
   }
 
   _process() {
-    if ($(this._scrollElement).scrollTop() > Number($(this._scrollElement).height())) {
-      $(Selector.SCROLL_TOP).show()
-    } else {
-      $(Selector.SCROLL_TOP).hide()
-    }
+    $(Selector.SCROLL_TOP).toggleClass('d-none', $(this._scrollElement).scrollTop() < Number($(this._scrollElement).height()))
   }
 
   _clear() {

diff --git a/scss/_o-scroll-up.scss b/scss/_o-scroll-up.scss
@@ -4,95 +4,47 @@
 //
 
 .o-scroll-up {
-  .o-scroll-up-icon {
-    &::before {
-      font-family: icon-orange;
-      font-size: 1.25rem;
-      line-height: 1.8;
-      content: "\e93f";
-    }
-    align-items: center;
-    justify-content: center;
-    float: right;
-    width: $o-scroll-up-width;
-    height: $o-scroll-up-height;
-    color: #000;
-    text-align: center;
-    text-decoration: none;
-    background-color: #fff;
-    border-style: solid;
-    border-width: 2px;
-
-    /* rtl:ignore */
-    transform: rotate(90deg);
-
-    /* rtl:ignore */
-  }
-
   position: fixed;
   right: 0;
   bottom: 2.5rem;
   z-index: $zindex-o-scroll-up;
-  display: none;
-  // put a safety space between the right of the screen and the scroll link
+  display: inline-flex;
+  align-items: center;
+  padding-left: map-get($spacers, 2);
+  font-weight: $font-weight-bold;
+  background-color: rgba($white, .8);
+
   @each $breakpoint, $container-margin in $container-fluid-margin-widths {
     @include media-breakpoint-up($breakpoint) {
       right: $container-margin;
+      bottom: map-get($o-scroll-up-bottom, $breakpoint);
     }
   }
-  @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 {
+  &::after {
     display: inline-block;
-    padding: (($o-scroll-up-height - 1.25) / 2) .625rem;
-    font-weight: $font-weight-bold;
-    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;
-    }
+    width: $o-scroll-up-size;
+    height: $o-scroll-up-size;
+    margin-left: map-get($spacers, 2);
+    content: "";
+    background: $white escape-svg($o-scroll-up-icon) no-repeat center / 50% 50%;
+    border: $border-width solid $black;
+    transform: rotate(.25turn);
   }
 
-  @include hover-focus() {
-    color: $primary;
-    .o-scroll-up-icon {
-      color: #fff;
-      background-color: #000;
-    }
+  &:hover::after,
+  &:focus::after {
+    background: $black escape-svg($o-scroll-up-icon-hover) no-repeat center / 50% 50%;
+    border-color: $black;
   }
 
-  &:active .o-scroll-up-icon {
-    color: #fff;
-    background-color: $primary;
+  &:active::after {
+    background: $primary escape-svg($o-scroll-up-icon-hover) no-repeat center / 50% 50%;
     border-color: $primary;
   }
+
+  &.static {
+    position: static;
+    z-index: auto;
+  }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1264,8 +1264,17 @@ $icon-font-path:          "../fonts/" !default;
 // o-scroll-up
 //
 //
-$o-scroll-up-height: 2.5rem !default; //30px
-$o-scroll-up-width: $o-scroll-up-height !default; // 30px
+$o-scroll-up-size:       2.5rem !default; // 40px
+$o-scroll-up-icon:       $chevron-icon !default;
+$o-scroll-up-icon-hover: $chevron-icon-hover !default;
+$o-scroll-up-bottom: (
+  xs: .25rem,
+  sm: .375rem,
+  md: .75rem,
+  lg: 2rem,
+  xl: 2.5rem,
+  xxl: 3.75rem
+) !default;
 
 // Pills
 $nav-pills-focus-link-bg: theme-color("primary") !default;

diff --git a/site/_includes/scripts.html b/site/_includes/scripts.html
@@ -1,8 +1,7 @@
 <!-- Boosted mod -->
 <nav role="navigation">
   <a href="#" class="o-scroll-up" title="Back to top">
-    <span class="o-scroll-up-text d-none d-sm-inline-block">Back to top</span>
-    <span class="o-scroll-up-icon" aria-hidden="true"></span>
+    <span class="d-none d-sm-inline-block">Back to top</span>
   </a>
 </nav>
 <!-- end mod -->

diff --git a/site/docs/4.3/components/scroll-up.md b/site/docs/4.3/components/scroll-up.md
@@ -8,28 +8,21 @@ toc: true
 
 ## Scroll up auto display
 Displays a link at the bottom right of the page after scrolling down one page height. 
-On desktop this link displays the “Back to top” text and an icon. On mobile it only displays the icon.
 
-Adds a link at the end of the page with the `o-scroll-up` class. The link is made up of 2 elements. The first element is a text with the `.o-scroll-up-text` class, shown only on desktop display (you can change the breakpoint if needed). The second element is the arrow up icon, with the `.o-scroll-up-icon` class. For accessibility reasons, add a consistant `title` to the link, and add `aria-hidden='true'` to the icon.
-
-You can see a sample on how it works by scrolling this page.
+Adds a link at the end of the page with the `o-scroll-up` class. The “Back to top” text is only shown on desktop display — but you can change the breakpoint in [the `d-{breakpoint}-inline-block` utility]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/). The arrow up icon is added via CSS. 
+For accessibility reasons, add a `title` to the link that's **consistent** with text content.
 
 {% highlight html %}
 <a href="#" class="o-scroll-up" title="back to top">
-  <span class="o-scroll-up-text d-none d-sm-inline-block">Back to top</span>
-  <span class="o-scroll-up-icon" aria-hidden="true"></span>
+  <span class="d-none d-sm-inline-block">Back to top</span>
 </a>
 {% endhighlight %}
 
 ## Scroll up static
-Displays a link in the page with the arrow up icon.
-
-Adds a link in the page with the `o-scroll-up` and `static` class. 
-You can let the text `.o-scroll-up-text` display on all devices.
+Displays a static “Back to top” link, by adding it in the page with the `o-scroll-up` and `static` class.
 {% capture example %}
 <a href="#" class="o-scroll-up static" title="back to top">
-  <span class="o-scroll-up-text">Back to top</span>
-  <span class="o-scroll-up-icon" aria-hidden="true"></span>
+  <span class="d-none d-sm-inline-block">Back to top</span>
 </a>
 {% endcapture %} {% include example.html content=example %}
 
@@ -54,4 +47,4 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <td>Allow you to specify a query selector of the custom top of the page. If it's set the go back to top action will scroll into the view to this anchor instead of positionning the offset top to 0</td>
     </tr>
   </tbody>
-</table>
+</table>