@appscode/design-system 1.0.43-alpha.183 → 1.0.43-alpha.185

package/base/utilities/_all.scss

@@ -0,0 +1,6 @@
+@import "initial-variables";
+@import "derived-variables";
+@import "mixin";
+@import "typography";
+@import "default";
+@import "daek-theme";

package/components/_ac-accordion.scss

@@ -27,6 +27,7 @@
     padding: 15px 20px;
     margin-bottom: 15px;
     border-radius: 4px;
+    border: 1px solid #e7e7e7;
 
     &:last-child {
       margin-bottom: 0;
@@ -48,10 +49,13 @@
       }
 
       .icon {
-        width: 16px;
-        height: 16px;
-        border: 1px solid $ac-color-heading;
-        line-height: 16px;
+        width: 20px;
+        height: 20px;
+        border: 1px solid $ac-white-light;
+        line-height: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         font-size: 10px;
         border-radius: 50%;
         cursor: pointer;

package/components/_ac-alert-box.scss

@@ -6,13 +6,14 @@
   min-height: 36px;
   display: flex;
   align-items: center;
-  padding: 5px 30px;
+  padding: 8px 16px;
   overflow: hidden;
   border: 1px solid $ac-primary;
   border-radius: 4px;
   justify-content: center;
   position: relative;
   z-index: 1;
+  max-width: 280px;
 
   p {
     color: $ac-primary;
@@ -139,7 +140,7 @@ AC Toast
   }
 
   p {
-    padding-left: 10px;
+    padding-left: 16px;
 
     i.fa {
       padding-right: 0 !important;
@@ -158,7 +159,6 @@ AC Toast
 
   button.close-button {
     border-radius: 0px;
-    border-left: 1px solid $ac-white;
     background-color: transparent;
     border: none;
     color: $ac-white;
@@ -170,7 +170,7 @@ AC Toast
     width: 30px;
     z-index: 1;
     cursor: pointer;
-    border-left: 1px solid $ac-white;
+    border-left: 1px solid #dddddd;
   }
 }
 

package/components/_ac-table.scss

@@ -12,13 +12,13 @@
 
     /* Handle */
     &::-webkit-scrollbar-thumb {
-      background-color: $ac-gray-light;
+      background-color: $ac-white-light;
       border-radius: 10px;
     }
 
     /* Handle on hover */
     &::-webkit-scrollbar-thumb:hover {
-      background-color: $ac-gray-light;
+      background-color: $ac-white-light;
     }
   }
 }

package/components/_ac-tabs.scss

@@ -6,14 +6,14 @@
 
     &.is-line {
       ul {
-        border-bottom-color: $ac-white-light;
+        // border-bottom-color: $ac-white-light;
 
         li {
           &.is-active {
             a {
               font-weight: 500;
               border-bottom-color: $ac-primary;
-              border-color: $ac-primary !important;
+              border-bottom: 2px solid $ac-primary !important;
               border-width: 2px;
             }
           }
@@ -23,6 +23,7 @@
             font-weight: 400;
             color: $ac-color-heading;
             font-size: $font-size-small;
+            border-bottom: none;
             padding: 6px 20px;
 
             &:hover {

package/components/_all.scss

@@ -0,0 +1,34 @@
+@import "ac-alert-box";
+@import "ac-accordion";
+@import "buttons";
+@import "ac-card";
+@import "breadcumb";
+@import "ac-multi-select";
+@import "ac-code-highlight";
+@import "navbar";
+@import "app-drawer";
+@import "left-sidebar-menu";
+@import "ac-input";
+@import "ac-content-layout";
+@import "ac-table";
+@import "graph";
+@import "ac-modal";
+@import "payment-card";
+@import "pagination";
+@import "ac-options";
+@import "image-upload";
+@import "ac-alert-box";
+@import "dashboard-header";
+@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";

package/components/_buttons.scss

@@ -60,8 +60,12 @@
       color: $ac-primary;
       padding: 2px 6px;
       border-radius: 4px;
-      width: 28px;
-      height: 28px;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
     }
 
     &.is-small {
@@ -127,8 +131,8 @@
       width: 52px;
       height: 52px;
       padding: 0;
-      &:hover{
-        svg{
+      &:hover {
+        svg {
           color: $ac-white;
         }
       }
@@ -410,33 +414,6 @@
   }
 }
 
-// group buttons
-.buttons {
-  &.are-medium {
-    .button {
-      &.ac-button {
-        @extend .is-medium;
-      }
-    }
-  }
-
-  &.are-small {
-    .button {
-      &.ac-button {
-        @extend .is-small;
-      }
-    }
-  }
-
-  &.are-large {
-    .button {
-      &.ac-button {
-        @extend .is-large;
-      }
-    }
-  }
-}
-
 .ac-play-button-wrapper {
   display: flex;
   align-items: center;
@@ -628,7 +605,7 @@
       --ac-white: #2e323c;
     }
   }
-  .button.ac-button.is-text{
+  .button.ac-button.is-text {
     background-color: transparent;
   }
 }

package/components/_navbar.scss

@@ -217,7 +217,7 @@
             strong {
               color: $ac-white;
               margin-left: 45px;
-              font-weight: 400;
+              font-weight: 500;
               font-size: $font-size-small;
             }
 

package/components/_wizard.scss

@@ -121,6 +121,7 @@
   transition: 0.3s ease-in-out;
   position: relative;
   z-index: 1;
+  max-width: 250px;
 
   &.is-active-require-field {
     &:after {

package/layouts/_all.scss

@@ -0,0 +1,2 @@
+@import "404";
+@import "code-preview";

package/layouts/_code-preview.scss

@@ -1,6 +1,6 @@
 .component-wrapper {
   .component-inner {
-    margin-bottom: 20px;
+    margin: 20px;
     border: 1px solid $ac-white-light;
     border-radius: 4px;
     display: flex;
@@ -109,10 +109,13 @@
 
 // new code preview
 .ac-components {
+  margin: 20px;
   .single-component {
-    box-shadow: $ac-shadow-1;
+    // box-shadow: $ac-shadow-1;
+    border: 1px solid $ac-white-light;
     border-radius: 4px;
     margin-bottom: 25px;
+    overflow: hidden;
 
     .component-header {
       display: flex;

package/package.json

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

package/vue-components/v2/sidebar/SidebarItemWithDropDown.vue

@@ -100,7 +100,7 @@ export default {
   methods: {
     setDropdownMaxHeight(mode) {
       if (mode === "open") {
-        this.dropDownSectionHeight = `${this.$refs["sectionItems"].scrollHeight}px`;
+        this.dropDownSectionHeight = `${this.$refs["sectionItems"]?.scrollHeight}px`;
       } else {
         this.dropDownSectionHeight = null;
       }