@appscode/design-system 2.0.59 → 2.0.61

package/vue-components/styles/components/_ac-drag.scss

@@ -25,7 +25,7 @@
 
     .is-highlight {
       background-color: $white-100;
-      border: 1px dashed $black-80;
+      border: 1px dashed $gray-80;
       border-radius: 4px;
       margin: 4px 0;
       overflow: hidden;

package/vue-components/styles/components/_accordion.scss

@@ -69,7 +69,7 @@
 
     .accordion-body {
       max-height: 0;
-      transition: max-height 0.2s ease-out;
+      // transition: max-height 0.2s ease-out;
       overflow: hidden;
 
       p {

package/vue-components/styles/components/_badge-tags.scss

@@ -0,0 +1,75 @@
+@mixin badge($text-color, $bg-color, $text-dark, $bg-light) {
+  color: $text-color;
+  background-color: $bg-color;
+  .circle {
+    background-color: $text-color;
+  }
+  &.is-light {
+    background-color: $bg-light;
+    color: $text-dark;
+    .circle {
+      background-color: $bg-color;
+    }
+  }
+  &.is-outlined {
+    background-color: transparent;
+    color: $bg-color;
+    border: 1px solid $bg-color;
+    .circle {
+      background-color: $bg-color;
+    }
+  }
+}
+
+.badge,
+.tag {
+  font-size: 12px;
+  color: $color-heading;
+  background-color: $gray-90;
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 4px;
+  line-height: 1;
+  &.is-outlined {
+    background-color: transparent;
+    color: $color-heading;
+    border: 1px solid $color-border;
+    .circle {
+      background-color: $color-border;
+    }
+  }
+  &.is-rounded {
+    border-radius: 50px;
+  }
+
+  &.is-primary {
+    @include badge($white-100, $ac-primary, $primary-10, $primary-95);
+  }
+  &.is-secondary {
+    @include badge($white-100, $ac-secondary, $secondary-10, $secondary-95);
+  }
+  &.is-info {
+    @include badge($white-100, $info, $blue-10, $blue-95);
+  }
+  &.is-success {
+    @include badge($white-100, $success, $green-10, $green-95);
+  }
+  &.is-warning {
+    @include badge($white-100, $warning, $yellow-10, $yellow-95);
+  }
+  &.is-danger {
+    @include badge($white-100, $danger, $red-10, $red-95);
+  }
+  &.is-dark {
+    @include badge($white-100, $gray, $gray-10, $gray-95);
+  }
+
+  .circle {
+    width: 8px;
+    height: 8px;
+    background: $gray-10;
+    border-radius: 50%;
+  }
+}

package/vue-components/styles/components/_card-body-wrapper.scss

@@ -45,7 +45,7 @@
 //         font-weight: normal;
 //         font-size: 14px;
 //         line-height: 16px;
-//         color: $black-40;
+//         color: $gray-40;
 //         margin-top: 30px;
 //         margin-bottom: 10px;
 //       }

package/vue-components/styles/components/_pagination.scss

@@ -64,7 +64,7 @@
 //   }
 
 //   label {
-//     color: $black-40;
+//     color: $gray-40;
 //     padding-right: 5px;
 //     display: inline-block;
 //     font-size: 13px;
@@ -98,7 +98,7 @@
 // .is-dark-theme {
 //   .pagination-filter {
 //     label {
-//       $black-40: $primary-20;
+//       $gray-40: $primary-20;
 //     }
 //   }
 // }

package/vue-components/styles/components/_preview-modal.scss

@@ -64,7 +64,7 @@
 
     .ac-preview-header {
       padding: 20px;
-      border-bottom: 1px solid $black-60;
+      border-bottom: 1px solid $gray-60;
 
       h5 {
         font-family: $font-paragraph;
@@ -83,11 +83,11 @@
           font-weight: normal;
           font-size: 16px;
           line-height: 100%;
-          color: $black-80;
+          color: $gray-80;
           cursor: pointer;
 
           i.fa {
-            color: $black-80;
+            color: $gray-80;
             padding-left: 5px;
           }
         }

package/vue-components/styles/components/_progress-bar.scss

@@ -14,7 +14,7 @@
 
   .progress-tooltip-info {
     align-items: center;
-    background-color: $black-60;
+    background-color: $gray-60;
     border: 1px solid $primary-10;
     border-radius: 10px;
     box-shadow: 0 0 2px $primary-10;
@@ -35,7 +35,7 @@
       content: "";
       display: inline-block;
       border: 7px solid transparent;
-      border-top-color: $black-60;
+      border-top-color: $gray-60;
       position: absolute;
       bottom: -13px;
       left: 50%;
@@ -50,7 +50,7 @@
       content: "";
       display: inline-block;
       border: 7px solid transparent;
-      border-top-color: $black-60;
+      border-top-color: $gray-60;
       position: absolute;
       bottom: -13px;
       left: 50%;

package/vue-components/styles/components/_table.scss

@@ -68,7 +68,7 @@
       box-shadow: inset 0 0 0 1px $ac-primary;
       border-radius: 4px;
       border-bottom: none;
-      color: $black-5;
+      color: $gray-5;
     }
 
     tr {
@@ -82,7 +82,7 @@
         box-shadow: inset 0 0 0 1.2px $ac-primary;
         border-radius: 4px;
         border-bottom: none;
-        color: $black-5;
+        color: $gray-5;
         transition: 0.3s ease-in-out;
         .tag {
           background-color: $primary-80;
@@ -284,7 +284,7 @@
                 &::after {
                   top: 6px;
                   left: 6px;
-                  border-color: $black-80;
+                  border-color: $gray-80;
                   width: 0.3rem;
                   height: 0.5rem;
                 }

package/vue-components/styles/components/_tabs.scss

@@ -321,9 +321,9 @@
       padding: 8px 20px;
       color: $color-heading;
       font-weight: 500;
-      color: $black-40;
+      color: $gray-40;
       &:hover {
-        border-bottom-color: $black-40;
+        border-bottom-color: $gray-40;
       }
     }
     li {

package/vue-components/styles/components/_terminal.scss

@@ -85,13 +85,13 @@
         }
 
         &::-webkit-scrollbar-thumb {
-          background-color: $black-50;
+          background-color: $gray-50;
           border-radius: 50px;
           height: 2px !important;
         }
 
         &::-webkit-scrollbar-thumb:hover {
-          background-color: $black-50;
+          background-color: $gray-50;
         }
 
         &:hover::-webkit-scrollbar-corner {
@@ -179,7 +179,7 @@
                 padding: 10px 20px;
                 justify-content: flex-start;
                 border-bottom: 1px solid $primary-20;
-                color: $white-100!important;
+                color: $white-100 !important;
 
                 &:last-child {
                   border-bottom: none;

package/vue-components/styles/components/_wizard.scss

@@ -267,7 +267,7 @@
 
 // .ac-certificate-info {
 //   padding: 10px 15px;
-//   background-color: $black-60;
+//   background-color: $gray-60;
 //   border-radius: 4px;
 
 //   .single-name-title {
@@ -311,7 +311,7 @@
 
 //   .line-title {
 //     span {
-//       background-color: $black-60;
+//       background-color: $gray-60;
 //     }
 //   }
 // }
@@ -478,7 +478,7 @@
 
 // Wizard Notification Area Start
 // .wizard-notification-area {
-//   background-color: $black-80;
+//   background-color: $gray-80;
 //   border-radius: 10px;
 //   padding: 10px;
 //   width: 100%;

package/vue-components/styles/components/ac-toaster/_ac-toasted.scss

@@ -64,16 +64,21 @@
 Responsive Classes
 *****************************************/
 // Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {}
+@media (max-width: 575.98px) {
+}
 
 // Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {}
+@media (min-width: 576px) and (max-width: 767.98px) {
+}
 
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {}
+@media (min-width: 768px) and (max-width: 991.98px) {
+}
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {}
+@media (min-width: 992px) and (max-width: 1199.98px) {
+}
 
 // Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {}
+@media (min-width: 1200px) {
+}

package/vue-components/styles/components/alert/_alert.scss

@@ -27,12 +27,7 @@
       color: $ac-primary;
 
       &:hover {
-        color: hsla(
-          var(--hsl-hue),
-          var(--hsl-saturation),
-          calc(var(--hsl-lightness) - 10%),
-          1
-        );
+        color: hsla(var(--hsl-hue), var(--hsl-saturation), calc(var(--hsl-lightness) - 10%), 1);
       }
     }
   }
@@ -74,12 +69,7 @@
   }
 }
 @mixin acPrimaryNotification() {
-  background-color: hsla(
-    var(--hsl-hue),
-    var(--hsl-saturation),
-    var(--hsl-lightness),
-    0.2
-  );
+  background-color: hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.2);
   color: $white-100;
   border-color: $ac-primary;
 

package/vue-components/styles/components/alert/_toast.scss

@@ -28,7 +28,7 @@
     padding: 0 15px;
 
     &:hover {
-      color: $black-90;
+      color: $gray-90;
     }
   }
 

package/vue-components/styles/components/bbum/_all.scss

@@ -6,4 +6,4 @@
 @import "post";
 @import "sign-up-notification";
 @import "single-post-preview";
-@import "user-profile";
+@import "user-profile";

package/vue-components/styles/components/bbum/_card-team.scss

@@ -1,11 +1,6 @@
 .single-team-card {
   border: 1px solid $color-border;
-  background-color: hsla(
-    var(--hsl-hue),
-    var(--hsl-saturation),
-    var(--hsl-lightness),
-    0.03
-  );
+  background-color: hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.03);
   border-radius: 4px;
   // overflow: hidden;
   transition: 0.3s ease-in-out;

package/vue-components/styles/components/bbum/_information-center.scss

@@ -72,7 +72,7 @@
         height: 160px;
         background-size: cover;
         background-position: center;
-        background-color: $black-80;
+        background-color: $gray-80;
         position: relative;
         z-index: 1;
 
@@ -81,7 +81,7 @@
           content: "";
           width: 100%;
           height: 100%;
-          background-color: $black-5;
+          background-color: $gray-5;
           z-index: -1;
           opacity: 0.2;
         }
@@ -111,7 +111,7 @@
             top: 0;
             width: 100%;
             height: 100%;
-            background-color: $black-5;
+            background-color: $gray-5;
             opacity: 0.3;
             z-index: -1;
           }
