@appscode/design-system 1.0.3-alpha.7 → 1.0.43-alpha.100

package/components/_ac-multi-select.scss

@@ -2,7 +2,7 @@
   // margin-top: 3px;
   &.cluster-select {
     .multiselect__tags {
-      border: 1px solid $ac-grey-lightest;
+      border: 1px solid $ac-gray-lightest;
       background-color: $table-header;
 
       .multiselect__input {
@@ -17,7 +17,7 @@
     font-weight: 500;
     width: 100%;
     border-radius: 4px;
-    border: 1px solid $ac-border;
+    border: 1px solid $ac-label-text;
     padding: 6px 30px 8px 20px;
     font-size: $font-size-small;
 
@@ -35,7 +35,7 @@
     }
 
     .multiselect__tag {
-      background-color: $ac-border-hover;
+      background-color: $dark-bg-light;
       margin-top: 4px;
       margin-bottom: 0;
 
@@ -47,7 +47,12 @@
         }
 
         &:hover {
-          background-color: darken($color: $ac-primary, $amount: 9);
+          background-color: hsla(
+            var(--hsl-hue),
+            var(--hsl-saturation),
+            calc(var(--hsl-lightness) - 9%),
+            1
+          );
         }
       }
     }
@@ -80,6 +85,7 @@
         font-size: $font-size-small;
         p {
           font-size: 13px;
+          color: $ac-color-text;
         }
         a {
           display: block;
@@ -91,16 +97,31 @@
         }
 
         &:hover {
-          background-color: scale-color($color: $ac-primary, $lightness: 80%);
+          background-color: hsla(
+            var(--hsl-hue),
+            var(--hsl-saturation),
+            var(--hsl-lightness),
+            0.2
+          );
           color: $ac-primary;
         }
 
         &.multiselect__option--highlight {
-          background-color: scale-color($color: $ac-primary, $lightness: 80%);
+          background-color: hsla(
+            var(--hsl-hue),
+            var(--hsl-saturation),
+            var(--hsl-lightness),
+            0.2
+          );
           color: $ac-primary;
 
           &:after {
-            background-color: scale-color($color: $ac-primary, $lightness: 80%);
+            background-color: hsla(
+              var(--hsl-hue),
+              var(--hsl-saturation),
+              var(--hsl-lightness),
+              0.2
+            );
             color: $ac-primary;
           }
         }
@@ -130,12 +151,12 @@
     label {
       padding-left: 15px !important;
       font-size: $font-size-small !important;
-      color: #323232 !important;
+      color: $ac-color-text !important;
 
       &:after {
         position: inherit !important;
         content: "" !important;
-        background: transparent;
+        background-color: transparent;
       }
     }
   }
@@ -143,7 +164,7 @@
 
 .multiselect__input {
   &::placeholder {
-    color: #9b7575;
+    color: $ac-color-value;
     font-weight: 400;
     line-height: 1.6;
     font-size: $font-size-small;
@@ -196,7 +217,7 @@
         font-size: $font-size-extra-small;
         top: -9px;
         font-weight: 500;
-        color: #000;
+        color: $ac-black;
       }
     }
 
@@ -364,7 +385,7 @@
   .multiselect__select {
     height: calc(100% - 2px);
     border-radius: 0 4px 4px 0;
-    background: transparent !important;
+    background-color: transparent !important;
   }
 
   label {
@@ -372,7 +393,7 @@
     left: 20px;
     top: 11px;
     cursor: text;
-    color: $ac-border;
+    color: $ac-label-text;
     position: absolute;
     z-index: 99;
     transition: 0.3s ease-in-out;
@@ -390,10 +411,10 @@
       left: 15px;
       padding: 0 5px;
       font-size: $font-size-small;
-      color: #000;
+      color: $ac-black;
 
       &::after {
-        background: $ac-white;
+        background-color: $ac-white;
       }
     }
 
@@ -402,7 +423,7 @@
       content: "";
       left: 0;
       top: 50%;
-      background: $ac-white;
+      background-color: $ac-white;
       width: 100%;
       height: 2px;
       margin-top: -1px;
