@appscode/design-system 2.2.17 → 2.2.19

package/package.json

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

@@ -25,6 +25,7 @@
     padding: 6px 30px 8px 20px;
     font-size: 13px;
     border-radius: 4px;
+
     &:hover {
       border-color: $ac-primary;
     }
@@ -40,6 +41,7 @@
     .multiselect__tags-wrap {
       display: flex;
       align-items: center;
+      flex-wrap: wrap;
     }
 
     .multiselect__tag {
@@ -79,9 +81,11 @@
       margin-bottom: 0;
     }
   }
+
   .multiselect__select {
     height: 36px;
   }
+
   .multiselect__content {
     .multiselect__element {
       .multiselect__option {
@@ -90,16 +94,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;
@@ -118,6 +126,7 @@
         &.multiselect__option--highlight {
           background-color: $white-100;
           color: $ac-secondary;
+
           &:hover {
             background-color: $primary-light-gray;
           }
@@ -173,7 +182,7 @@
   }
 }
 
-.multiselect__tags > span {
+.multiselect__tags>span {
   font-size: 13px;
   line-height: 1.6;
   color: $color-heading;
@@ -325,6 +334,7 @@
       font-size: 13px;
       display: flex;
       align-items: center;
+
       .multiselect__single {
         font-size: 12px;
       }
@@ -354,6 +364,7 @@
   }
 
   &.is-danger {
+
     input,
     .ac-card,
     textarea {
@@ -366,6 +377,7 @@
   }
 
   &.is-loading {
+
     input,
     .ac-card,
     textarea {
@@ -445,10 +457,12 @@
     }
   }
 }
+
 li {
   .multiselect__option {
     font-size: 13px;
     color: $color-heading;
+
     &:has(input[type="checkbox"]) {
       label {
         left: 24px;
@@ -456,22 +470,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 {
@@ -479,28 +498,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;
@@ -508,9 +532,87 @@ li {
     }
   }
 
+  // clear 
+  &.has-clear-button {
+    &.has-refresh-button {
+      .multiselect__select {
+        z-index: 99;
+        right: 60px;
+      }
+
+      .button {
+        &.is-clear {
+          right: 30px;
+        }
+      }
+    }
+
+    &.has-info-button {
+      &.has-refresh-button {
+        .multiselect__select {
+          z-index: 99;
+          right: 60px;
+        }
+
+        .button {
+          &.is-clear {
+            right: 90px;
+          }
+        }
+      }
+
+      .multiselect__select {
+        z-index: 99;
+        right: 60px;
+      }
+
+      .button {
+        &.is-clear {
+          right: 30px;
+        }
+      }
+    }
+
+    .multiselect__select {
+      z-index: 99;
+      right: 30px;
+    }
+
+    .button {
+      &.is-clear {
+        right: 0px;
+      }
+    }
+  }
+
+  &.has-info-button {
+    &.has-refresh-button {
+      &.has-clear-button {
+        // .multiselect__select {
+        //   z-index: 99;
+        //   right: 60px;
+        // }
+      }
+
+
+
+
+      // .button {
+      //   &.is-information {
+      //     right: 0;
+      //   }
+      // }
+    }
+  }
+
+  // clear 
+
+
   .button {
+
     &.is-information,
-    &.is-refresh {
+    &.is-refresh,
+    &.is-clear {
       background-color: transparent;
       border: none;
       position: absolute;
@@ -526,6 +628,7 @@ li {
         transform: scale(0.8);
       }
     }
+
     &.is-refresh.spin {
       i {
         animation: spin 1s linear infinite;
@@ -543,11 +646,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: "";
@@ -569,26 +675,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
@@ -596,21 +708,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) {}