@@ -126,7 +126,7 @@
             transition: 0.3s;
 
             &:hover {
-              color: $black-80;
+              color: $gray-80;
             }
           }
         }

package/vue-components/styles/components/bbum/_mobile-desktop.scss

@@ -139,16 +139,21 @@
 Responsive Classes
 *****************************************/
 // Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {}
+@media (max-width: 575.98px) {
+}
 
 // Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {}
+@media (min-width: 576px) and (max-width: 767.98px) {
+}
 
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {}
+@media (min-width: 768px) and (max-width: 991.98px) {
+}
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {}
+@media (min-width: 992px) and (max-width: 1199.98px) {
+}
 
 // Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {}
+@media (min-width: 1200px) {
+}

package/vue-components/styles/components/bbum/_user-profile.scss

@@ -18,7 +18,7 @@
         height: 240px;
         background-size: cover;
         background-position: center;
-        background-color: $black-80;
+        background-color: $gray-80;
         background-repeat: no-repeat;
         border-radius: 10px;
       }

package/vue-components/styles/components/cards/_info.scss

@@ -62,13 +62,7 @@
     bottom: 0;
     width: 100%;
     height: 1px;
-    background: linear-gradient(
-      -45deg,
-      $ac-primary,
-      $success,
-      $warning,
-      $danger
-    );
+    background: linear-gradient(-45deg, $ac-primary, $success, $warning, $danger);
     background-size: 400% 400%;
     animation: gradient 3s ease infinite;
   }

