@appscode/design-system 1.0.43-alpha.206 → 1.0.43-alpha.207

package/base/utilities/_all.scss

@@ -3,4 +3,5 @@
 @import "mixin";
 @import "typography";
 @import "default";
+@import "grid";
 @import "dark-theme";

package/base/utilities/_customize-bulma.scss

@@ -0,0 +1,191 @@
+$primary : hsl(208, 77%, 42%);
+
+// Colors
+// $black:        hsl(0, 0%, 4%) !default;
+// $black-bis:    hsl(0, 0%, 7%) !default;
+// $black-ter:    hsl(0, 0%, 14%) !default;
+
+// $grey-darker:  hsl(0, 0%, 21%) !default;
+// $grey-dark:    hsl(0, 0%, 29%) !default;
+// $grey:         hsl(0, 0%, 48%) !default;
+// $grey-light:   hsl(0, 0%, 71%) !default;
+// $grey-lighter: hsl(0, 0%, 86%) !default;
+// $grey-lightest: hsl(0, 0%, 93%) !default;
+
+// $white-ter:    hsl(0, 0%, 96%) !default;
+// $white-bis:    hsl(0, 0%, 98%) !default;
+// $white:        hsl(0, 0%, 100%) !default;
+
+$orange:        hsl(30, 100%, 50%) !default;
+$yellow:      	hsl(38, 93%, 57%) !default;
+$green:        hsl(147, 73%, 31%) !default;
+// $turquoise:    hsl(171, 100%, 41%) !default;
+// $cyan:         hsl(207, 61%,  53%) !default;
+// $blue:         hsl(229, 53%,  53%) !default;
+$purple:       hsl(286, 66%, 35%) !default;
+$red:          hsl(4, 100%, 58%) !default;
+
+// // Typography
+// $family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
+// $family-monospace: monospace !default;
+// $render-mode: optimizeLegibility !default;
+
+// $size-1: 3rem !default;
+// $size-2: 2.5rem !default;
+// $size-3: 2rem !default;
+// $size-4: 1.5rem !default;
+// $size-5: 1.25rem !default;
+// $size-6: 1rem !default;
+// $size-7: 0.75rem !default;
+
+// $weight-light: 300 !default;
+// $weight-normal: 400 !default;
+// $weight-medium: 500 !default;
+// $weight-semibold: 600 !default;
+// $weight-bold: 700 !default;
+
+// // Spacing
+// $block-spacing: 1.5rem !default;
+
+// // Responsiveness
+// // The container horizontal gap, which acts as the offset for breakpoints
+// $gap: 32px !default;
+// // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
+// $tablet: 769px !default;
+// // 960px container + 4rem
+// $desktop: 960px + (2 * $gap) !default;
+// // 1152px container + 4rem
+// $widescreen: 1152px + (2 * $gap) !default;
+// $widescreen-enabled: true !default;
+// // 1344px container + 4rem
+// $fullhd: 1344px + (2 * $gap) !default;
+// $fullhd-enabled: true !default;
+// $breakpoints: ("mobile": ("until": $tablet), "tablet": ("from": $tablet), "tablet-only": ("from": $tablet, "until": $desktop), "touch": ("from": $desktop), "desktop": ("from": $desktop), "desktop-only": ("from": $desktop, "until": $widescreen), "until-widescreen": ("until": $widescreen), "widescreen": ("from": $widescreen), "widescreen-only": ("from": $widescreen, "until": $fullhd), "until-fullhd": ("until": $fullhd), "fullhd": ("from": $fullhd)) !default;
+
+// // Miscellaneous
+// $easing: ease-out !default;
+// $radius-small: 2px !default;
+// $radius: 4px !default;
+// $radius-large: 6px !default;
+// $radius-rounded: 9999px !default;
+// $speed: 86ms !default;
+
+// // Flags
+// $variable-columns: true !default;
+// $rtl: false !default;
+
+
+
+// // Derived-Variables 
+
+// $primary: $turquoise !default;
+
+// $info: $cyan !default;
+// $success: $green !default;
+// $warning: $yellow !default;
+// $danger: $red !default;
+
+// $light: $white-ter !default;
+// $dark: $grey-darker !default;
+
+// // Invert colors
+
+// $orange-invert: findColorInvert($orange) !default;
+// $yellow-invert: findColorInvert($yellow) !default;
+// $green-invert: findColorInvert($green) !default;
+// $turquoise-invert: findColorInvert($turquoise) !default;
+// $cyan-invert: findColorInvert($cyan) !default;
+// $blue-invert: findColorInvert($blue) !default;
+// $purple-invert: findColorInvert($purple) !default;
+// $red-invert: findColorInvert($red) !default;
+
+// $primary-invert: findColorInvert($primary) !default;
+// $primary-light: findLightColor($primary) !default;
+// $primary-dark: findDarkColor($primary) !default;
+// $info-invert: findColorInvert($info) !default;
+// $info-light: findLightColor($info) !default;
+// $info-dark: findDarkColor($info) !default;
+// $success-invert: findColorInvert($success) !default;
+// $success-light: findLightColor($success) !default;
+// $success-dark: findDarkColor($success) !default;
+// $warning-invert: findColorInvert($warning) !default;
+// $warning-light: findLightColor($warning) !default;
+// $warning-dark: findDarkColor($warning) !default;
+// $danger-invert: findColorInvert($danger) !default;
+// $danger-light: findLightColor($danger) !default;
+// $danger-dark: findDarkColor($danger) !default;
+// $light-invert: findColorInvert($light) !default;
+// $dark-invert: findColorInvert($dark) !default;
+
+// // General colors
+
+// $scheme-main: $white !default;
+// $scheme-main-bis: $white-bis !default;
+// $scheme-main-ter: $white-ter !default;
+// $scheme-invert: $black !default;
+// $scheme-invert-bis: $black-bis !default;
+// $scheme-invert-ter: $black-ter !default;
+
+// $background: $white-ter !default;
+
+// $border: $grey-lighter !default;
+// $border-hover: $grey-light !default;
+// $border-light: $grey-lightest !default;
+// $border-light-hover: $grey-light !default;
+
+// // Text colors
+
+// $text: $grey-dark !default;
+// $text-invert: findColorInvert($text) !default;
+// $text-light: $grey !default;
+// $text-strong: $grey-darker !default;
+
+// // Code colors
+
+// $code: darken($red, 15%) !default;
+// $code-background: $background !default;
+
+// $pre: $text !default;
+// $pre-background: $background !default;
+
+// // Link colors
+
+// $link: $blue !default;
+// $link-invert: findColorInvert($link) !default;
+// $link-light: findLightColor($link) !default;
+// $link-dark: findDarkColor($link) !default;
+// $link-visited: $purple !default;
+
+// $link-hover: $grey-darker !default;
+// $link-hover-border: $grey-light !default;
+
+// $link-focus: $grey-darker !default;
+// $link-focus-border: $blue !default;
+
+// $link-active: $grey-darker !default;
+// $link-active-border: $grey-dark !default;
+
+// // Typography
+
+// $family-primary: $family-sans-serif !default;
+// $family-secondary: $family-sans-serif !default;
+// $family-code: $family-monospace !default;
+
+// $size-small: $size-7 !default;
+// $size-normal: $size-6 !default;
+// $size-medium: $size-5 !default;
+// $size-large: $size-4 !default;
+
+// // Effects
+
+// $shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default;
+
+// // Lists and maps
+// $custom-colors: null !default;
+// $custom-shades: null !default;
+
+// $colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default;
+
+// $shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default;
+
+// $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default;

