Use common forms partial for form styles

2019-05-23 10:36:27 +02:00
parent 9a98b37bb6
commit 8bd4c6e6e1
3 changed files with 5 additions and 3 deletions
@@ -0,0 +1,96 @@
+section#add-contributor,
+section#add-contribution,
+section#add-proposal {
+
+  form {
+
+    p {
+      margin-bottom: 1rem;
+
+      &.actions {
+        padding-top: 1rem;
+        text-align: center;
+        a {
+          color: $primary-color;
+          margin-left: 1rem;
+        }
+      }
+    }
+
+    input[type=text], select {
+      width: 100%;
+      padding: 1rem;
+      border: none;
+      border-bottom: 1px solid rgba(255,255,255,0.2);
+      background-color: rgba(22, 21, 40, 0.3);
+      color: #fff;
+      font-size: 1.2rem;
+      &:focus, &.valid {
+        background-color: rgba(22, 21, 40, 0.6);
+      }
+      &::placeholder {
+        color: rgba(238, 238, 238, 0.5);
+      }
+    }
+
+    select {
+      -moz-appearance: none;
+      -webkit-appearance: none;
+      appearance: none;
+      border-radius: 0;
+      background-color: rgba(22, 21, 40, 0.6);
+      background-image:
+        linear-gradient(45deg, transparent 50%, gray 50%),
+        linear-gradient(135deg, gray 50%, transparent 50%);
+      background-position:
+        calc(100% - 1.5rem) calc(1rem + 0.5rem),
+        calc(100% - 1rem) calc(1rem + 0.5rem);
+      background-size:
+        0.5rem 0.5rem,
+        0.5rem 0.5rem;
+      background-repeat: no-repeat;
+
+      &:invalid {
+        color: rgba(238, 238, 238, 0.5);
+      }
+    }
+
+    input[type=submit] {
+      padding: 0.6rem 2rem;
+      &:disabled {
+        background-color: transparent;
+      }
+    }
+
+    input[type=checkbox] {
+      display: none;
+    }
+
+    label.checkbox {
+      line-height: 3.2rem;
+      font-size: 1.2rem;
+      &::before {
+        display: inline-block;
+        margin-right: 0.8rem;
+        height: 3.2rem;
+        width: 3.2rem;
+        font-size: 2rem;
+        background-color: rgba(22, 21, 40, 0.3);
+        border-bottom: 1px solid rgba(255,255,255,0.2);
+        text-align: center;
+        vertical-align: middle;
+        content: '✓';
+        color: rgba(255,255,255,0.2);
+      }
+    }
+
+    input[type=checkbox]:checked + label.checkbox {
+      &::before {
+        background-color: rgba(22, 21, 40, 0.6);
+        color: #fff;
+      }
+    }
+
+  }
+
+}