Decor form

Signed-off-by: Valentin Popov <info@valentineus.link>

1 files changed, 67 insertions, 0 deletions

diff --git a/_scss/components/theme/_form.scss b/_scss/components/theme/_form.scss
new file mode 100644
index 0000000..6efcdcf
--- /dev/null
+++ b/_scss/components/theme/_form.scss
@@ -0,0 +1,67 @@
+@import 'utilities/appearance';
+@import 'utilities/boxshadow';
+
+input:not([type]),
+input[type='color'],
+input[type='date'],
+input[type='datetime'],
+input[type='datetime-local'],
+input[type='email'],
+input[type='month'],
+input[type='number'],
+input[type='password'],
+input[type='search'],
+input[type='tel'],
+input[type='text'],
+input[type='url'],
+input[type='week'],
+select,
+textarea {
+  background-color: transparent;
+  border: .1rem solid $color-quaternary;
+  border-radius: .4rem;
+  box-sizing: inherit;
+  height: 3.8rem;
+  padding: .6rem 1rem;
+  width: 100%;
+
+  @include appearance(none);
+  @include boxshadow(none);
+
+  &:focus {
+    border-color: $color-primary;
+    outline: 0;
+  }
+}
+
+select {
+  padding-right: 3rem;
+}
+
+textarea {
+  min-height: 6.5rem;
+}
+
+label,
+legend {
+  display: block;
+  font-size: 1.6rem;
+  font-weight: 700;
+  margin-bottom: .5rem;
+}
+
+fieldset {
+  border-width: 0;
+  padding: 0;
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+  display: inline;
+}
+
+.label-inline {
+  display: inline-block;
+  font-weight: normal;
+  margin-left: .5rem;
+}