package/vue-components/styles/components/editor/_filtered-file-editor.scss

@@ -65,7 +65,7 @@
 
     // .ac-preview-header {
     //   padding: 20px;
-    //   border-bottom: 1px solid $black-60;
+    //   border-bottom: 1px solid $gray-60;
 
     //   h5 {
     //     font-style: normal;
@@ -82,11 +82,11 @@
     //       font-weight: normal;
     //       font-size: 16px;
     //       line-height: 100%;
-    //       color: $black-80;
+    //       color: $gray-80;
     //       cursor: pointer;
 
     //       i.fa {
-    //         color: $black-80;
+    //         color: $gray-80;
     //         padding-left: 5px;
     //       }
     //     }

package/vue-components/styles/components/editor/_monaco-editor.scss

@@ -63,4 +63,4 @@
       height: 6px !important;
     }
   }
-}
+}

package/vue-components/styles/components/form-fields/_input-card.scss

@@ -17,7 +17,7 @@
       position: absolute;
       width: 100%;
       height: 100%;
-      background-color: $black-5;
+      background-color: $gray-5;
       top: 0;
       left: 0;
       z-index: 1;
@@ -157,7 +157,7 @@
       position: absolute;
       right: -5px;
       top: -5px;
-      border: 1px solid $black-80;
+      border: 1px solid $gray-80;
       font-size: 10px;
       height: 25px;
       width: 25px;

