@appscode/design-system 1.1.0-beta.82 → 1.1.0-beta.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.1.0-beta.82",
+  "version": "1.1.0-beta.85",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/v3/navbar/Appdrawer.vue

@@ -63,7 +63,7 @@ const NavbarItemContent = defineAsyncComponent(
     </template>
     <template #navbar-content>
       <navbar-item-content class="navbar-dropdown-wrapper" style="right: -30px">
-        <ul>
+        <ul class="ac-scrollbar p-0">
           <li v-for="app in apps" :key="app.url">
             <a :href="app.url">
               <article class="media">
@@ -103,6 +103,8 @@ const NavbarItemContent = defineAsyncComponent(
     background-color: $white-100;
     border: 1px solid $primary-90;
     // box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.16);
+    max-height: calc(100vh - 100px);
+    overflow-y: auto;
 
     li {
       display: block;

package/vue-components/v3/navbar/NavbarItemContent.vue

@@ -11,7 +11,6 @@
   position: absolute;
   right: 0;
   top: 80px;
-  // box-shadow: $ac-shadow-1;
   min-width: 180px;
   opacity: 0;
   visibility: hidden;
@@ -20,10 +19,6 @@
   box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
     0 0px 0 1px rgba(10, 10, 10, 0.02);
 
-  // &.theme-choice {
-  //   left: 0;
-  // }
-
   &.quick-access {
     background-color: $white-100;
     padding: 20px;

package/vue-components/v3/navbar/Notification.vue

@@ -66,7 +66,7 @@ function notificationTime(time: number) {
             <span>{{ notifications.length }}</span>
           </div>
 
-          <div class="notification-body">
+          <div class="notification-body ac-scrollbar p-0">
             <a
               v-for="data in notifications"
               href="#"
@@ -141,6 +141,8 @@ function notificationTime(time: number) {
   }
 }
 .notification-body {
+  max-height: calc(100vh - 100px);
+  overflow-y: auto;
   a {
     display: flex;
     color: $primary-20;

package/vue-components/v3/navbar/User.vue

@@ -136,7 +136,11 @@ watch(dropDownStatus, (n) => {
               <a :href="`mailto:${user.email}`"> {{ user.email }}</a>
             </div>
           </div>
-          <transition-group name="list" tag="ul" class="list-items py-2">
+          <transition-group
+            name="list"
+            tag="ul"
+            class="list-items py-2 ac-scrollbar px-0"
+          >
             <li key="settings">
               <a
                 data-testid="user-settings-link"
@@ -302,6 +306,10 @@ watch(dropDownStatus, (n) => {
       }
     }
   }
+  .list-items {
+    max-height: calc(100vh - 100px);
+    overflow-y: auto;
+  }
 }
 
 .ac-menu-item {