package/base/utilities/_default.scss

@@ -348,13 +348,13 @@ $positions: (
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: $ac-gray-light;
+    background-color: $ac-gray-lightest;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: $ac-gray-light;
+    background-color: $ac-gray-lightest;
   }
 
   &:hover::-webkit-scrollbar-corner {
@@ -395,33 +395,33 @@ $positions: (
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: $ac-gray-light;
+    background-color: $ac-gray-lightest;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-moz-scrollbar-thumb {
-    background-color: $ac-gray-light;
+    background-color: $ac-gray-lightest;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-ms-scrollbar-thumb {
-    background-color: $ac-gray-light;
+    background-color: $ac-gray-lightest;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: $ac-gray-light;
+    background-color: $ac-gray-lightest;
   }
 
   &::-moz-scrollbar-thumb:hover {
-    background-color: $ac-gray-light;
+    background-color: $ac-gray-lightest;
   }
 
   &::-ms-scrollbar-thumb:hover {
-    background-color: $ac-gray-light;
+    background-color: $ac-gray-lightest;
   }
 
   &:hover::-webkit-scrollbar-corner {
@@ -452,13 +452,13 @@ $positions: (
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: $ac-gray-light;
+    background-color: $ac-gray-lightest;
     border-radius: 50px;
     width: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: $ac-gray-light;
+    background-color: $ac-gray-lightest;
   }
 
   &:hover::-webkit-scrollbar-corner {
@@ -525,8 +525,13 @@ button {
   background-color: $ac-white-light;
   font-size: 11px;
   height: 18px;
+  line-height: 1;
   letter-spacing: 0.1px;
   color: $ac-color-heading;
+  &.is-outlined {
+    border: 1px solid;
+    background-color: transparent;
+  }
 
   a {
     &:hover {

package/base/utilities/_derived-variables.scss

@@ -17,3 +17,9 @@ $ac-shadow-1: 0 1px 4px rgba(26, 80, 151, 0.16);
 $ac-shadow-2: 0px 8px 57px rgba(0, 0, 0, 0.16);
 $ac-shadow-3: 0 3px 4px 0 rgba(0, 0, 0, 0.18),
   0 3px 3px -2px rgba(0, 0, 0, 0.16), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
+
+$ac-shadow-sm: 0 1px 4px rgba(26, 80, 151, 0.16);
+$ac-shadow-xl: 0px 8px 57px rgba(0, 0, 0, 0.16);
+$ac-shadow-lg: 0 3px 4px 0 rgba(0, 0, 0, 0.18),
+  0 3px 3px -2px rgba(0, 0, 0, 0.16), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
+

package/base/utilities/_grid.scss

@@ -0,0 +1,29 @@
+.grid {
+  display: grid;
+}
+
+@for $i from 1 through 12 {
+  .grid-cols-#{$i} {
+    grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+  }
+}
+
+.grid-cols-none {
+  grid-template-columns: none;
+}
+
+@for $i from 1 through 12 {
+  .col-span-#{$i} {
+    grid-column: span #{$i} / span #{$i};
+  }
+}
+
+.col-auto {
+  grid-column: auto;
+}
+
+@for $i from 0 through 30 {
+  .gap-#{$i} {
+    gap: #{$i}px;
+  }
+}

package/base/utilities/_initial-variables.scss

@@ -4,14 +4,6 @@
 $ac-family-heading: "Roboto", sans-serif;
 $ac-family-paragraph: "Roboto", sans-serif;
 
-$ac-size-1: 48px;
-$ac-size-2: 36px;
-$ac-size-3: 28px;
-$ac-size-4: 22px;
-$ac-size-5: 18px;
-$ac-size-6: 16px;
-$ac-size-7: 14px;
-
 // body font size
 $font-size-medium: 16px;
 $font-size-semi-normal: 15px;
@@ -56,7 +48,8 @@ $swift-primary: #3f51b6;
   --ac-gray-light: #8d8d8d;
   --ac-gray-lightest: #d1d1d1;
   --ac-white-light: #e7e7e7;
-  --ac-white-lighter: #f1f1f1;
+  --ac-white-lighter: #f2f5f8;
+  --ac-white-lightest: #f8f9fb;
 
   --ac-black: #000000;
   --ac-color-text-90: #323232;
@@ -121,6 +114,7 @@ $ac-gray-lighter: var(--ac-gray-lighter);
 $ac-gray-lightest: var(--ac-gray-lightest);
 $ac-white-light: var(--ac-white-light);
 $ac-white-lighter: var(--ac-white-lighter);
+$ac-white-lightest: var(--ac-white-lightest);
 $ac-white: var(--ac-white);
 $ac-full-white: var(--ac-full-white);
 
@@ -188,6 +182,16 @@ $dark-bg-light: var(--dark-bg-light);
   }
 }
 
+.mx-auto {
+  margin: 0 auto;
+}
+.mr-auto{
+  margin-right: auto;
+}
+.ml-auto{
+  margin-left: auto;
+}
+
 /* Deafult height & widht */
 @for $i from 0 through 300 {
   .height-#{$i} {

package/base/utilities/_typography.scss

@@ -21,33 +21,27 @@ h6 {
 }
 
 h1 {
-  font-size: $ac-size-1;
-  line-height: $ac-size-1 + 10;
+  font-size: $size-1;
 }
 
 h2 {
-  font-size: $ac-size-2;
-  line-height: $ac-size-2 + 10;
+  font-size: $size-2;
 }
 
 h3 {
-  font-size: $ac-size-3;
-  line-height: $ac-size-3 + 10;
+  font-size: $size-3;
 }
 
 h4 {
-  font-size: $ac-size-4;
-  line-height: $ac-size-4 + 10;
+  font-size: $size-4;
 }
 
 h5 {
-  font-size: $ac-size-5;
-  line-height: $ac-size-5 + 10;
+  font-size: $size-5;
 }
 
 h6 {
-  font-size: $ac-size-6;
-  line-height: $ac-size-6 + 10;
+  font-size: $size-6;
 }
 
 h6 {

package/base/utilities/dark-theme.scss

@@ -14,6 +14,7 @@ $dark-bg-light: var(--dark-bg-light);
   --ac-gray-lightest: #777777;
   --ac-white-light: #3f3f3f;
   --ac-white-lighter: #2e323c;
+  --ac-white-lightest: #1f2229;
   --ac-label-text: #8c8c8c;
   --ac-bg-light-gray: #252830;
 

package/components/_ac-accordion.scss

@@ -29,6 +29,12 @@
     border-radius: 4px;
     border: 1px solid $ac-white-light;
 
+    &.open {
+      .accordion-heading {
+        margin-bottom: 10px;
+      }
+    }
+
     &:last-child {
       margin-bottom: 0;
     }
@@ -37,7 +43,6 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin-bottom: 10px;
 
       h3 {
         cursor: pointer;

package/components/_ac-alert-box.scss

@@ -10,10 +10,10 @@
   overflow: hidden;
   border: 1px solid $ac-primary;
   border-radius: 4px;
-  justify-content: center;
+  justify-content: flex-start;
   position: relative;
   z-index: 1;
-  max-width: 280px;
+  min-width: 280px;
 
   p {
     color: $ac-primary;
@@ -47,8 +47,33 @@
     border: none;
     font-size: 14px;
     color: $ac-danger;
-    width: 30px;
+    width: 40px;
     height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+
+.toast {
+  box-shadow: $ac-shadow-sm;
+  border: 1px solid $ac-white-light;
+  width: 350px;
+
+  .toast-header {
+    padding: 8px 12px;
+    border-bottom: 1px solid $ac-white-light;
+
+    .button {
+      &:hover {
+        color: #000000;
+      }
+    }
+  }
+
+  .toast-body {
+    padding: 8px 12px;
   }
 }
 
@@ -144,6 +169,7 @@ AC Toast
 
     i.fa {
       padding-right: 0 !important;
+      margin-right: 4px;
     }
   }
 

package/components/_ac-card.scss

@@ -29,8 +29,6 @@
       margin-bottom: 13px;
 
       .ac-card-logo {
-        min-width: 30px;
-        max-width: 30px;
         margin-right: 10px;
         position: relative;
         z-index: 1;
@@ -193,15 +191,23 @@
   .ac-card-header {
     display: flex;
     align-items: center;
-    margin-bottom: 20px;
+    margin-bottom: 16px;
 
     .ac-card-logo {
       width: 40px;
       overflow: hidden;
       margin-right: 15px;
+      background: $ac-white;
+      padding: 8px;
+      height: 40px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      border: 1px solid $ac-white-light;
     }
 
     .ac-card-title {
+      width: calc(100% - 55px);
       h4 {
         a {
           color: $ac-color-heading;
@@ -214,7 +220,7 @@
 
       p {
         font-size: $font-size-small;
-        color: $ac-gray-lightest;
+        color: $ac-gray;
       }
     }
   }

package/components/_ac-drag.scss

@@ -34,6 +34,8 @@
     ul {
       li {
         padding-left: 40px;
+        padding-top: 4px;
+        padding-bottom: 4px;
 
         &.is-not-change {
           background-color: $ac-white-lighter;

package/components/_ac-input.scss

@@ -154,6 +154,7 @@
         height: 36px;
         width: 36px;
         margin-top: 0;
+        padding: 10px;
       }
     }
 

package/components/_all.scss

@@ -23,13 +23,5 @@
 @import "go-to-top";
 @import "ac-toaster/ac-toasted";
 @import "preview-modal";
-@import "bbum/post";
-@import "bbum/single-post-preview";
-@import "bbum/user-profile";
-@import "bbum/sign-up-notification";
-@import "bbum/activities-header";
-@import "bbum/card-team";
-@import "bbum/information-center";
-@import "bbum/left-sidebar";
-@import "ac-tags";
-@import "ui-builder/ui-builder";
+@import "wizard";
+@import "bbum/all";

package/components/_left-sidebar-menu.scss

@@ -43,7 +43,7 @@
 }
 
 .ac-left-sidebar-wrapper {
-  background-color: $ac-white;
+  background-color: $ac-white-lightest;
   width: 100%;
   position: sticky;
   top: 50px;
@@ -87,7 +87,7 @@
           li {
             a {
               padding: 12px 15px 12px 26px !important;
-              font-weight: 400;
+              font-weight: 500;
 
               &:hover {
                 &::after {
@@ -95,7 +95,7 @@
                 }
 
                 span {
-                  color: $ac-black;
+                  color: $ac-link-black;
                 }
               }
 
@@ -183,7 +183,7 @@
                 li {
                   a {
                     strong {
-                      font-weight: 400;
+                      font-weight: 500;
                     }
                   }
                 }
@@ -192,10 +192,10 @@
 
             a {
               font-style: normal;
-              font-weight: 400;
+              font-weight: 500;
               font-size: $font-size-small;
               line-height: 16px;
-              color: $ac-black;
+              color: $ac-link-black;
               position: relative;
               z-index: 1;
               padding: 10px 15px 10px 24px;
@@ -223,7 +223,7 @@
                 display: flex;
                 align-items: center;
                 overflow: hidden;
-                font-weight: 400;
+                font-weight: 500;
               }
 
               &.ac-dropdown-button {
@@ -247,7 +247,7 @@
                 }
 
                 span {
-                  color: $ac-black;
+                  color: $ac-link-black;
 
                   img {
                     filter: grayscale(0);
@@ -569,7 +569,7 @@ Responsive Classes
                   }
 
                   span {
-                    color: $ac-black;
+                    color: $ac-link-black;
                   }
                 }
               }

package/components/_navbar.scss

@@ -5,6 +5,7 @@
   width: 100%;
   top: 0;
   z-index: 999;
+
   &.is-light {
     background-color: $ac-white;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
@@ -12,10 +13,12 @@
     .ac-navbar-menu .ac-menu-item .ac-nav-button.ac-profile-button {
       color: #3a3a3a !important;
     }
+
     .drawer-icon svg {
       fill: $ac-color-text !important;
     }
   }
+
   .ac-navbar {
     display: inline-grid;
     grid-template-columns: 255px auto auto;
@@ -31,10 +34,12 @@
         font-weight: 600;
         color: $ac-white;
       }
+
       img {
         height: 30px;
       }
     }
+
     .search-item {
       display: flex;
       align-items: center;
@@ -119,10 +124,31 @@
         position: relative;
         z-index: 1;
 
+        // width: 30px;
+        // height: 30px;
+        // border-radius: 50%;
+        .ac-nav-button:not(.ac-profile-button) {
+          &:after {
+            content: "";
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            position: absolute;
+            z-index: -1;
+            left: 50%;
+            transition: 0.3s ease-in-out;
+            margin-left: -15px;
+          }
+
+          &:hover {
+            &:after {
+              background-color: rgba(255, 255, 255, 0.2) !important;
+            }
+          }
+        }
+
         &:hover {
           .ac-nav-button:not(.ac-profile-button) {
-            background-color: $ac-primary;
-
             i.fa {
               color: $ac-white;
             }
@@ -132,6 +158,7 @@
             opacity: 1;
             visibility: visible;
             top: 40px;
+
             &.theme-choice {
               transition: none;
               padding: 10px 10px;
@@ -141,6 +168,7 @@
               border-radius: 4px;
               left: 0;
               background-color: $ac-white;
+
               ul {
                 li {
                   width: 40px;
@@ -156,10 +184,12 @@
                   }
                 }
               }
+
               // &::after {
               //   right: 90px;
               // }
             }
+
             &::after {
               position: absolute;
               content: "";
@@ -216,7 +246,7 @@
           &.ac-profile-button {
             strong {
               color: $ac-white;
-              margin-left: 45px;
+              margin-left: 16px;
               font-weight: 500;
               font-size: $font-size-small;
             }
@@ -244,6 +274,7 @@
           opacity: 0;
           visibility: hidden;
           transition: 0.3s ease-in;
+
           &.theme-choice {
             left: 0;
           }
@@ -560,6 +591,7 @@
         transition: max-height 0.25s ease-out;
       }
     }
+
     &.is-open {
       ul {
         max-height: 200px;
@@ -568,32 +600,40 @@
       }
     }
   }
+
   .is-fullwidth {
     width: 100%;
   }
+
   .navbar-dropdown-wrapper {
     width: 300px;
     transition: width 0.9s ease-in-out;
   }
 }
+
 .theme-choicee {
   border: 1px solid $ac-white-light;
+
   li {
     border-right: 1px solid $ac-white-light;
     cursor: pointer;
     transition: 0.3s ease-in-out;
+
     &:last-child {
       border-right: none;
     }
+
     &:hover {
       color: $ac-black;
     }
+
     &.is-active {
       background-color: $ac-primary;
       color: $ac-white;
     }
   }
 }
+
 // start dark theme
 .is-dark-theme {
   body {
@@ -617,6 +657,7 @@
               &.theme-choice {
                 background-color: var(--dark-bg-light);
               }
+
               background-color: var(--dark-bg-light);
 
               ul {
@@ -637,6 +678,7 @@
     }
   }
 }
+
 // end dark theme code
 
 /****************************************

package/components/bbum/_all.scss

@@ -0,0 +1,9 @@
+@import "activities-header";
+@import "card-team";
+@import "information-center";
+@import "left-sidebar";
+@import "mobile-desktop";
+@import "post";
+@import "sign-up-notification";
+@import "single-post-preview";
+@import "user-profile";

package/components/bbum/_single-post-preview.scss

@@ -135,7 +135,7 @@
         left: 20px;
 
         h2 {
-          font-size: $ac-size-2;
+          font-size: $size-2;
           margin-bottom: 25px;
           color: $ac-color-heading;
         }

package/components/ui-builder/_ui-builder.scss

@@ -12,20 +12,36 @@
 
 .ui-builders-wrapper {
   width: 760px;
+
   h5 {
     margin-bottom: 10px;
   }
+
   p {
     font-size: 13px;
     margin-bottom: 10px;
     color: $ac-color-value;
   }
 }
+
 .key-value-save {
+  display: grid;
+  grid-template-columns: 1fr 1fr auto;
+  grid-gap: 15px;
+}
+
+.key-value-save-check {
   display: grid;
   grid-template-columns: 1fr 1fr auto auto;
   grid-gap: 15px;
 }
+
+.key-save {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-gap: 15px;
+}
+
 .value-list-save {
   display: grid;
   grid-template-columns: 1fr auto;
@@ -38,16 +54,20 @@
   padding-left: 20px;
   position: relative;
   z-index: 1;
+
   &:first-child {
     margin-left: -20px;
   }
+
   &.is-active {
     &::after {
       border: 1px dashed $ac-primary;
     }
+
     &::before {
       background-color: $ac-primary;
     }
+
     .nested-header {
       h6 {
         .collaps-icon {
@@ -57,6 +77,7 @@
       }
     }
   }
+
   &::after {
     position: absolute;
     content: "";
@@ -79,15 +100,18 @@
     border-radius: 50%;
     z-index: -1;
   }
+
   .nested-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 5px;
+
     h6 {
       display: flex;
       align-items: center;
       cursor: pointer;
+
       .collaps-icon {
         width: 16px;
         height: 16px;
@@ -101,12 +125,14 @@
         cursor: pointer;
         background-color: $ac-white;
         color: $ac-color-value;
+
         &.is-disabled {
           cursor: not-allowed;
         }
       }
     }
   }
+
   .nested-body {
     padding-left: 24px;
   }
@@ -122,18 +148,23 @@
 
 .table-wrapper {
   overflow-x: auto;
+
   .table-inner {
     min-width: 630px;
+
     .thead {
       background-color: $ac-white-lighter;
+
       .tr {
         .th {
           font-weight: 600;
         }
+
         border-top: 1px solid var(--ac-white-light);
         border-bottom: 1px solid var(--ac-white-light);
       }
     }
+
     .thead,
     .tbody {
       .tr {
@@ -158,18 +189,21 @@
       }
     }
   }
+
   .is-selected {
     border: 1px solid $ac-primary;
     border-bottom: 1px solid $ac-primary !important;
     border-radius: 4px;
   }
 }
+
 .is-collapsed {
   &.ac-nested-elements::before,
   &.ac-nested-elements::after {
     display: none;
   }
 }
+
 // details with checkradio
 .details-with-checkradio-wrapper {
   display: grid;
@@ -193,15 +227,16 @@
   grid-gap: 15px;
   align-items: center;
   margin-bottom: 15px;
+
   .label-text {
     font-weight: 300;
   }
+
   .ac-single-input {
     margin: 0;
   }
 }
 
-
 // dark theme end
 /****************************************
 Responsive Classes

package/main.scss

@@ -1,3 +1,5 @@
+
+@import "~assets/design-system/base/utilities/customize-bulma";
 // Third party CSS
 @import "~bulma";
 @import "~bulma-checkradio";

package/package.json

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

package/vue-components/v3/table/TableRow.vue

@@ -12,6 +12,13 @@
       v-bind="$attrs"
       data-testid="ac-table-row"
     >
+      <table-cell v-if="collapsible">
+        <collapsible-button
+          @click.stop="toggleCollapse"
+          modifier-classes="is-square is-tinny is-light"
+          :icon-class="isCollapsed ? 'chevron-right' : 'chevron-down'"
+        />
+      </table-cell>
       <slot />
       <fake-table-cell
         v-if="fakeCellWidth > 0"
@@ -21,6 +28,7 @@
   </router-link>
   <tr
     v-else
+    v-bind="$attrs"
     :class="{
       'is-selected': isSelected,
       'is-hoverless': !isSelected,
@@ -29,12 +37,24 @@
     data-testid="ac-table-row"
     @click.prevent="$emit('rowselect', true)"
   >
+    <table-cell v-if="collapsible">
+      <collapsible-button
+        @click.stop="toggleCollapse"
+        modifier-classes="is-square is-tinny is-light"
+        :icon-class="isCollapsed ? 'chevron-right' : 'chevron-down'"
+      />
+    </table-cell>
     <slot />
     <fake-table-cell
       v-if="fakeCellWidth > 0"
       :fake-cell-width="fakeCellWidth"
     />
   </tr>
+  <tr v-if="collapsible && !isCollapsed" v-bind="$attrs">
+    <table-cell colspan="1000">
+      <slot name="collapsible-content" />
+    </table-cell>
+  </tr>
 </template>
 
 <script>
@@ -58,6 +78,10 @@ export default defineComponent({
       type: Number,
       default: 0,
     },
+    collapsible: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: ["rowselect"],
@@ -69,6 +93,21 @@ export default defineComponent({
     FakeTableCell: defineAsyncComponent(() =>
       import("./FakeTableCell.vue").then((module) => module.default)
     ),
+    CollapsibleButton: defineAsyncComponent(() =>
+      import("../button/Button.vue")
+    ),
+  },
+
+  data() {
+    return {
+      isCollapsed: true,
+    };
+  },
+
+  methods: {
+    toggleCollapse() {
+      this.isCollapsed = !this.isCollapsed;
+    },
   },
 });
 </script>

package/vue-components/v3/table/table-cell/GenericCell.vue

@@ -5,13 +5,20 @@
       'is-align-items-center': cellValue.icon,
       'is-justify-content-center': cellDescriptor.textAlign === 'center',
       'is-justify-content-left': cellDescriptor.textAlign === 'left',
-      'is-justify-content-right': cellDescriptor.textAlign === 'right'
+      'is-justify-content-right': cellDescriptor.textAlign === 'right',
     }"
   >
     <span v-if="cellValue.icon" class="icon p-0 mr-10">
       <img width="15" :src="cellValue.icon" />
     </span>
-    <router-link v-if="cellValue.link" :to="getCellLink(cellValue)">
+    <a
+      v-if="cellValue.link && cellValue.link.startsWith('http')"
+      :href="getCellLink(cellValue)"
+      @click.prevent="redirectTo"
+    >
+      {{ cellValue.data }}
+    </a>
+    <router-link v-else-if="cellValue.link" :to="getCellLink(cellValue)">
       {{ cellValue.data }}
     </router-link>
     <tag v-else-if="cellValue.color" :class="`is-${cellValue.color}`">
@@ -33,30 +40,36 @@ import { useRoute } from "vue-router";
 export default defineComponent({
   components: {
     Tag: defineAsyncComponent(() => import("../../tag/Tag.vue")),
-    CellValue: defineAsyncComponent(() => import("../table-cell/CellValue.vue"))
+    CellValue: defineAsyncComponent(() =>
+      import("../table-cell/CellValue.vue")
+    ),
   },
   props: {
     cellDescriptor: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     cellValue: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   },
   setup() {
+    const route = useRoute();
     function getCellLink(cell) {
-      const route = useRoute();
       const inject = (str, obj) => str.replace(/\${(.*?)}/g, (x, g) => obj[g]);
       const { user, cluster } = route.params;
       const link = inject(cell.link || "", {
         username: user,
-        clustername: cluster
+        clustername: cluster,
       });
       return link;
     }
-    return { getCellLink };
-  }
+    function redirectTo() {
+      const link = getCellLink(this.cellValue);
+      window.open(link, "_blank");
+    }
+    return { getCellLink, redirectTo };
+  },
 });
 </script>