From 43df35213e80b9b7de69cc80f138882708a05b9b Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Tue, 18 Oct 2016 16:37:15 +0200
Subject: Improving all forms

---
 app/assets/stylesheets/forms.scss | 182 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 182 insertions(+)
 create mode 100644 app/assets/stylesheets/forms.scss

(limited to 'app/assets/stylesheets/forms.scss')

diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss
new file mode 100644
index 000000000..8abbbdaee
--- /dev/null
+++ b/app/assets/stylesheets/forms.scss
@@ -0,0 +1,182 @@
+.form-container {
+  max-width: 400px;
+  padding: 20px;
+  margin: 0 auto;
+}
+
+.simple_form {
+  .input {
+    margin-bottom: 15px;
+  }
+
+  .input.file {
+    padding: 15px 0;
+    margin-bottom: 0;
+
+    label {
+      font-family: 'Roboto';
+      font-size: 16px;
+      color: #fff;
+      width: 100px;
+      display: inline-block;
+    }
+
+    input[type=file] {
+      width: 280px;
+    }
+  }
+
+  .fields-group {
+    margin-bottom: 25px;
+  }
+
+  .input.boolean {
+    margin-bottom: 5px;
+
+    label {
+      font-family: 'Roboto';
+      font-size: 14px;
+      color: #9baec8;
+    }
+
+    input[type=checkbox] {
+      display: inline-block;
+      margin-bottom: -13px;
+    }
+  }
+
+  input[type=text], input[type=email], input[type=password], textarea {
+    background: transparent;
+    border: 0;
+    border-bottom: 2px solid #9baec8;
+    padding: 7px 0;
+    font-size: 16px;
+    color: #fff;
+    display: block;
+    width: 100%;
+    outline: 0;
+    font-family: 'Roboto';
+
+    &:invalid {
+      box-shadow: none;
+    }
+
+    &:focus:invalid {
+      border-bottom-color: #df405a;
+    }
+
+    &:required:valid {
+      border-bottom-color: #79bd9a;
+    }
+
+    &:active, &:focus {
+      border-bottom-color: #2b90d9;
+    }
+  }
+
+  .input.field_with_errors {
+    input[type=text], input[type=email], input[type=password] {
+      border-bottom-color: #df405a;
+    }
+
+    .error {
+      font-weight: 500;
+      color: #df405a;
+    }
+  }
+
+  .prompt {
+    font-size: 16px;
+    color: #9baec8;
+    text-align: center;
+
+    .prompt-highlight {
+      font-weight: 500;
+      color: #fff;
+    }
+  }
+
+  code.copypasteable {
+    display: block;
+    font-family: 'Roboto Mono', monospace;
+    font-weight: 400;
+    font-size: 12px;
+    margin-top: 20px;
+    background: #282c37;
+    border-radius: 4px;
+    padding: 2px;
+    word-wrap: break-word;
+  }
+
+  .actions {
+    margin-top: 30px;
+
+    button {
+      display: block;
+      width: 100%;
+      border: 0;
+      border-radius: 4px;
+      background: #2b90d9;
+      color: #fff;
+      font-size: 18px;
+      padding: 10px;
+      text-transform: uppercase;
+      cursor: pointer;
+      font-weight: 500;
+      outline: 0;
+      margin-bottom: 10px;
+
+      &:hover {
+        background-color: lighten(#2b90d9, 5%);
+      }
+
+      &:active, &:focus {
+        position: relative;
+        top: 1px;
+        background-color: darken(#2b90d9, 5%);
+      }
+
+      &.negative {
+        background: #df405a;
+
+        &:hover {
+          background-color: lighten(#df405a, 5%);
+        }
+
+        &:active, &:focus {
+          background-color: darken(#df405a, 5%);
+        }
+      }
+    }
+  }
+}
+
+.flash-message {
+  background: #282c37;
+  color: #9baec8;
+  border-radius: 4px;
+  padding: 15px 10px;
+  margin-bottom: 30px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  text-align: center;
+
+  strong {
+    font-weight: 500;
+  }
+}
+
+.form-footer {
+  margin-top: 30px;
+  text-align: center;
+
+  a {
+    color: #9baec8;
+    text-decoration: none;
+
+    &:hover {
+      color: #d9e1e8;
+      text-decoration: underline;
+    }
+  }
+}
+
-- 
cgit