add input style

1 files changed, 74 insertions, 0 deletions

diff --git a/src/forms.less b/src/forms.less
new file mode 100644
index 0000000..95ed387
--- /dev/null
+++ b/src/forms.less
@@ -0,0 +1,74 @@
+// Forms
+.form-group:not(:last-child) {
+  margin-bottom: 1rem;
+}
+form,
+.form-group {
+  .label {
+    display: block;
+    margin-bottom: .5rem;
+  }
+}
+.input {
+  position: relative;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: 3.2rem;
+  background-color: #fff;
+  background-image: none;
+  border: .1rem solid @control-color;
+  border-radius: 3px;
+  color: @body-font-color;
+  font-size: 1.4rem;
+  line-height: 1.6rem;
+  padding: .7rem .8rem;
+  -webkit-appearance: none;
+  outline: 0;
+
+  &:focus {
+    border-color: @core-color;
+  }
+
+  &[disabled] {
+    opacity: .75;
+    background-color: #eeeff2;
+    pointer-events: none;
+  }
+
+  // Input Small
+  &.input-sm {
+    height: 2.4rem;
+    border-radius: 2px;
+    font-size: 1.2rem;
+    line-height: 1.4rem;
+    padding: .4rem .6rem;
+  }
+
+  // Input Large
+  &.input-lg {
+    height: 4.2rem;
+    border-radius: 4px;
+    font-size: 1.8rem;
+    line-height: 2rem;
+    padding: 1rem 1.2rem;
+  }
+
+  // Input Inlines
+  &.input-inline {
+    width: auto;
+    display: inline-block;
+  }
+
+  // Status
+  &.is-success {
+    border-color: @control-color-success;
+  }
+  &.is-danger {
+    border-color: @control-color-danger;
+  }
+
+  // TODO: Input with icons
+}
+
+