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

Add comment about CSS custom properties being global

Browse source
This commit is contained in:
Kimmo Puputti 2018-04-11 15:59:22 +03:00
parent aa4b3e7fcc
commit f5fb478166
22 changed files with 198 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,15 @@
@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.
*/
--Avatar_size: 40px;
--Avatar_sizeMedium: 60px;
--Avatar_sizeLarge: 96px;

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

@ -1,6 +1,15 @@
@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.
*/
--DateInput_selectionHeight: 36px;
--DateInput_hoveredOverlayColor: rgba(255, 255, 255, 0.2);

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

@ -1,6 +1,15 @@
@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.
*/
--DateRangeInput_selectionHeight: 36px;
--DateRangeInput_hoveredOverlayColor: rgba(255, 255, 255, 0.2);

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

@ -1,6 +1,15 @@
@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.
*/
--LocationAutocompleteInput_inputHeight: 50px;
--LocationAutocompleteInput_sidePadding: 24px;
--LocationAutocompleteInput_sidePaddingDesktop: 36px;

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

@ -1,6 +1,15 @@
@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.
*/
--ManageListingCard_coverEverything: {
position: absolute;
top: 0;

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

@ -1,6 +1,15 @@
@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.
*/
--PropertyGroup_lineHeight: 24px;
--PropertyGroup_lineThroughTop: calc(var(--PropertyGroup_lineHeight) - 7px);
--PropertyGroup_lineThroughBottom: calc(var(--PropertyGroup_lineHeight) - 6px);

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

@ -1,6 +1,15 @@
@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.
*/
--SectionHero_desktopTitleMaxWidth: 625px;
--SectionHero_animation: {

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

@ -1,6 +1,15 @@
@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.
*/
--TabNav_linkWidth: 200px;
--TabNav_linkBorderWidth: 4px;
}

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

@ -1,6 +1,15 @@
@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.
*/
--Topbar_logoHeight: 25px;
}

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

@ -1,6 +1,15 @@
@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

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

@ -1,6 +1,15 @@
@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.
*/
--TopbarMobileMenu_topMargin: 96px;
}

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

@ -1,6 +1,15 @@
@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.
*/
--CheckoutPage_logoHeight: 25px;
--CheckoutPage_logoHeightDesktop: 27px;
}

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

@ -1,6 +1,15 @@
@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.
*/
--ContactDetailsForm_infoText: {
@apply --marketplaceH4FontStyles;
color: var(--successColor);

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

@ -1,6 +1,15 @@
@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.
*/
--EditListingDescriptionForm_formMargins: {
margin-bottom: 24px;

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

@ -1,6 +1,15 @@
@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.
*/
--EditListingPhotosForm_imageWidthDesktop: calc(50% - 12px);
}

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

@ -1,6 +1,15 @@
@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.
*/
--EditListingPoliciesForm_formMargins: {
margin-bottom: 24px;

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

@ -1,6 +1,15 @@
@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.
*/
--LandingPage_sectionMarginTop: 40px;
--LandingPage_sectionMarginTopMedium: 60px;
--LandingPage_sectionMarginTopLarge: 94px;

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

@ -1,6 +1,15 @@
@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.
*/
--ProfileSettingsForm_avatarSize: 96px;
--ProfileSettingsForm_avatarSizeDesktop: 240px;
}

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

@ -1,6 +1,15 @@
@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.
*/
--SearchPage_containerHeight: calc(100vh - var(--topbarHeightDesktop));
}

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

@ -1,6 +1,15 @@
@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.
*/
--TopbarSearchForm_inputHeight: 53px;
--TopbarSearchForm_topbarMargin: 94px;
--TopbarSearchForm_bottomBorder: 3px;

9
src/marketplace.css
View file

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

9
src/marketplaceFonts.css
View file

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