mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-26 06:47:17 +10:00
Merge pull request #803 from sharetribe/css-property-globalisation
Prepare CSS custom properties for globalisation
This commit is contained in:
Kimmo Puputti
GitHub
commit
70cd0c4cf7
25 changed files with 381 additions and 192 deletions
|
|
@ -1,15 +1,21 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
:root {
|
||||
--avatarSize: 40px;
|
||||
--avatarSizeMedium: 60px;
|
||||
--avatarSizeLarge: 96px;
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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.
|
||||
*/
|
||||
|
||||
--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 +25,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 +44,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 +66,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 +82,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 {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,20 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
:root {
|
||||
--selectionHeight: 36px;
|
||||
--hoveredOverlayColor: rgba(255, 255, 255, 0.2);
|
||||
--datepickerDistanceToTop: 252px;
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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);
|
||||
|
||||
/* Distance to top */
|
||||
--DateInput_top: 252px;
|
||||
}
|
||||
|
||||
.inputRoot {
|
||||
|
|
@ -20,7 +31,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 +129,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 +145,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 +167,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 +180,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 +230,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 */
|
||||
|
|
|
|||
|
|
@ -1,9 +1,20 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
:root {
|
||||
--selectionHeight: 36px;
|
||||
--hoveredOverlayColor: rgba(255, 255, 255, 0.2);
|
||||
--datepickerDistanceToTop: 252px;
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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);
|
||||
|
||||
/* Distance to top */
|
||||
--DateRangeInput_top: 252px;
|
||||
}
|
||||
|
||||
.inputRoot {
|
||||
|
|
@ -20,7 +31,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 +124,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 +140,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 +162,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 +176,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 +188,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),
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,18 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
:root {
|
||||
--inputHeight: 50px;
|
||||
--sidePadding: 24px;
|
||||
--sidePaddingDesktop: 36px;
|
||||
--poweredImageHeight: 18px;
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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;
|
||||
}
|
||||
|
||||
.root {
|
||||
|
|
@ -35,7 +43,7 @@
|
|||
|
||||
.input {
|
||||
flex-grow: 1;
|
||||
height: var(--inputHeight);
|
||||
height: var(--LocationAutocompleteInput_inputHeight);
|
||||
padding-left: 10px;
|
||||
margin: 0;
|
||||
line-height: unset;
|
||||
|
|
@ -61,7 +69,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 +87,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 +110,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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,16 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
:root {
|
||||
--coverEverything: {
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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;
|
||||
right: 0;
|
||||
|
|
@ -25,12 +34,12 @@
|
|||
|
||||
.menuOverlayWrapper {
|
||||
/* Positioning */
|
||||
@apply --coverEverything;
|
||||
@apply --ManageListingCard_coverEverything;
|
||||
}
|
||||
|
||||
.menuOverlay {
|
||||
/* Positioning */
|
||||
@apply --coverEverything;
|
||||
@apply --ManageListingCard_coverEverything;
|
||||
|
||||
/* Overlay */
|
||||
background-color: var(--matterColorAnti);
|
||||
|
|
@ -41,7 +50,7 @@
|
|||
|
||||
.menuOverlayContent {
|
||||
/* Positioning */
|
||||
@apply --coverEverything;
|
||||
@apply --ManageListingCard_coverEverything;
|
||||
/* Fonts */
|
||||
@apply --marketplaceH4FontStyles;
|
||||
font-weight: var(--fontWeightSemiBold);
|
||||
|
|
@ -84,7 +93,7 @@
|
|||
|
||||
.rootForImage {
|
||||
/* Layout - image will take space defined by aspect ratio wrapper */
|
||||
@apply --coverEverything;
|
||||
@apply --ManageListingCard_coverEverything;
|
||||
width: 100%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
|
@ -287,7 +296,7 @@
|
|||
.closedOverlayWrapper,
|
||||
.pendingApprovalOverlayWrapper {
|
||||
/* Positioning */
|
||||
@apply --coverEverything;
|
||||
@apply --ManageListingCard_coverEverything;
|
||||
}
|
||||
|
||||
.loadingOverlay,
|
||||
|
|
@ -295,7 +304,7 @@
|
|||
.closedOverlay,
|
||||
.pendingApprovalOverlay {
|
||||
/* Positioning */
|
||||
@apply --coverEverything;
|
||||
@apply --ManageListingCard_coverEverything;
|
||||
|
||||
/* Overlay background style */
|
||||
background-color: var(--matterColorLight);
|
||||
|
|
@ -314,7 +323,7 @@
|
|||
color: var(--matterColor);
|
||||
|
||||
/* Positioning */
|
||||
@apply --coverEverything;
|
||||
@apply --ManageListingCard_coverEverything;
|
||||
|
||||
/* Layout */
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,20 @@
|
|||
@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);
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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);
|
||||
--PropertyGroup_lineThroughTopMobile: calc(var(--PropertyGroup_lineHeight) - 9px);
|
||||
--PropertyGroup_lineThroughBottomMobile: calc(var(--PropertyGroup_lineHeight) - 8px);
|
||||
}
|
||||
|
||||
.root {
|
||||
|
|
@ -44,7 +53,7 @@
|
|||
margin-right: 8px;
|
||||
|
||||
/* This follows line-height */
|
||||
height: var(--lineHeight);
|
||||
height: var(--PropertyGroup_lineHeight);
|
||||
}
|
||||
|
||||
.labelWrapper {
|
||||
|
|
@ -54,7 +63,7 @@
|
|||
.selectedLabel,
|
||||
.notSelectedLabel {
|
||||
@apply --marketplaceBodyFontStyles;
|
||||
line-height: var(--lineHeight);
|
||||
line-height: var(--PropertyGroup_lineHeight);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -68,18 +77,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)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,18 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
:root {
|
||||
--desktopTitleMaxWidth: 625px;
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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.
|
||||
*/
|
||||
|
||||
--animationProperties: {
|
||||
--SectionHero_desktopTitleMaxWidth: 625px;
|
||||
|
||||
--SectionHero_animation: {
|
||||
animation-name: animationTitle;
|
||||
animation-duration: 0.5s;
|
||||
animation-timing-function: ease-out;
|
||||
|
|
@ -53,11 +62,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 +76,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 +89,7 @@
|
|||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
|
||||
@apply --animationProperties;
|
||||
@apply --SectionHero_animation;
|
||||
animation-delay: 0.8s;
|
||||
|
||||
@media (--viewportMedium) {
|
||||
|
|
@ -104,7 +113,7 @@
|
|||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
|
||||
@apply --animationProperties;
|
||||
@apply --SectionHero_animation;
|
||||
animation-delay: 0.8s;
|
||||
|
||||
@media (--viewportMedium) {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,17 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
:root {
|
||||
--linkWidth: 200px;
|
||||
--linkBorderWidth: 4px;
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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;
|
||||
}
|
||||
|
||||
.root {
|
||||
|
|
@ -42,7 +51,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 +61,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 +79,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;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,16 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
:root {
|
||||
--logoHeight: 25px;
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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;
|
||||
}
|
||||
|
||||
.root {
|
||||
|
|
@ -36,7 +45,7 @@
|
|||
|
||||
.home {
|
||||
display: flex;
|
||||
padding: calc((var(--topbarHeight) - var(--logoHeight)) / 2) 24px;
|
||||
padding: calc((var(--topbarHeight) - var(--Topbar_logoHeight)) / 2) 24px;
|
||||
}
|
||||
|
||||
.logoutButton {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,20 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
:root {
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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
|
||||
*/
|
||||
--topbarDesktopLabelStyles: {
|
||||
--TopbarDesktop_label: {
|
||||
display: inline-block;
|
||||
margin: 24px 0;
|
||||
text-decoration: inherit;
|
||||
|
|
@ -15,7 +24,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
--linkHoverState: {
|
||||
--TopbarDesktop_linkHover: {
|
||||
border-bottom: 0px solid;
|
||||
transition: var(--transitionStyleButton);
|
||||
|
||||
|
|
@ -53,7 +62,7 @@
|
|||
|
||||
/* logo */
|
||||
.logoLink {
|
||||
@apply --linkHoverState;
|
||||
@apply --TopbarDesktop_linkHover;
|
||||
flex-shrink: 0;
|
||||
padding: 21px 24px 21px 24px;
|
||||
height: 100%;
|
||||
|
|
@ -84,7 +93,7 @@
|
|||
|
||||
.search {
|
||||
@apply --marketplaceH4FontStyles;
|
||||
@apply --topbarDesktopLabelStyles;
|
||||
@apply --TopbarDesktop_label;
|
||||
color: var(--matterColor);
|
||||
}
|
||||
|
||||
|
|
@ -99,7 +108,7 @@
|
|||
|
||||
/* Create listing (CTA for providers) */
|
||||
.createListingLink {
|
||||
@apply --linkHoverState;
|
||||
@apply --TopbarDesktop_linkHover;
|
||||
@apply --marketplaceH4FontStyles;
|
||||
|
||||
flex-shrink: 0;
|
||||
|
|
@ -120,12 +129,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 +153,7 @@
|
|||
}
|
||||
|
||||
.inbox {
|
||||
@apply --topbarDesktopLabelStyles;
|
||||
@apply --TopbarDesktop_label;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -185,7 +194,7 @@
|
|||
|
||||
/* Profile menu */
|
||||
.profileMenuLabel {
|
||||
@apply --linkHoverState;
|
||||
@apply --TopbarDesktop_linkHover;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -215,7 +224,7 @@
|
|||
|
||||
/* Authentication */
|
||||
.signupLink {
|
||||
@apply --linkHoverState;
|
||||
@apply --TopbarDesktop_linkHover;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
padding: 0 12px 0 12px;
|
||||
|
|
@ -228,7 +237,7 @@
|
|||
}
|
||||
|
||||
.loginLink {
|
||||
@apply --linkHoverState;
|
||||
@apply --TopbarDesktop_linkHover;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
padding: 0 12px 0 12px;
|
||||
|
|
@ -243,7 +252,7 @@
|
|||
.signup,
|
||||
.login {
|
||||
@apply --marketplaceH4FontStyles;
|
||||
@apply --topbarDesktopLabelStyles;
|
||||
@apply --TopbarDesktop_label;
|
||||
}
|
||||
|
||||
/* left animated "border" like hover element */
|
||||
|
|
|
|||
|
|
@ -1,7 +1,16 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
:root {
|
||||
--topMarginMobileMenu: 96px;
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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;
|
||||
}
|
||||
|
||||
.root {
|
||||
|
|
@ -35,7 +44,7 @@
|
|||
.avatar {
|
||||
/* Layout */
|
||||
flex-shrink: 0;
|
||||
margin: var(--topMarginMobileMenu) 0 0 0;
|
||||
margin: var(--TopbarMobileMenu_topMargin) 0 0 0;
|
||||
}
|
||||
|
||||
.greeting {
|
||||
|
|
@ -99,7 +108,7 @@
|
|||
@apply --marketplaceH1FontStyles;
|
||||
|
||||
margin-bottom: 24px;
|
||||
margin-top: var(--topMarginMobileMenu);
|
||||
margin-top: var(--TopbarMobileMenu_topMargin);
|
||||
}
|
||||
.authenticationLinks {
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,17 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
:root {
|
||||
--logoHeight: 25px;
|
||||
--logoHeightDesktop: 27px;
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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;
|
||||
}
|
||||
|
||||
.loading {
|
||||
|
|
@ -35,10 +44,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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,16 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
:root {
|
||||
--infoTextStyles: {
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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);
|
||||
|
||||
|
|
@ -56,18 +65,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>');
|
||||
|
|
|
|||
|
|
@ -1,7 +1,16 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
:root {
|
||||
--formMargins: {
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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;
|
||||
|
||||
@media (--viewportMedium) {
|
||||
|
|
@ -32,16 +41,16 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
@apply --formMargins;
|
||||
@apply --EditListingDescriptionForm_formMargins;
|
||||
}
|
||||
|
||||
.description {
|
||||
@apply --formMargins;
|
||||
@apply --EditListingDescriptionForm_formMargins;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.category {
|
||||
@apply --formMargins;
|
||||
@apply --EditListingDescriptionForm_formMargins;
|
||||
}
|
||||
|
||||
.submitButton {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,5 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
:root {
|
||||
--formMargins: {
|
||||
margin-bottom: 24px;
|
||||
|
||||
@media (--viewportMedium) {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.root {
|
||||
/* Dimensions */
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,16 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
:root {
|
||||
--imageWidthDesktop: calc(50% - 12px);
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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);
|
||||
}
|
||||
|
||||
.root {
|
||||
|
|
@ -22,7 +31,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 +56,7 @@
|
|||
}
|
||||
|
||||
@media (--viewportLarge) {
|
||||
width: var(--imageWidthDesktop);
|
||||
width: var(--EditListingPhotosForm_imageWidthDesktop);
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,16 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
:root {
|
||||
--formMargins: {
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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;
|
||||
|
||||
@media (--viewportMedium) {
|
||||
|
|
@ -28,11 +37,11 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
@apply --formMargins;
|
||||
@apply --EditListingPoliciesForm_formMargins;
|
||||
}
|
||||
|
||||
.policy {
|
||||
@apply --formMargins;
|
||||
@apply --EditListingPoliciesForm_formMargins;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,18 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
:root {
|
||||
--sectionMarginTop: 40px;
|
||||
--sectionMarginTopMedium: 60px;
|
||||
--sectionMarginTopLarge: 94px;
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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;
|
||||
}
|
||||
|
||||
.root {
|
||||
|
|
@ -72,15 +81,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 +104,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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,17 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
:root {
|
||||
--avatarSize: 96px;
|
||||
--avatarSizeDesktop: 240px;
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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;
|
||||
}
|
||||
|
||||
.root {
|
||||
|
|
@ -67,9 +76,9 @@
|
|||
}
|
||||
|
||||
.label {
|
||||
width: var(--avatarSize);
|
||||
width: var(--ProfileSettingsForm_avatarSize);
|
||||
@media (--viewportMedium) {
|
||||
width: var(--avatarSizeDesktop);
|
||||
width: var(--ProfileSettingsForm_avatarSizeDesktop);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -77,8 +86,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 +96,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 +202,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 +216,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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,16 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
:root {
|
||||
--containerHeight: calc(100vh - var(--topbarHeightDesktop));
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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));
|
||||
}
|
||||
|
||||
/* Can be given to Topbar when a modal is opened
|
||||
|
|
@ -29,7 +38,7 @@
|
|||
@media (--viewportMedium) {
|
||||
position: relative;
|
||||
padding-top: var(--topbarHeightDesktop);
|
||||
min-height: var(--containerHeight);
|
||||
min-height: var(--SearchPage_containerHeight);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -140,7 +149,7 @@
|
|||
|
||||
/* Fixed content needs width relative to viewport */
|
||||
width: 50vw;
|
||||
height: var(--containerHeight);
|
||||
height: var(--SearchPage_containerHeight);
|
||||
}
|
||||
|
||||
@media (--viewportLarge) {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,22 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
:root {
|
||||
--inputHeight: 53px;
|
||||
--topbarMargin: 94px;
|
||||
--bottomBorder: 3px;
|
||||
--mobilePredictionTop: calc(var(--topbarMargin) + var(--inputHeight) - var(--bottomBorder));
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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;
|
||||
--TopbarSearchForm_mobilePredictionTop: calc(
|
||||
var(--TopbarSearchForm_topbarMargin) + var(--TopbarSearchForm_inputHeight) -
|
||||
var(--TopbarSearchForm_bottomBorder)
|
||||
);
|
||||
}
|
||||
|
||||
.mobileInputRoot {
|
||||
|
|
@ -30,7 +42,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 +90,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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,15 @@
|
|||
/* ================ Custom properties aka variables ================ */
|
||||
|
||||
:root {
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,15 @@
|
|||
/* These are imported into marketplace.css */
|
||||
|
||||
:root {
|
||||
/*
|
||||
These variables are available in global scope through ":root"
|
||||
element (<html> 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;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue