@appscode/design-system 0.0.21-alpha.3 → 0.4.27

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 {
@@ -72,7 +72,7 @@
       font-size: $font-size-small;
       padding: 4px 7px;
       height: 30px;
-      background: $ac-white;
+      background-color: $ac-white;
       padding-right: 30px;
 
       &[type="password"] {
@@ -93,6 +93,54 @@
     }
   }
 
+  &.is-normal {
+    input {
+      height: 45px;
+      font-size: 15px;
+      font-family: $ac-family-paragraph;
+      font-weight: 400;
+    }
+
+    .button {
+      &.is-information {
+        height: 45px;
+        width: 45px;
+        margin-top: 0;
+      }
+    }
+
+    span.eye i.fa {
+      padding: 14px 10px;
+    }
+
+    .ac-search-button {
+      margin-top: -22.5px;
+    }
+
+    label {
+      top: 13px;
+      font-size: $font-size-small;
+
+      &.show-label {
+        font-size: 12px;
+        color: $ac-color-value;
+        top: -9px;
+        font-weight: 500;
+        background-color: $ac-white;
+      }
+    }
+
+    .control {
+      &.has-icons-right {
+        .icon {
+          height: 45px;
+          width: 30px;
+          font-size: $font-size-small;
+        }
+      }
+    }
+  }
+
   &.is-small {
     input {
       height: 36px;
@@ -106,6 +154,7 @@
         height: 36px;
         width: 36px;
         margin-top: 0;
+        padding: 10px;
       }
     }
 
@@ -120,11 +169,20 @@
     label {
       top: 8px;
       font-size: $font-size-small;
+      &.switch-label {
+        top: 0;
+      }
 
       &.show-label {
         font-size: 12px;
         top: -9px;
         font-weight: 500;
+        color: $ac-color-value;
+        &.is-required {
+          &:after {
+            width: calc(100% + 10px);
+          }
+        }
       }
     }
 
@@ -138,6 +196,7 @@
       }
     }
   }
+
   &.is-extra-small {
     input {
       height: 32px;
@@ -165,6 +224,9 @@
     label {
       top: 8px;
       font-size: $font-size-small;
+      &.switch-label {
+        top: 0;
+      }
 
       &.show-label {
         font-size: 12px;
@@ -182,13 +244,14 @@
       }
     }
   }
+
   &:last-child {
     margin-bottom: 0;
   }
 
   &.is-dark {
     input {
-      background: $ac-bg-dark;
+      background-color: $ac-color-heading;
       border-color: transparent;
       color: $ac-white;
 
@@ -209,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;
@@ -229,14 +292,14 @@
       left: 10px;
       padding: 0 5px;
       font-size: $font-size-small;
-      color: $ac-black;
+      color: $ac-color-value;
 
       &:after {
         position: absolute;
         content: "";
         left: 0;
         top: 50%;
-        background: $ac-white;
+        background-color: $ac-white;
         width: 100%;
         height: 2px;
         margin-top: -1px;
@@ -253,7 +316,7 @@
 
   .button {
     &.is-information {
-      background: transparent;
+      background-color: transparent;
       border: none;
       position: absolute;
       right: 0;
@@ -264,14 +327,14 @@
       &:focus {
         outline: none;
         box-shadow: none;
-        background: #e4e8ef;
+        background-color: #e4e8ef;
         transform: scale(0.8);
       }
     }
   }
 
   .ac-search-button {
-    background: transparent;
+    background-color: transparent;
     border: none;
     position: absolute;
     left: 0;
@@ -279,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: $ac-input-bg-color;
+    background-color: $ac-blue-light;
     width: 100%;
     height: auto;
     box-shadow: 0px 4px 16px rgba(132, 147, 168, 0.6);
@@ -302,7 +365,12 @@
           transition: 0.3s;
 
           &:hover {
-            background: scale-color($color: $ac-primary, $lightness: 80%);
+            background-color: hsla(
+              var(--hsl-hue),
+              var(--hsl-saturation),
+              var(--hsl-lightness),
+              0.2
+            );
             color: $ac-primary;
           }
         }
@@ -311,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;
       }
     }
   }
@@ -338,22 +406,25 @@
   .ac-card,
   textarea {
     background-color: $ac-white;
+    color: $ac-color-text;
     height: 45px;
     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;
 
     &:hover {
-      border-color: $ac-border-hover;
+      border-color: $ac-gray-lightest;
     }
 
     &.bg-white {
       background-color: $ac-white;
     }
-
+    &.StripeElement--focus {
+      border: 1px solid $ac-primary;
+    }
     &:focus {
       border: 1px solid $ac-primary;
       outline: none;
@@ -390,11 +461,12 @@
 
   span.eye {
     i.fa {
-      color: $ac-border;
+      color: $ac-label-text;
       position: absolute;
       cursor: pointer;
       padding: 15px;
       right: 0;
+      top: 0;
     }
   }
 
@@ -429,7 +501,7 @@
           top: 10px;
           z-index: 1;
           font-size: $font-size-small;
-          color: $ac-border;
+          color: $ac-label-text;
           font-weight: 400;
         }
       }
@@ -449,11 +521,11 @@
   }
 
   label {
-    background-color: $ac-input-bg-color;
+    background-color: transparent;
     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 {
@@ -462,7 +534,7 @@
     }
 
     &:hover {
-      border-color: $ac-border-hover;
+      border-color: $ac-gray-lightest;
     }
 
     &.bg-white {
@@ -477,6 +549,23 @@
   }
 }
 
