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

feat(SW-240): add borders

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-08-13 15:09:03 +02:00
parent 8c339fa593
commit 5a0d1c6d7b
2 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/BookingWidget/bookingWidget.module.css
View File

@@ -25,6 +25,10 @@
font-size: var(--typography-Caption-Bold-Desktop-fontSize); font-size: var(--typography-Caption-Bold-Desktop-fontSize);
} }
.border {
border-right: 1px solid var(--Base-Surface-Subtle-Normal);
}
.where { .where {
width: 100%; width: 100%;
max-width: 280px; max-width: 280px;

8
components/BookingWidget/index.tsx
View File

@@ -54,7 +54,7 @@ export function BookingWidget() {
<form onSubmit={methods.handleSubmit(onSubmit)} className={styles.form}> <form onSubmit={methods.handleSubmit(onSubmit)} className={styles.form}>
<FormProvider {...methods}> <FormProvider {...methods}>
<div className={styles.input}> <div className={styles.input}>
<div className={styles.where}> <div className={`${styles.where} ${styles.border}`}>
<Body <Body
color="red" color="red"
textTransform="bold" textTransform="bold"
@@ -63,7 +63,7 @@ export function BookingWidget() {
{intl.formatMessage({ id: "Where to" })} {intl.formatMessage({ id: "Where to" })}
</Body> </Body>
</div> </div>
<div className={styles.when}> <div className={`${styles.when} ${styles.border}`}>
<Body <Body
color="red" color="red"
textTransform="bold" textTransform="bold"
@@ -72,7 +72,7 @@ export function BookingWidget() {
{intl.formatMessage({ id: "When" })} {intl.formatMessage({ id: "When" })}
</Body> </Body>
</div> </div>
<div className={styles.rooms}> <div className={`${styles.rooms} ${styles.border}`}>
<Body <Body
color="red" color="red"
textTransform="bold" textTransform="bold"
@@ -81,7 +81,7 @@ export function BookingWidget() {
{intl.formatMessage({ id: "Rooms & Guests" })} {intl.formatMessage({ id: "Rooms & Guests" })}
</Body> </Body>
</div> </div>
<div className={styles.vouchers}> <div className={`${styles.vouchers} ${styles.border}`}>
<Body <Body
color="textMediumContrast" color="textMediumContrast"
textTransform="bold" textTransform="bold"