@appscode/design-system 2.0.5 → 2.0.6-alpha.1

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

@@ -0,0 +1,338 @@
+// .tabs {
+//   &.ac-tabs {
+//     ul {
+//       border-bottom-color: $primary-90;
+//     }
+
+//     &.is-line {
+//       ul {
+//         border-bottom-color: $primary-90;
+//         padding-left: 4px;
+
+//         li {
+//           &.is-active {
+//             a {
+//               font-weight: 500;
+//               border-bottom-color: $primary;
+//               border-bottom: 2px solid $primary !important;
+//               border-width: 2px;
+//             }
+//           }
+
+//           a {
+//             // text-transform: uppercase;
+//             font-weight: 400;
+//             color: $primary-5;
+//             font-size: 13px;
+//             border-bottom: none;
+//             padding: 6px 16px;
+
+//             &:hover {
+//               border-bottom-color: $primary;
+//             }
+//           }
+//         }
+//       }
+//     }
+
+//     &.is-boxed {
+//       font-size: 14px;
+
+//       a {
+//         padding: 8px 20px;
+//         color: $primary-20;
+
+//         &:hover {
+//           border-bottom-color: transparent;
+//           background-color: transparent;
+//         }
+//       }
+
+//       ul {
+//         padding-left: 10px;
+
+//         li {
+//           &.is-active {
+//             position: relative;
+//             border-color: $primary-90;
+//             z-index: 1;
+//             color: $primary;
+
+//             &:after {
+//               position: absolute;
+//               content: "";
+//               left: 0;
+//               top: 0;
+//               width: 100%;
+//               height: 4px;
+//               border-radius: 4px 4px 0 0;
+//               background-color: $primary;
+//             }
+
+//             a {
+//               border-color: $primary-90;
+//               background-color: $white-100;
+//               padding: 8px 20px;
+//               font-weight: 500;
+//               margin-bottom: -2px;
+//               font-size: 13px;
+//             }
+//           }
+//         }
+//       }
+
+//       &.is-gap {
+//         ul {
+//           li {
+//             margin-right: 6px;
+
+//             &.is-active {
+//               box-shadow: 0px 4px 6px rgba(133, 145, 163, 0.54);
+//             }
+
+//             a {
+//               border: 1px solid $primary-90;
+//               border-bottom: none;
+//               margin-bottom: -2px;
+//               font-size: 13px;
+//               color: $primary-20;
+//             }
+//           }
+//         }
+
+//         &.is-borderless {
+//           ul {
+//             border-bottom-color: transparent;
+
+//             li {
+//               &.is-active {
+//                 a {
+//                   background-color: $primary-90;
+//                 }
+//               }
+
+//               a {
+//                 border: 1px solid transparent;
+//               }
+//             }
+//           }
+//         }
+//       }
+//     }
+
+//     &.is-toggle {
+//       ul {
+//         border: 1px solid $primary-10;
+//         border-radius: 4px;
+//         padding: 4px;
+//         flex-grow: inherit;
+
+//         li {
+//           &.is-active {
+//             a {
+//               color: $white-100;
+//               background-color: $primary;
+
+//               &:hover {
+//                 background-color: $primary;
+//               }
+//             }
+//           }
+
+//           a {
+//             font-size: 16px;
+//             font-weight: 500;
+//             border: none;
+//             padding: 8px 25px;
+//             line-height: 1;
+//             border-radius: 4px;
+
+//             &:hover {
+//               background-color: inherit;
+//             }
+//           }
+//         }
+//       }
+//     }
+
+//     &.kubedb-ui-tabs {
+//       ul {
+//         border-bottom: none;
+
+//         li {
+//           &.is-active {
+//             a {
+//               border-bottom: 3px solid $primary !important;
+//             }
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
+
+// .ac-tabs-body {
+//   &.is-content-available {
+//     .ac-tabs {
+//       margin-bottom: 0;
+
+//       ul {
+//         li {
+//           &.is-active {
+//             a {
+//               border-color: $primary-90;
+//               background-color: $white-100;
+//               color: $primary;
+//             }
+//           }
+//         }
+//       }
+//     }
+
+//     .ac-tab-content {
+//       background-color: $white-100;
+//       border: 1px solid $primary-90;
+//       border-top: none;
+//       border-radius: 0 0 4px 4px;
+
+//       &.is-borderless {
+//         border: 1px solid transparent;
+//         background-color: $primary-90;
+//         border-radius: 4px 4px 4px 4px;
+//       }
+//     }
+//   }
+// }
+
+// .ac-tabs-body {
+//   &.is-content-available {
+//     &.has-bg-color {
+//       .ac-tabs {
+//         ul {
+//           border-bottom-width: 0px;
+
+//           li {
+//             &.is-active {
+//               a {
+//                 background-color: $primary-90;
+//                 color: $primary;
+//               }
+//             }
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
+
+// .tabs li.is-active a {
+//   color: $primary;
+// }
+
+// .no-data-available {
+//   img {
+//     width: 250px;
+//   }
+// }
+
+// .ac-system-body.bb-user-management {
+//   .tabs.ac-tabs.is-line {
+//     margin-left: -20px;
+//     position: sticky;
+//     top: 50px;
+//     z-index: 99;
+//     background: $white-100;
+//   }
+// }
+
+// // dark theme
+// // .is-dark-theme {
+// //   .tabs {
+// //     &.is-toggle {
+// //       a {
+// //         &:hover {
+// //           background-color: $dark-bg;
+// //         }
+// //       }
+// //     }
+
+// //     a {
+// //       border-bottom: 1px solid $primary-90;
+// //       color: $white-100;
+// //     }
+
+// //     &.ac-tabs.is-line {
+// //       ul {
+// //         li.is-active {
+// //           a {
+// //             color: $primary-10;
+// //           }
+// //         }
+// //       }
+// //     }
+// //   }
+// // }
+
+// /****************************************
+// Responsive Classes
+// *****************************************/
+// // Extra small devices (portrait phones, less than 576px)
+// @media (max-width: 575.98px) {
+// }
+
+// // Small devices (landscape phones, 576px and up)
+// @media (min-width: 576px) and (max-width: 767.98px) {
+// }
+
+// // Medium devices (tablets, 768px and up)
+// @media (min-width: 768px) and (max-width: 991.98px) {
+// }
+
+// // Large devices (desktops, 992px and up)
+// @media (min-width: 992px) and (max-width: 1199.98px) {
+// }
+
+// // Extra large devices (large desktops, 1200px and up)
+// @media (min-width: 1200px) {
+//   .card-body-wrapper {
+//     .tabs.ac-tabs {
+//       &.is-boxed {
+//         ul {
+//           li {
+//             &.is-active {
+//               a {
+//                 border-color: $primary-90;
+//                 background-color: $white-100;
+//               }
+//             }
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
+
+.tabs {
+  &.ac-tabs {
+    ul {
+      border-color: $primary-90;
+    }
+    a {
+      padding: 8px 20px;
+      color: $primary-10;
+      font-weight: 500;
+      color: $black-40;
+      &:hover {
+        border-bottom-color: $black-40;
+      }
+    }
+    li {
+      &.is-active {
+        a {
+          border-bottom-color: $primary;
+          color: $primary;
+        }
+      }
+    }
+  }
+}

