aboutsummaryrefslogtreecommitdiff
path: root/_scss/components/theme/_form.scss
diff options
context:
space:
mode:
Diffstat (limited to '_scss/components/theme/_form.scss')
-rw-r--r--_scss/components/theme/_form.scss67
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;
+}