@appscode/design-system 1.0.43-alpha.26 → 1.0.43-alpha.27

package/base/utilities/dark-theme.scss

@@ -63,7 +63,7 @@ $dark-bg-light: var(--dark-bg-light);
     }
 
     h6.wizard-title.has-line:after {
-      --ac-input-bg-color: #555;
+      --ac-input-bg-color: $ac-color-value;
     }
 
     .ac-payment-card,
@@ -143,11 +143,13 @@ $dark-bg-light: var(--dark-bg-light);
 
     .multiselect__content-wrapper {
       background: var(--dark-bg-light);
+
       .multiselect__option--selected {
         background: var(--dark-bg);
         color: var(--ac-white-text);
       }
     }
+
     .multi-select-wrapper {
       background: var(--dark-bg-light);
 
@@ -155,6 +157,77 @@ $dark-bg-light: var(--dark-bg-light);
         background-color: var(--dark-bg-light);
         background: var(--dark-bg-light);
 
+        // scroll
+        &::-webkit-scrollbar {
+          border-radius: 50px;
+          width: 3px;
+        }
+
+        &::-moz-scrollbar {
+          border-radius: 50px;
+          width: 3px;
+        }
+
+        &::-ms-scrollbar {
+          border-radius: 50px;
+          width: 3px;
+        }
+
+        &::-webkit-scrollbar:hover {
+          width: 7px;
+        }
+
+        &::-moz-scrollbar:hover {
+          width: 7px;
+        }
+
+        &::-ms-scrollbar:hover {
+          width: 7px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background-color: $dark-bg-light;
+          border-radius: 50px;
+          height: 2px !important;
+        }
+
+        &::-moz-scrollbar-thumb {
+          background-color: $dark-bg-light;
+          border-radius: 50px;
+          height: 2px !important;
+        }
+
+        &::-ms-scrollbar-thumb {
+          background-color: $dark-bg-light;
+          border-radius: 50px;
+          height: 2px !important;
+        }
+
+        &::-webkit-scrollbar-thumb:hover {
+          background-color: $dark-bg-light;
+        }
+
+        &::-moz-scrollbar-thumb:hover {
+          background-color: $dark-bg-light;
+        }
+
+        &::-ms-scrollbar-thumb:hover {
+          background-color: $dark-bg-light;
+        }
+
+        &:hover::-webkit-scrollbar-corner {
+          height: 40px;
+        }
+
+        &:hover::-moz-scrollbar-corner {
+          height: 40px;
+        }
+
+        &:hover::-ms-scrollbar-corner {
+          height: 40px;
+        }
+        // scroll
+
         .multiselect__content .multiselect__element .multiselect__option {
           color: var(--ac-white-text);
         }

package/components/_left-sidebar-menu.scss

@@ -359,11 +359,13 @@
   .ac-options.is-right {
     .option-dots {
       transition: 0.3s;
+
       i.fa {
         &.fa-angle-left {
           font-size: 18px;
         }
       }
+
       &:active {
         i.fa {
           background-color: $ac-white-lighter;
@@ -374,52 +376,63 @@
           border-radius: 50%;
         }
       }
+
       &:hover {
         color: $ac-primary !important;
         transform: scale(1.2);
       }
     }
   }
+
   .is-cluster-logo {
     display: flex;
     align-items: center;
     margin-left: -8px;
     padding: 5px;
   }
+
   .multiselect {
     height: 50px;
     width: 234px;
     left: 0px;
     top: -5px;
+
     .multiselect__select {
       height: 50px;
       top: 4px;
     }
+
     .multiselect__tags {
       border: none !important;
       background-color: $ac-bg-light-gray;
       min-height: 54px;
       border-radius: 0;
+
       .multiselect__placeholder {
         padding-top: 12px !important;
         font-size: 14px;
       }
+
       .multiselect__input {
         background-color: $ac-bg-light-gray !important;
         top: 13px;
+
         &::placeholder {
           font-size: 12px;
           font-weight: 500;
         }
       }
     }
+
     .multiselect__single {
       background-color: $ac-bg-light-gray !important;
       top: 14px !important;
+
       img {
         width: 20px;
         margin-right: 8px;
       }
+
       span {
         span {
           overflow: hidden;
@@ -433,19 +446,25 @@
       }
     }
   }
+
   .multiselect__content-wrapper {
+    border: 1px solid $ac-white-light;
+
     .multiselect__content {
       .multiselect__element {
         .multiselect__option {
           display: flex;
           align-items: center;
           font-size: 14px;
+
           img {
             width: 25px;
           }
+
           p {
             font-weight: 500;
           }
+
           .location {
             font-weight: 400;
             opacity: 0.8;
@@ -455,6 +474,7 @@
     }
   }
 }
+
 // cluster switcher end
 /****************************************
 Responsive Classes

package/package.json

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