1 files changed, 99 insertions, 0 deletions

diff --git a/src/styles/input.scss b/src/styles/input.scss
new file mode 100644
index 000000000..814dce5f8
--- /dev/null
+++ b/src/styles/input.scss
@@ -0,0 +1,99 @@
+@import './config.scss';
+@import './mixins.scss';
+
+.franz-form {
+  .franz-form__field {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    margin-bottom: 20px;
+
+    &.has-error {
+      .franz-form__input-wrapper {
+        border-color: $theme-brand-danger;
+      }
+
+      .franz-form__input-modifier {
+        border-color: $theme-brand-danger;
+      }
+    }
+  }
+
+  .franz-form__label {
+    @include formLabel();
+  }
+
+  .franz-form__error {
+    color: $theme-brand-danger;
+    margin-top: 10px;
+    order: 2;
+  }
+
+  .franz-form__input-wrapper {
+    display: flex;
+    width: 100%;
+    order: 1;
+    border-radius: $theme-border-radius-small;
+    background: $theme-gray-lightest;
+    border: 1px solid $theme-gray-lighter;
+    flex-wrap: wrap;
+  }
+
+  .franz-form__input {
+    flex: 1;
+    border: 0;
+    background: none;
+    width: 100%;
+    padding: 8px;
+    // font-size: 18px;
+    color: $theme-gray;
+  }
+
+  .franz-form__input-prefix,
+  .franz-form__input-suffix {
+    padding: 0 10px;
+    background: $theme-gray-lighter;
+    color: $theme-gray-light;
+    line-height: 35px;
+  }
+
+  .franz-form__input-modifier {
+    padding: 0 20px;
+    border-left: 1px solid $theme-gray-lighter;
+    color: $theme-gray-light;
+    font-size: 20px;
+  }
+
+  .franz-form__password-score {
+    background: $theme-gray-lighter;
+    height: 5px;
+    flex-basis: 100%;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+
+    meter {
+      width: 100%;
+      height: 100%;
+      display: block;
+      border-bottom-left-radius: 3px;
+      border-bottom-right-radius: 3px;
+      overflow: hidden;
+
+      &::-webkit-meter-bar {
+        background: none;
+      }
+
+      &::-webkit-meter-even-less-good-value {
+        background: $theme-brand-danger;
+      }
+
+      &::-webkit-meter-suboptimum-value {
+        background: $theme-brand-warning;
+      }
+
+      &::-webkit-meter-optimum-value {
+        background: $theme-brand-success;
+      }
+    }
+  }
+}