1 files changed, 123 insertions, 0 deletions
diff --git a/frontend/styles/form.sass b/frontend/styles/form.sass
new file mode 100644
index 0000000..fc25019
--- /dev/null
+++ b/frontend/styles/form.sass
@@ -0,0 +1,123 @@
+@use 'colors'
+@use 'sass:color';
+
+$input-height: 2.5rem
+$input-border-radius: 0.125rem
+$input-border-color: colors.$gray-dark
+$input-color-height: 0.7 * $input-height
+
+.g-Label
+    display: flex
+    flex-direction: column
+    margin-bottom: 1rem
+    font-size: 0.9rem
+
+    & > :first-child
+        margin-top: 0.25rem
+
+.g-Input
+    display: flex
+    height: $input-height
+    border: 1px solid $input-border-color
+    border-radius: $input-border-radius
+    padding: 0 0.5rem
+    font-size: inherit
+    font-family: inherit
+
+    &[type="color"]
+        padding: 0
+        border: none
+        width: 100px
+        height: $input-color-height
+
+.g-Textarea
+    padding: 0.5rem
+    resize: vertical
+    font-size: inherit
+    font-family: inherit
+    height: $input-height
+    min-height: $input-height
+
+.g-Select
+    display: flex
+    height: $input-height
+    border: 1px solid $input-border-color
+    border-radius: $input-border-radius
+    padding: 0 0.5rem
+    font-size: inherit
+
+.g-Button
+    display: flex
+    align-items: center
+    justify-content: center
+    padding: 0.5rem
+    height: $input-height
+    cursor: pointer
+    border: none
+    border-radius: $input-border-radius
+    color: black
+    font-size: 1rem
+
+    &:disabled
+        background-color: colors.$gray
+        cursor: default
+
+    &--Primary
+        background-color: colors.$green
+        color: white
+        &:not(:disabled):hover
+            background-color: color.scale(colors.$green, $lightness: 10%)
+
+    &--Danger
+        background-color: colors.$red
+        color: white
+        &:not(:disabled):hover
+            background-color: color.scale(colors.$red, $lightness: 10%)
+
+    &--FullWidth
+        width: 100%
+
+.g-ColorLine
+    display: flex
+    gap: 2rem
+    align-items: center
+
+.g-ColorButtons
+    display: flex
+    gap: 1rem
+
+.g-ColorButton
+    border-radius: 50%
+    width: $input-color-height
+    height: $input-color-height
+    border: none
+    margin-top: 0.25rem
+    cursor: pointer
+
+.g-FormError
+    color: colors.$red
+    margin-bottom: 2rem
+    text-align: center
+
+.g-Form__SubmitParent
+    position: relative
+
+    .g-Button--Primary + .g-Form__SubmitSpinner
+        background-color: colors.$green
+
+    .g-Button--Danger + .g-Form__SubmitSpinner
+        background-color: colors.$red
+
+    & > .g-Form__SubmitSpinner
+        position: absolute
+        top: 0
+        bottom: 0
+        left: 0
+        right: 0
+        display: flex
+        align-items: center
+        justify-content: center
+
+        svg
+            height: $input-height * 0.6
+            fill: white