@appscode/design-system 1.0.43-alpha.21 → 1.0.43-alpha.211

package/components/_ac-input.scss

@@ -32,7 +32,7 @@
     input,
     .ac-card,
     textarea {
-      border: 1px solid $ac-primary;
+      border: 1px solid $ac-primary !important;
     }
 
     p {
@@ -123,8 +123,10 @@
 
       &.show-label {
         font-size: 12px;
+        color: $ac-color-value;
         top: -9px;
         font-weight: 500;
+        background-color: $ac-white;
       }
     }
 
@@ -152,6 +154,7 @@
         height: 36px;
         width: 36px;
         margin-top: 0;
+        padding: 10px;
       }
     }
 
@@ -174,6 +177,12 @@
         font-size: 12px;
         top: -9px;
         font-weight: 500;
+        color: $ac-color-value;
+        &.is-required {
+          &:after {
+            width: calc(100% + 10px);
+          }
+        }
       }
     }
 
@@ -263,7 +272,7 @@
     left: 15px;
     top: 11px;
     cursor: text;
-    color: $ac-border;
+    color: $ac-label-text;
     position: absolute;
     z-index: 2;
     transition: 0.3s ease-in-out;
@@ -283,7 +292,7 @@
       left: 10px;
       padding: 0 5px;
       font-size: $font-size-small;
-      color: $ac-black;
+      color: $ac-color-value;
 
       &:after {
         position: absolute;
@@ -333,13 +342,13 @@
     width: 35px;
     height: 100%;
     margin-top: -22.5px;
-    color: $ac-border;
+    color: $ac-label-text;
     cursor: pointer;
   }
 
   .ac-dropdown-content {
     position: absolute;
-    background-color: $ac-input-bg-color;
+    background-color: $ac-blue-light;
     width: 100%;
     height: auto;
     box-shadow: 0px 4px 16px rgba(132, 147, 168, 0.6);
@@ -370,25 +379,25 @@
   }
 
   .ac-textarea {
-    border: 1px solid $ac-border;
-    border-radius: 4px;
-    padding: 10px 0 5px 0;
-    // background-color: $ac-input-bg-color;
-    transition: background-color 0.3s ease-in-out;
-
+    .ac-label {
+      &.is-required {
+        &:after {
+          width: calc(100% + 10px);
+        }
+      }
+    }
     textarea {
-      border: none;
+      border: 1px solid $ac-label-text;
       background-color: transparent;
-      padding-top: 0;
-      padding-bottom: 0;
-
+      padding: 10px 15px;
+      min-height: 50px;
       &.bg-white {
         background-color: transparent;
       }
 
       &:focus {
         outline: none;
-        border: none;
+        border: 1px solid $ac-primary;
       }
     }
   }
@@ -402,7 +411,7 @@
     font-weight: 400;
     width: 100%;
     border-radius: 4px;
-    border: 1px solid $ac-border;
+    border: 1px solid $ac-label-text;
     padding: 8px 15px;
     font-size: $font-size-small;
 
@@ -413,7 +422,9 @@
     &.bg-white {
       background-color: $ac-white;
     }
-
+    &.StripeElement--focus {
+      border: 1px solid $ac-primary;
+    }
     &:focus {
       border: 1px solid $ac-primary;
       outline: none;
@@ -450,11 +461,12 @@
 
   span.eye {
     i.fa {
-      color: $ac-border;
+      color: $ac-label-text;
       position: absolute;
       cursor: pointer;
       padding: 15px;
       right: 0;
+      top: 0;
     }
   }
 
@@ -489,7 +501,7 @@
           top: 10px;
           z-index: 1;
           font-size: $font-size-small;
-          color: $ac-border;
+          color: $ac-label-text;
           font-weight: 400;
         }
       }
@@ -513,7 +525,7 @@
     height: 36px;
     font-weight: 400;
     border-radius: 4px;
-    border: 1px solid $ac-border;
+    border: 1px solid $ac-label-text;
     font-size: $font-size-small;
 
     .file-cta {
@@ -550,7 +562,7 @@ input#captcha {
 
   &:focus {
     outline: none;
-    border-bottom: 1px solid $ac-border;
+    border-bottom: 1px solid $ac-label-text;
   }
 }
 
@@ -645,6 +657,7 @@ input#captcha {
       font-size: 13px;
       padding-top: 0;
       padding-left: 40px;
+      height: auto;
 
       &::before {
         width: 30px;
@@ -669,6 +682,9 @@ input#captcha {
   .switch {
     &[type="checkbox"] + label {
       padding-top: 3px;
+      &::before {
+        background-color: $ac-gray-light;
+      }
     }
 
     &.ac-switch {
@@ -699,6 +715,14 @@ input#captcha {
   }
 }
 
+.ac-single-switch.is-small .switch[type="checkbox"] + label,
+.buttons.are-small
+  .ac-single-switch.button.ac-button
+  .switch[type="checkbox"]
+  + label {
+  height: 19px;
+}
+
 // transparent input
 .transparent-input {
   display: flex;
@@ -721,7 +745,7 @@ input#captcha {
 
     &:focus {
       outline: none;
-      border-bottom: 1px solid $ac-border;
+      border-bottom: 1px solid $ac-label-text;
     }
   }
 }
@@ -770,7 +794,24 @@ input#captcha {
     }
   }
 }
+// dark theme start
+.is-dark-theme {
+  .ac-single-input {
+    input,
+    .file-input,
+    .ac-dropdown-content {
+      background-color: transparent;
+    }
 
+    label {
+      color: $ac-label-text;
+    }
+    .button.is-information:focus {
+      background-color: $dark-bg-light;
+    }
+  }
+}
+// dark theme end
 /****************************************
 Responsive Classes
 *****************************************/

package/components/_ac-modal.scss

@@ -41,7 +41,7 @@
 
   &.is-large {
     .ac-modal-inner {
-      width: 1000px;
+      width: 1000px !important;
     }
   }
 

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 {
@@ -464,16 +466,43 @@ li {
       z-index: 99;
       right: 30px;
     }
+    &.has-refresh-button {
+      .multiselect__select {
+        z-index: 99;
+        right: 60px;
+      }
+      .button {
+        &.is-refresh {
+          right: 30px;
+        }
+      }
+    }
+    .button {
+      &.is-information {
+        right: 0;
+      }
+    }
+  }
+  &.has-refresh-button {
+    .multiselect__select {
+      z-index: 99;
+      right: 30px;
+    }
+    .button {
+      &.is-refresh {
+        right: 0;
+      }
+    }
   }
 
   .button {
-    &.is-information {
+    &.is-information,
+    &.is-refresh {
       background-color: transparent;
       border: none;
       position: absolute;
-      right: 0;
-      height: 45px;
-      width: 45px;
+      height: 36px;
+      width: 36px;
       z-index: 90;
       margin-top: 0;
 
@@ -484,11 +513,220 @@ li {
         transform: scale(0.8);
       }
     }
+    &.is-refresh.spin {
+      i {
+        animation: spin 1s linear infinite;
+      }
+    }
   }
 }
 
+@-moz-keyframes spin {
+  from {
+    -moz-transform: rotate(0deg);
+  }
+  to {
+    -moz-transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 // 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;
               }
             }
           }