@appscode/design-system 2.4.2 → 2.4.4-alpha

package/main.scss

@@ -4,8 +4,8 @@
 
 // Third party CSS
 @import "../node_modules/bulma/bulma.sass";
-@import "bulma-checkradio";
-@import "bulma-switch";
+// @import "bulma-checkradio";
+// @import "bulma-switch";
 @import "bulma-tooltip";
 @import "font-awesome/css/font-awesome.min.css";
 @import "vue-multiselect/dist/vue-multiselect.css";

package/package.json

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

package/vue-components/styles/components/form-fields/_check-radio-switch.scss

@@ -1,47 +1,47 @@
-.is-checkradio.is-primary[type="checkbox"].is-primary:checked.has-background-color + label::before,
-.is-checkradio.is-primary[type="checkbox"].is-primary:checked.has-background-color + label:before,
-.is-checkradio.is-primary[type="checkbox"].is-primary:checked.has-background-color + label::after,
-.is-checkradio.is-primary[type="checkbox"].is-primary:checked.has-background-color + label:after {
-  background-color: $ac-primary !important;
-}
-
-.is-checkradio[type="checkbox"] + label::after,
-.is-checkradio[type="checkbox"] + label:after {
-  border-color: $ac-primary;
-}
-
-.is-checkradio[type="checkbox"]:checked + label::before,
-.is-checkradio[type="checkbox"]:checked + label:before {
-  border: 1px solid $ac-primary;
-}
-
-.is-checkradio.is-primary[type="radio"] + label::after,
-.is-checkradio.is-primary[type="radio"] + label:after {
-  background: $ac-primary !important;
-}
-
-.is-checkradio.is-primary[type="checkbox"]:checked + label::before,
-.is-checkradio.is-primary[type="checkbox"]:checked + label:before,
-.is-checkradio.is-primary[type="radio"]:checked + label::before,
-.is-checkradio.is-primary[type="radio"]:checked + label:before {
-  border-color: $ac-primary;
-}
-
-.is-checkradio[type="radio"].is-primary:checked + label::after,
-.is-checkradio[type="radio"].is-primary:checked + label:after {
-  background-color: $ac-primary !important;
-  border-color: $ac-primary;
-}
-
-.switch[type="checkbox"].is-primary:checked + label::before,
-.switch[type="checkbox"].is-primary:checked + label:before {
-  background-color: $ac-primary;
-}
-
-.is-checkradio[type="radio"] + label::after,
-.is-checkradio[type="radio"] + label:after {
-  background-color: $ac-primary;
-}
+// .is-checkradio.is-primary[type="checkbox"].is-primary:checked.has-background-color + label::before,
+// .is-checkradio.is-primary[type="checkbox"].is-primary:checked.has-background-color + label:before,
+// .is-checkradio.is-primary[type="checkbox"].is-primary:checked.has-background-color + label::after,
+// .is-checkradio.is-primary[type="checkbox"].is-primary:checked.has-background-color + label:after {
+//   background-color: $ac-primary !important;
+// }
+
+// .is-checkradio[type="checkbox"] + label::after,
+// .is-checkradio[type="checkbox"] + label:after {
+//   border-color: $ac-primary;
+// }
+
+// .is-checkradio[type="checkbox"]:checked + label::before,
+// .is-checkradio[type="checkbox"]:checked + label:before {
+//   border: 1px solid $ac-primary;
+// }
+
+// .is-checkradio.is-primary[type="radio"] + label::after,
+// .is-checkradio.is-primary[type="radio"] + label:after {
+//   background: $ac-primary !important;
+// }
+
+// .is-checkradio.is-primary[type="checkbox"]:checked + label::before,
+// .is-checkradio.is-primary[type="checkbox"]:checked + label:before,
+// .is-checkradio.is-primary[type="radio"]:checked + label::before,
+// .is-checkradio.is-primary[type="radio"]:checked + label:before {
+//   border-color: $ac-primary;
+// }
+
+// .is-checkradio[type="radio"].is-primary:checked + label::after,
+// .is-checkradio[type="radio"].is-primary:checked + label:after {
+//   background-color: $ac-primary !important;
+//   border-color: $ac-primary;
+// }
+
+// .switch[type="checkbox"].is-primary:checked + label::before,
+// .switch[type="checkbox"].is-primary:checked + label:before {
+//   background-color: $ac-primary;
+// }
+
+// .is-checkradio[type="radio"] + label::after,
+// .is-checkradio[type="radio"] + label:after {
+//   background-color: $ac-primary;
+// }
 
 // 2024 AppsCode Custom Checkbox, Radio, Switch style
 // checkbox
@@ -98,6 +98,11 @@
       transition: all 0.2s ease;
     }
   }
+  &:hover {
+    .checkmark {
+      border: 1px solid $ac-primary;
+    }
+  }
 }
 
 // radio button
@@ -131,6 +136,7 @@
       border: 1px solid $color-border-dark;
       border-radius: 50%; // Full circle
       background: #fff;
+      transition: 0.2s ease-in-out;
     }
 
     // Inner dot for selected radio button
@@ -156,6 +162,16 @@
     opacity: 1;
     transform: scale(1);
   }
