@appscode/design-system 2.2.18 → 2.2.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.2.18",
+  "version": "2.2.20",
   "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

@@ -1,19 +1,4 @@
 .multiselect {
-  // margin-top: 3px;
-  // display: flex;
-  // align-items: center;
-  // max-width: 350px;
-  // &.cluster-select {
-  //   .multiselect__tags {
-  //     border: 1px solid $color-border;
-  //     background-color: $table-header;
-
-  //     .multiselect__input {
-  //       background-color: $table-header;
-  //     }
-  //   }
-  // }
-
   .multiselect__tags {
     background-color: $white-100;
     min-height: 36px;
@@ -25,6 +10,7 @@
     padding: 6px 30px 8px 20px;
     font-size: 13px;
     border-radius: 4px;
+
     &:hover {
       border-color: $ac-primary;
     }
@@ -80,9 +66,11 @@
       margin-bottom: 0;
     }
   }
+
   .multiselect__select {
     height: 36px;
   }
+
   .multiselect__content {
     .multiselect__element {
       .multiselect__option {
@@ -91,16 +79,20 @@
         font-size: 13px;
         display: flex;
         align-items: center;
+
         img {
           width: 30px;
         }
+
         p {
           font-size: 13px;
           color: $color-heading;
         }
+
         p:not(.location) {
           font-weight: 500;
         }
+
         a {
           display: block;
           font-weight: 400;
@@ -119,6 +111,7 @@
         &.multiselect__option--highlight {
           background-color: $white-100;
           color: $ac-secondary;
+
           &:hover {
             background-color: $primary-light-gray;
           }
@@ -174,7 +167,7 @@
   }
 }
 
-.multiselect__tags > span {
+.multiselect__tags>span {
   font-size: 13px;
   line-height: 1.6;
   color: $color-heading;
@@ -326,6 +319,7 @@
       font-size: 13px;
       display: flex;
       align-items: center;
+
       .multiselect__single {
         font-size: 12px;
       }
@@ -355,6 +349,7 @@
   }
 
   &.is-danger {
+
     input,
     .ac-card,
     textarea {
@@ -367,6 +362,7 @@
   }
 
   &.is-loading {
+
     input,
     .ac-card,
     textarea {
@@ -446,10 +442,12 @@
     }
   }
 }
+
 li {
   .multiselect__option {
     font-size: 13px;
     color: $color-heading;
+
     &:has(input[type="checkbox"]) {
       label {
         left: 24px;
@@ -457,22 +455,27 @@ li {
     }
   }
 }
+
 .multiselect__option--selected {
   label {
     right: 30px;
   }
 }
+
 .multi-select-wrapper.is-small {
   .multiselect .multiselect__tags {
+
     .multiselect__input,
     .multiselect__single {
       top: 3.5px !important;
     }
   }
+
   .multiselect .multiselect__tags .multiselect__placeholder {
     padding-top: 3.5px !important;
   }
 }
+
 // has info button start
 .multi-select-wrapper {
   &.has-info-button {
@@ -480,28 +483,33 @@ li {
       z-index: 99;
       right: 30px;
     }
+
     &.has-refresh-button {
       .multiselect__select {
         z-index: 99;
         right: 60px;
       }
+
       .button {
         &.is-refresh {
           right: 30px;
         }
       }
     }
+
     .button {
       &.is-information {
         right: 0;
       }
     }
   }
+
   &.has-refresh-button {
     .multiselect__select {
       z-index: 99;
       right: 30px;
     }
+
     .button {
       &.is-refresh {
         right: 0;
@@ -509,9 +517,67 @@ li {
     }
   }
 
+  // clear 
+  &.has-clear-button {
+    &.has-refresh-button {
+      .multiselect__select {
+        z-index: 99;
+        right: 30px;
+      }
+
+      .button {
+        &.is-clear {
+          right: 60px;
+        }
+      }
+    }
+
+    &.has-info-button {
+      &.has-refresh-button {
+        .multiselect__select {
+          z-index: 99;
+          right: 60px;
+        }
+
+        .button {
+          &.is-clear {
+            right: 90px;
+          }
+        }
+      }
+
+      .multiselect__select {
+        z-index: 99;
+        right: 30px;
+      }
+
+      .button {
+        &.is-clear {
+          right: 60px;
+        }
+      }
+    }
+
+    .multiselect__select {
+      z-index: 99;
+      right: 0px;
+    }
+
+    .button {
+      &.is-clear {
+        right: 30px;
+      }
+    }
+  }
+
+  // clear 
+
+
   .button {
+
     &.is-information,
-    &.is-refresh {
+    &.is-refresh,
+    &.is-clear {
       background-color: transparent;
       border: none;
       position: absolute;
@@ -527,6 +593,7 @@ li {
         transform: scale(0.8);
       }
     }
+
     &.is-refresh.spin {
       i {
         animation: spin 1s linear infinite;
@@ -544,11 +611,14 @@ li {
     font-size: 12px !important;
     border-bottom: 1px solid $color-border-light;
   }
+
   .multiselect__option:not(.multiselect__option--disabled) {
     padding-left: 32px !important;
   }
+
   .multiselect__option--selected {
     font-weight: 500 !important;
+
     &:before {
       position: absolute;
       content: "";
@@ -570,26 +640,32 @@ li {
   from {
     -moz-transform: rotate(0deg);
   }
+
   to {
     -moz-transform: rotate(360deg);
   }
 }
+
 @-webkit-keyframes spin {
   from {
     -webkit-transform: rotate(0deg);
   }
+
   to {
     -webkit-transform: rotate(360deg);
   }
 }
+
 @keyframes spin {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
 }
+
 // has info button end
 
 // dark theme end
@@ -597,21 +673,16 @@ li {
 Responsive Classes
 *****************************************/
 // Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {
-}
+@media (max-width: 575.98px) {}
 
 // Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {
-}
+@media (min-width: 576px) and (max-width: 767.98px) {}
 
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {
-}
+@media (min-width: 768px) and (max-width: 991.98px) {}
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {
-}
+@media (min-width: 992px) and (max-width: 1199.98px) {}
 
 // Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {
-}
+@media (min-width: 1200px) {}