@appscode/design-system 1.1.0-alpha.1 → 1.1.0-alpha.11

package/base/utilities/_all.scss

@@ -1,6 +1,7 @@
 @import "initial-variables";
 @import "derived-variables";
 @import "mixin";
+@import "extended";
 @import "typography";
 @import "default";
 @import "grid";

package/base/utilities/_extended.scss

@@ -0,0 +1,38 @@
+.has-hover-style{
+  cursor: pointer;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-top: solid 1px;
+    border-bottom: solid 1px;
+    transition: 0.3s;
+    transform: scaleX(0);
+    border-color: #1971bd;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-left: solid 1px;
+    border-right: solid 1px;
+    transition: 0.3s;
+    transform: scaleY(0);
+    border-color: #1971bd;
+  }
+
+  &:hover {
+    &::before,
+    &::after {
+      transform: scale(1);
+    }
+  }
+}

package/base/utilities/_initial-variables.scss

@@ -47,7 +47,7 @@ $swift-primary: #3f51b6;
   --ac-gray-dark: #5f5f5f;
   --ac-gray-light: #8d8d8d;
   --ac-gray-lightest: #d1d1d1;
-  --ac-white-light: #e7e7e7;
+  --ac-white-light: #d2e7f9;
   --ac-white-lighter: #f2f5f8;
   --ac-white-lightest: #f8f9fb;
 

package/components/_all.scss

@@ -3,6 +3,7 @@
 @import "buttons";
 @import "breadcumb";
 @import "ac-card";
+@import "basic-card";
 @import "ac-multi-select";
 @import "ac-code-highlight";
 @import "navbar";

package/components/_basic-card.scss

@@ -0,0 +1,118 @@
+.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;
+    }
+  }
+}

package/components/_transitions.scss

@@ -151,6 +151,41 @@
   position: absolute;
 }
 
+.zoom-list-move, /* apply transition to moving elements */
+.zoom-list-enter-active,
+.zoom-list-leave-active {
+  transition: all 0.5s ease;
+}
+
+.zoom-list-enter-from,
+.zoom-list-leave-to {
+  opacity: 0;
+  transform: scale(0.5);
+}
+
+.zoom-list-leave-active {
+  position: absolute;
+}
+
+.slide-left-list-move,
+.slide-left-list-enter-active,
+.slide-left-list-leave-active {
+  transition: all 0.3s ease-in-out;
+}
+.slide-left-list-enter-from,
+.slide-left-list-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}
+.slide-left-list-enter-to,
+.slide-left-list-leave-from {
+  transform: translateX(0px);
+  opacity: 1;
+}
+.slide-left-list-leave-active {
+  position: absolute;
+}
+
 .overview-card-enter-active {
   transition: all 0.2s ease-in-out;
 }

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

@@ -17,7 +17,7 @@
     margin-bottom: 10px;
   }
 
-  p {
+  p :not(.ac-notification *){
     font-size: 13px;
     margin-bottom: 10px;
     color: $ac-color-value;
@@ -237,6 +237,12 @@
   }
 }
 
+.pass-strength {
+  position: absolute;
+  right: 30px;
+  top: 7px;
+}
+
 // dark theme end
 /****************************************
 Responsive Classes

package/package.json

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

package/vue-components/v2/content/ContentTable.vue

@@ -5,6 +5,7 @@
         v-if="!hideHeader"
         :header-title="tableTitle"
         :header-sub-title="tableSubTitle"
+        :remove-border-bottom="removeBorderBottom"
         :class="{ 'pl-0 pr-0': removeTableHeaderPadding }"
       >
         <header-item>
@@ -22,36 +23,40 @@ export default {
   props: {
     removeTableHeaderPadding: {
       type: Boolean,
-      default: false
+      default: false,
     },
     tableTitle: {
       type: String,
-      default: "Table"
+      default: "Table",
     },
     tableSubTitle: {
       type: String,
-      default: ""
+      default: "",
     },
     searchable: {
       type: Boolean,
-      default: true
+      default: true,
     },
     hideHeader: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
+    removeBorderBottom: {
+      type: Boolean,
+      default: false,
+    },
   },
   components: {
     ContentLayout: () => import("./ContentLayout.vue"),
     ContentHeader: () => import("./ContentHeader.vue"),
     HeaderItem: () => import("../header/HeaderItem.vue"),
-    SearchBar: () => import("../searchbars/SearchBar.vue")
+    SearchBar: () => import("../searchbars/SearchBar.vue"),
   },
 
   data() {
     return {
-      searchText: ""
+      searchText: "",
     };
-  }
+  },
 };
 </script>

package/vue-components/v2/modal/Modal.vue

@@ -32,6 +32,7 @@
         <!-- modal body start  -->
         <div
           class="ac-modal-body ac-vscrollbar"
+          :class="modifierBodyClasses"
           data-testid="ac-modal-content-with-scroll"
         >
           <div class="ac-modal-content">
@@ -45,11 +46,7 @@
         <!-- modal footer start -->
         <div
           v-if="!hideActionFooter"
-          class="
-            ac-modal-footer
-            action-footer
-            is-flex is-align-items-center is-justify-content-space-between
-          "
+          class="ac-modal-footer action-footer is-flex is-align-items-center is-justify-content-space-between"
         >
           <div>
             <slot name="modal-footer-left" />
@@ -91,6 +88,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    modifierBodyClasses: {
+      type: String,
+      default: "",
+    },
   },
 
   components: {

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

@@ -5,6 +5,7 @@
         v-if="!hideHeader"
         :header-title="tableTitle"
         :header-sub-title="tableSubTitle"
+        :remove-border-bottom="removeBorderBottom"
         :class="{ 'pl-0 pr-0': removeTableHeaderPadding }"
       >
         <template #title-right-actions>
@@ -50,6 +51,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    removeBorderBottom: {
+      type: Boolean,
+      default: false,
+    },
   },
   components: {
     ContentLayout: defineAsyncComponent(() =>

package/vue-components/v3/modal/Modal.vue

@@ -30,6 +30,7 @@
         <!-- modal body start  -->
         <div
           class="ac-modal-body ac-vscrollbar"
+          :class="modifierBodyClasses"
           data-testid="ac-modal-content-with-scroll"
         >
           <div class="ac-modal-content">
@@ -92,6 +93,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    modifierBodyClasses: {
+      type: String,
+      default: "",
+    },
   },
   emits: ["closemodal"],
 

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

@@ -97,7 +97,9 @@
           <table-row class="is-hoverless">
             <table-cell
               :colspan="
-                actionable ? tableHeaders.length + 1 : tableHeaders.length
+                tableHeaders.length +
+                (actionable ? 1 : 0) +
+                (collapsible ? 1 : 0)
               "
               class="no-data-available has-text-centered"
             >