@appscode/design-system 1.0.43-alpha.20 → 1.0.43-alpha.201

package/components/_ac-multi-select.scss

@@ -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-gray-lightest;
+      background-color: $dark-bg-light;
       margin-top: 4px;
       margin-bottom: 0;
 
@@ -85,6 +85,7 @@
         font-size: $font-size-small;
         p {
           font-size: 13px;
+          color: $ac-color-text;
         }
         a {
           display: block;
@@ -150,7 +151,7 @@
     label {
       padding-left: 15px !important;
       font-size: $font-size-small !important;
-      color: #323232 !important;
+      color: $ac-color-text !important;
 
       &:after {
         position: inherit !important;
@@ -163,7 +164,7 @@
 
 .multiselect__input {
   &::placeholder {
-    color: #9b7575;
+    color: $ac-color-value;
     font-weight: 400;
     line-height: 1.6;
     font-size: $font-size-small;
@@ -392,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;
@@ -439,6 +440,7 @@
 li {
   .multiselect__option {
     font-size: 13px;
+    color: $ac-color-text;
   }
 }
 .multiselect__option--selected {
@@ -489,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 {
@@ -41,28 +43,30 @@
     border: none;
     background-color: transparent;
     transition: 0.3 ease-in-out;
+   
 
     &:hover {
       color: $ac-primary;
     }
 
     span {
-      width: 5px;
-      height: 5px;
+      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-color: $ac-white;
     min-width: 160px;
     top: 30px;
+    padding: 5px 0;
+    border: 1px solid $ac-white-light;
 
     li {
       .list-button {
@@ -78,8 +82,8 @@
         display: block;
 
         &:hover {
-          background-color: $ac-primary;
-          color: $ac-white;
+          background-color: $ac-bg-light-gray;
+          color: $ac-primary;
         }
 
         span {
@@ -93,16 +97,27 @@
 
       a {
         font-size: $font-size-small;
-        padding: 10px 30px;
+        padding: 7px 15px;
         display: block;
         text-decoration: none !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-color: $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;
@@ -34,6 +34,16 @@
   }
 
   &.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;
+    }
   }
 }

package/components/_ac-table.scss

@@ -12,13 +12,13 @@
 
     /* Handle */
     &::-webkit-scrollbar-thumb {
-      background-color: $ac-gray-light;
+      background-color: $ac-white-light;
       border-radius: 10px;
     }
 
     /* Handle on hover */
     &::-webkit-scrollbar-thumb:hover {
-      background-color: $ac-gray-light;
+      background-color: $ac-white-light;
     }
   }
 }
@@ -137,7 +137,9 @@
     }
 
     tr {
-      cursor: pointer;
+      &.is-link {
+        cursor: pointer;
+      }
       border-bottom: 1px solid var(--ac-white-light);
 
       td {
@@ -259,7 +261,7 @@
     }
   }
 
-  &.ac-bordered {
+  &.ac-label-texted {
     thead {
       tr {
         th {
@@ -326,7 +328,7 @@
               }
 
               &:checked + label::after {
-                border-color: #fafafa;
+                border-color: $ac-white-lighter;
               }
             }
           }

package/components/_ac-tabs.scss

@@ -6,14 +6,14 @@
 
     &.is-line {
       ul {
-        border-bottom-color: $ac-white-light;
+        // border-bottom-color: $ac-white-light;
 
         li {
           &.is-active {
             a {
               font-weight: 500;
               border-bottom-color: $ac-primary;
-              border-color: $ac-primary !important;
+              border-bottom: 2px solid $ac-primary !important;
               border-width: 2px;
             }
           }
@@ -23,6 +23,7 @@
             font-weight: 400;
             color: $ac-color-heading;
             font-size: $font-size-small;
+            border-bottom: none;
             padding: 6px 20px;
 
             &:hover {
@@ -105,7 +106,7 @@
             li {
               &.is-active {
                 a {
-                  background-color: #f5f7f9;
+                  background-color: $ac-white-light;
                 }
               }
 
@@ -120,7 +121,7 @@
 
     &.is-toggle {
       ul {
-        border: 1px solid $ac-border;
+        border: 1px solid $ac-label-text;
         border-radius: 4px;
         padding: 4px;
         flex-grow: inherit;
@@ -181,7 +182,7 @@
 
       &.is-borderless {
         border: 1px solid transparent;
-        background-color: #f5f7f9;
+        background-color: $ac-white-light;
         border-radius: 4px 4px 4px 4px;
       }
     }
@@ -228,6 +229,33 @@
     background: $ac-white;
   }
 }
+
+// dark theme
+.is-dark-theme {
+  .tabs {
+    &.is-toggle {
+      a {
+        &:hover {
+          background-color: $dark-bg;
+        }
+      }
+    }
+    a {
+      border-bottom: 1px solid $ac-white-lighter;
+      color: $ac-full-white;
+    }
+    &.ac-tabs.is-line {
+      ul {
+        li.is-active {
+          a {
+            color: $ac-color-text;
+          }
+        }
+      }
+    }
+  }
+}
+
 /****************************************
 Responsive Classes
 *****************************************/