@appscode/design-system 2.0.18 → 2.0.19-alpha.10

package/vue-components/v3/alert/AlertMessage.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+interface Props {
+  modifierClasses?: string;
+  message?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+  message:
+    "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut eum deserunt facilis natus ipsum eligendi! Consequuntur illo repudiandae at eius nam, ab omnis eveniet obcaecati.",
+});
+</script>
+
+<template>
+  <div :class="modifierClasses" class="message is-success">
+    <div class="message-body">
+      <span class="status-icon">
+        <slot name="icon"></slot>
+      </span>
+      <p>{{ message }}</p>
+
+      <button class="button is-text">
+        <span class="icon"
+          ><svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="w-6 h-6"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "../../../vue-components/styles/components/alert/alert-message";
+</style>

package/vue-components/v3/alert/Toast.vue

@@ -26,54 +26,5 @@ withDefaults(defineProps<Props>(), {
   </div>
 </template>
 <style lang="scss" scoped>
-.ac-toast {
-  width: 350px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 13px;
-  border-radius: 4px;
-  position: relative;
-  padding-right: 30px;
-  margin-bottom: 10px;
-
-  * {
-    color: $white-100;
-  }
-
-  p {
-    padding-left: 16px;
-
-    i.fa {
-      padding-right: 0 !important;
-      margin-right: 4px;
-    }
-  }
-
-  a {
-    font-weight: 500;
-    text-decoration: underline;
-    padding: 0 15px;
-
-    &:hover {
-      color: $black-90;
-    }
-  }
-
-  button.close-button {
-    border-radius: 0px;
-    background-color: transparent;
-    border: none;
-    color: $white-100;
-    position: absolute;
-    right: 0;
-    top: 0;
-    padding: 5px;
-    height: 100%;
-    width: 30px;
-    z-index: 1;
-    cursor: pointer;
-    border-left: 1px solid #dddddd;
-  }
-}
+@import "../../../vue-components/styles/components/alert/toast";
 </style>

package/vue-components/v3/breadcrumbs/Breadcrumb.vue

@@ -130,37 +130,5 @@ watch(
 </template>
 
 <style lang="scss" scoped>
-/* breadcumb style */
-.ac-breadcrumb {
-  padding: 8px 20px;
-  border-bottom: 1px solid $primary-95;
-  position: sticky;
-  top: 50px;
-  height: auto;
-  background-color: $white-100;
-  z-index: 998;
-  display: flex;
-  align-items: center;
-}
-
-.breadcrumb {
-  a {
-    color: $primary-20;
-    font-size: 13px;
-    padding: 0 3px;
-    font-weight: 500;
-    font-style: normal;
-
-    &:hover {
-      color: $primary-10;
-    }
-  }
-
-  li.is-active {
-    a {
-      color: $primary-10;
-      font-weight: 500;
-    }
-  }
-}
+@import "../../../vue-components/styles/components/breadcrumb";
 </style>

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

@@ -69,67 +69,6 @@ const showUnpluginIcon = computed(() => {
   </button>
 </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;
-      &.is-square {
-        width: 36px;
-      }
-    }
-  }
-}
-button.is-primary {
-  background-color: $primary;
-}
+<style lang="scss">
+@import "../../../vue-components/styles/components/button";
 </style>

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

@@ -12,11 +12,3 @@ withDefaults(
   </div>
   <div v-else class="buttons"><slot /></div>
 </template>
-
-<!-- <style lang="scss">
-.buttons {
-  .button {
-    margin-bottom: 16px;
-  }
-}
-</style> -->

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

@@ -29,7 +29,7 @@ const OptionDots = defineAsyncComponent(
 </script>
 
 <template>
-  <div class="card-details" data-testid="cluster-item-navigate">
+  <div class="card-details cluster" data-testid="cluster-item-navigate">
     <option-dots v-if="showOptions" :position="'is-right'">
       <slot name="options" />
     </option-dots>
@@ -69,96 +69,5 @@ const OptionDots = defineAsyncComponent(
 </template>
 
 <style lang="scss" scoped>
-.card-details {
-  border: 1px solid $primary-90;
-  padding: 24px 20px;
-  transition: 0.3s ease-in-out;
-  position: relative;
-  z-index: 1;
-  width: 100%;
-  border-radius: 2px;
-
-  .ac-options {
-    position: absolute;
-    right: 20px;
-    top: 24px;
-    z-index: 999;
-  }
-  .c-header {
-    display: flex;
-    margin-bottom: 24px;
-
-    .c-logo {
-      width: 54px;
-      height: 54px;
-      background: #e8f3fc;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-right: 24px;
-
-      img {
-        height: 24px;
-      }
-    }
-
-    .c-content {
-      width: calc(100% - 78px);
-      h4 {
-        font-size: 18px;
-        line-height: 130%;
-        color: #030d17;
-      }
-      .icon {
-        color: #0c365a;
-        cursor: pointer;
-        position: relative;
-        z-index: 1;
-        &:after {
-          position: absolute;
-          content: "";
-          border-radius: 50%;
-          width: 32px;
-          height: 32px;
-          background: #e8f3fc;
-          opacity: 0;
-          visibility: hidden;
-          transition: 0.3s ease-in-out;
-          z-index: -1;
-        }
-        &:hover {
-          &:after {
-            opacity: 1;
-            visibility: visible;
-          }
-        }
-      }
-      .tags {
-        margin-top: 12px;
-      }
-    }
-  }
-
-  .c-body {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-    justify-content: space-between;
-    p {
-      width: calc(25% - 16px);
-
-      span {
-        font-size: 11px;
-        color: #666666;
-        display: block;
-      }
-      strong {
-        color: #061b2d;
-        font-size: 13px;
-        font-weight: 400;
-      }
-    }
-  }
-}
+@import "../../../vue-components/styles/components/cards/cluster";
 </style>

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

@@ -12,7 +12,7 @@ withDefaults(
 </script>
 <template>
   <!-- single card wrapper start  -->
-  <div class="card-basic b-1" data-testid="simple-feature-card">
+  <div class="card-basic feature-card b-1" data-testid="simple-feature-card">
     <div class="c-header is-flex is-justify-content-space-between">
       <div
         v-if="isRequired"
@@ -41,28 +41,4 @@ withDefaults(
 
 <style lang="scss" scoped>
 // ac card
-.card-basic {
-  padding: 20px;
-  width: calc(25% - 8px);
-  max-width: 390px;
-  min-width: 290px;
-  position: relative;
-  border-radius: 2px;
-
-  .required {
-    position: absolute;
-    left: 20px;
-    top: -9px;
-  }
-  .c-title {
-    h5 {
-      width: calc(100% - 28px);
-    }
-  }
-  .c-body {
-    p {
-      color: #0c365a;
-    }
-  }
-}
 </style>

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

@@ -1,6 +1,10 @@
 <script setup lang="ts"></script>
 <template>
-  <div class="is-flex is-flex-wrap-wrap" data-testid="simple-feature-sets" style="gap: 16px">
+  <div
+    class="is-flex is-flex-wrap-wrap"
+    data-testid="simple-feature-sets"
+    style="gap: 16px"
+  >
     <slot />
   </div>
 </template>

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

@@ -159,84 +159,5 @@ const OptionDots = defineAsyncComponent(
 </template>
 
 <style lang="scss" scoped>
-.info-card {
-  border: 1px solid $primary-90;
-  position: relative;
-  border-radius: 2px;
-  .header {
-    display: flex;
-    align-items: center;
-    padding: 12px 16px;
-    border-bottom: 1px dashed $primary-90;
-
-    .logo {
-      display: flex;
-      align-items: center;
-      margin-right: 12px;
-      img {
-        width: 16px;
-      }
-    }
-
-    .content {
-      width: 100%;
-      h5 {
-        color: $primary-10;
-        font-weight: 500;
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  .body {
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    padding: 16px;
-    p {
-      display: flex;
-      align-items: center;
-      margin-bottom: 8px;
-      span.icon {
-        padding-right: 8px;
-        width: 22px;
-      }
-
-      strong {
-        font-size: 13px;
-        font-weight: 400;
-        color: $primary-10;
-      }
-    }
-  }
-}
-
-.line-color {
-  position: relative;
-  z-index: 1;
-  overflow: hidden;
-  &::after {
-    position: absolute;
-    content: "";
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 1px;
-    background: linear-gradient(-45deg, $primary, $success, $warning, $danger);
-    background-size: 400% 400%;
-    animation: gradient 3s ease infinite;
-  }
-}
-
-@keyframes gradient {
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
-}
+@import "../../../vue-components/styles/components/cards/info";
 </style>

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

@@ -64,28 +64,5 @@ withDefaults(defineProps<Props>(), {
 
 <style lang="scss" scoped>
 // ac card
-.card-basic {
-  padding: 20px;
-  width: calc(25% - 8px);
-  max-width: 390px;
-  min-width: 290px;
-  position: relative;
-  border-radius: 2px;
-
-  .required {
-    position: absolute;
-    left: 20px;
-    top: -9px;
-  }
-  .c-title {
-    h5 {
-      width: calc(100% - 28px);
-    }
-  }
-  .c-body {
-    p {
-      color: #0c365a;
-    }
-  }
-}
+@import "../../../vue-components/styles/components/cards/monitoring";
 </style>

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

@@ -80,63 +80,5 @@ withDefaults(defineProps<Props>(), {
   </div>
 </template>
 <style lang="scss" scoped>
-.card-details {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  border: 1px solid $primary-90;
-  padding: 24px 20px;
-  border-radius: 2px;
-  transition: 0.3s ease-in-out;
-  position: relative;
-
-  figure {
-    margin-bottom: 8px;
-  }
-
-  button.ac-button.is-text {
-    color: $primary;
-    transition: 0.3s ease-in-out;
-    padding: 2px 0;
-    height: auto;
-    &:hover {
-      background-color: transparent;
-    }
-  }
-
-  &:hover:not(.no-data-available) {
-    // border: 1px solid $primary;
-    button.ac-button.is-text {
-      gap: 16px;
-    }
-
-    .right-content {
-      img {
-        filter: grayscale(0);
-      }
-    }
-  }
-
-  .left-content {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-    justify-content: space-between;
-
-    .image {
-      border-radius: 50%;
-
-      &:has(.is-rounded) {
-        box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.1);
-      }
-    }
-  }
-
-  .right-content {
-    img {
-      filter: grayscale(1);
-    }
-  }
-}
+@import "../../../vue-components/styles/components/cards/org";
 </style>

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

@@ -60,3 +60,6 @@
     <!-- single card end -->
   </div>
 </template>
+<style lang="scss">
+@import "../../../vue-components/styles/components/cards/payment-card";
+</style>

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

@@ -14,7 +14,7 @@ withDefaults(defineProps<Props>(), {
 
 <template>
   <!-- use "is-selected" for select item  -->
-  <div class="ac-single-card has-text-centered">
+  <div class="ac-single-card vendor-card has-text-centered">
     <div class="ac-card-logo">
       <div class="card-status" />
       <img :src="logo" alt="vendor logo" />
@@ -29,61 +29,5 @@ withDefaults(defineProps<Props>(), {
 </template>
 
 <style lang="scss" scoped>
-.ac-single-card {
-  border: 1px solid $primary-90;
-  transition: 0.3s ease-in-out;
-  border-radius: 2px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  background-color: $primary-97;
-  min-width: 215px;
-  padding: 30px 20px 20px;
-  cursor: pointer;
-
-  .ac-card-name {
-    p {
-      font-size: 13px;
-      color: $primary-10;
-      line-height: 1;
-      font-weight: 500;
-
-      &.free {
-        color: $primary;
-      }
-    }
-  }
-  .ac-card-logo {
-    width: 70px;
-    height: 70px;
-    border: 1px solid $primary-90;
-    background-color: $white-100;
-    border-radius: 50%;
-    padding: 16px;
-    margin-inline: auto;
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-
-    img {
-      width: 100%;
-      height: auto;
-    }
-  }
-  &.is-selected {
-    border: 1px solid $primary !important;
-  }
-  &:hover {
-    border: 1px solid $primary;
-
-    .ac-card-title {
-      h4 {
-        a {
-          color: $primary;
-        }
-      }
-    }
-  }
-}
+@import "../../../vue-components/styles/components/cards/vendor";
 </style>

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

@@ -47,18 +47,5 @@ withDefaults(defineProps<Props>(), {
   </div>
 </template>
 <style lang="scss" scoped>
-.ac-content-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 4px 20px;
-  min-height: 40px;
-  .ac-content-title {
-    h4,
-    h5,
-    h6 {
-      color: $primary-10;
-    }
-  }
-}
+@import "../../../vue-components/styles/components/content/content-header";
 </style>

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

@@ -10,11 +10,5 @@
   </div>
 </template>
 <style lang="scss">
-.ac-content-layout {
-  // margin: 20px;
-  // margin-top: 8px;
-  // border: 1px solid $primary-95;
-  margin-bottom: 16px;
-  border-radius: 4px;
-}
+@import "../../../vue-components/styles/components/content/content-layout";
 </style>