From 58cda9cc7fb79ca9df6746de7f9662bc08dc156a Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Fri, 13 Oct 2017 12:29:40 +0200
Subject: initial commit

---
 src/styles/input.scss | 99 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 src/styles/input.scss

(limited to 'src/styles/input.scss')

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;
+      }
+    }
+  }
+}
-- 
cgit v1.2.3-54-g00ecf