@appscode/design-system 1.1.0 → 2.0.1

package/components/_monaco-editor.scss

@@ -1,6 +1,6 @@
 .editor {
   border: none;
-  background-color: $ac-white-light !important;
+  background-color: $white-100 !important;
 }
 
 .decorationsOverviewRuler {
@@ -63,4 +63,4 @@
       height: 6px !important;
     }
   }
-}
+}

package/components/{_ac-multi-select.scss → _multi-select.scss}

@@ -1,32 +1,37 @@
 .multiselect {
   // margin-top: 3px;
-  &.cluster-select {
-    .multiselect__tags {
-      border: 1px solid $ac-gray-lightest;
-      background-color: $table-header;
-
-      .multiselect__input {
-        background-color: $table-header;
-      }
-    }
-  }
+  // display: flex;
+  // align-items: center;
+  // max-width: 350px;
+  // &.cluster-select {
+  //   .multiselect__tags {
+  //     border: 1px solid $primary-90;
+  //     background-color: $table-header;
+
+  //     .multiselect__input {
+  //       background-color: $table-header;
+  //     }
+  //   }
+  // }
 
   .multiselect__tags {
-    background-color: $ac-white;
-    min-height: 45px;
+    background-color: $white-100;
+    min-height: 36px;
+    // max-height: 36px;
     font-weight: 500;
     width: 100%;
     border-radius: 4px;
-    border: 1px solid $ac-label-text;
+    border: 1px solid $primary-80;
     padding: 6px 30px 8px 20px;
-    font-size: $font-size-small;
+    font-size: 13px;
+    border-radius: 4px;
 
     .multiselect__placeholder {
       margin: 0;
       padding: 0;
-      padding-top: 2px !important;
-      font-weight: 400;
-      font-size: $font-size-small;
+      // padding-top: 2px !important;
+      font-weight: 500;
+      font-size: 13px;
     }
 
     .multiselect__tags-wrap {
@@ -35,7 +40,7 @@
     }
 
     .multiselect__tag {
-      background-color: $dark-bg-light;
+      background-color: $black-80;
       margin-top: 4px;
       margin-bottom: 0;
 
@@ -43,7 +48,7 @@
         font-size: 12px;
 
         &::after {
-          color: $ac-white;
+          color: $white-100;
         }
 
         &:hover {
@@ -59,15 +64,15 @@
 
     .multiselect__input,
     .multiselect__single {
-      background-color: $ac-white;
+      background-color: $white-100;
       margin-bottom: 0;
       margin: 0 !important;
       padding-left: 0;
       left: 0px;
-      top: 2px;
-      font-size: $font-size-small !important;
+      // top: 2px;
+      font-size: 13px !important;
       font-weight: 500;
-      color: $ac-color-text;
+      color: $primary-10;
       line-height: 1.5;
     }
 
@@ -76,16 +81,26 @@
       margin-bottom: 0;
     }
   }
-
+  .multiselect__select {
+    height: 36px;
+  }
   .multiselect__content {
     .multiselect__element {
       .multiselect__option {
-        padding: 10px 15px;
+        padding: 4px 16px;
         min-height: 32px;
-        font-size: $font-size-small;
+        font-size: 13px;
+        display: flex;
+        align-items: center;
+        img {
+          width: 30px;
+        }
         p {
           font-size: 13px;
-          color: $ac-color-text;
+          color: $primary-10;
+        }
+        p:not(.location) {
+          font-weight: 500;
         }
         a {
           display: block;
@@ -103,17 +118,15 @@
             var(--hsl-lightness),
             0.2
           );
-          color: $ac-primary;
+          color: $primary;
         }
 
         &.multiselect__option--highlight {
-          background-color: hsla(
-            var(--hsl-hue),
-            var(--hsl-saturation),
-            var(--hsl-lightness),
-            0.2
-          );
-          color: $ac-primary;
+          background-color: $white-100;
+          color: $primary;
+          &:hover {
+            background-color: $primary-97;
+          }
 
           &:after {
             background-color: hsla(
@@ -122,7 +135,7 @@
               var(--hsl-lightness),
               0.2
             );
-            color: $ac-primary;
+            color: $primary;
           }
         }
       }
@@ -150,8 +163,8 @@
   span {
     label {
       padding-left: 15px !important;
-      font-size: $font-size-small !important;
-      color: $ac-color-text !important;
+      font-size: 13px !important;
+      color: $primary-10 !important;
 
       &:after {
         position: inherit !important;
@@ -164,17 +177,17 @@
 
 .multiselect__input {
   &::placeholder {
-    color: $ac-color-value;
+    color: $primary-20;
     font-weight: 400;
     line-height: 1.6;
-    font-size: $font-size-small;
+    font-size: 13px;
   }
 }
 
 .multiselect__tags > span {
-  font-size: $font-size-small;
+  font-size: 13px;
   line-height: 1.6;
-  color: $ac-color-text;
+  color: $primary-10;
 }
 
 .multi-select-wrapper {
@@ -203,21 +216,21 @@
   &.has-bg-color {
     label.show-label {
       &:after {
-        background-color: $ac-bg;
+        background-color: transparent;
       }
     }
   }
 
   &.is-small {
     label {
-      font-size: $font-size-small;
+      font-size: 13px;
       top: 8px;
 
       &.show-label {
-        font-size: $font-size-extra-small;
+        font-size: 12px;
         top: -9px;
         font-weight: 500;
-        color: $ac-black;
+        color: $black-5;
       }
     }
 
@@ -233,7 +246,7 @@
     .multiselect__tags {
       .multiselect__tag {
         padding: 5px 20px 4px 10px;
-        font-size: $font-size-extra-small;
+        font-size: 12px;
       }
     }
 
@@ -249,7 +262,7 @@
     .multiselect .multiselect__tags {
       min-height: 36px !important;
       padding: 4px 30px 4px 20px;
-      font-size: $font-size-small;
+      font-size: 13px;
 
       .multiselect__single {
         font-size: 12px;
@@ -257,33 +270,35 @@
 
       .multiselect__placeholder {
         padding: 5px 0 0;
-        font-size: $font-size-small;
+        font-size: 13px;
         font-weight: 500;
       }
     }
 
     .multiselect__input,
     .multiselect__single {
-      font-size: $font-size-small !important;
+      font-size: 13px !important;
       font-weight: 500;
       line-height: 1.5;
-      padding-bottom: 4px;
+      // padding-bottom: 4px;
+      display: flex;
+      align-items: center;
 
       &::placeholder {
         font-weight: 500;
         line-height: 1.6;
-        font-size: $font-size-small;
+        font-size: 13px;
       }
     }
   }
 
   &.is-extra-small {
     label {
-      font-size: $font-size-small;
+      font-size: 13px;
       top: 8px;
 
       &.show-label {
-        font-size: $font-size-extra-small;
+        font-size: 12px;
         top: -9px;
       }
     }
@@ -300,7 +315,7 @@
     .multiselect__tags {
       .multiselect__tag {
         padding: 5px 20px 4px 10px;
-        font-size: $font-size-extra-small;
+        font-size: 12px;
       }
     }
 
@@ -316,7 +331,7 @@
     .multiselect .multiselect__tags {
       min-height: 32px !important;
       padding: 3px 30px 4px 20px;
-      font-size: $font-size-small;
+      font-size: 13px;
       display: flex;
       align-items: center;
       .multiselect__single {
@@ -325,22 +340,24 @@
 
       .multiselect__placeholder {
         padding: 5px 0 0;
-        font-size: $font-size-small;
+        font-size: 13px;
         font-weight: 500;
       }
     }
 
     .multiselect__input,
     .multiselect__single {
-      font-size: $font-size-small !important;
+      font-size: 13px !important;
       font-weight: 500;
       line-height: 1.5;
-      padding-bottom: 4px;
+      // padding-bottom: 4px;
+      display: flex;
+      align-items: center;
 
       &::placeholder {
         font-weight: 500;
         line-height: 1.6;
-        font-size: $font-size-small;
+        font-size: 13px;
       }
     }
   }
@@ -349,11 +366,11 @@
     input,
     .ac-card,
     textarea {
-      border: 1px solid $ac-danger;
+      border: 1px solid $danger;
     }
 
     p {
-      color: $ac-danger;
+      color: $danger;
     }
   }
 
@@ -361,20 +378,20 @@
     input,
     .ac-card,
     textarea {
-      border: 1px solid $ac-info;
+      border: 1px solid $info;
       opacity: 0.5;
     }
 
     p {
-      color: $ac-info;
+      color: $info;
       opacity: 0.5;
     }
   }
 
-  .is-error {
+  .is-danger {
     font-size: 12px;
     line-height: 22px;
-    color: $ac-red;
+    color: $danger;
     text-align: left;
 
     i.fa {
@@ -393,7 +410,7 @@
     left: 20px;
     top: 11px;
     cursor: text;
-    color: $ac-label-text;
+    color: $primary-10;
     position: absolute;
     z-index: 99;
     transition: 0.3s ease-in-out;
@@ -410,11 +427,11 @@
       top: -10px;
       left: 15px;
       padding: 0 5px;
-      font-size: $font-size-small;
-      color: $ac-black;
+      font-size: 13px;
+      color: $black-5;
 
       &::after {
-        background-color: $ac-white;
+        background-color: $white-100;
       }
     }
 
@@ -423,7 +440,7 @@
       content: "";
       left: 0;
       top: 50%;
-      background-color: $ac-white;
+      background-color: $white-100;
       width: 100%;
       height: 2px;
       margin-top: -1px;
@@ -440,7 +457,7 @@
 li {
   .multiselect__option {
     font-size: 13px;
-    color: $ac-color-text;
+    color: $primary-10;
   }
 }
 .multiselect__option--selected {
@@ -547,185 +564,6 @@ 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