@appscode/design-system 2.0.62 → 2.0.64

package/package.json

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

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

@@ -0,0 +1,37 @@
+.avatar {
+  position: relative;
+  z-index: 1;
+
+  .dots {
+    position: absolute;
+    right: calc(5% - 6px);
+    top: calc(30% - 6px);
+    width: 12px;
+    height: 12px;
+    background-color: $info;
+    border-radius: 50%;
+    border: 2px solid $white-100;
+    box-shadow: 2px 2px 2px rgba(5, 5, 5, 0.16);
+    z-index: 2;
+    &.is-not-active {
+      background-color: $gray-60;
+    }
+  }
+  .is-initial {
+    position: relative;
+    z-index: 1;
+    background-color: $gray-90;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: 500;
+    color: $color-heading;
+    border: 1px solid $color-border;
+    &.is-rounded {
+      border-radius: 50%;
+    }
+  }
+}

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

@@ -15,13 +15,13 @@
 
     /* Handle */
     &::-webkit-scrollbar-thumb {
-      background-color: $gray-60;
+      background-color: $gray-70;
       border-radius: 10px;
     }
 
     /* Handle on hover */
     &::-webkit-scrollbar-thumb:hover {
-      background-color: $secondary-95;
+      background-color: $gray-60;
     }
   }
 }

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

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

package/vue-components/v3/avatar/Avatar.vue

@@ -21,49 +21,12 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <figure class="image" :class="`is-${size}`">
+  <figure class="avatar image" :class="`is-${size}`">
     <span v-if="dots" class="dots" :class="dotBgColor"></span>
     <div v-if="isInitial" class="is-initial" :class="[rounded ? 'is-rounded' : '', roundedClass]">jd</div>
     <img v-else :class="[rounded ? 'is-rounded' : '', roundedClass]" :src="imgUrl" alt="avatar-image" />
   </figure>
 </template>
-
 <style lang="scss">
-figure {
-  position: relative;
-  z-index: 1;
-
-  .dots {
-    position: absolute;
-    right: calc(5% - 6px);
-    top: calc(30% - 6px);
-    width: 12px;
-    height: 12px;
-    background-color: $info;
-    border-radius: 50%;
-    border: 2px solid $white-100;
-    box-shadow: 2px 2px 2px rgba(5, 5, 5, 0.16);
-    z-index: 2;
-    &.is-not-active {
-      background-color: $gray-60;
-    }
-  }
-  .is-initial {
-    position: relative;
-    z-index: 1;
-    background-color: $gray-90;
-    height: 100%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 16px;
-    font-weight: 500;
-    color: $color-heading;
-    border: 1px solid $color-border;
-    &.is-rounded {
-      border-radius: 50%;
-    }
-  }
-}
+@import "../../../vue-components/styles/components/_avatar.scss";
 </style>

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

@@ -10,7 +10,7 @@ interface Props {
 withDefaults(defineProps<Props>(), {
   modifierClasses: "",
   name: "checkbox",
-  label: "Checkbox",
+  label: "Check Radio",
   type: "checkbox",
   check: false,
 });
@@ -31,10 +31,5 @@ withDefaults(defineProps<Props>(), {
 </template>
 
 <style lang="scss">
-.is-checkradio[type="checkbox"].is-primary:checked.has-background-color + label::before,
-.is-checkradio[type="checkbox"].is-primary:checked.has-background-color + label:before,
-.is-checkradio[type="checkbox"].is-primary:checked.has-background-color + label::after,
-.is-checkradio[type="checkbox"].is-primary:checked.has-background-color + label:after {
-  background-color: $ac-primary !important;
-}
+@import "../../../vue-components/styles/components/form-fields/_check-radio-switch.scss";
 </style>

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+interface Props {
+  modifierClasses?: string;
+  name: string;
+  label?: string;
+  type?: string;
+  check?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+  name: "switch",
+  label: "Switch Label",
+  type: "checkbox",
+  check: false,
+});
+</script>
+
+<template>
+  <div class="field">
+    <input
+      :id="name"
+      type="checkbox"
+      :name="name"
+      class="switch is-rounded"
+      :class="modifierClasses"
+      :checked="check"
+    />
+    <label :for="name">{{ label }}</label>
+  </div>
+</template>