From aa4b3e7fcc554cfb9aa370d1ad0fc503b781c1a1 Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Wed, 11 Apr 2018 14:29:42 +0300 Subject: [PATCH 1/2] Prefix local CSS properties with component name Since the CSS custom properties are defined in the :root, they will be global when the variables are preserved in the output bundle. This changes them to something globally unique. --- src/components/Avatar/Avatar.css | 35 ++++++++--------- src/components/FieldDateInput/DateInput.css | 32 ++++++++-------- .../FieldDateRangeInput/DateRangeInput.css | 38 ++++++++++--------- .../ImageCarousel/ImageCarousel.css | 6 +-- .../LocationAutocompleteInput.css | 21 +++++----- .../ManageListingCard/ManageListingCard.css | 16 ++++---- .../PropertyGroup/PropertyGroup.css | 30 +++++++-------- src/components/SectionHero/SectionHero.css | 16 ++++---- src/components/TabNav/TabNav.css | 10 ++--- src/components/Topbar/Topbar.css | 4 +- .../TopbarDesktop/TopbarDesktop.css | 24 ++++++------ .../TopbarMobileMenu/TopbarMobileMenu.css | 6 +-- src/containers/CheckoutPage/CheckoutPage.css | 8 ++-- .../ContactDetailsForm/ContactDetailsForm.css | 8 ++-- .../EditListingDescriptionForm.css | 8 ++-- .../EditListingFeaturesForm.css | 16 +++----- .../EditListingLocationForm.css | 9 ----- .../EditListingPhotosForm.css | 6 +-- .../EditListingPoliciesForm.css | 6 +-- src/containers/LandingPage/LandingPage.css | 18 ++++----- .../ProfileSettingsForm.css | 32 ++++++++-------- src/containers/SearchPage/SearchPage.css | 6 +-- .../TopbarSearchForm/TopbarSearchForm.css | 22 +++++++---- 23 files changed, 184 insertions(+), 193 deletions(-) diff --git a/src/components/Avatar/Avatar.css b/src/components/Avatar/Avatar.css index bc7a3549..9a332575 100644 --- a/src/components/Avatar/Avatar.css +++ b/src/components/Avatar/Avatar.css @@ -1,15 +1,12 @@ @import '../../marketplace.css'; :root { - --avatarSize: 40px; - --avatarSizeMedium: 60px; - --avatarSizeLarge: 96px; - - --bgColorTop: var(--marketplaceColorLight); - --bgColorBottom: var(--marketplaceColor); + --Avatar_size: 40px; + --Avatar_sizeMedium: 60px; + --Avatar_sizeLarge: 96px; /* Base for all avatars */ - --avatarBase: { + --Avatar_base: { font-family: 'sofiapro', Helvetica, Arial, sans-serif; border-radius: 50%; @@ -19,7 +16,11 @@ justify-content: center; /* Colors */ - background-image: linear-gradient(-180deg, var(--bgColorTop) 0%, var(--bgColorBottom) 100%); + background-image: linear-gradient( + -180deg, + var(--marketplaceColorLight) 0%, + var(--marketplaceColor) 100% + ); color: var(--matterColorLight); &:hover { @@ -34,11 +35,11 @@ /* Font is specific to this component, but defining it in marketplace.css makes it easier * to change font if brand look-and-feel needs such changes. */ - @apply --avatarBase; + @apply --Avatar_base; /* Layout */ - width: var(--avatarSize); - height: var(--avatarSize); + width: var(--Avatar_size); + height: var(--Avatar_size); } .initials { @@ -56,11 +57,11 @@ /* Medium Avatar */ .mediumAvatar { - @apply --avatarBase; + @apply --Avatar_base; /* Fixed dimensions */ - width: var(--avatarSizeMedium); - height: var(--avatarSizeMedium); + width: var(--Avatar_sizeMedium); + height: var(--Avatar_sizeMedium); } .mediumAvatar .initials { @@ -72,11 +73,11 @@ /* Large Avatar */ .largeAvatar { - @apply --avatarBase; + @apply --Avatar_base; /* Fixed dimensions */ - width: var(--avatarSizeLarge); - height: var(--avatarSizeLarge); + width: var(--Avatar_sizeLarge); + height: var(--Avatar_sizeLarge); } .largeAvatar .initials { diff --git a/src/components/FieldDateInput/DateInput.css b/src/components/FieldDateInput/DateInput.css index 821521a3..e4e73ef2 100644 --- a/src/components/FieldDateInput/DateInput.css +++ b/src/components/FieldDateInput/DateInput.css @@ -1,9 +1,11 @@ @import '../../marketplace.css'; :root { - --selectionHeight: 36px; - --hoveredOverlayColor: rgba(255, 255, 255, 0.2); - --datepickerDistanceToTop: 252px; + --DateInput_selectionHeight: 36px; + --DateInput_hoveredOverlayColor: rgba(255, 255, 255, 0.2); + + /* Distance to top */ + --DateInput_top: 252px; } .inputRoot { @@ -20,7 +22,7 @@ /* Similar problem as in issue: https://github.com/airbnb/react-dates/issues/947 */ top: 36px !important; width: 100%; - min-height: calc(100vh - var(--datepickerDistanceToTop)); + min-height: calc(100vh - var(--DateInput_top)); background-color: var(--marketplaceColor); @media (--viewportMedium) { @@ -118,7 +120,7 @@ justify-content: center; align-items: center; width: 100%; - height: var(--selectionHeight); + height: var(--DateInput_selectionHeight); background-image: url("data:image/svg+xml;utf8,"); background-position: center 28px; } @@ -134,15 +136,15 @@ justify-content: center; align-items: center; width: 100%; - height: var(--selectionHeight); - background-color: var(--hoveredOverlayColor); + height: var(--DateInput_selectionHeight); + background-color: var(--DateInput_hoveredOverlayColor); } & :global(.CalendarDay__selected_span .renderedDay) { display: flex; justify-content: center; align-items: center; width: 100%; - height: var(--selectionHeight); + height: var(--DateInput_selectionHeight); background-color: var(--successColor); transition: all 0.2s ease-out; } @@ -156,9 +158,9 @@ justify-content: center; align-items: center; width: 100%; - height: var(--selectionHeight); + height: var(--DateInput_selectionHeight); background-color: var(--successColor); - border-radius: calc(var(--selectionHeight) / 2); + border-radius: calc(var(--DateInput_selectionHeight) / 2); } /* Remove default bg-color and use our extra span instead '.renderedDay' */ & :global(.CalendarDay__after-hovered) { @@ -169,16 +171,16 @@ justify-content: center; align-items: center; width: 100%; - height: var(--selectionHeight); - background-color: var(--hoveredOverlayColor); + height: var(--DateInput_selectionHeight); + background-color: var(--DateInput_hoveredOverlayColor); } & :global(.CalendarDay:hover .renderedDay) { display: flex; justify-content: center; align-items: center; width: 100%; - height: var(--selectionHeight); - background-color: var(--hoveredOverlayColor); + height: var(--DateInput_selectionHeight); + background-color: var(--DateInput_hoveredOverlayColor); } /* Remove default bg-color and use our extra span instead '.renderedDay' */ & :global(.CalendarDay__blocked_out_of_range), @@ -219,7 +221,7 @@ /* Similar problem as in issue: https://github.com/airbnb/react-dates/issues/947 */ top: 34px !important; border-top: 2px solid var(--matterColorDark); - min-height: calc(100vh - var(--datepickerDistanceToTop) + 2px); + min-height: calc(100vh - var(--DateInput_top) + 2px); @media (--viewportMedium) { /* !important is added to top because react-dates uses inline style for height */ diff --git a/src/components/FieldDateRangeInput/DateRangeInput.css b/src/components/FieldDateRangeInput/DateRangeInput.css index 4549621b..0915fe95 100644 --- a/src/components/FieldDateRangeInput/DateRangeInput.css +++ b/src/components/FieldDateRangeInput/DateRangeInput.css @@ -1,9 +1,11 @@ @import '../../marketplace.css'; :root { - --selectionHeight: 36px; - --hoveredOverlayColor: rgba(255, 255, 255, 0.2); - --datepickerDistanceToTop: 252px; + --DateRangeInput_selectionHeight: 36px; + --DateRangeInput_hoveredOverlayColor: rgba(255, 255, 255, 0.2); + + /* Distance to top */ + --DateRangeInput_top: 252px; } .inputRoot { @@ -20,7 +22,7 @@ /* Similar problem as in issue: https://github.com/airbnb/react-dates/issues/947 */ top: 36px !important; width: 100%; - min-height: calc(100vh - var(--datepickerDistanceToTop)); + min-height: calc(100vh - var(--DateRangeInput_top)); background-color: var(--marketplaceColor); @media (--viewportMedium) { @@ -113,7 +115,7 @@ justify-content: center; align-items: center; width: 100%; - height: var(--selectionHeight); + height: var(--DateRangeInput_selectionHeight); background-image: url("data:image/svg+xml;utf8,"); background-position: center 28px; } @@ -129,15 +131,15 @@ justify-content: center; align-items: center; width: 100%; - height: var(--selectionHeight); - background-color: var(--hoveredOverlayColor); + height: var(--DateRangeInput_selectionHeight); + background-color: var(--DateRangeInput_hoveredOverlayColor); } & :global(.CalendarDay__selected_span .renderedDay) { display: flex; justify-content: center; align-items: center; width: 100%; - height: var(--selectionHeight); + height: var(--DateRangeInput_selectionHeight); background-color: var(--successColor); transition: all 0.2s ease-out; } @@ -151,10 +153,10 @@ justify-content: center; align-items: center; width: 100%; - height: var(--selectionHeight); + height: var(--DateRangeInput_selectionHeight); background-color: var(--successColor); - border-top-left-radius: calc(var(--selectionHeight) / 2); - border-bottom-left-radius: calc(var(--selectionHeight) / 2); + border-top-left-radius: calc(var(--DateRangeInput_selectionHeight) / 2); + border-bottom-left-radius: calc(var(--DateRangeInput_selectionHeight) / 2); } /* Remove default bg-color and use our extra span instead '.renderedDay' */ & :global(.CalendarDay__after-hovered_start) { @@ -165,8 +167,8 @@ justify-content: center; align-items: center; width: 100%; - height: var(--selectionHeight); - background-color: var(--hoveredOverlayColor); + height: var(--DateRangeInput_selectionHeight); + background-color: var(--DateRangeInput_hoveredOverlayColor); } /* Remove default bg-color and use our extra span instead '.renderedDay' */ & :global(.CalendarDay__selected_end) { @@ -177,18 +179,18 @@ justify-content: center; align-items: center; width: 100%; - height: var(--selectionHeight); + height: var(--DateRangeInput_selectionHeight); background-color: var(--successColor); - border-top-right-radius: calc(var(--selectionHeight) / 2); - border-bottom-right-radius: calc(var(--selectionHeight) / 2); + border-top-right-radius: calc(var(--DateRangeInput_selectionHeight) / 2); + border-bottom-right-radius: calc(var(--DateRangeInput_selectionHeight) / 2); } & :global(.CalendarDay:hover .renderedDay) { display: flex; justify-content: center; align-items: center; width: 100%; - height: var(--selectionHeight); - background-color: var(--hoveredOverlayColor); + height: var(--DateRangeInput_selectionHeight); + background-color: var(--DateRangeInput_hoveredOverlayColor); } /* Remove default bg-color and use our extra span instead '.renderedDay' */ & :global(.CalendarDay__blocked_out_of_range), diff --git a/src/components/ImageCarousel/ImageCarousel.css b/src/components/ImageCarousel/ImageCarousel.css index 92bafc6b..d678069f 100644 --- a/src/components/ImageCarousel/ImageCarousel.css +++ b/src/components/ImageCarousel/ImageCarousel.css @@ -1,9 +1,5 @@ @import '../../marketplace.css'; -:root { - --verticalPadding: 100px; -} - .root { position: relative; width: 100%; @@ -11,7 +7,7 @@ padding: 0; @media (--viewportMedium) { - padding: var(--verticalPadding) 10vw; + padding: 100px 10vw; } } diff --git a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css index 91754d97..13c0c1bb 100644 --- a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css +++ b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css @@ -1,10 +1,9 @@ @import '../../marketplace.css'; :root { - --inputHeight: 50px; - --sidePadding: 24px; - --sidePaddingDesktop: 36px; - --poweredImageHeight: 18px; + --LocationAutocompleteInput_inputHeight: 50px; + --LocationAutocompleteInput_sidePadding: 24px; + --LocationAutocompleteInput_sidePaddingDesktop: 36px; } .root { @@ -35,7 +34,7 @@ .input { flex-grow: 1; - height: var(--inputHeight); + height: var(--LocationAutocompleteInput_inputHeight); padding-left: 10px; margin: 0; line-height: unset; @@ -61,7 +60,7 @@ size and position, etc. position: absolute; width: 100%; padding-bottom: 72px; - top: var(--inputHeight); + top: var(--LocationAutocompleteInput_inputHeight); left: 0; background-color: var(--marketplaceColor); border-bottom-left-radius: var(--borderRadius); @@ -79,13 +78,13 @@ bottom of the container. position: absolute; bottom: 30px; width: 100%; - height: var(--poweredImageHeight); + height: 18px; background-image: url(./images/powered_by_google_on_non_white_hdpi.png); - background-size: auto var(--poweredImageHeight); + background-size: auto 18px; background-position: center; @media (--viewportMedium) { - background-position: center left var(--sidePaddingDesktop); + background-position: center left var(--LocationAutocompleteInput_sidePaddingDesktop); } } @@ -102,11 +101,11 @@ bottom of the container. margin: 0; /* Remove the double white space */ /* Assign enough vertical padding to make the element at least 44px high */ - padding: 9px var(--sidePadding); + padding: 9px var(--LocationAutocompleteInput_sidePadding); @media (--viewportMedium) { color: var(--matterColorLightTransparent); - padding: 10px var(--sidePaddingDesktop); + padding: 10px var(--LocationAutocompleteInput_sidePaddingDesktop); margin: 0; } diff --git a/src/components/ManageListingCard/ManageListingCard.css b/src/components/ManageListingCard/ManageListingCard.css index 62c9fd9b..fcdb89d3 100644 --- a/src/components/ManageListingCard/ManageListingCard.css +++ b/src/components/ManageListingCard/ManageListingCard.css @@ -1,7 +1,7 @@ @import '../../marketplace.css'; :root { - --coverEverything: { + --ManageListingCard_coverEverything: { position: absolute; top: 0; right: 0; @@ -25,12 +25,12 @@ .menuOverlayWrapper { /* Positioning */ - @apply --coverEverything; + @apply --ManageListingCard_coverEverything; } .menuOverlay { /* Positioning */ - @apply --coverEverything; + @apply --ManageListingCard_coverEverything; /* Overlay */ background-color: var(--matterColorAnti); @@ -41,7 +41,7 @@ .menuOverlayContent { /* Positioning */ - @apply --coverEverything; + @apply --ManageListingCard_coverEverything; /* Fonts */ @apply --marketplaceH4FontStyles; font-weight: var(--fontWeightSemiBold); @@ -84,7 +84,7 @@ .rootForImage { /* Layout - image will take space defined by aspect ratio wrapper */ - @apply --coverEverything; + @apply --ManageListingCard_coverEverything; width: 100%; border-radius: 2px; } @@ -287,7 +287,7 @@ .closedOverlayWrapper, .pendingApprovalOverlayWrapper { /* Positioning */ - @apply --coverEverything; + @apply --ManageListingCard_coverEverything; } .loadingOverlay, @@ -295,7 +295,7 @@ .closedOverlay, .pendingApprovalOverlay { /* Positioning */ - @apply --coverEverything; + @apply --ManageListingCard_coverEverything; /* Overlay background style */ background-color: var(--matterColorLight); @@ -314,7 +314,7 @@ color: var(--matterColor); /* Positioning */ - @apply --coverEverything; + @apply --ManageListingCard_coverEverything; /* Layout */ display: flex; diff --git a/src/components/PropertyGroup/PropertyGroup.css b/src/components/PropertyGroup/PropertyGroup.css index 340bbd15..8e1fdeed 100644 --- a/src/components/PropertyGroup/PropertyGroup.css +++ b/src/components/PropertyGroup/PropertyGroup.css @@ -1,11 +1,11 @@ @import '../../marketplace.css'; :root { - --lineHeight: 24px; - --lineThroughTop: calc(var(--lineHeight) - 7px); - --lineThroughBottom: calc(var(--lineHeight) - 6px); - --lineThroughTopMobile: calc(var(--lineHeight) - 9px); - --lineThroughBottomMobile: calc(var(--lineHeight) - 8px); + --PropertyGroup_lineHeight: 24px; + --PropertyGroup_lineThroughTop: calc(var(--PropertyGroup_lineHeight) - 7px); + --PropertyGroup_lineThroughBottom: calc(var(--PropertyGroup_lineHeight) - 6px); + --PropertyGroup_lineThroughTopMobile: calc(var(--PropertyGroup_lineHeight) - 9px); + --PropertyGroup_lineThroughBottomMobile: calc(var(--PropertyGroup_lineHeight) - 8px); } .root { @@ -44,7 +44,7 @@ margin-right: 8px; /* This follows line-height */ - height: var(--lineHeight); + height: var(--PropertyGroup_lineHeight); } .labelWrapper { @@ -54,7 +54,7 @@ .selectedLabel, .notSelectedLabel { @apply --marketplaceBodyFontStyles; - line-height: var(--lineHeight); + line-height: var(--PropertyGroup_lineHeight); margin: 0; } @@ -68,18 +68,18 @@ /* line-through */ background-image: linear-gradient( - transparent var(--lineThroughTopMobile), - var(--matterColorNegative) var(--lineThroughTopMobile), - var(--matterColorNegative) var(--lineThroughBottomMobile), - transparent var(--lineThroughBottomMobile) + transparent var(--PropertyGroup_lineThroughTopMobile), + var(--matterColorNegative) var(--PropertyGroup_lineThroughTopMobile), + var(--matterColorNegative) var(--PropertyGroup_lineThroughBottomMobile), + transparent var(--PropertyGroup_lineThroughBottomMobile) ); @media (--viewportMedium) { background-image: linear-gradient( - transparent var(--lineThroughTop), - var(--matterColorNegative) var(--lineThroughTop), - var(--matterColorNegative) var(--lineThroughBottom), - transparent var(--lineThroughBottom) + transparent var(--PropertyGroup_lineThroughTop), + var(--matterColorNegative) var(--PropertyGroup_lineThroughTop), + var(--matterColorNegative) var(--PropertyGroup_lineThroughBottom), + transparent var(--PropertyGroup_lineThroughBottom) ); } } diff --git a/src/components/SectionHero/SectionHero.css b/src/components/SectionHero/SectionHero.css index 81d01087..db8afbfb 100644 --- a/src/components/SectionHero/SectionHero.css +++ b/src/components/SectionHero/SectionHero.css @@ -1,9 +1,9 @@ @import '../../marketplace.css'; :root { - --desktopTitleMaxWidth: 625px; + --SectionHero_desktopTitleMaxWidth: 625px; - --animationProperties: { + --SectionHero_animation: { animation-name: animationTitle; animation-duration: 0.5s; animation-timing-function: ease-out; @@ -53,11 +53,11 @@ @apply --marketplaceHeroTitleFontStyles; color: var(--matterColorLight); - @apply --animationProperties; + @apply --SectionHero_animation; animation-delay: 0.5s; @media (--viewportMedium) { - max-width: var(--desktopTitleMaxWidth); + max-width: var(--SectionHero_desktopTitleMaxWidth); } } @@ -67,11 +67,11 @@ color: var(--matterColorLight); margin: 0 0 32px 0; - @apply --animationProperties; + @apply --SectionHero_animation; animation-delay: 0.65s; @media (--viewportMedium) { - max-width: var(--desktopTitleMaxWidth); + max-width: var(--SectionHero_desktopTitleMaxWidth); margin: 0 0 63px 0; } } @@ -80,7 +80,7 @@ border-radius: 4px; flex-shrink: 0; - @apply --animationProperties; + @apply --SectionHero_animation; animation-delay: 0.8s; @media (--viewportMedium) { @@ -104,7 +104,7 @@ border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; - @apply --animationProperties; + @apply --SectionHero_animation; animation-delay: 0.8s; @media (--viewportMedium) { diff --git a/src/components/TabNav/TabNav.css b/src/components/TabNav/TabNav.css index ad2e1be2..b51a2b2c 100644 --- a/src/components/TabNav/TabNav.css +++ b/src/components/TabNav/TabNav.css @@ -1,8 +1,8 @@ @import '../../marketplace.css'; :root { - --linkWidth: 200px; - --linkBorderWidth: 4px; + --TabNav_linkWidth: 200px; + --TabNav_linkBorderWidth: 4px; } .root { @@ -42,7 +42,7 @@ transition: var(--transitionStyleButton); background-image: url("data:image/svg+xml;utf8,"); - background-position: calc(var(--linkWidth) + var(--linkBorderWidth)) center; /* SelectedLink's width (200px) + border thickness (4px) = 204px */ + background-position: calc(var(--TabNav_linkWidth) + var(--TabNav_linkBorderWidth)) center; /* SelectedLink's width (200px) + border thickness (4px) = 204px */ &:hover { text-decoration: none; @@ -52,7 +52,7 @@ @media (--viewportLarge) { border-bottom-width: 0px; margin-bottom: 14px; - width: var(--linkWidth); + width: var(--TabNav_linkWidth); /* Remove mobile (horizontally aligned) nav styling */ padding-top: 0; @@ -70,7 +70,7 @@ color: var(--matterColorDark); @media (--viewportLarge) { - width: var(--linkWidth); + width: var(--TabNav_linkWidth); background-image: url("data:image/svg+xml;utf8,"); background-position: right center; diff --git a/src/components/Topbar/Topbar.css b/src/components/Topbar/Topbar.css index 649c5a5d..346a19cc 100644 --- a/src/components/Topbar/Topbar.css +++ b/src/components/Topbar/Topbar.css @@ -1,7 +1,7 @@ @import '../../marketplace.css'; :root { - --logoHeight: 25px; + --Topbar_logoHeight: 25px; } .root { @@ -36,7 +36,7 @@ .home { display: flex; - padding: calc((var(--topbarHeight) - var(--logoHeight)) / 2) 24px; + padding: calc((var(--topbarHeight) - var(--Topbar_logoHeight)) / 2) 24px; } .logoutButton { diff --git a/src/components/TopbarDesktop/TopbarDesktop.css b/src/components/TopbarDesktop/TopbarDesktop.css index a52f7db4..baae1854 100644 --- a/src/components/TopbarDesktop/TopbarDesktop.css +++ b/src/components/TopbarDesktop/TopbarDesktop.css @@ -5,7 +5,7 @@ /* This stretches inline element (link) to take available vertical space (big hover area), * and align baselines */ - --topbarDesktopLabelStyles: { + --TopbarDesktop_label: { display: inline-block; margin: 24px 0; text-decoration: inherit; @@ -15,7 +15,7 @@ } } - --linkHoverState: { + --TopbarDesktop_linkHover: { border-bottom: 0px solid; transition: var(--transitionStyleButton); @@ -53,7 +53,7 @@ /* logo */ .logoLink { - @apply --linkHoverState; + @apply --TopbarDesktop_linkHover; flex-shrink: 0; padding: 21px 24px 21px 24px; height: 100%; @@ -84,7 +84,7 @@ .search { @apply --marketplaceH4FontStyles; - @apply --topbarDesktopLabelStyles; + @apply --TopbarDesktop_label; color: var(--matterColor); } @@ -99,7 +99,7 @@ /* Create listing (CTA for providers) */ .createListingLink { - @apply --linkHoverState; + @apply --TopbarDesktop_linkHover; @apply --marketplaceH4FontStyles; flex-shrink: 0; @@ -120,12 +120,12 @@ } .createListing { - @apply --topbarDesktopLabelStyles; + @apply --TopbarDesktop_label; } /* Inbox */ .inboxLink { - @apply --linkHoverState; + @apply --TopbarDesktop_linkHover; @apply --marketplaceH4FontStyles; height: 100%; padding: 0 12px 0 12px; @@ -144,7 +144,7 @@ } .inbox { - @apply --topbarDesktopLabelStyles; + @apply --TopbarDesktop_label; position: relative; } @@ -185,7 +185,7 @@ /* Profile menu */ .profileMenuLabel { - @apply --linkHoverState; + @apply --TopbarDesktop_linkHover; flex-shrink: 0; display: flex; align-items: center; @@ -215,7 +215,7 @@ /* Authentication */ .signupLink { - @apply --linkHoverState; + @apply --TopbarDesktop_linkHover; flex-shrink: 0; height: 100%; padding: 0 12px 0 12px; @@ -228,7 +228,7 @@ } .loginLink { - @apply --linkHoverState; + @apply --TopbarDesktop_linkHover; flex-shrink: 0; height: 100%; padding: 0 12px 0 12px; @@ -243,7 +243,7 @@ .signup, .login { @apply --marketplaceH4FontStyles; - @apply --topbarDesktopLabelStyles; + @apply --TopbarDesktop_label; } /* left animated "border" like hover element */ diff --git a/src/components/TopbarMobileMenu/TopbarMobileMenu.css b/src/components/TopbarMobileMenu/TopbarMobileMenu.css index 8fd1d847..9aeab113 100644 --- a/src/components/TopbarMobileMenu/TopbarMobileMenu.css +++ b/src/components/TopbarMobileMenu/TopbarMobileMenu.css @@ -1,7 +1,7 @@ @import '../../marketplace.css'; :root { - --topMarginMobileMenu: 96px; + --TopbarMobileMenu_topMargin: 96px; } .root { @@ -35,7 +35,7 @@ .avatar { /* Layout */ flex-shrink: 0; - margin: var(--topMarginMobileMenu) 0 0 0; + margin: var(--TopbarMobileMenu_topMargin) 0 0 0; } .greeting { @@ -99,7 +99,7 @@ @apply --marketplaceH1FontStyles; margin-bottom: 24px; - margin-top: var(--topMarginMobileMenu); + margin-top: var(--TopbarMobileMenu_topMargin); } .authenticationLinks { white-space: nowrap; diff --git a/src/containers/CheckoutPage/CheckoutPage.css b/src/containers/CheckoutPage/CheckoutPage.css index a1a6886b..4ddc30e6 100644 --- a/src/containers/CheckoutPage/CheckoutPage.css +++ b/src/containers/CheckoutPage/CheckoutPage.css @@ -1,8 +1,8 @@ @import '../../marketplace.css'; :root { - --logoHeight: 25px; - --logoHeightDesktop: 27px; + --CheckoutPage_logoHeight: 25px; + --CheckoutPage_logoHeightDesktop: 27px; } .loading { @@ -35,10 +35,10 @@ .home { display: flex; - padding: calc((var(--topbarHeight) - var(--logoHeight)) / 2) 24px; + padding: calc((var(--topbarHeight) - var(--CheckoutPage_logoHeight)) / 2) 24px; @media (--viewportLarge) { - padding: calc((var(--topbarHeightDesktop) - var(--logoHeightDesktop)) / 2) 36px; + padding: calc((var(--topbarHeightDesktop) - var(--CheckoutPage_logoHeightDesktop)) / 2) 36px; } } diff --git a/src/containers/ContactDetailsForm/ContactDetailsForm.css b/src/containers/ContactDetailsForm/ContactDetailsForm.css index 5426aab7..f46d82ec 100644 --- a/src/containers/ContactDetailsForm/ContactDetailsForm.css +++ b/src/containers/ContactDetailsForm/ContactDetailsForm.css @@ -1,7 +1,7 @@ @import '../../marketplace.css'; :root { - --infoTextStyles: { + --ContactDetailsForm_infoText: { @apply --marketplaceH4FontStyles; color: var(--successColor); @@ -56,18 +56,18 @@ } .emailVerified { - @apply --infoTextStyles; + @apply --ContactDetailsForm_infoText; background-image: url('data:image/svg+xml;utf8,'); } .emailUnverified { - @apply --infoTextStyles; + @apply --ContactDetailsForm_infoText; color: var(--matterColorAnti); background-image: url('data:image/svg+xml;utf8,'); } .pendingEmailUnverified { - @apply --infoTextStyles; + @apply --ContactDetailsForm_infoText; color: var(--failColor); width: 100%; background-image: url('data:image/svg+xml;utf8,'); diff --git a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css index 122759b4..3105b7cf 100644 --- a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css +++ b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css @@ -1,7 +1,7 @@ @import '../../marketplace.css'; :root { - --formMargins: { + --EditListingDescriptionForm_formMargins: { margin-bottom: 24px; @media (--viewportMedium) { @@ -32,16 +32,16 @@ } .title { - @apply --formMargins; + @apply --EditListingDescriptionForm_formMargins; } .description { - @apply --formMargins; + @apply --EditListingDescriptionForm_formMargins; flex-shrink: 0; } .category { - @apply --formMargins; + @apply --EditListingDescriptionForm_formMargins; } .submitButton { diff --git a/src/containers/EditListingFeaturesForm/EditListingFeaturesForm.css b/src/containers/EditListingFeaturesForm/EditListingFeaturesForm.css index 45240cb1..67288901 100644 --- a/src/containers/EditListingFeaturesForm/EditListingFeaturesForm.css +++ b/src/containers/EditListingFeaturesForm/EditListingFeaturesForm.css @@ -1,15 +1,5 @@ @import '../../marketplace.css'; -:root { - --formMargins: { - margin-bottom: 24px; - - @media (--viewportMedium) { - margin-bottom: 32px; - } - } -} - .root { /* Expand to available space */ flex-grow: 1; @@ -28,7 +18,11 @@ } .features { - @apply --formMargins; + margin-bottom: 24px; + + @media (--viewportMedium) { + margin-bottom: 32px; + } } .error { diff --git a/src/containers/EditListingLocationForm/EditListingLocationForm.css b/src/containers/EditListingLocationForm/EditListingLocationForm.css index e53377b9..ac9cd9c9 100644 --- a/src/containers/EditListingLocationForm/EditListingLocationForm.css +++ b/src/containers/EditListingLocationForm/EditListingLocationForm.css @@ -1,14 +1,5 @@ @import '../../marketplace.css'; -:root { - --formMargins: { - margin-bottom: 24px; - - @media (--viewportMedium) { - margin-bottom: 32px; - } - } -} .root { /* Dimensions */ width: 100%; diff --git a/src/containers/EditListingPhotosForm/EditListingPhotosForm.css b/src/containers/EditListingPhotosForm/EditListingPhotosForm.css index 920e8fcb..96b25c4a 100644 --- a/src/containers/EditListingPhotosForm/EditListingPhotosForm.css +++ b/src/containers/EditListingPhotosForm/EditListingPhotosForm.css @@ -1,7 +1,7 @@ @import '../../marketplace.css'; :root { - --imageWidthDesktop: calc(50% - 12px); + --EditListingPhotosForm_imageWidthDesktop: calc(50% - 12px); } .root { @@ -22,7 +22,7 @@ margin: 24px 0 0 0; @media (--viewportLarge) { - width: var(--imageWidthDesktop); + width: var(--EditListingPhotosForm_imageWidthDesktop); margin: 0 24px 24px 0; &:nth-child(even) { @@ -47,7 +47,7 @@ } @media (--viewportLarge) { - width: var(--imageWidthDesktop); + width: var(--EditListingPhotosForm_imageWidthDesktop); margin: 0 0 24px 0; } } diff --git a/src/containers/EditListingPoliciesForm/EditListingPoliciesForm.css b/src/containers/EditListingPoliciesForm/EditListingPoliciesForm.css index 5ea21027..5d263cc9 100644 --- a/src/containers/EditListingPoliciesForm/EditListingPoliciesForm.css +++ b/src/containers/EditListingPoliciesForm/EditListingPoliciesForm.css @@ -1,7 +1,7 @@ @import '../../marketplace.css'; :root { - --formMargins: { + --EditListingPoliciesForm_formMargins: { margin-bottom: 24px; @media (--viewportMedium) { @@ -28,11 +28,11 @@ } .title { - @apply --formMargins; + @apply --EditListingPoliciesForm_formMargins; } .policy { - @apply --formMargins; + @apply --EditListingPoliciesForm_formMargins; flex-shrink: 0; } diff --git a/src/containers/LandingPage/LandingPage.css b/src/containers/LandingPage/LandingPage.css index 71bfe610..48e098de 100644 --- a/src/containers/LandingPage/LandingPage.css +++ b/src/containers/LandingPage/LandingPage.css @@ -1,9 +1,9 @@ @import '../../marketplace.css'; :root { - --sectionMarginTop: 40px; - --sectionMarginTopMedium: 60px; - --sectionMarginTopLarge: 94px; + --LandingPage_sectionMarginTop: 40px; + --LandingPage_sectionMarginTopMedium: 60px; + --LandingPage_sectionMarginTopLarge: 94px; } .root { @@ -72,15 +72,15 @@ } .sectionContent { - margin: var(--sectionMarginTop) 24px 51px 24px; + margin: var(--LandingPage_sectionMarginTop) 24px 51px 24px; @media (--viewportMedium) { - margin: var(--sectionMarginTopMedium) 7.5vw 60px 7.5vw; + margin: var(--LandingPage_sectionMarginTopMedium) 7.5vw 60px 7.5vw; } @media (--viewportLarge) { max-width: calc(1052px + 36px + 36px); - margin: var(--sectionMarginTopLarge) auto 93px auto; + margin: var(--LandingPage_sectionMarginTopLarge) auto 93px auto; padding: 0 36px 0 36px; } } @@ -95,15 +95,15 @@ /* Place the bar on top of .sectionContent top margin */ position: relative; - top: calc(-1 * var(--sectionMarginTop)); + top: calc(-1 * var(--LandingPage_sectionMarginTop)); @media (--viewportMedium) { width: 192px; height: 8px; - top: calc(-1 * var(--sectionMarginTopMedium)); + top: calc(-1 * var(--LandingPage_sectionMarginTopMedium)); } @media (--viewportLarge) { - top: calc(-1 * var(--sectionMarginTopLarge)); + top: calc(-1 * var(--LandingPage_sectionMarginTopLarge)); } } diff --git a/src/containers/ProfileSettingsForm/ProfileSettingsForm.css b/src/containers/ProfileSettingsForm/ProfileSettingsForm.css index c3f6afd9..c755444b 100644 --- a/src/containers/ProfileSettingsForm/ProfileSettingsForm.css +++ b/src/containers/ProfileSettingsForm/ProfileSettingsForm.css @@ -1,8 +1,8 @@ @import '../../marketplace.css'; :root { - --avatarSize: 96px; - --avatarSizeDesktop: 240px; + --ProfileSettingsForm_avatarSize: 96px; + --ProfileSettingsForm_avatarSizeDesktop: 240px; } .root { @@ -67,9 +67,9 @@ } .label { - width: var(--avatarSize); + width: var(--ProfileSettingsForm_avatarSize); @media (--viewportMedium) { - width: var(--avatarSizeDesktop); + width: var(--ProfileSettingsForm_avatarSizeDesktop); } } @@ -77,8 +77,8 @@ .avatarContainer { /* Dimension */ position: relative; - width: var(--avatarSize); - height: var(--avatarSize); + width: var(--ProfileSettingsForm_avatarSize); + height: var(--ProfileSettingsForm_avatarSize); /* Center content */ display: flex; @@ -87,13 +87,13 @@ /* Initial coloring */ background-color: var(--matterColorBright); - border-radius: calc(var(--avatarSize) / 2); + border-radius: calc(var(--ProfileSettingsForm_avatarSize) / 2); cursor: pointer; @media (--viewportMedium) { - width: var(--avatarSizeDesktop); - height: var(--avatarSizeDesktop); - border-radius: calc(var(--avatarSizeDesktop) / 2); + width: var(--ProfileSettingsForm_avatarSizeDesktop); + height: var(--ProfileSettingsForm_avatarSizeDesktop); + border-radius: calc(var(--ProfileSettingsForm_avatarSizeDesktop) / 2); } } @@ -193,13 +193,13 @@ .uploadingImage { /* Dimensions */ - width: var(--avatarSize); - height: var(--avatarSize); + width: var(--ProfileSettingsForm_avatarSize); + height: var(--ProfileSettingsForm_avatarSize); /* Image fitted to container */ object-fit: cover; background-color: var(--matterColorNegative); /* Loading BG color */ - border-radius: calc(var(--avatarSize) / 2); + border-radius: calc(var(--ProfileSettingsForm_avatarSize) / 2); overflow: hidden; display: block; @@ -207,9 +207,9 @@ margin: 0; @media (--viewportMedium) { - width: var(--avatarSizeDesktop); - height: var(--avatarSizeDesktop); - border-radius: calc(var(--avatarSizeDesktop) / 2); + width: var(--ProfileSettingsForm_avatarSizeDesktop); + height: var(--ProfileSettingsForm_avatarSizeDesktop); + border-radius: calc(var(--ProfileSettingsForm_avatarSizeDesktop) / 2); } } diff --git a/src/containers/SearchPage/SearchPage.css b/src/containers/SearchPage/SearchPage.css index 8c2ec0a2..1c432dea 100644 --- a/src/containers/SearchPage/SearchPage.css +++ b/src/containers/SearchPage/SearchPage.css @@ -1,7 +1,7 @@ @import '../../marketplace.css'; :root { - --containerHeight: calc(100vh - var(--topbarHeightDesktop)); + --SearchPage_containerHeight: calc(100vh - var(--topbarHeightDesktop)); } /* Can be given to Topbar when a modal is opened @@ -29,7 +29,7 @@ @media (--viewportMedium) { position: relative; padding-top: var(--topbarHeightDesktop); - min-height: var(--containerHeight); + min-height: var(--SearchPage_containerHeight); } } @@ -140,7 +140,7 @@ /* Fixed content needs width relative to viewport */ width: 50vw; - height: var(--containerHeight); + height: var(--SearchPage_containerHeight); } @media (--viewportLarge) { diff --git a/src/containers/TopbarSearchForm/TopbarSearchForm.css b/src/containers/TopbarSearchForm/TopbarSearchForm.css index e3763ed6..6b1fe30b 100644 --- a/src/containers/TopbarSearchForm/TopbarSearchForm.css +++ b/src/containers/TopbarSearchForm/TopbarSearchForm.css @@ -1,10 +1,13 @@ @import '../../marketplace.css'; :root { - --inputHeight: 53px; - --topbarMargin: 94px; - --bottomBorder: 3px; - --mobilePredictionTop: calc(var(--topbarMargin) + var(--inputHeight) - var(--bottomBorder)); + --TopbarSearchForm_inputHeight: 53px; + --TopbarSearchForm_topbarMargin: 94px; + --TopbarSearchForm_bottomBorder: 3px; + --TopbarSearchForm_mobilePredictionTop: calc( + var(--TopbarSearchForm_topbarMargin) + var(--TopbarSearchForm_inputHeight) - + var(--TopbarSearchForm_bottomBorder) + ); } .mobileInputRoot { @@ -30,7 +33,7 @@ /* Layout */ margin: 0 24px 0 0; padding: 1px 13px 13px 13px; - height: var(--inputHeight); + height: var(--TopbarSearchForm_inputHeight); /* Borders */ border-bottom-width: var(--borderRadiusMobileSearch); @@ -78,12 +81,15 @@ .mobilePredictions { position: absolute; - top: calc(var(--inputHeight) - var(--bottomBorder)); + top: calc(var(--TopbarSearchForm_inputHeight) - var(--TopbarSearchForm_bottomBorder)); left: 0; - min-height: calc(100vh - var(--mobilePredictionTop)); + min-height: calc(100vh - var(--TopbarSearchForm_mobilePredictionTop)); } .desktopPredictions { - margin-top: calc(var(--topbarHeightDesktop) - var(--inputHeight) + var(--bottomBorder)); + margin-top: calc( + var(--topbarHeightDesktop) - var(--TopbarSearchForm_inputHeight) + + var(--TopbarSearchForm_bottomBorder) + ); max-width: 434px; } From f5fb478166a1c039443e828b2532f173aa66fcaf Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Wed, 11 Apr 2018 15:59:22 +0300 Subject: [PATCH 2/2] Add comment about CSS custom properties being global --- src/components/Avatar/Avatar.css | 9 +++++++++ src/components/FieldDateInput/DateInput.css | 9 +++++++++ src/components/FieldDateRangeInput/DateRangeInput.css | 9 +++++++++ .../LocationAutocompleteInput.css | 9 +++++++++ src/components/ManageListingCard/ManageListingCard.css | 9 +++++++++ src/components/PropertyGroup/PropertyGroup.css | 9 +++++++++ src/components/SectionHero/SectionHero.css | 9 +++++++++ src/components/TabNav/TabNav.css | 9 +++++++++ src/components/Topbar/Topbar.css | 9 +++++++++ src/components/TopbarDesktop/TopbarDesktop.css | 9 +++++++++ src/components/TopbarMobileMenu/TopbarMobileMenu.css | 9 +++++++++ src/containers/CheckoutPage/CheckoutPage.css | 9 +++++++++ src/containers/ContactDetailsForm/ContactDetailsForm.css | 9 +++++++++ .../EditListingDescriptionForm.css | 9 +++++++++ .../EditListingPhotosForm/EditListingPhotosForm.css | 9 +++++++++ .../EditListingPoliciesForm/EditListingPoliciesForm.css | 9 +++++++++ src/containers/LandingPage/LandingPage.css | 9 +++++++++ .../ProfileSettingsForm/ProfileSettingsForm.css | 9 +++++++++ src/containers/SearchPage/SearchPage.css | 9 +++++++++ src/containers/TopbarSearchForm/TopbarSearchForm.css | 9 +++++++++ src/marketplace.css | 9 +++++++++ src/marketplaceFonts.css | 9 +++++++++ 22 files changed, 198 insertions(+) diff --git a/src/components/Avatar/Avatar.css b/src/components/Avatar/Avatar.css index 9a332575..93956274 100644 --- a/src/components/Avatar/Avatar.css +++ b/src/components/Avatar/Avatar.css @@ -1,6 +1,15 @@ @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. + */ + --Avatar_size: 40px; --Avatar_sizeMedium: 60px; --Avatar_sizeLarge: 96px; diff --git a/src/components/FieldDateInput/DateInput.css b/src/components/FieldDateInput/DateInput.css index e4e73ef2..fe3d5fb7 100644 --- a/src/components/FieldDateInput/DateInput.css +++ b/src/components/FieldDateInput/DateInput.css @@ -1,6 +1,15 @@ @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. + */ + --DateInput_selectionHeight: 36px; --DateInput_hoveredOverlayColor: rgba(255, 255, 255, 0.2); diff --git a/src/components/FieldDateRangeInput/DateRangeInput.css b/src/components/FieldDateRangeInput/DateRangeInput.css index 0915fe95..7229c5ff 100644 --- a/src/components/FieldDateRangeInput/DateRangeInput.css +++ b/src/components/FieldDateRangeInput/DateRangeInput.css @@ -1,6 +1,15 @@ @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. + */ + --DateRangeInput_selectionHeight: 36px; --DateRangeInput_hoveredOverlayColor: rgba(255, 255, 255, 0.2); diff --git a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css index 13c0c1bb..7c7f45a5 100644 --- a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css +++ b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css @@ -1,6 +1,15 @@ @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. + */ + --LocationAutocompleteInput_inputHeight: 50px; --LocationAutocompleteInput_sidePadding: 24px; --LocationAutocompleteInput_sidePaddingDesktop: 36px; diff --git a/src/components/ManageListingCard/ManageListingCard.css b/src/components/ManageListingCard/ManageListingCard.css index fcdb89d3..f5893e4d 100644 --- a/src/components/ManageListingCard/ManageListingCard.css +++ b/src/components/ManageListingCard/ManageListingCard.css @@ -1,6 +1,15 @@ @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. + */ + --ManageListingCard_coverEverything: { position: absolute; top: 0; diff --git a/src/components/PropertyGroup/PropertyGroup.css b/src/components/PropertyGroup/PropertyGroup.css index 8e1fdeed..c5dbcdd3 100644 --- a/src/components/PropertyGroup/PropertyGroup.css +++ b/src/components/PropertyGroup/PropertyGroup.css @@ -1,6 +1,15 @@ @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. + */ + --PropertyGroup_lineHeight: 24px; --PropertyGroup_lineThroughTop: calc(var(--PropertyGroup_lineHeight) - 7px); --PropertyGroup_lineThroughBottom: calc(var(--PropertyGroup_lineHeight) - 6px); diff --git a/src/components/SectionHero/SectionHero.css b/src/components/SectionHero/SectionHero.css index db8afbfb..14c3478e 100644 --- a/src/components/SectionHero/SectionHero.css +++ b/src/components/SectionHero/SectionHero.css @@ -1,6 +1,15 @@ @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. + */ + --SectionHero_desktopTitleMaxWidth: 625px; --SectionHero_animation: { diff --git a/src/components/TabNav/TabNav.css b/src/components/TabNav/TabNav.css index b51a2b2c..18279bce 100644 --- a/src/components/TabNav/TabNav.css +++ b/src/components/TabNav/TabNav.css @@ -1,6 +1,15 @@ @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. + */ + --TabNav_linkWidth: 200px; --TabNav_linkBorderWidth: 4px; } diff --git a/src/components/Topbar/Topbar.css b/src/components/Topbar/Topbar.css index 346a19cc..dee020ca 100644 --- a/src/components/Topbar/Topbar.css +++ b/src/components/Topbar/Topbar.css @@ -1,6 +1,15 @@ @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. + */ + --Topbar_logoHeight: 25px; } diff --git a/src/components/TopbarDesktop/TopbarDesktop.css b/src/components/TopbarDesktop/TopbarDesktop.css index baae1854..15a851ff 100644 --- a/src/components/TopbarDesktop/TopbarDesktop.css +++ b/src/components/TopbarDesktop/TopbarDesktop.css @@ -1,6 +1,15 @@ @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. + */ + /* Compose text label items on top of this */ /* This stretches inline element (link) to take available vertical space (big hover area), * and align baselines diff --git a/src/components/TopbarMobileMenu/TopbarMobileMenu.css b/src/components/TopbarMobileMenu/TopbarMobileMenu.css index 9aeab113..1c354e08 100644 --- a/src/components/TopbarMobileMenu/TopbarMobileMenu.css +++ b/src/components/TopbarMobileMenu/TopbarMobileMenu.css @@ -1,6 +1,15 @@ @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. + */ + --TopbarMobileMenu_topMargin: 96px; } diff --git a/src/containers/CheckoutPage/CheckoutPage.css b/src/containers/CheckoutPage/CheckoutPage.css index 4ddc30e6..280dd8aa 100644 --- a/src/containers/CheckoutPage/CheckoutPage.css +++ b/src/containers/CheckoutPage/CheckoutPage.css @@ -1,6 +1,15 @@ @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; } diff --git a/src/containers/ContactDetailsForm/ContactDetailsForm.css b/src/containers/ContactDetailsForm/ContactDetailsForm.css index f46d82ec..b9c4eaf7 100644 --- a/src/containers/ContactDetailsForm/ContactDetailsForm.css +++ b/src/containers/ContactDetailsForm/ContactDetailsForm.css @@ -1,6 +1,15 @@ @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. + */ + --ContactDetailsForm_infoText: { @apply --marketplaceH4FontStyles; color: var(--successColor); diff --git a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css index 3105b7cf..9d826e3d 100644 --- a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css +++ b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css @@ -1,6 +1,15 @@ @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. + */ + --EditListingDescriptionForm_formMargins: { margin-bottom: 24px; diff --git a/src/containers/EditListingPhotosForm/EditListingPhotosForm.css b/src/containers/EditListingPhotosForm/EditListingPhotosForm.css index 96b25c4a..e54a95d8 100644 --- a/src/containers/EditListingPhotosForm/EditListingPhotosForm.css +++ b/src/containers/EditListingPhotosForm/EditListingPhotosForm.css @@ -1,6 +1,15 @@ @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. + */ + --EditListingPhotosForm_imageWidthDesktop: calc(50% - 12px); } diff --git a/src/containers/EditListingPoliciesForm/EditListingPoliciesForm.css b/src/containers/EditListingPoliciesForm/EditListingPoliciesForm.css index 5d263cc9..efd970db 100644 --- a/src/containers/EditListingPoliciesForm/EditListingPoliciesForm.css +++ b/src/containers/EditListingPoliciesForm/EditListingPoliciesForm.css @@ -1,6 +1,15 @@ @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. + */ + --EditListingPoliciesForm_formMargins: { margin-bottom: 24px; diff --git a/src/containers/LandingPage/LandingPage.css b/src/containers/LandingPage/LandingPage.css index 48e098de..f0e7cd8e 100644 --- a/src/containers/LandingPage/LandingPage.css +++ b/src/containers/LandingPage/LandingPage.css @@ -1,6 +1,15 @@ @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. + */ + --LandingPage_sectionMarginTop: 40px; --LandingPage_sectionMarginTopMedium: 60px; --LandingPage_sectionMarginTopLarge: 94px; diff --git a/src/containers/ProfileSettingsForm/ProfileSettingsForm.css b/src/containers/ProfileSettingsForm/ProfileSettingsForm.css index c755444b..50c1c41c 100644 --- a/src/containers/ProfileSettingsForm/ProfileSettingsForm.css +++ b/src/containers/ProfileSettingsForm/ProfileSettingsForm.css @@ -1,6 +1,15 @@ @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. + */ + --ProfileSettingsForm_avatarSize: 96px; --ProfileSettingsForm_avatarSizeDesktop: 240px; } diff --git a/src/containers/SearchPage/SearchPage.css b/src/containers/SearchPage/SearchPage.css index 1c432dea..5b1f2fad 100644 --- a/src/containers/SearchPage/SearchPage.css +++ b/src/containers/SearchPage/SearchPage.css @@ -1,6 +1,15 @@ @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. + */ + --SearchPage_containerHeight: calc(100vh - var(--topbarHeightDesktop)); } diff --git a/src/containers/TopbarSearchForm/TopbarSearchForm.css b/src/containers/TopbarSearchForm/TopbarSearchForm.css index 6b1fe30b..93f85aa2 100644 --- a/src/containers/TopbarSearchForm/TopbarSearchForm.css +++ b/src/containers/TopbarSearchForm/TopbarSearchForm.css @@ -1,6 +1,15 @@ @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. + */ + --TopbarSearchForm_inputHeight: 53px; --TopbarSearchForm_topbarMargin: 94px; --TopbarSearchForm_bottomBorder: 3px; diff --git a/src/marketplace.css b/src/marketplace.css index 57ec63b3..49e6dd62 100644 --- a/src/marketplace.css +++ b/src/marketplace.css @@ -3,6 +3,15 @@ /* ================ Custom properties aka variables ================ */ :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. + */ + /** * Font variables are separated to different file so that the amount of font styling rules * doesn't overflow this one. diff --git a/src/marketplaceFonts.css b/src/marketplaceFonts.css index 3e10ae9d..02fd869c 100644 --- a/src/marketplaceFonts.css +++ b/src/marketplaceFonts.css @@ -2,6 +2,15 @@ /* These are imported into 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. + */ + --fontWeightRegular: 400; --fontWeightMedium: 500; --fontWeightSemiBold: 600;