@appscode/design-system 1.0.43-alpha.14 → 1.0.43-alpha.142

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-border-hover;
+      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,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;
       }
     }
   }
@@ -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;
@@ -216,7 +217,7 @@
         font-size: $font-size-extra-small;
         top: -9px;
         font-weight: 500;
-        color: #000;
+        color: $ac-black;
       }
     }
 
@@ -384,7 +385,7 @@
   .multiselect__select {
     height: calc(100% - 2px);
     border-radius: 0 4px 4px 0;
-    background: transparent !important;
+    background-color: transparent !important;
   }
 
   label {
@@ -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;
@@ -410,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;
       }
     }
 
@@ -422,7 +423,7 @@
       content: "";
       left: 0;
       top: 50%;
-      background: $ac-white;
+      background-color: $ac-white;
       width: 100%;
       height: 2px;
       margin-top: -1px;
@@ -439,6 +440,7 @@
 li {
   .multiselect__option {
     font-size: 13px;
+    color: $ac-color-text;
   }
 }
 .multiselect__option--selected {
@@ -468,7 +470,7 @@ li {
 
   .button {
     &.is-information {
-      background: transparent;
+      background-color: transparent;
       border: none;
       position: absolute;
       right: 0;
@@ -480,7 +482,7 @@ li {
       &:focus {
         outline: none;
         box-shadow: none;
-        background: #e4e8ef;
+        background-color: #e4e8ef;
         transform: scale(0.8);
       }
     }
@@ -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 {
@@ -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;
+    }
   }
 }

package/components/_ac-table.scss

@@ -12,20 +12,21 @@
 
     /* Handle */
     &::-webkit-scrollbar-thumb {
-      background: #8392a5;
+      background-color: $ac-gray-light;
       border-radius: 10px;
     }
 
     /* Handle on hover */
     &::-webkit-scrollbar-thumb:hover {
-      background: #8392a5;
+      background-color: $ac-gray-light;
     }
   }
 }
 
 // INFO TABLE START
 .table.ac-info-table {
-  // background: $ac-bg-light-gray;
+  background-color: transparent;
+
   &.is-fullwidth {
     tbody {
       tr {
@@ -49,11 +50,7 @@
       td {
         border: none;
         font-size: $font-size-small;
-        color: hsl(
-          var(--font-hsl-hue),
-          var(--font-hsl-saturation),
-          calc(var(--font-hsl-lightness) + 25%)
-        );
+        color: $ac-color-value;
         font-weight: 400;
         padding: 3px 0px;
         min-width: 230px;
@@ -99,6 +96,7 @@
               color: $ac-color-heading;
             }
           }
+
           &.sorting-desc {
             &::after {
               color: $ac-color-heading;
@@ -114,10 +112,12 @@
             font-weight: 1000;
             display: block;
           }
+
           &:before {
             right: 1em;
             content: "\2191";
           }
+
           &:after {
             right: 0.5em;
             content: "\2193";
@@ -133,12 +133,15 @@
       box-shadow: inset 0 0 0 1px $ac-primary;
       border-radius: 4px;
       border-bottom: none;
-      color: #000;
+      color: $ac-black;
     }
 
     tr {
-      cursor: pointer;
-      border-bottom: 1px solid #e7e7e7;
+      &.is-link {
+        cursor: pointer;
+      }
+      border-bottom: 1px solid var(--ac-white-light);
+
       td {
         font-size: $font-size-small;
         padding: 5px 20px;
@@ -157,12 +160,14 @@
               color: $ac-primary;
               font-weight: 500;
               transition: 0.3s ease-in-out;
+
               &:hover {
                 color: $ac-color-heading;
               }
             }
           }
         }
+
         &.is-error {
           color: $ac-danger;
         }
@@ -174,12 +179,12 @@
           display: inline-flex;
 
           &.is-danger {
-            background: $ac-danger;
+            background-color: $ac-danger;
           }
 
           i.fa {
             position: absolute;
-            background: $ac-primary;
+            background-color: $ac-primary;
             color: $ac-white;
             font-size: $font-size-tiny;
             width: 15px;
@@ -202,15 +207,8 @@
             border-radius: 50%;
           }
         }
-
-        // &:first-child {
-        //   border-radius: 4px 0 0 4px;
-        // }
-
-        // &:last-child {
-        //   border-radius: 0 4px 4px 0;
-        // }
       }
+
       .options-items {
         a:hover {
           color: $ac-white;
@@ -224,7 +222,7 @@
         box-shadow: inset 0 0 0 1px $ac-primary;
         border-radius: 4px;
         border-bottom: none;
-        color: #000;
+        color: $ac-black;
       }
 
       &.is-hoverless {
@@ -236,36 +234,41 @@
       transition: 0.3s ease-in-out;
     }
   }
+
   .increase-width {
     position: relative;
     visibility: hidden;
     width: 36px;
+
     .increase-innner {
-      border-bottom: 1px solid #e7e7e7;
-      border-top: 1px solid #e7e7e7;
+      border-bottom: 1px solid var(--ac-white-light);
+      border-top: 1px solid var(--ac-white-light);
       bottom: -1px;
       left: 0;
       position: absolute;
       right: -451px;
       top: -1px;
       visibility: visible;
-      background: #f1f1f1;
+      background-color: $ac-white-lighter;
     }
   }
+
   td {
     &.increase-width {
       .increase-innner {
-        background: transparent;
+        background-color: transparent;
       }
     }
   }
-  &.ac-bordered {
+
+  &.ac-label-texted {
     thead {
       tr {
         th {
           border-top: 1px solid $ac-white-light;
           border-bottom: 1px solid $ac-white-light;
           border-right: 1px solid $ac-white-light;
+
           &:first-child {
             border-left: 1px solid $ac-white-light;
           }
@@ -281,13 +284,15 @@
 
         td {
           font-size: $font-size-small;
-          color: $ac-gray-dark;
-          background-color: $ac-white;
+          color: $ac-color-value;
+          background-color: transparent;
           border-bottom: 1px solid $ac-white-light;
           border-right: 1px solid $ac-white-light;
+
           &:first-child {
             border-left: 1px solid $ac-white-light;
           }
+
           &:first-child {
             color: $ac-color-heading;
             border-radius: 0;
@@ -311,7 +316,7 @@
                 &::after {
                   top: 6px;
                   left: 6px;
-                  border-color: #54657e;
+                  border-color: $ac-gray-lightest;
                   width: 0.3rem;
                   height: 0.5rem;
                 }
@@ -323,7 +328,7 @@
               }
 
               &:checked + label::after {
-                border-color: #fafafa;
+                border-color: $ac-white-lighter;
               }
             }
           }
@@ -348,8 +353,7 @@
 
     tbody {
       tr {
-        background-color: $ac-white;
-        transition: 0.3s ease-in-out;
+        background-color: transparent;
       }
     }
   }
@@ -374,7 +378,7 @@
 
   &.is-dark {
     thead {
-      background-color: $ac-bg-dark;
+      background-color: $ac-color-heading;
 
       tr {
         th {
@@ -390,11 +394,11 @@
         }
 
         &:nth-child(odd) {
-          background-color: #303246;
+          background-color: $ac-color-value;
         }
 
         &:nth-child(even) {
-          background-color: $ac-bg-dark;
+          background-color: $ac-color-heading;
         }
 
         &:hover {
@@ -408,10 +412,12 @@
     }
   }
 }
+
 .table.ac-table tbody tr:hover td a:not(.tag a) {
   text-decoration: underline;
   color: $ac-primary;
 }
+
 // GENERAL TABLE END
 
 /****************************************