feat(SW-240): basic styling forms

This commit is contained in:
Fredrik Thorsson
2024-08-15 13:40:53 +02:00
parent 2d45a637e5
commit 3eaaa9aca2
2 changed files with 9 additions and 4 deletions

View File

@@ -3,6 +3,11 @@
gap: var(--Spacing-x2);
}
.input input[type="text"] {
border: none;
padding: var(--Spacing-x1) var(--Spacing-x0);
}
.bodyFontSize {
font-size: var(--typography-Caption-Bold-Desktop-fontSize);
}

View File

@@ -22,19 +22,19 @@ export default function FormContent() {
<Body color="red" textTransform="bold" className={styles.bodyFontSize}>
{where}
</Body>
<input placeholder={where} />
<input type="text" placeholder={where} />
</div>
<div className={`${styles.when} ${styles.border}`}>
<Body color="red" textTransform="bold" className={styles.bodyFontSize}>
{when}
</Body>
<input placeholder={when} />
<input type="text" placeholder={when} />
</div>
<div className={`${styles.rooms} ${styles.border}`}>
<Body color="red" textTransform="bold" className={styles.bodyFontSize}>
{rooms}
</Body>
<input placeholder={rooms} />
<input type="text" placeholder={rooms} />
</div>
<div className={`${styles.vouchers} ${styles.border}`}>
<Body
@@ -44,7 +44,7 @@ export default function FormContent() {
>
{vouchers}
</Body>
<input placeholder={vouchers} />
<input type="text" placeholder={vouchers} />
</div>
<div className={styles.options}>
<div className={styles.option}>