feat(notifications-list): fixed height

MartinKanera · Feb 10, 2021 · 5b23676 · 5b23676
1 parent 249f3ee
commit 5b23676
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/components/notifications-list/notifications-list.sass b/components/notifications-list/notifications-list.sass
@@ -2,14 +2,29 @@
   @apply flex flex-col items-center
 
   width: 300px
+  max-height: 325px
+
+  .wrapper
+    @apply p-2
+    overflow-y: overlay
+
+  .wrapper::-webkit-scrollbar, .wrapper::-webkit-scrollbar-thumb
+    width: 23px
+    border-radius: 13px
+    background-clip: padding-box
+    border: 10px solid transparent
+
+  .wrapper::-webkit-scrollbar-thumb
+    box-shadow: inset 0 0 0 10px
+
 
   .notification
     @apply py-2 px-3
     @apply w-full
     @apply flex items-center justify-between
 
     .action
-      @apply rounded-full text-ps-green cursor-pointer
+      @apply rounded-full text-ps-green cursor-pointer p-1
 
       transition: all 250ms ease-in-out
 

diff --git a/components/notifications-list/notifications-list.vue b/components/notifications-list/notifications-list.vue
@@ -1,9 +1,10 @@
 <template lang="pug">
 .notifications-list
-  .notification(v-for='(notification, i) in notifications', :key='i')
-    .message {{ notification.message }}
-    .action
-      close-icon(:size='18', @click='removeNotification(notification.id)')
+  .wrapper
+    .notification(v-for='(notification, i) in notifications', :key='i')
+      .message {{ notification.message }}
+      .action
+        close-icon(:size='18', @click='removeNotification(notification.id)')
 </template>
 
 <script lang="ts">

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -73,7 +73,10 @@ module.exports = {
         },
       });
       addBase({
-        body: { backgroundColor: config('theme.colors.ps-primary'), overflowX: 'hidden' },
+        body: {
+          backgroundColor: config('theme.colors.ps-primary'),
+          overflowX: 'hidden',
+        },
         'button:focus': {
           outline: 'none',
           '-webkit-tap-highlight-color': 'transparent',