+  [type="radio"]:checked + label::before {
+    border: 1px solid $ac-primary;
+  }
+  &:hover {
+    [type="radio"] + label {
+      &::before {
+        border: 1px solid $ac-primary;
+      }
+    }
+  }
 }
 
 .ac-switch {
@@ -208,7 +224,7 @@
     }
 
     input:checked + .slider {
-      background-color: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-light));
+      background-color: $ac-primary;
     }
 
     input:checked + .slider:before {
@@ -216,7 +232,7 @@
     }
 
     input:focus-visible + .slider {
-      box-shadow: 0 0 3px hsl(var(--primary-hue), var(--primary-saturation), var(--primary-light));
+      box-shadow: 0 0 3px $ac-primary;
     }
   }
 }

package/vue-components/styles/components/form-fields/_custom-selectbox.scss

@@ -6,32 +6,7 @@
     padding-right: 32px;
   }
 
-  .custom-select-placeholder {
-    border: 1px solid $color-border-dark;
-    padding: 8px 15px;
-    border-radius: 4px;
-    line-height: 1;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    height: 36px;
-
-    &:hover {
-      border: 1px solid $ac-primary;
-    }
-  }
-
   &.is-extra-small {
-    height: 32px;
-
-    .custom-select-placeholder {
-      height: 32px;
-    }
-
-    .ac-field {
-      top: 5px;
-    }
-
     .buttons {
       .button {
         height: 28px;
@@ -59,7 +34,6 @@
     right: 2px;
     top: 2px;
     margin: 0;
-    z-index: 9;
 
     .button {
       margin: 0 !important;
@@ -80,7 +54,7 @@
     width: 100%;
     max-height: 500px;
     overflow-y: auto;
-    transition: 0.2s ease-in-out;
+    transition: 0.3s ease-in-out;
     opacity: 0;
     visibility: hidden;
 

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

@@ -284,7 +284,7 @@
     color: $color-heading;
     position: absolute;
     z-index: 2;
-    transition: 0.1s ease-in-out;
+    transition: 0.3s ease-in-out;
 
     .is-required {
       color: $danger;

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

@@ -19,18 +19,14 @@ const model = defineModel({ type: Array });
 </script>
 
 <template>
-  <div v-for="option in options" :key="name + option.label" class="field">
-    <input
-      class="is-checkradio has-background-color"
-      :class="modifierClasses"
-      :id="name + option.label"
-      :value="option.value"
-      type="checkbox"
-      v-model="model"
-    />
-    <label :for="name + option.label">{{ option.label }}</label>
+  <div v-for="option in options" :key="name + option.label" class="mb-8">
+    <label class="ac-checkbox" :for="name + option.label">
+      <input :class="modifierClasses" :id="name + option.label" :value="option.value" type="checkbox" v-model="model" />
+      <span class="checkmark"></span>
+      <span>{{ option.label }}</span>
+    </label>
   </div>
-  <p v-show="errorMsg" class="is-danger">
+  <p v-show="errorMsg" class="is-danger mb-16">
     {{ errorMsg }}
   </p>
 </template>

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

@@ -18,10 +18,9 @@ const model = defineModel();
 </script>
 
 <template>
-  <div v-for="option in options" :key="name + option.label" class="field">
+  <div class="ac-radio" v-for="option in options" :key="name + option.label">
     <input
       v-model="model"
-      class="is-checkradio"
       :class="modifierClasses"
       :id="name + option.label"
       type="radio"
@@ -34,7 +33,7 @@ const model = defineModel();
       <slot name="message" />
     </p>
   </div>
-  <p v-show="errorMsg" class="is-danger">
+  <p v-show="errorMsg" class="is-danger mb-16">
     {{ errorMsg }}
   </p>
 </template>

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

@@ -27,13 +27,7 @@ const CloseIcon = defineAsyncComponent(() => import("../icons/CloseIcon.vue"));
   <div class="ac-single-input is-small is-selectbox" :class="[isOpen ? 'is-open' : '']" style="z-index: 2">
     <!-- add 'show-label' class for move top -->
     <label for="custom-select" class="ac-label show-label">Select Option</label>
-
-    <!-- <input type="text" value="Select" /> -->
-    <p class="custom-select-placeholder">
-      <span class="is-ellipsis-1">
-        Select Value Select ValueSelect ValueSelect ValueSelect ValueSelect ValueSelect Value
-      </span>
-    </p>
+    <input type="text" value="Select" />
 
     <div v-if="multiselect" class="ac-field field is-grouped is-clipped">
       <div class="control">

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

@@ -18,17 +18,21 @@ const model = defineModel({ type: Boolean });
 </script>
 
 <template>
-  <div class="field">
-    <input
-      v-model="model"
-      :id="name"
-      type="checkbox"
-      :name="name"
-      class="switch is-rounded is-primary"
-      :class="modifierClasses"
-      :data-testid="dataTestId"
-    />
+  <div class="ac-switch is-flex is-align-items-center gap-8">
     <label :for="name">{{ label }}</label>
+    <label class="switch">
+      <input
+        v-model="model"
+        :id="name"
+        type="checkbox"
+        :name="name"
+        class="switch is-rounded is-primary"
+        :class="modifierClasses"
+        :data-testid="dataTestId"
+      />
+      <span class="slider round"></span>
+    </label>
+
     <p v-show="errorMsg" class="is-danger">
       {{ errorMsg }}
     </p>