package/{components → vue-components/styles/components}/ui-builder/_ui-builder.scss

@@ -403,24 +403,24 @@
   }
 }
 // buttons
-.button {
-  &.ac-button {
-    &.is-medium {
-      font-size: 1rem;
-      height: 36px;
-    }
-    &.is-tinny {
-      height: 24px;
-      padding: 0 8px;
-    }
-  }
-}
+// .button {
+//   &.ac-button {
+//     &.is-medium {
+//       font-size: 1rem;
+//       height: 36px;
+//     }
+//     &.is-tinny {
+//       height: 24px;
+//       padding: 0 8px;
+//     }
+//   }
+// }
 
-.button[disabled] {
-  &.is-ghost {
-    border-color: transparent !important;
-  }
-}
+// .button[disabled] {
+//   &.is-ghost {
+//     border-color: transparent !important;
+//   }
+// }
 
 p.is-error,
 span.is-error {

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

@@ -619,41 +619,41 @@
 }
 
 // button scss
-.button {
-  &.ac-button {
-    padding: 8px 16px;
-    font-weight: 500;
-    line-height: 1;
-
-    &.is-light {
-      &.is-loading {
-        &::after {
-          border-color: transparent transparent #1c1c1c #1c1c1c !important;
-        }
-      }
-    }
-    &.is-ghost {
-      border-color: transparent !important;
-    }
-    &.is-square {
-      border: 1px solid $primary-95;
-    }
-    &.is-small {
-      padding: 4px 9px;
-    }
-    &.is-medium {
-      font-size: 1rem;
-      height: 36px;
-    }
-  }
-  &:focus {
-    outline: none;
-    box-shadow: none;
-  }
-}
-button.is-primary {
-  background-color: $primary;
-}
+// .button {
+//   &.ac-button {
+//     padding: 8px 16px;
+//     font-weight: 500;
+//     line-height: 1;
+
+//     &.is-light {
+//       &.is-loading {
+//         &::after {
+//           border-color: transparent transparent #1c1c1c #1c1c1c !important;
+//         }
+//       }
+//     }
+//     &.is-ghost {
+//       border-color: transparent !important;
+//     }
+//     &.is-square {
+//       border: 1px solid $primary-95;
+//     }
+//     &.is-small {
+//       padding: 4px 9px;
+//     }
+//     &.is-medium {
+//       font-size: 1rem;
+//       height: 36px;
+//     }
+//   }
+//   &:focus {
+//     outline: none;
+//     box-shadow: none;
+//   }
+// }
+// button.is-primary {
+//   background-color: $primary;
+// }
 
 .is-refresh {
   i.fa {

package/vue-components/v3/accordion/Accordion.vue

@@ -31,121 +31,5 @@ withDefaults(defineProps<Props>(), {
   </div>
 </template>
 <style lang="scss" scoped>
-.ac-accordion-wrapper {
-  &.is-marginless {
-    .single-accordion-item {
-      margin: 0;
-      padding: 0;
-
-      .accordion-heading {
-        padding: 10px 20px;
-        position: relative;
-        z-index: 1;
-
-        &::after {
-          position: absolute;
-          content: "";
-          left: 0;
-          top: 0;
-          width: 4px;
-          height: 100%;
-          background-color: $primary;
-        }
-      }
-    }
-  }
-
-  .single-accordion-item {
-    background-color: $white-100;
-    padding: 15px 20px;
-    margin-bottom: 15px;
-    border-radius: 4px;
-    border: 1px solid $primary-90;
-
-    &.open {
-      .accordion-heading {
-        margin-bottom: 10px;
-      }
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    .accordion-heading {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      h3 {
-        cursor: pointer;
-      }
-
-      button {
-        font-size: 12px;
-        letter-spacing: 0.1px;
-      }
-
-      .icon {
-        width: 20px;
-        height: 20px;
-        border: 1px solid $primary-90;
-        line-height: 20px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 10px;
-        border-radius: 50%;
-        cursor: pointer;
-      }
-    }
-
-    .accordion-body {
-      max-height: 0;
-      transition: max-height 0.2s ease-out;
-      overflow: hidden;
-
-      p {
-        font-size: 13px;
-        color: $primary-20;
-        line-height: 1.6;
-      }
-    }
-  }
-}
-
-.overview-body {
-  .ac-accordion-wrapper {
-    &.is-marginless {
-      .single-accordion-item {
-        .accordion-heading {
-          padding-bottom: 0;
-        }
-      }
-    }
-  }
-}
-
-/****************************************
-Responsive Classes
-*****************************************/
-// Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {
-}
-
-// Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {
-}
-
-// Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {
-}
-
-// Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {
-}
-
-// Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {
-}
+@import "../../../vue-components/styles/components/accordion";
 </style>

