@appscode/design-system 2.6.17 → 2.6.19-alpha

package/package.json

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

package/vue-components/styles/base/utilities/_global.scss

@@ -183,17 +183,41 @@ hr {
 }
 // Scrollbar mixin
 @mixin scrollbar-styles($direction) {
-  padding: 15px;
+  padding: 16px;
   transition: 0.3s ease-in-out;
-  overflow-#{$direction}: auto;
 
+  // Handle overflow based on direction
+  @if $direction == "x" {
+    overflow-x: auto;
+  } @else if $direction == "y" {
+    overflow-y: auto;
+  } @else if $direction == "both" {
+    overflow-x: auto;
+    overflow-y: auto;
+  }
+
+  // Define scrollbar width/height based on direction
   &::-webkit-scrollbar {
     border-radius: 50px;
-    #{if($direction == "y", width, height)}: 3px;
+    @if $direction == "x" {
+      height: 4px;
+    } @else if $direction == "y" {
+      width: 4px;
+    } @else if $direction == "both" {
+      width: 4px;
+      height: 4px;
+    }
   }
 
   &::-webkit-scrollbar:hover {
-    #{if($direction == "y", width, height)}: 7px;
+    @if $direction == "x" {
+      height: 8px;
+    } @else if $direction == "y" {
+      width: 8px;
+    } @else if $direction == "both" {
+      width: 8px;
+      height: 8px;
+    }
   }
 
   &::-webkit-scrollbar-thumb {
@@ -202,10 +226,9 @@ hr {
   }
 
   &:hover::-webkit-scrollbar-corner {
-    #{if($direction == "y", width, height)}: 40px;
+    width: 40px; // or adjust as needed
   }
 }
-
 // Scrollbar utilities
 .ac-vscrollbar {
   @include scrollbar-styles("y");

package/vue-components/styles/components/navbar/_menu-content.scss

@@ -38,6 +38,11 @@
   }
   &.ac-profile-button {
     margin-right: 15px;
+    &.is-org {
+      border: 1px solid $color-border;
+      padding: 4px 0;
+      border-radius: 4px;
+    }
     button.button.ac-nav-button {
       width: 100%;
       background-color: transparent;

package/vue-components/v3/cards/FeatureCard.vue

@@ -20,15 +20,18 @@ withDefaults(
         <div class="icon">
           <slot name="card-logo" />
         </div>
-        <h5><slot name="card-title" /></h5>
+        <h5>
+          <slot name="card-title" />
+        </h5>
       </div>
       <!-- <span class="tag has-background-dark-light has-text-dark is-rounded"
         >Dark</span
       > -->
       <slot name="card-status" />
     </div>
-    <div class="c-body">
+    <div class="c-body is-flex is-justify-content-space-between gap-2 mt-4">
       <p><slot name="card-sub-title" /></p>
+      <slot name="sync-percentage" />
     </div>
   </div>
   <!-- single card wrapper end  -->