@appscode/design-system 1.1.0-alpha.22 → 1.1.0-alpha.24

package/components/_ac-card.scss

@@ -98,7 +98,7 @@
       p {
         font-size: $font-size-small;
         color: $ac-color-text;
-        line-height: 1;
+        line-height: 1.5;
 
         &.free {
           color: $ac-primary;

package/components/_wizard.scss

@@ -121,7 +121,7 @@
   transition: 0.3s ease-in-out;
   position: relative;
   z-index: 1;
-  width: 250px;
+  width: 230px;
 
   &.is-active-require-field {
     &:after {

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

@@ -17,7 +17,7 @@
     margin-bottom: 10px;
   }
 
-  p :not(.ac-notification *){
+  p :not(.ac-notification *) {
     font-size: 13px;
     margin-bottom: 10px;
     color: $ac-color-value;
@@ -209,6 +209,7 @@
 .details-with-checkradio-wrapper {
   display: flex;
   gap: 15px;
+  flex-wrap: wrap;
 }
 
 // dark theme start
@@ -243,6 +244,11 @@
   top: 7px;
 }
 
+.card-select .status-tag {
+  position: absolute;
+  top: -10px;
+}
+
 // dark theme end
 /****************************************
 Responsive Classes

package/package.json

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

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

@@ -6,4 +6,4 @@
       <slot />
     </div>
   </div>
-</template>
+</template>

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

@@ -16,6 +16,15 @@
       <i v-else :class="`fa fa-${iconClass}`" aria-hidden="true" />
     </span>
     <span v-if="title" :class="titleModifierClass">{{ title }}</span>
+    <span v-if="rightIconClass || rightIconImage" class="icon is-small">
+      <img
+        v-if="rightIconImage"
+        :src="rightIconImage"
+        alt="icon"
+        :width="iconImageWidth"
+      />
+      <i v-else :class="`fa fa-${rightIconClass}`" aria-hidden="true" />
+    </span>
     <slot />
   </button>
 </template>
@@ -52,6 +61,15 @@ export default defineComponent({
       type: String,
       default: "",
     },
+    // for right icon
+    rightIconClass: {
+      type: String,
+      default: "",
+    },
+    rightIconImage: {
+      type: String,
+      default: "",
+    },
     iconImageWidth: {
       type: Number,
       default: undefined,

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

@@ -1,27 +1,45 @@
 <script setup lang="ts">
-  const { hasOptionButtons } = withDefaults(
-    defineProps<{ hasOptionButtons: boolean }>(),
-    { hasOptionButtons: false }
+  const { hasOptionButtons, disabled } = withDefaults(
+    defineProps<{ hasOptionButtons: boolean, disabled: boolean }>(),
+    { hasOptionButtons: false, disabled: false }
   )
 </script>
 <template>
-  <div class="card-details">
-    <div class="c-header">
-      <div class="c-logo">
-        <slot name="card-logo" />
-      </div>
-      <div class="c-content">
-        <div class="is-flex is-justify-content-space-between">
-          <h4><slot name="card-title" /></h4>
-          <slot v-if="hasOptionButtons" name="option-buttons" />
+  <div class="card-details-wrapper">
+    <div class="options-wrapper">
+      <slot v-if="hasOptionButtons" name="option-buttons" />
+    </div>
+    <div class="card-details has-hover-style" :class="{'is-disabled': disabled }">
+      <div class="c-header">
+        <div class="c-logo">
+          <slot name="card-logo" />
         </div>
-        <div class="tags">
-          <slot name="card-tags" />
+        <div class="c-content">
+          <div class="is-flex is-justify-content-space-between">
+            <h4><slot name="card-title" /></h4>
+            
+          </div>
+          <div class="tags">
+            <slot name="card-tags" />
+          </div>
         </div>
       </div>
-    </div>
-    <div class="c-body">
-      <slot name="card-body" />
+      <div class="c-body">
+        <slot name="card-body" />
+      </div>
     </div>
   </div>
 </template>
+
+<style lang="scss">
+.card-details-wrapper {
+  position: relative;
+  .options-wrapper{
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    z-index: 9;
+  }
+}
+
+</style>

package/vue-components/v3/form/Form.vue

@@ -2,11 +2,12 @@
   <div class="form-wrapper">
     <div
       :class="{
-        'pt-20': !reducePaddingTop,
-        'pt-10': reducePaddingTop,
-        'pl-20': !isContainer,
+        'pt-20': !reducePaddingTop && !removePadding,
+        'pt-10': reducePaddingTop && !removePadding,
+        'pl-20': !isContainer && !removePadding,
         'form-content': !isContainer,
         container: isContainer,
+        'is-fullwidth': isFullWidth,
       }"
     >
       <slot />
@@ -20,6 +21,7 @@
         :class="{
           'form-content': !isContainer,
           container: isContainer,
+          'is-fullwidth': isFullWidth,
         }"
       >
         <form-footer-controls>
@@ -50,6 +52,14 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    removePadding: {
+      type: Boolean,
+      default: false,
+    },
+    isFullWidth: {
+      type: Boolean,
+      default: false,
+    }
   },
 
   components: {
@@ -61,3 +71,9 @@ export default defineComponent({
   },
 });
 </script>
+
+<style lang="scss">
+.is-fullwidth {
+  width: 100% !important;
+}
+</style>