package/vue-components/v3/button/Button.vue

@@ -45,6 +45,7 @@ const showUnpluginIcon = computed(() => {
     :disabled="disabled ? true : undefined"
     @click="handleClick"
     :title="tooltip"
+    data-testid="ac-create-button"
   >
     <span
       v-if="iconClass || iconImage"
@@ -69,63 +70,5 @@ const showUnpluginIcon = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-.button {
-  &.ac-button {
-    padding: 8px 16px;
-    font-weight: 500;
-    line-height: 1;
-
-    &.is-primary {
-      &.is-light {
-        color: $primary;
-        &:focus:not(:hover) {
-          color: inherit;
-        }
-      }
-    }
-    &.is-warning {
-      &.is-light {
-        color: $yellow-30;
-        &:focus:not(:hover) {
-          color: inherit;
-        }
-      }
-    }
-
-    &.is-success {
-      &.is-light {
-        color: $green-30;
-        &:focus:not(:hover) {
-          color: inherit;
-        }
-      }
-    }
-    &.is-light {
-      &.is-loading {
-        &::after {
-          border-color: transparent transparent #1c1c1c #1c1c1c !important;
-        }
-      }
-      &.is-outlined {
-        &:hover {
-          border-color: inherit;
-        }
-      }
-    }
-
-    &.is-small {
-      padding: 4px 12px;
-      &:not(.is-rounded) {
-        border-radius: 4px;
-      }
-    }
-    &.is-medium {
-      font-size: 1rem;
-      height: 36px;
-    }
-  }
-}
-button.is-primary {
-  background-color: $primary;
-}
+@import "../../../vue-components/styles/components/button";
 </style>

package/vue-components/v3/content/ContentHeader.vue

@@ -36,7 +36,7 @@ withDefaults(defineProps<Props>(), {
     <!-- header left end -->
 
     <!-- header right start  -->
-    <div class="ac-cheader-right">
+    <div class="ac-cheader-right" data-testid="ac-right-header-content">
       <!-- your feedom content start here  -->
       <header-items>
         <slot />

package/vue-components/v3/content/ContentLayout.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="ac-content-layout">
+  <div class="ac-content-layout" data-testid="ac-content-layout">
     <slot name="content-header" />
 
     <div class="ac-content">

package/vue-components/v3/dropdown/DropdownAction.vue

@@ -60,36 +60,5 @@ onClickOutside(actionDropdown, () => emit("update:modelValue", false));
   <!-- dropdown end -->
 </template>
 <style lang="scss">
-.dropdown-group {
-  margin-bottom: 8px;
-}
-.dropdown-action {
-  .dropdown-content {
-    min-width: 220px;
-    max-width: 500px;
-    max-height: calc(100vh - 200px);
-    overflow-y: auto;
-    border: 1px solid $primary-90;
-
-    label {
-      padding: 8px 16px;
-      display: flex;
-      border-bottom: 1px solid $primary-95;
-      color: $primary-20;
-      font-weight: 500;
-    }
-    .dropdown-item {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 13px;
-      padding: 8px 16px;
-      color: $primary-20;
-      &:hover {
-        background-color: $primary-97;
-        color: $primary;
-      }
-    }
-  }
-}
+@import "../../../vue-components/styles/components/dropdown";
 </style>