feat(alpha): Fade out scroller buttons nicely

Author: marienfressinaud

src/assets/stylesheets/components/scroller.css

@@ -79,10 +79,19 @@
     top: calc(50% + var(--scroller-button-offset, 0px));
 
     transform: translateY(-50%);
+
+    transition:
+        opacity 0.2s ease-in-out,
+        visibility 0.2s ease-in-out,
+        filter 0.2s ease-in-out,
+        background-color 0.2s ease-in-out,
+        border-color 0.2s ease-in-out;
 }
 
 .scroller__button:disabled {
-    display: none;
+    visibility: hidden;
+
+    opacity: 0;
 }
 
 .scroller__button--previous {

src/views/collections/followers/edit.html.twig

@@ -109,6 +109,7 @@
                                     title="{{ t('Display the previous streams') }}"
                                     data-scroller-target="previous"
                                     data-action="scroller#previous"
+                                    disabled
                                 >
                                     {{ icon('arrow-left', 'rotate90') }}
 
@@ -161,6 +162,7 @@
                                     title="{{ t('Display the next streams') }}"
                                     data-scroller-target="next"
                                     data-action="scroller#next"
+                                    disabled
                                 >
                                     {{ icon('arrow-right', 'rotate90') }}
 

src/views/streams/_filters.html.twig

@@ -31,6 +31,7 @@
                 title="{{ t('Display the previous days') }}"
                 data-scroller-target="previous"
                 data-action="scroller#previous"
+                disabled
             >
                 {{ icon('arrow-left') }}
 
@@ -126,6 +127,7 @@
                     title="{{ t('Display the next days') }}"
                     data-scroller-target="next"
                     data-action="scroller#next"
+                    disabled
             >
                 {{ icon('arrow-right') }}