@appscode/design-system 2.2.55 → 2.2.57

package/package.json

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

package/vue-components/styles/components/select-box/_multi-select.scss

@@ -109,7 +109,7 @@
         }
 
         &.multiselect__option--highlight {
-          background-color: $white-100;
+          background-color: transparent;
           color: $ac-secondary;
 
           &:hover {
@@ -169,7 +169,7 @@
 
 .multiselect__tags > span {
   font-size: 13px;
-  line-height: 1.6;
+  line-height: 1;
   color: $color-heading;
 }
 
@@ -295,6 +295,9 @@
 
     .multiselect__select {
       height: 100%;
+      &::before {
+        top: 73%;
+      }
     }
 
     .multiselect__tags {
@@ -322,6 +325,7 @@
 
       .multiselect__single {
         font-size: 12px;
+        top: 1px !important;
       }
 
       .multiselect__placeholder {
@@ -464,7 +468,7 @@ li {
   .multiselect .multiselect__tags {
     .multiselect__input,
     .multiselect__single {
-      top: 0px !important;
+      top: 2px !important;
     }
   }
 
@@ -522,7 +526,7 @@ li {
       -webkit-line-clamp: 1;
       box-orient: vertical;
       -webkit-box-orient: vertical;
-      top: 3.5px;
+      top: 4.5px;
     }
   }
 
@@ -572,11 +576,12 @@ li {
       right: 0px;
     }
     .multiselect__tags {
-      padding: 3px 60px 4px 20px !important;
+      padding: 3px 100px 4px 15px !important;
     }
     .button {
       &.is-clear {
         right: 30px;
+        height: 100%;
       }
     }
   }
@@ -612,33 +617,66 @@ li {
 }
 
 // Customize option group select
+.multiselect__content {
+  .multiselect__element {
+    &:first-child {
+      .multiselect__option--group {
+        &.multiselect__option--disabled {
+          border-top: none !important;
+          margin-top: 0 !important;
+          padding-top: 0 !important;
+        }
+      }
+    }
+  }
+}
+
 .option-group {
   .multiselect__option--disabled {
     background: transparent !important;
     color: $color-heading !important;
     font-weight: 700 !important;
     font-size: 12px !important;
-    border-bottom: 1px solid $color-border-light;
+    border-top: 1px solid $color-border-light;
+    min-height: 24px;
+    padding-top: 16px !important;
+    margin-top: 4px !important;
   }
 
   .multiselect__option:not(.multiselect__option--disabled) {
     padding-left: 32px !important;
+    &:hover {
+      background-color: #f1f1f1 !important;
+    }
+
+    &.multiselect__option--selected {
+      padding-left: 32px !important;
+    }
   }
 
   .multiselect__option--selected {
     font-weight: 500 !important;
+    color: $ac-primary !important;
+    background-color: $primary-light-gray !important;
+    &:hover {
+      background-color: $primary-light-gray !important;
+      color: $ac-primary !important;
+    }
 
     &:before {
       position: absolute;
-      content: "";
-      left: 20px;
+      left: 16px;
       top: 50%;
-      margin-top: -3px;
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      display: flex;
-      background-color: $color-text;
+      margin-top: -8px;
+      content: "\f00c";
+      font-family: "Fontawesome";
+      display: inline-block;
+      vertical-align: top;
+      line-height: 1;
+      width: 16px;
+      height: 16px;
+      margin-right: 0.3em;
+      color: $ac-primary;
     }
   }
 }

package/vue-components/styles/components/ui-builder/_vue-open-api.scss

@@ -576,6 +576,6 @@
 
 .is-refresh {
   i.fa {
-    color: $color-heading;
+    color: $secondary-30;
   }
 }

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

@@ -109,7 +109,18 @@ const onSelect = (selectedOption: unknown, id: string) => emit("select", selecte
       <span v-if="showStar" class="is-required has-text-danger"> * </span>
     </label>
     <button v-if="allowEmpty && model" class="button ac-button is-clear is-transparent" @click.prevent="model = ''">
-      <i class="fa fa-times" />
+      <span class="icon width-16">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="size-6"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+        </svg>
+      </span>
     </button>
     <button
       v-if="hasRefreshBtn"