@appscode/design-system 2.5.0 → 2.5.2

package/package.json

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

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

@@ -53,7 +53,7 @@
   .accordion-body {
     padding-top: 8px;
     max-height: 0;
-    overflow: hidden;
+    // overflow: hidden;
     // transition: max-height 0.3s ease-in-out;
 
     p {

package/vue-components/styles/components/form-fields/_input-card.scss

@@ -1,7 +1,7 @@
 // card select
 .card-select {
-  height: 94px;
-  padding: 10px;
+  min-height: 98px;
+  padding: 16px;
   background-color: $white-100;
   border: 1px solid $color-border;
   box-sizing: border-box;
@@ -9,7 +9,9 @@
   transition: 0.3s ease-in-out;
   position: relative;
   z-index: 1;
-  // width: 250px;
+  min-width: 200px;
+  max-width: 250px;
+  margin-bottom: 0 !important;
 
   &.is-active-require-field {
     &:after {
@@ -199,10 +201,6 @@
   .ac-single-checkbox {
     margin-bottom: 10px;
 
-    &:last-child {
-      margin-bottom: 0;
-    }
-
     label {
       font-family: $font-heading;
       font-style: normal;

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

@@ -26,7 +26,11 @@ defineEmits(["onClick"]);
       </div>
     </div>
 
-    <div v-if="bodyInside" class="accordion-body" :style="{ 'max-height': isActive ? '100%' : 0 }">
+    <div
+      v-if="bodyInside"
+      class="accordion-body"
+      :style="{ 'max-height': isActive ? '100%' : 0, display: isActive ? '' : 'none' }"
+    >
       <slot name="body" />
     </div>
   </div>

package/vue-components/v3/form-fields/CheckRadio.vue

@@ -30,9 +30,10 @@ const handleClick = (optionValue: unknown) => {
 const model = defineModel();
 
 const bodyClass = computed(() => {
-  if (props.hasDescription) return "gap-16 details-with-checkradio-wrapper";
+  if (props.hasDescription && props.isRow) return "is-flex is-flex-wrap-wrap gap-16";
+  else if (props.hasDescription) return "is-flex is-flex-direction-column gap-16";
   else if (!props.isRow) return "is-flex is-flex-wrap-wrap is-flex-direction-column";
-  else return "gap-24";
+  else return "is-flex is-flex-wrap-wrap gap-24";
 });
 </script>