package/vue-components/styles/components/form-fields/_input.scss

@@ -121,7 +121,7 @@
 
       &.show-label {
         font-size: 12px;
-        color: $black-40;
+        color: $gray-40;
         top: -9px;
         font-weight: 500;
         background-color: $white-100;
@@ -175,7 +175,7 @@
         font-size: 12px;
         top: -9px;
         font-weight: 500;
-        color: $black-40;
+        color: $gray-40;
 
         &.is-required {
           &:after {
@@ -282,7 +282,7 @@
       left: 10px;
       padding: 0 5px;
       font-size: 13px;
-      color: $black-40;
+      color: $gray-40;
 
       &:after {
         position: absolute;

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

@@ -71,8 +71,7 @@
     visibility: hidden;
     transition: 0.3s ease-in;
     width: 260px;
-    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
-      0 0px 0 1px rgba(10, 10, 10, 0.02);
+    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
 
     &.quick-access {
       background-color: $white-100;

package/vue-components/styles/components/select-box/_ac-select-box.scss

@@ -11,7 +11,7 @@
 //     }
 
 //     &:hover {
-//       border: 1px solid $black-80;
+//       border: 1px solid $gray-80;
 //     }
 
 //     &:focus {
@@ -41,7 +41,7 @@
 // .is-dark-theme {
 //   .select {
 //     select {
-//       background-color: $black-80;
+//       background-color: $gray-80;
 //       color: $white-100;
 //       border: 1px solid $color-border;
 //     }

package/vue-components/styles/components/select-box/_multi-select.scss

@@ -43,7 +43,7 @@
     }
 
     .multiselect__tag {
-      background-color: $black-80;
+      background-color: $gray-80;
       margin-top: 4px;
       margin-bottom: 0;
 
@@ -55,12 +55,7 @@
         }
 
         &:hover {
-          background-color: hsla(
-            var(--hsl-hue),
-            var(--hsl-saturation),
-            calc(var(--hsl-lightness) - 9%),
-            1
-          );
+          background-color: hsla(var(--hsl-hue), var(--hsl-saturation), calc(var(--hsl-lightness) - 9%), 1);
         }
       }
     }
@@ -224,7 +219,7 @@
         font-size: 12px;
         top: -9px;
         font-weight: 500;
-        color: $black-5;
+        color: $gray-5;
       }
     }
 
@@ -423,7 +418,7 @@
       left: 10px;
       padding: 0 5px;
       font-size: 13px;
-      color: $black-40;
+      color: $gray-40;
 
       &::after {
         background-color: $white-100;

package/vue-components/styles/components/sidebar/_left-sidebar.scss

@@ -140,7 +140,7 @@
               right: 20px;
               transition: transform 0.3s;
               transform-origin: 4px;
-              color: $black-70;
+              color: $gray-70;
             }
           }
 
@@ -166,7 +166,7 @@
             margin-right: 12px;
             width: 16px;
             height: 16px;
-            color: $black-30;
+            color: $gray-30;
             font-size: 16px;
 
             img {

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

@@ -437,7 +437,7 @@ span.is-error {
 .circle-list-shape {
   width: 6px;
   height: 6px;
-  background-color: $black-40;
+  background-color: $gray-40;
   display: flex;
   border-radius: 50%;
 }

package/vue-components/styles/components/ui-builder/_vue-open-api.scss

@@ -227,7 +227,7 @@
 
         &.show-label {
           font-size: 12px;
-          color: $black-40;
+          color: $gray-40;
           top: -9px;
           font-weight: 500;
           background-color: $white-100;
@@ -281,7 +281,7 @@
           font-size: 12px;
           top: -9px;
           font-weight: 500;
-          color: $black-40;
+          color: $gray-40;
 
           &.is-required {
             &:after {
@@ -406,7 +406,7 @@
         left: 10px;
         padding: 0 5px;
         font-size: 13px;
-        color: $black-40;
+        color: $gray-40;
 
         &:after {
           position: absolute;
@@ -479,12 +479,7 @@
             transition: 0.3s;
 
             &:hover {
-              background-color: hsla(
-                var(--hsl-hue),
-                var(--hsl-saturation),
-                var(--hsl-lightness),
-                0.2
-              );
+              background-color: hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.2);
               color: $ac-primary;
             }
           }
@@ -533,7 +528,7 @@
 
     span.eye {
       i.fa {
-        color: $black-50;
+        color: $gray-50;
         position: absolute;
         cursor: pointer;
         padding: 15px;