feat: add base form styles

Lemonpeach · Apr 8, 2020 · 3b2edf9 · 3b2edf9
1 parent addb079
commit 3b2edf9
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 0 deletions.
diff --git a/packages/panda-san/src/form/form.scss b/packages/panda-san/src/form/form.scss
@@ -0,0 +1,5 @@
+.form {
+  .input-group + &__button {
+    margin-top: px-to-rem($input-group-gap * 3);
+  }
+}
diff --git a/packages/panda-san/src/form/index.scss b/packages/panda-san/src/form/index.scss
@@ -0,0 +1,3 @@
+@import 'form';
+@import 'input';
+@import 'input-group';
diff --git a/packages/panda-san/src/form/input-group.scss b/packages/panda-san/src/form/input-group.scss
@@ -0,0 +1,7 @@
+.input-group {
+  width: 100%;
+
+  & + & {
+    margin-top: px-to-rem($input-group-gap);
+  }
+};
diff --git a/packages/panda-san/src/form/input.scss b/packages/panda-san/src/form/input.scss
@@ -0,0 +1,26 @@
+.input {
+  @extend %base-font;
+  background-color: transparent;
+  border: 0;
+  border-bottom: solid px-to-rem(2px);
+  color: inherit;
+  padding: px-to-rem(12px) px-to-rem(4px);
+  width: 100%;
+
+  &::placeholder {
+    color: inherit;
+  }
+
+  &--select {
+    padding-left: 0;
+
+    option {
+      background-color: $white;
+      color: $black;
+    }
+  }
+
+  &--textarea {
+    min-height: px-to-rem(200px);
+  }
+}
diff --git a/packages/panda-san/src/index.scss b/packages/panda-san/src/index.scss
@@ -1,5 +1,6 @@
 @import 'variables/index';
 @import 'mixins/index';
 @import 'core/index';
+@import 'form/index';
 @import 'layout/index';
 @import 'navbar/index';
diff --git a/packages/panda-san/src/variables/form.scss b/packages/panda-san/src/variables/form.scss
@@ -0,0 +1 @@
+$input-group-gap: 12px;
diff --git a/packages/panda-san/src/variables/index.scss b/packages/panda-san/src/variables/index.scss
@@ -2,4 +2,5 @@
 @import 'colors';
 @import 'container';
 @import 'font';
+@import 'form';
 @import 'stacks';