+input#captcha {
+  background-color: $ac-white;
+  height: 36px;
+  font-weight: 400;
+  width: 100%;
+  border-radius: 4px;
+  border: 1px solid $ac-white-light;
+  padding: 8px 15px;
+  font-size: 13px;
+  transition: background-color 0.3s ease-in-out;
+
+  &:focus {
+    outline: none;
+    border-bottom: 1px solid $ac-label-text;
+  }
+}
+
 // AC-Checkbox
 .ac-single-checkbox {
   .is-checkradio {
@@ -497,7 +586,7 @@
   .is-checkradio[type="checkbox"].ac-checkbox + label::after {
     top: 6px;
     left: 6px;
-    border-color: #54657e;
+    border-color: $ac-gray-lightest;
     width: 0.3rem;
     height: 0.5rem;
   }
@@ -507,25 +596,29 @@
   }
 
   .is-checkradio[type="checkbox"].ac-checkbox + label {
-    color: $ac-link-black;
+    color: $ac-color-text;
     font-size: 13px !important;
     padding-left: 25px;
     user-select: none;
   }
+
   .is-checkradio[type="checkbox"].ac-checkbox:checked + label {
     color: $ac-primary !important;
   }
+
   .is-checkradio[type="checkbox"].ac-checkbox + label {
-    color: $ac-link-black;
+    color: $ac-color-text;
     font-size: 13px;
     padding-left: 25px;
     user-select: none;
   }
+
   .is-checkradio[type="checkbox"],
   .is-checkradio[type="radio"] {
     display: none;
   }
 }
+
 .ac-single-radio {
   &.is-selected {
     .is-checkradio[type="radio"].ac-radio + label {
@@ -538,12 +631,14 @@
 .is-checkradio[type="checkbox"] + label:before {
   top: 3px;
 }
+
 // AC-Switch
 .ac-single-switch {
   label {
     user-select: none;
     font-size: 13px;
     font-weight: 400;
+    color: $ac-color-text;
 
     &::before {
       background-color: #cad3df;
@@ -554,9 +649,42 @@
     margin-top: 6px;
   }
 
+  &.is-small {
+    label {
+      font-size: 13px !important;
+    }
+    .switch[type="checkbox"] + label {
+      font-size: 13px;
+      padding-top: 0;
+      padding-left: 40px;
+      height: auto;
+
+      &::before {
+        width: 30px;
+        height: 16.2px;
+      }
+
+      &::after {
+        top: 2px;
+        left: 2px;
+        width: 12px;
+        height: 12px;
+      }
+    }
+
+    .switch[type="checkbox"]:checked + label {
+      &::after {
+        left: 15px;
+      }
+    }
+  }
+
   .switch {
     &[type="checkbox"] + label {
       padding-top: 3px;
+      &::before {
+        background-color: $ac-gray-light;
+      }
     }
 
     &.ac-switch {
@@ -587,6 +715,14 @@
   }
 }
 
+.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;
@@ -599,17 +735,17 @@
 
   input {
     border: none;
-    background: transparent;
+    background-color: transparent;
     font-size: 18px;
     font-weight: 400;
     font-family: $ac-family-heading;
-    color: #333;
+    color: $ac-color-value;
     width: 100%;
     padding: 5px 0;
 
     &:focus {
       outline: none;
-      border-bottom: 1px solid $ac-border;
+      border-bottom: 1px solid $ac-label-text;
     }
   }
 }
@@ -621,6 +757,7 @@
       padding-left: 25px;
       font-size: 13px;
       padding: 0.3rem 0.5rem 0.2rem 1.5rem;
+
       &::after {
         background-color: $ac-primary;
         width: 16px;
@@ -657,7 +794,24 @@
     }
   }
 }
+// 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

@@ -15,7 +15,7 @@
     top: 0;
     width: 100%;
     height: 100%;
-    background: #000;
+    background-color: $ac-black;
     z-index: -1;
     opacity: 0.5;
   }
@@ -41,19 +41,19 @@
 
   &.is-large {
     .ac-modal-inner {
-      width: 1000px;
+      width: 1000px !important;
     }
   }
 
   .ac-modal-inner {
     margin: 0 auto;
-    background: $ac-white;
+    background-color: $ac-white;
     border-radius: 4px;
     overflow: hidden;
     box-shadow: 12px 26px 118px rgba(0, 0, 0, 0.16);
 
     .ac-modal-header {
-      background: $ac-white;
+      background-color: $ac-white;
       padding: 10px 20px;
       display: flex;
       align-items: center;
@@ -96,6 +96,7 @@
             &.is-description {
               font-family: $ac-family-heading;
               font-weight: 400;
+              color: $ac-color-value;
 
               strong {
                 font-weight: 500;
@@ -107,7 +108,7 @@
     }
 
     .ac-modal-footer {
-      border-top: 1px solid $ac-modal-header-bg;
+      border-top: 1px solid $ac-white-light;
       padding: 10px 20px;
     }
   }