@appscode/design-system 2.4.4 → 2.4.6

package/main.scss

@@ -4,9 +4,6 @@
 
 // Third party CSS
 @import "../node_modules/bulma/bulma.sass";
-@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.4",
+  "version": "2.4.6",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/styles/base/utilities/_animation.scss

@@ -1,3 +1,4 @@
+// for spin
 .is-spin {
   animation: spin 1000ms linear infinite;
 }
@@ -9,3 +10,19 @@
     transform: rotate(360deg);
   }
 }
+
+// for shake
+.shake {
+  animation: shake 150ms 4 linear;
+}
+@keyframes shake {
+  0% {
+    transform: translate(3px, 0);
+  }
+  50% {
+    transform: translate(-3px, 0);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}

package/vue-components/styles/base/utilities/_global.scss

@@ -418,93 +418,6 @@ button {
   animation-iteration-count: 20;
 }
 
-// Customize tooltip start
-$background_color_1: #585d6e;
-$border_color_1: #585d6e transparent transparent transparent;
-$border_color_2: transparent #585d6e transparent transparent;
-$border_color_3: transparent transparent transparent #585d6e;
-$border_color_4: transparent transparent #585d6e transparent;
-
-[data-tooltip] {
-  &:not(.is-loading) {
-    &::after {
-      border-color: $border_color_1;
-    }
-
-    &::before {
-      background-color: $background_color_1;
-      font-size: 12px;
-      font-weight: 500;
-    }
-  }
-
-  &:not(.is-disabled) {
-    &::after {
-      border-color: $border_color_1;
-    }
-  }
-
-  &:not([disabled]) {
-    &::after {
-      border-color: $border_color_1;
-    }
-  }
-
-  &:not(.is-loading).has-tooltip-right {
-    &::after {
-      border-color: $border_color_2;
-    }
-  }
-
-  &:not(.is-disabled).has-tooltip-right {
-    &::after {
-      border-color: $border_color_2;
-    }
-  }
-
-  &:not([disabled]).has-tooltip-right {
-    &::after {
-      border-color: $border_color_2;
-    }
-  }
-
-  &:not(.is-loading).has-tooltip-left {
-    &::after {
-      border-color: $border_color_3;
-    }
-  }
-
-  &:not(.is-disabled).has-tooltip-left {
-    &::after {
-      border-color: $border_color_3;
-    }
-  }
-
-  &:not([disabled]).has-tooltip-left {
-    &::after {
-      border-color: $border_color_3;
-    }
-  }
-
-  &:not(.is-loading).has-tooltip-bottom {
-    &::after {
-      border-color: $border_color_4;
-    }
-  }
-
-  &:not(.is-disabled).has-tooltip-bottom {
-    &::after {
-      border-color: $border_color_4;
-    }
-  }
-
-  &:not([disabled]).has-tooltip-bottom {
-    &::after {
-      border-color: $border_color_4;
-    }
-  }
-}
-
 // tooltip in vue-open-api
 .tooltip {
   display: block !important;

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

@@ -1,3 +1,4 @@
+// Old Third party dependency modification | Remove it, when 2024 AppsCode Custom Checkbox, Radio, Switch used everywhere
 .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,
@@ -98,6 +99,11 @@
       transition: all 0.2s ease;
     }
   }
+  &:hover {
+    .checkmark {
+      border: 1px solid $ac-primary;
+    }
+  }
 }
 
 // radio button
@@ -131,6 +137,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 +163,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 +225,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 +233,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/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/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>