maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-27 19:42:11 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Prefix local CSS properties with component name

Browse source 
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.
This commit is contained in:
Kimmo Puputti 2018-04-11 14:29:42 +03:00
parent 3fe307d466
commit aa4b3e7fcc
23 changed files with 184 additions and 193 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/components/Avatar/Avatar.css
View file

@ -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 {

32
src/components/FieldDateInput/DateInput.css
View file

@ -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,<svg width='14' height='2' viewBox='0 0 14 2' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h14v2H0z' fill='%23FFF' fill-rule='evenodd'/></svg>");
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 */

38
src/components/FieldDateRangeInput/DateRangeInput.css
View file

@ -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,<svg width='14' height='2' viewBox='0 0 14 2' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h14v2H0z' fill='%23FFF' fill-rule='evenodd'/></svg>");
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),

6
src/components/ImageCarousel/ImageCarousel.css
View file

@ -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;
}
}

21
src/components/LocationAutocompleteInput/LocationAutocompleteInput.css
View file

@ -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;
}

16
src/components/ManageListingCard/ManageListingCard.css
View file

@ -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;

30
src/components/PropertyGroup/PropertyGroup.css
View file

@ -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)
);
}
}

16
src/components/SectionHero/SectionHero.css
View file

@ -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) {

10
src/components/TabNav/TabNav.css
View file

@ -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,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='var(--marketplaceColorEncoded)' fill-rule='evenodd'/></svg>");
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,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='%23000' fill-rule='evenodd'/></svg>");
background-position: right center;

4
src/components/Topbar/Topbar.css
View file

@ -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 {

24
src/components/TopbarDesktop/TopbarDesktop.css
View file

@ -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 */

6
src/components/TopbarMobileMenu/TopbarMobileMenu.css
View file

@ -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;

8
src/containers/CheckoutPage/CheckoutPage.css
View file

@ -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;
}
}

8
src/containers/ContactDetailsForm/ContactDetailsForm.css
View file

@ -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,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M6.52 9.098c-.163.188-.397.3-.646.31h-.032c-.238 0-.466-.094-.635-.263L2.783 6.732c-.353-.35-.354-.92-.003-1.273.35-.353.92-.354 1.272-.004L5.794 7.19l4.59-5.278C9.287.738 7.73 0 6 0 2.686 0 0 2.686 0 6c0 3.313 2.686 6 6 6 3.313 0 6-2.687 6-6 0-.91-.21-1.772-.573-2.545L6.52 9.098z" fill="%232ECC71" fill-rule="evenodd"/></svg>');
}
.emailUnverified {
@apply --infoTextStyles;
@apply --ContactDetailsForm_infoText;
color: var(--matterColorAnti);
background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M6.52 9.098c-.163.188-.397.3-.646.31h-.032c-.238 0-.466-.094-.635-.263L2.783 6.732c-.353-.35-.354-.92-.003-1.273.35-.353.92-.354 1.272-.004L5.794 7.19l4.59-5.278C9.287.738 7.73 0 6 0 2.686 0 0 2.686 0 6c0 3.313 2.686 6 6 6 3.313 0 6-2.687 6-6 0-.91-.21-1.772-.573-2.545L6.52 9.098z" fill="%23F00" fill-rule="evenodd"/></svg>');
}
.pendingEmailUnverified {
@apply --infoTextStyles;
@apply --ContactDetailsForm_infoText;
color: var(--failColor);
width: 100%;
background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M6.52 9.098c-.163.188-.397.3-.646.31h-.032c-.238 0-.466-.094-.635-.263L2.783 6.732c-.353-.35-.354-.92-.003-1.273.35-.353.92-.354 1.272-.004L5.794 7.19l4.59-5.278C9.287.738 7.73 0 6 0 2.686 0 0 2.686 0 6c0 3.313 2.686 6 6 6 3.313 0 6-2.687 6-6 0-.91-.21-1.772-.573-2.545L6.52 9.098z" fill="%23F00" fill-rule="evenodd"/></svg>');

8
src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css
View file

@ -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 {

16
src/containers/EditListingFeaturesForm/EditListingFeaturesForm.css
View file

@ -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 {

9
src/containers/EditListingLocationForm/EditListingLocationForm.css
View file

@ -1,14 +1,5 @@
@import '../../marketplace.css';
:root {
--formMargins: {
margin-bottom: 24px;
@media (--viewportMedium) {
margin-bottom: 32px;
}
}
}
.root {
/* Dimensions */
width: 100%;

6
src/containers/EditListingPhotosForm/EditListingPhotosForm.css
View file

@ -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;
}
}

6
src/containers/EditListingPoliciesForm/EditListingPoliciesForm.css
View file

@ -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;
}

18
src/containers/LandingPage/LandingPage.css
View file

@ -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));
}
}

32
src/containers/ProfileSettingsForm/ProfileSettingsForm.css
View file

@ -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);
}
}

6
src/containers/SearchPage/SearchPage.css
View file

@ -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) {

22
src/containers/TopbarSearchForm/TopbarSearchForm.css
View file

@ -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;
}