1 files changed, 69 insertions, 0 deletions
diff --git a/frontend/src/components/fields/ChoiceField.scss b/frontend/src/components/fields/ChoiceField.scss
new file mode 100644
index 0000000..7f32b0e
--- /dev/null
+++ b/frontend/src/components/fields/ChoiceField.scss
@@ -0,0 +1,69 @@
+@import '../../colors.scss';
+
+.choice-field {
+  font-size: 0.9em;
+
+  .field-name {
+    margin: 0;
+  }
+
+  .field-select {
+    position: relative;
+    margin-top: 5px;
+
+    .field-value {
+      background-color: $color-primary-2;
+      border: none;
+      color: $color-primary-4;
+      border-radius: 5px;
+      padding: 7px 10px;
+      cursor: pointer;
+
+      &:after {
+        content: "⋎";
+        position: absolute;
+        right: 10px;
+      }
+    }
+
+    .field-options {
+      position: absolute;
+      top: 35px;
+      width: 100%;
+      z-index: 20;
+      border-top: 3px solid $color-primary-0;
+      border-radius: 5px;
+      background-color: $color-primary-2;
+      display: none;
+
+      .field-option {
+        display: block;
+        padding: 5px 10px;
+        cursor: pointer;
+        border-radius: 5px;
+      }
+
+      .field-option:hover {
+        background-color: $color-primary-1;
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .field-select.select-expanded {
+    .field-options {
+      display: block;
+    }
+
+    .field-value:after {
+      content: "⋏";
+    }
+  }
+
+  &.field-small {
+    font-size: 0.8em;
+  }
+}