scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-240): basic styling forms

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

5
components/Forms/BookingWidget/FormContent/formContent.module.css
View File

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

8
components/Forms/BookingWidget/FormContent/index.tsx
View File

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