@import '../../marketplace.css'; :root { /* These variables are available in global scope through ":root" element ( tag). Variables with the same names are going to overwrite each other if CSS Properties' (PostCSS plugin) configuration "preserve: true" is used - meaning that variables are left to CSS bundle. We are planning to enable it in the future since browsers support CSS Properties already. */ --CheckoutPage_logoHeight: 25px; --CheckoutPage_logoHeightDesktop: 27px; } /* Dummy Topbar */ .topbar { /* Size */ width: 100%; height: var(--topbarHeight); /* Layout for child components */ display: flex; align-items: center; justify-content: center; /* fill */ background-color: var(--matterColorLight); /* shadows */ box-shadow: var(--boxShadow); @media (--viewportLarge) { height: var(--topbarHeightDesktop); justify-content: center; } } .home { display: flex; padding: calc((var(--topbarHeight) - var(--CheckoutPage_logoHeight)) / 2) 24px; @media (--viewportLarge) { padding: calc((var(--topbarHeightDesktop) - var(--CheckoutPage_logoHeightDesktop)) / 2) 36px; } } .logoMobile { display: block; & path { fill: var(--marketplaceColor); } @media (--viewportLarge) { display: none; } } .logoDesktop { display: none; width: auto; height: 27px; @media (--viewportLarge) { display: block; } } /* /Dummy Topbar */ /** * Content: mobile flow vs desktop 2 columns * desktop has reduced version of bookListingContainer (incl. title and Stripe paymentForm). * priceBreakdown is inside separate column (detailsContainerDesktop) */ .contentContainer { flex-grow: 1; display: flex; flex-direction: column; @media (--viewportLarge) { flex-direction: row; justify-content: center; align-items: flex-start; padding: 0 48px; } } .bookListingContainer { flex-grow: 1; display: flex; flex-direction: column; @media (--viewportLarge) { flex-grow: 0; flex-basis: 519px; margin-top: 121px; margin-right: 132px; } } .aspectWrapper { position: relative; padding-bottom: 66.6667%; /* 3:2 Aspect Ratio */ background-color: var(--matterColorNegative); /* Loading BG color */ @media (--viewportLarge) { display: none; } } .rootForImage { /* Layout - image will take space defined by aspect ratio wrapper */ position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; @media (--viewportLarge) { border-radius: 2px 2px 0 0; } } .avatarWrapper { /* Position (over the listing image)*/ margin-left: 24px; margin-top: -31px; /* Rendering context to the same lavel as listing image */ position: relative; /* Layout */ display: block; @media (--viewportLarge) { margin-left: 48px; } } .avatarMobile { @media (--viewportLarge) { display: none; } } .heading { margin-top: 29px; margin-bottom: 34px; padding: 0 24px; @media (--viewportMedium) { margin-top: 27px; margin-bottom: 30px; } @media (--viewportLarge) { margin-top: 0px; margin-bottom: 54px; padding: 0; } } .title { /* Font */ @apply --marketplaceH1FontStyles; color: var(--matterColor); /* Layout */ width: 100%; margin-top: 0; margin-bottom: 7px; @media (--viewportMedium) { margin-top: 0; margin-bottom: 5px; } } .author { width: 100%; @apply --marketplaceH4FontStyles; /* Reset margins from font styles */ margin-top: 0; margin-bottom: 0; @media (--viewportMedium) { margin-top: 0; margin-bottom: 0; } } .priceBreakdownContainer { padding: 0 24px; margin-bottom: 37px; @media (--viewportMedium) { margin-bottom: 38px; } @media (--viewportLarge) { /* we don't show price breakdown since it will be visible within 2nd column (detailsContainerDesktop) */ display: none; } } .priceBreakdownTitle { /* Font */ color: var(--matterColorAnti); margin-top: 0; margin-bottom: 14px; @media (--viewportMedium) { margin-top: 0; margin-bottom: 18px; } @media (--viewportLarge) { margin-top: 0; margin-bottom: 14px; } } .paymentContainer { flex-grow: 1; display: flex; flex-direction: column; padding: 0 24px; margin-bottom: 35px; @media (--viewportMedium) { margin-top: 2px; } @media (--viewportLarge) { margin-top: 4px; padding: 0; } } .orderError, .notFoundError { margin: 11px 0 12px 0; @media (--viewportMedium) { margin: 10px 0 12px 0; } } .orderError { color: var(--failColor); } .notFoundError { color: var(--attentionColor); } .speculateError { color: var(--failColor); margin: 19px 0 1px 0; @media (--viewportLarge) { margin: 28px 48px 0 48px; } } .paymentForm { flex-grow: 1; } /* Details column is visible only on desktop */ .detailsContainerDesktop { display: none; @media (--viewportLarge) { flex-shrink: 0; display: block; /* Dimensions */ width: 409px; padding-bottom: 55px; /* Position */ margin: 120px 0 24px 0; /* Coloring */ background-color: var(--matterColorLight); border: 1px solid var(--matterColorNegative); border-radius: 2px; } } .detailsAspectWrapper { position: relative; padding-bottom: 66.6667%; /* 3:2 Aspect Ratio */ background-color: var(--matterColorNegative); /* Loading BG color */ } .detailsHeadings { display: none; @media (--viewportLarge) { display: block; margin: 0 48px; } } .detailsTitle { margin-bottom: 10px; @media (--viewportLarge) { margin-top: 17px; margin-bottom: 9px; } } .detailsSubtitle { @apply --marketplaceH5FontStyles; /* Reset margins from font styles */ margin-top: 0; margin-bottom: 0; @media (--viewportLarge) { margin-top: 0; margin-bottom: 0; } } .bookingBreakdownTitle { /* Font */ color: var(--matterColorAnti); /* Layout spacing */ margin: 5px 24px 25px 24px; @media (--viewportLarge) { margin: 37px 48px 26px 48px; } } .bookingBreakdown { @media (--viewportLarge) { margin: 0 48px; } }