@appscode/design-system 1.1.0-beta.2 → 1.1.0-beta.4

package/vue-components/v3/sidebar/SidebarFooter.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { defineAsyncComponent } from "vue";
 interface Props {
-  isColorpickerEnabled: boolean;
+  isColorpickerEnabled?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
   isColorpickerEnabled: false,
 });
-
+defineEmits(["toggleSidebar"]);
 const AccentColorPicker = defineAsyncComponent(
   () => import("./AccentColorPicker.vue")
 );
@@ -16,7 +16,7 @@ const AccentColorPicker = defineAsyncComponent(
 <template>
   <div class="sidebar-footer">
     <!-- back button  -->
-    <button class="back-button is-transparent">
+    <button class="back-button is-transparent" @click="$emit('toggleSidebar')">
       <svg
         width="18"
         height="18"

package/vue-components/v3/sidebar/SidebarHeader.vue

@@ -2,7 +2,7 @@
 defineEmits(["toggleSidebar"]);
 
 interface Props {
-  brandLogo: string;
+  brandLogo?: string;
   brandLogoAlt?: string;
   url?: string;
   modifierClasses?: string;
@@ -16,9 +16,9 @@ withDefaults(defineProps<Props>(), {
 });
 </script>
 <template>
-  <div class="sidebar-header" @click="$emit('toggleSidebar')">
+  <div class="sidebar-header">
     <!-- hamburger icon  -->
-    <div class="icon hamburger-icon mr-16">
+    <div class="icon hamburger-icon mr-16" @click="$emit('toggleSidebar')">
       <svg
         width="18"
         height="18"

package/vue-components/v3/sidebar/Steps.vue

@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import FeCheck from "~icons/fe/check";
+</script>
+
+<template>
+  <!-- steps  01-->
+  <li>
+    <strong
+      ><span class="step-count is-active">1</span>
+      <span class="label-text">CLUSTER SELECTION</span></strong
+    >
+    <ul>
+      <li class="is-active">
+        <strong
+          ><span class="step-count"><FeCheck /></span>
+          <span class="label-text">Select Provider</span></strong
+        >
+      </li>
+      <li>
+        <strong
+          ><span class="step-count"><FeCheck /></span>
+          <span class="label-text">Select Credential</span></strong
+        >
+      </li>
+      <li>
+        <strong
+          ><span class="step-count"> <FeCheck /> </span>
+          <span class="label-text">Select Cluster</span></strong
+        >
+      </li>
+    </ul>
+  </li>
+  <!-- steps  01-->
+
+  <!-- steps  02-->
+  <li>
+    <strong
+      ><span class="step-count">2</span>
+      <span class="label-text">IMPORT</span></strong
+    >
+    <ul>
+      <li>
+        <strong
+          ><span class="step-count"><FeCheck /></span>
+          <span class="label-text">Select Provider</span></strong
+        >
+      </li>
+      <li>
+        <strong
+          ><span class="step-count"><FeCheck /></span>
+          <span class="label-text">Select Credential</span></strong
+        >
+      </li>
+      <li>
+        <strong
+          ><span class="step-count"> <FeCheck /> </span>
+          <span class="label-text">Select Cluster</span></strong
+        >
+      </li>
+    </ul>
+  </li>
+  <!-- steps  02-->
+</template>
+
+<style lang="scss" scoped>
+ul {
+  padding-left: 4px !important;
+  position: relative;
+  z-index: 1;
+  &::after {
+    position: absolute;
+    content: "";
+    left: 15px;
+    top: -16px;
+    width: 1px;
+    height: 100%;
+    /* colors/primary/40-primary */
+    border: 1px dashed #186cb4;
+    z-index: -1;
+  }
+  li {
+    display: block;
+    padding: 6px 0;
+    cursor: pointer;
+    strong {
+      /* colors/white */
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+
+      .step-count {
+        width: 32px;
+        height: 32px;
+        margin-right: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        background-color: $primary-20;
+        border: 1px solid $primary-40;
+        color: $primary-80;
+        font-size: 16px;
+        &.is-active {
+          background-color: $primary;
+          color: $white-100;
+          border: 1px solid $primary-90;
+        }
+      }
+    }
+
+    ul {
+      max-height: 100% !important;
+
+      li {
+        &.is-active {
+          strong {
+            .step-count {
+              background-color: $primary;
+              color: $white-100;
+              border: 1px solid $primary-90;
+            }
+            .label-text {
+              color: $white-100;
+              font-weight: 500;
+            }
+          }
+        }
+        strong {
+          .step-count {
+            width: 22px;
+            height: 22px;
+            margin-right: 16px;
+            background: $primary-20;
+            color: $primary-80;
+            border: 1px solid $primary-40;
+            font-size: 14px;
+          }
+
+          .label-text {
+            color: $primary-95;
+            font-weight: 400;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -145,7 +145,7 @@ onUpdated(() => {
   <table-container ref="ac_table_container" @scroller="handleScroller">
     <table
       ref="ac_table"
-      class="table ac-table ac-label-texted"
+      class="table ac-table is-bordered"
       :class="{
         'is-fullwidth':
           !isDynamicWidthTable ||
@@ -153,7 +153,7 @@ onUpdated(() => {
           isTableEmpty ||
           isLoaderActive,
         // 'ac-striped': !columnStriped,
-        // 'ac-label-texted': columnStriped,
+        // 'is-bordered': columnStriped,
       }"
     >
       <thead>
@@ -338,11 +338,33 @@ onUpdated(() => {
     }
 
     tr {
+      border-bottom: 1px solid var(--ac-white-light);
       &.is-link {
         cursor: pointer;
       }
-      border-bottom: 1px solid var(--ac-white-light);
+      &.is-selected {
+        background-color: $primary-97 !important;
+        transform: matrix(1, 0, 0, 1, 0, 0) !important;
+        box-shadow: inset 0 0 0 1.2px $primary;
+        border-radius: 4px;
+        border-bottom: none;
+        color: $ac-black;
+        transition: 0.3s ease-in-out;
+        .tag {
+          background-color: $primary-90;
+        }
+        &:hover {
+          background-color: $primary-95 !important;
+          transform: matrix(1, 0, 0, 1, 0, 0) !important;
+          box-shadow: inset 0 0 0 1.2px $primary !important;
+        }
+      }
 
+      &.is-hoverless {
+        box-shadow: none !important;
+        transform: none !important;
+        background-color: $white-100 !important;
+      }
       td {
         font-size: 13px;
         padding: 5px 20px;
@@ -369,7 +391,7 @@ onUpdated(() => {
           }
         }
 
-        &.is-error {
+        &.is-danger {
           color: $danger;
         }
 
@@ -434,21 +456,6 @@ onUpdated(() => {
         }
       }
 
-      &.is-selected {
-        background-color: $white-100 !important;
-        transform: matrix(1, 0, 0, 1, 0, 0) !important;
-        box-shadow: inset 0 0 0 1px $primary;
-        border-radius: 4px;
-        border-bottom: none;
-        color: $ac-black;
-      }
-
-      &.is-hoverless {
-        box-shadow: none !important;
-        transform: none !important;
-        background-color: $white-100 !important;
-      }
-
       transition: 0.3s ease-in-out;
     }
   }
@@ -479,7 +486,7 @@ onUpdated(() => {
     }
   }
 
-  &.ac-label-texted {
+  &.is-bordered {
     thead {
       tr {
         th {

package/base/utilities/_derived-variables.scss

@@ -1,24 +0,0 @@
-// color
-$info: $blue;
-$success: $primary;
-$warning: $yellow;
-$danger: $danger
-
-// Text colors
-$primary-10: var(--ac-text);
-$primary-5: var(--ac-text-heading);
-
-// Link colors
-$ac-link: $blue;
-$ac-link-visited: $purple;
-
-// Box Shadow
-$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/_initial-variables.scss

@@ -1,217 +0,0 @@
-// Typography
-@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700&display=swap");
-
-$font-heading: "Roboto", sans-serif;
-$font-paragraph: "Roboto", sans-serif;
-
-// body font size
-16px: 16px;
-15px: 15px;
-14px: 14px;
-13px: 13px;
-12px: 12px;
-11px: 11px;
-
-// Base Color
-$ac-orange: #ff8000;
-$warning: #f7ad2a;
-$success: #158748;
-$info: #0aafff;
-$purple: #791e94;
-$ac-red: #ff3729;
-
-// Products Color
-$voyager-primary: #2d2a78;
-$guard-primary: #d84e27;
-$kubeci-primary: #2c3e50;
-$kubed-primary: #1c7bd4;
-$kubedb-primary: #4d4dcb;
-$kubesheild-primary: #2516c7;
-$kubevault-primary: #326ce5;
-$pharmer-primary: #326de6;
-$searchlight-primary: #111738;
-$servicebroker-primary: #29b4a2;
-$stash-primary: #5e2dea;
-$swift-primary: #3f51b6;
-
-// Colors Primary
-// root colors
-:root {
-  --hsl-hue: 208;
-  --hsl-saturation: 77%;
-  --hsl-lightness: 42%;
-  --contrast-threshold: 60%;
-  --ac-bg: #ffffff;
-  --ac-white: #ffffff;
-  --ac-full-white: #ffffff;
-  --ac-gray-dark: #5f5f5f;
-  --ac-gray-light: #8d8d8d;
-  --ac-gray-lightest: #d1d1d1;
-  --ac-white-light: #d2e7f9;
-  --ac-white-lighter: #f2f5f8;
-  --ac-white-lightest: #f8f9fb;
-
-  --ac-black: #000000;
-  --ac-color-text-90: #323232;
-  --ac-link-black: #32325d;
-  --ac-gray-darker: #494949;
-  --ac-gray: #767676;
-  --ac-gray-lighter: #a4a4a4;
-  --ac-white-text: #b4c0cc;
-
-  // theme color
-  --dark-bg: #21272e;
-  --dark-bg-light: #2e323c;
-
-  // --ac-blue-light: #eceff4;
-  --ac-bg-light-gray: #f4f6f9;
-  --table-header: #e4e8ef;
-  --ac-label-text: #a6abbd;
-
-  --font-hsl-hue: 0;
-  --font-hsl-saturation: 0%;
-  --font-hsl-lightness: 11%;
-
-  --ac-primary: hsla(var(--hsl-hue),
-      var(--hsl-saturation),
-      var(--hsl-lightness),
-      1);
-
-  --ac-text: hsla(var(--font-hsl-hue),
-      calc(var(--font-hsl-saturation) + 10%),
-      calc(var(--font-hsl-lightness) + 10%),
-      1);
-  --ac-text-heading: hsla(var(--font-hsl-hue),
-      var(--font-hsl-saturation),
-      var(--font-hsl-lightness),
-      1);
-  --ac-color-value: hsl(var(--font-hsl-hue),
-      var(--font-hsl-saturation),
-      calc(var(--font-hsl-lightness) + 25%));
-}
-
-$ac-bg: var(--ac-bg);
-$primary: var(--ac-primary);
-$primary-20: var(--ac-color-value);
-
-// Colors
-$ac-black: var(--ac-black);
-$primary-10-90: var(--ac-color-text-90);
-$ac-link-black: var(--ac-link-black);
-$black-40: var(--ac-gray-darker);
-$black-30: var(--ac-gray-dark);
-$ac-gray: var(--ac-gray);
-$ac-gray-light: var(--ac-gray-light);
-$ac-gray-lighter: var(--ac-gray-lighter);
-$ac-gray-lightest: var(--ac-gray-lightest);
-$white-100-light: var(--ac-white-light);
-$white-100-lighter: var(--ac-white-lighter);
-$white-100-lightest: var(--ac-white-lightest);
-$white-100: var(--ac-white);
-$ac-full-white: var(--ac-full-white);
-
-// $info-light: var(--ac-blue-light);
-$ac-bg-light-gray: var(--ac-bg-light-gray);
-$table-header: var(--table-header);
-$ac-label-text: var(--ac-label-text);
-
-// for dark theme CSS
-$dark-bg: var(--dark-bg);
-$dark-bg-light: var(--dark-bg-light);
-
-/* Deafult Margin & Padding view-height & view-width */
-@for $i from 0 through 100 {
-  .m-#{$i} {
-    margin: #{$i}px !important;
-  }
-
-  .mt-#{$i} {
-    margin-top: #{$i}px !important;
-  }
-
-  .mb-#{$i} {
-    margin-bottom: #{$i}px !important;
-  }
-
-  .ml-#{$i} {
-    margin-left: #{$i}px !important;
-  }
-
-  .mr-#{$i} {
-    margin-right: #{$i}px !important;
-  }
-
-  .p-#{$i} {
-    padding: #{$i}px !important;
-  }
-
-  .pt-#{$i} {
-    padding-top: #{$i}px !important;
-  }
-
-  .pb-#{$i} {
-    padding-bottom: #{$i}px !important;
-  }
-
-  .pl-#{$i} {
-    padding-left: #{$i}px !important;
-  }
-
-  .pr-#{$i} {
-    padding-right: #{$i}px !important;
-  }
-
-  .vh-#{$i} {
-    height: #{$i}vh !important;
-  }
-
-  .vw-#{$i} {
-    width: #{$i}vw !important;
-  }
-
-  .font-size-#{$i} {
-    font-size: #{$i}px !important;
-  }
-}
-
-.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} {
-    height: #{$i}px !important;
-  }
-
-  .width-#{$i} {
-    width: #{$i}px !important;
-  }
-}
-
-.width-auto {
-  width: auto !important;
-}
-
-.height-auto {
-  height: auto !important;
-}
-
-/* Deafult z-index and font-weight*/
-@for $i from 0 through 10 {
-  .z-index-#{$i} {
-    z-index: #{$i} !important;
-  }
-
-  .font-weight-#{$i*100} {
-    font-weight: #{$i * 100} !important;
-  }
-}

package/components/_basic-card.scss

@@ -1,118 +0,0 @@
-// .card-details {
-//   border: 1px solid #d2e7f9;
-//   padding: 30px 20px;
-//   width: calc(33.3% - 8px);
-//   min-width: 400px;
-//   max-width: 525px;
-//   // border-radius: 4px;
-//   transition: 0.3s ease-in-out;
-//   position: relative;
-//   z-index: 1;
-
-//   .c-header {
-//     display: flex;
-//     margin-bottom: 20px;
-
-//     .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;
-//       }
-//     }
-//   }
-// }
-
-// // ac card
-// .card-basic {
-//   padding: 20px;
-//   width: calc(25% - 8px);
-//   max-width: 390px;
-//   min-width: 290px;
-//   position: relative;
-
-//   .required {
-//     position: absolute;
-//     left: 20px;
-//     top: -9px;
-//   }
-//   .c-header {
-//     .c-title {
-
-//       h4 {
-//         font-size: 18px;
-//         color: #061b2d;
-//       }
-//     }
-//   }
-
-//   .c-body {
-//     p {
-//       color: #0C365A;
-//     }
-//   }
-// }