@@ -419,6 +440,7 @@
 li {
   .multiselect__option {
     font-size: 13px;
+    color: $ac-color-text;
   }
 }
 .multiselect__option--selected {
@@ -448,7 +470,7 @@ li {
 
   .button {
     &.is-information {
-      background: transparent;
+      background-color: transparent;
       border: none;
       position: absolute;
       right: 0;
@@ -460,7 +482,7 @@ li {
       &:focus {
         outline: none;
         box-shadow: none;
-        background: #e4e8ef;
+        background-color: #e4e8ef;
         transform: scale(0.8);
       }
     }
@@ -469,6 +491,186 @@ li {
 
 // has info button end
 
+// dark theme start
+.is-dark-theme {
+  .multiselect__content-wrapper {
+    background: var(--dark-bg-light);
+    border: 1px solid $ac-white-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__option--selected {
+      background: var(--dark-bg);
+      color: var(--ac-white-text);
+    }
+  }
+
+  .multi-select-wrapper {
+    background: var(--dark-bg-light);
+
+    .multiselect__content-wrapper {
+      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);
+      }
+
+      .multiselect__option--group {
+        color: var(--ac-white-text);
+        background-color: var(--dark-bg-light);
+      }
+
+      .multiselect__option--selected {
+        color: var(--ac-white-text);
+        background-color: var(--dark-bg-light);
+      }
+    }
+  }
+}
+// dark theme end
 /****************************************
 Responsive Classes
 *****************************************/

package/components/_ac-options.scss

@@ -26,6 +26,8 @@
   &.is-right {
     .option-dots {
       align-items: flex-end;
+      padding: 0 10px;
+      margin-right: -10px;
     }
 
     .options-items {
@@ -39,51 +41,53 @@
     cursor: pointer;
     align-items: flex-start;
     border: none;
-    background: transparent;
+    background-color: transparent;
     transition: 0.3 ease-in-out;
+   
 
     &:hover {
       color: $ac-primary;
     }
 
     span {
-      width: 5px;
-      height: 5px;
-      background: #333;
+      width: 4px;
+      height: 4px;
+      background-color: $ac-color-value;
       border-radius: 50%;
-      margin-bottom: 2px;
+      margin-bottom: 1px;
     }
   }
 
   .options-items {
-    box-shadow: $ac-shadow-1;
     border-radius: 4px;
     position: absolute;
     z-index: 99;
-    background: $ac-white;
+    background-color: $ac-white;
     min-width: 160px;
     top: 30px;
+    padding: 5px 0;
+    border: 1px solid $ac-white-light;
 
     li {
       .list-button {
         width: 100%;
-        background: transparent;
+        background-color: transparent;
         border: none;
         cursor: pointer;
         font-weight: 400;
         text-align: left;
-        color: #333;
+        color: $ac-color-value;
         font-size: $font-size-small;
         padding: 10px 30px;
         display: block;
 
         &:hover {
-          background: $ac-primary;
-          color: $ac-white;
+          background-color: $ac-bg-light-gray;
+          color: $ac-primary;
         }
 
         span {
-          background: transparent;
+          background-color: transparent;
 
           &.icon {
             margin-right: 5px;
@@ -93,16 +97,27 @@
 
       a {
         font-size: $font-size-small;
-        padding: 10px 30px;
+        padding: 7px 15px;
         display: block;
         text-decoration: none !important;
-        color: #333 !important;
+        color: $ac-color-text !important;
+        border: none;
 
         &:hover {
-          background-color: $ac-primary;
-          color: $ac-white !important;
+          background-color: $ac-bg-light-gray;
+          color: $ac-primary !important;
         }
       }
     }
   }
 }
+
+// dark theme start
+.is-dark-theme {
+  .ac-options {
+    .options-items {
+      --ac-white: var(--dark-bg-light);
+    }
+  }
+}
+// dark theme end

package/components/_ac-select-box.scss

@@ -1,7 +1,7 @@
 .ac-select-box {
   select {
-    background: $ac-input-bg-color;
-    border: 1px solid $ac-border;
+    background-color: $ac-blue-light;
+    border: 1px solid $ac-label-text;
     font-size: $font-size-small;
     height: 42px;
     padding-left: 20px;
@@ -11,7 +11,7 @@
     }
 
     &:hover {
-      border: 1px solid $ac-border-hover;
+      border: 1px solid $ac-gray-lightest;
     }
 
     &:focus {
@@ -29,11 +29,21 @@
 
     &.select:not(.is-multiple):not(.is-loading)::after {
       top: 50%;
-      margin-top: -2px;
+      margin-top: 0px;
     }
   }
 
   &.select:not(.is-multiple):not(.is-loading)::after {
-    border-color: $ac-border;
+    border-color: $ac-label-text;
+  }
+}
+
+.is-dark-theme {
+  .select {
+    select {
+      background-color: $dark-bg-light;
+      color: $ac-full-white;
+      border: 1px solid $ac-white-light;
+    }
   }
 }