Merge pull request #1059 from bildvitta/feature/secondary-scroll-util

Feature/secondary scroll util

CHANGELOG.md

@@ -11,6 +11,9 @@ Neste arquivo (CHANGELOG.MD) você encontrará somente as mudanças referentes a
 Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de serem pequenas, podem alterar o comportamento da funcionalidade caso não seja feita uma atualização, **preste muita atenção** nas breaking changes dentro das versões quando existirem.
 
 ## Não publicado
+### Adicionado
+- `utils/scroll.scss`: Adicionado classe `secondary-scroll` com um estilo de scroll mais sútil em relação a padrão.
+
 ### Modificado
 - `QasAppUser`: Alterado do menu "Editar" para "Perfil", uma vez que agora a pagina do /me não é somente para editar.
 

docs/src/assets/menu.js

@@ -472,6 +472,10 @@ module.exports = [
         name: 'opacity',
         path: '/styles/opacity'
       },
+      {
+        name: 'scroll',
+        path: '/styles/scroll'
+      },
       {
         name: 'set-brand',
         path: '/styles/set-brand'

docs/src/pages/styles/scroll.md

@@ -0,0 +1,7 @@
+---
+title: scroll
+---
+
+| **Nome da Classe** |                    **Descrição**                       |
+|--------------------|--------------------------------------------------------|
+|`secondary-scroll`  | Define uma estilização de scroll mais sútil que a padrão

ui/src/components/grabbable/QasGrabbable.vue

@@ -2,7 +2,7 @@
   <div class="qas-grabbable relative-position">
     <div
       ref="grabContainer"
-      class="flex no-wrap qas-grabbable__container"
+      class="flex no-wrap qas-grabbable__container secondary-scroll"
       :class="classes"
     >
       <slot />
@@ -136,25 +136,6 @@ onBeforeUnmount(() => {
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: none;
     overflow-x: auto;
-    scrollbar-color: $blue-grey-3 transparent;
-
-    &::-webkit-scrollbar {
-      height: 12px;
-      background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-track {
-      background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: $blue-grey-3;
-      border-radius: var(--qas-generic-border-radius);
-    }
-
-    &::-webkit-scrollbar-thumb:hover {
-      background-color: $blue-grey-4;
-    }
 
     &::before,
     &::after {

ui/src/css/utils/index.scss

@@ -5,5 +5,6 @@
 @import './fonts';
 @import './line-height';
 @import './opacity';
+@import './scroll';
 @import './text';
 @import './unset';

ui/src/css/utils/scroll.scss

@@ -0,0 +1,21 @@
+.secondary-scroll {
+  scrollbar-color: $blue-grey-3 transparent;
+
+  &::-webkit-scrollbar {
+    height: 12px;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $blue-grey-3;
+    border-radius: var(--qas-generic-border-radius);
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: $blue-grey-4;
+  }
+}