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

Merge pull request #310 from sharetribe/breakpoints

Browse source 
add breakpoints for medium, large and xlarge
This commit is contained in:
Janne Koivistoinen 2017-07-19 16:17:51 +03:00 • committed by GitHub
commit 52f1081e4d
27 changed files with 83 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,7 +17,7 @@
baseline. */
margin: -1px 0 0 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin: -1px 0 0 0;
}
@ -56,7 +56,7 @@
@apply --marketplaceH2FontStyles;
margin: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin: 0;
}
}

2
src/components/DateRangeInputField/DateRangeInput.css
View file

@ -67,7 +67,7 @@
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}

2
src/components/DateRangeInputField/DateRangeInputField.css
View file

@ -19,7 +19,7 @@
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}

8
src/components/HeroSection/HeroSection.css
View file

@ -43,7 +43,7 @@
margin-top: auto;
margin-bottom: 22px;
@media (--desktopViewport) {
@media (--viewportMedium) {
max-width: var(--desktopTitleMaxWidth);
margin-top: auto;
margin-bottom: 22px;
@ -55,7 +55,7 @@
margin-bottom: 63px;
margin-top: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
max-width: var(--desktopTitleMaxWidth);
}
}
@ -64,7 +64,7 @@
border-radius: 4px;
flex-shrink: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
display: none;
}
}
@ -85,7 +85,7 @@
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
@media (--desktopViewport) {
@media (--viewportMedium) {
display: block;
width: 400px;
}

8
src/components/ListingCard/ListingCard.css
View file

@ -58,7 +58,7 @@
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -73,7 +73,7 @@
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -94,7 +94,7 @@
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -110,7 +110,7 @@
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}

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

@ -28,7 +28,7 @@
stroke: var(--marketplaceColor);
stroke-width: 2.5px;
@media (--desktopViewport) {
@media (--viewportMedium) {
stroke-width: 2px;
}
@ -85,7 +85,7 @@ bottom of the container.
background-size: auto var(--poweredImageHeight);
background-position: center;
@media (--desktopViewport) {
@media (--viewportMedium) {
background-position: center left var(--sidePaddingDesktop);
}
}
@ -105,7 +105,7 @@ bottom of the container.
/* Assign enough vertical padding to make the element at least 44px high */
padding: 9px var(--sidePadding);
@media (--desktopViewport) {
@media (--viewportMedium) {
color: var(--matterColorLightTransparent);
padding: 10px var(--sidePaddingDesktop);
margin: 0;

2
src/components/MapPriceMarker/MapPriceMarker.css
View file

@ -39,7 +39,7 @@
}
/* Overwrite dimensions from font styles */
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}

2
src/components/NotificationBadge/NotificationBadge.css
View file

@ -21,7 +21,7 @@
/* Font margins off */
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}

2
src/components/OrderDetailsPanel/OrderDetailsPanel.css
View file

@ -37,7 +37,7 @@
margin-top: 5px;
margin-bottom: 14px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 5px;
margin-bottom: 14px;
}

2
src/components/ResponsiveImage/ResponsiveImage.css
View file

@ -30,7 +30,7 @@
padding-bottom: 24px;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-bottom: 0;
}
}

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

@ -18,7 +18,7 @@
flex: 1;
margin: 0 12px 0 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin: 0 12px 0 0;
}
}
@ -46,7 +46,7 @@
margin-top: 5px;
margin-bottom: 14px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 5px;
margin-bottom: 14px;
}

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

@ -30,7 +30,7 @@
color: var(--matterColorDark);
}
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}

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

@ -25,7 +25,7 @@
/* shadows */
box-shadow: var(--boxShadow);
@media (--desktopViewport) {
@media (--viewportMedium) {
display: none;
}
}
@ -100,7 +100,7 @@
.desktop {
display: none;
@media (--desktopViewport) {
@media (--viewportMedium) {
display: block;
}
}

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

@ -10,7 +10,7 @@
margin: 24px 0;
text-decoration: inherit;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin: 24px 0;
}
}
@ -108,7 +108,7 @@
color: var(--marketplaceColorDark);
}
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -132,7 +132,7 @@
color: var(--matterColorDark);
}
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -233,7 +233,7 @@
border-left: 6px solid var(--marketplaceColor);
}
@media (--desktopViewport) {
@media (--viewportMedium) {
margin: 0;
}

4
src/containers/BookingDatesForm/BookingDatesForm.css
View file

@ -21,7 +21,7 @@
margin-top: 5px;
margin-bottom: 14px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 5px;
margin-bottom: 14px;
}
@ -45,7 +45,7 @@
margin: auto 24px 20px 24px;
flex-shrink: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}

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

@ -19,7 +19,7 @@
width: 100%;
margin-top: 0;
margin-bottom: 7px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 7px;
}
@ -43,7 +43,7 @@
margin-top: 0;
margin-bottom: 14px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 14px;
}
@ -63,7 +63,7 @@
margin-top: 0;
margin-bottom: 14px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 14px;
}
@ -97,7 +97,7 @@
/* shadows */
box-shadow: var(--boxShadow);
@media (--desktopViewport) {
@media (--viewportMedium) {
display: none;
}
}

2
src/containers/EditListingPage/EditListingPage.css
View file

@ -17,7 +17,7 @@
/* shadows */
box-shadow: none;
@media (--desktopViewport) {
@media (--viewportMedium) {
display: none;
}
}

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

@ -74,7 +74,7 @@
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -86,7 +86,7 @@
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}

10
src/containers/InboxPage/InboxPage.css
View file

@ -17,7 +17,7 @@
/* shadows */
box-shadow: none;
@media (--desktopViewport) {
@media (--viewportMedium) {
display: none;
}
}
@ -46,7 +46,7 @@
/* Layout */
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -136,7 +136,7 @@
margin-top: 3px;
margin-bottom: 0px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -148,7 +148,7 @@
margin-top: 0px;
margin-bottom: 0px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 4px;
margin-bottom: 0;
}
@ -160,7 +160,7 @@
margin-top: 4px;
margin-bottom: 0px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 4px;
margin-bottom: 0;
}

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

@ -11,7 +11,7 @@
flex-direction: column;
min-height: calc(100vh - var(--topbarHeight));
@media (--desktopViewport) {
@media (--viewportMedium) {
min-height: calc(100vh - var(--topbarHeightDesktop));
}
}

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

@ -66,7 +66,7 @@
background-color: var(--matterColorAnti);
color: var(--matterColorLight);
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -92,7 +92,7 @@
width: 100%;
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -103,7 +103,7 @@
@apply --marketplaceH4FontStyles;
margin-top: 7px;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -120,7 +120,7 @@
margin-top: 0;
margin-bottom: 13px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 13px;
}
@ -129,7 +129,7 @@
.description {
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -146,7 +146,7 @@
margin-top: 0;
margin-bottom: 20px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 24px;
}
@ -191,7 +191,7 @@
margin-top: 0;
margin-bottom: 0px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -204,7 +204,7 @@
margin-top: 0;
margin-bottom: 0px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}

2
src/containers/PayoutDetailsForm/PayoutDetailsForm.css
View file

@ -14,7 +14,7 @@
margin-top: 0;
margin-bottom: 13px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 13px;
}

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

@ -5,7 +5,7 @@
}
.topbar {
@media (--desktopViewport) {
@media (--viewportMedium) {
position: fixed;
top: 0;
left: 0;
@ -20,7 +20,7 @@
flex-grow: 1;
display: flex;
@media (--desktopViewport) {
@media (--viewportMedium) {
position: relative;
padding-top: var(--topbarHeightDesktop);
min-height: var(--containerHeight);
@ -32,7 +32,7 @@
display: flex;
flex-direction: column;
@media (--desktopViewport) {
@media (--viewportMedium) {
/**
* .container is using flexbox,
* This specifies that searchResultContainer is taking 60% from the viewport width
@ -68,7 +68,7 @@
.mapPanel {
display: none;
@media (--desktopViewport) {
@media (--viewportMedium) {
/**
* .container is using flexbox,
* This specifies that mapPanel is taking 40% from the viewport width
@ -82,7 +82,7 @@
}
.map {
@media (--desktopViewport) {
@media (--viewportMedium) {
/* Map is fixed so that it doesn't scroll along search results */
position: fixed;
top: var(--topbarHeightDesktop);

20
src/containers/StyleguidePage/StyleguidePage.css
View file

@ -4,7 +4,7 @@
display: flex;
flex-direction: column;
@media (--desktopViewport) {
@media (--viewportMedium) {
flex-direction: row;
}
}
@ -12,7 +12,7 @@
.withPadding {
padding: calc(2 * var(--spacingUnit));
@media (--desktopViewport) {
@media (--viewportMedium) {
padding: calc(2 * var(--spacingUnitDesktop));
}
}
@ -21,7 +21,7 @@
.defaultWrapperStyles {
margin: calc(2 * var(--spacingUnit)) 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin: calc(2 * var(--spacingUnitDesktop)) 0;
}
}
@ -37,7 +37,7 @@
flex-grow: 1;
composes: withPadding;
@media (--desktopViewport) {
@media (--viewportMedium) {
padding: 48px 0 0 16px;
}
}
@ -74,7 +74,7 @@
background-image: url('data:image/svg+xml;utf8,<svg width="10" height="24" viewBox="0 0 10 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h10M0 06h10M0 12h10" stroke="#ccc" shape-rendering="crispEdges" /><path d="M0 18h10" stroke="#ddd" stroke-width="1" shape-rendering="crispEdges" /></svg>');
background-repeat: repeat;
@media (--desktopViewport) {
@media (--viewportMedium) {
background-image: url('data:image/svg+xml;utf8,<svg width="10" height="24" viewBox="0 0 10 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h10" stroke="#ddd" stroke-width="1" shape-rendering="crispEdges" /><path d="M0 08h10M0 16h10M0" stroke="#ccc" shape-rendering="crispEdges" /></svg>');
background-repeat: repeat;
}
@ -83,7 +83,7 @@
.spacing2x {
margin: calc(2 * var(--spacingUnit)) 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin: calc(2 * var(--spacingUnitDesktop)) 0;
}
}
@ -93,7 +93,7 @@
flex-wrap: wrap;
margin-top: 15px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 19px;
}
}
@ -106,7 +106,7 @@
margin-right: calc(2 * var(--spacingUnit));
margin-bottom: calc(2 * var(--spacingUnit) + 2px);
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-right: calc(2 * var(--spacingUnitDesktop));
margin-bottom: calc(2 * var(--spacingUnitDesktop) + 2px);
}
@ -130,7 +130,7 @@
border-width: 1px;
border-top-color: transparent;
@media (--desktopViewport) {
@media (--viewportMedium) {
padding: calc(2 * var(--spacingUnitDesktop) - 3px) calc(2 * var(--spacingUnitDesktop));
}
}
@ -180,7 +180,7 @@
background-color: #fff;
padding: calc(2 * var(--spacingUnit));
@media (--desktopViewport) {
@media (--viewportMedium) {
padding: calc(2 * var(--spacingUnitDesktop) - 2px) calc(2 * var(--spacingUnitDesktop));
}
}

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

@ -70,7 +70,7 @@
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
font-weight: var(--fontWeightSemiBold);

8
src/marketplace.css
View file

@ -93,7 +93,7 @@
line-height: 24px;
letter-spacing: -0.3px;
@media (--desktopViewport) {
@media (--viewportMedium) {
/* TODO: Make sure button text aligns with the baseline */
}
}
@ -237,7 +237,9 @@
/* ================ Custom media queries ================ */
@custom-media --desktopViewport (min-width: 768px);
@custom-media --viewportMedium (min-width: 768px);
@custom-media --viewportLarge (min-width: 1024px);
@custom-media --viewportXLarge (min-width: 1921px);
/* ================ Fonts ================ */
@ -298,7 +300,7 @@ label {
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}

20
src/marketplaceFonts.css
View file

@ -15,7 +15,7 @@
letter-spacing: -0.1px;
/* No margins for default font */
@media (--desktopViewport) {
@media (--viewportMedium) {
font-size: 20px;
line-height: 24px;
}
@ -31,7 +31,7 @@
margin-top: 12px;
margin-bottom: 12px;
@media (--desktopViewport) {
@media (--viewportMedium) {
font-size: 20px;
line-height: 24px;
/* margin-top + n * line-height + margin-bottom => x * 8px */
@ -50,7 +50,7 @@
margin-top: 25px;
margin-bottom: 29px;
@media (--desktopViewport) {
@media (--viewportMedium) {
font-size: 90px;
line-height: 96px;
letter-spacing: -2px;
@ -69,7 +69,7 @@
margin-top: 18px;
margin-bottom: 18px;
@media (--desktopViewport) {
@media (--viewportMedium) {
font-size: 48px;
line-height: 56px;
letter-spacing: -1px;
@ -88,7 +88,7 @@
margin-top: 21px;
margin-bottom: 17px;
@media (--desktopViewport) {
@media (--viewportMedium) {
line-height: 32px;
/* margin-top + n * line-height + margin-bottom => x * 8px */
margin-top: 21px;
@ -105,7 +105,7 @@
margin-top: 16px;
margin-bottom: 14px;
@media (--desktopViewport) {
@media (--viewportMedium) {
/* margin-top + n * line-height + margin-bottom => x * 8px */
margin-top: 16px;
margin-bottom: 16px;
@ -121,7 +121,7 @@
margin-top: 12px;
margin-bottom: 12px;
@media (--desktopViewport) {
@media (--viewportMedium) {
font-weight: var(--fontWeightMedium);
/* margin-top + n * line-height + margin-bottom => x * 8px */
margin-top: 17px;
@ -138,7 +138,7 @@
margin-top: 10px;
margin-bottom: 8px;
@media (--desktopViewport) {
@media (--viewportMedium) {
line-height: 16px;
/* margin-top + n * line-height + margin-bottom => x * 8px */
margin-top: 10px;
@ -156,7 +156,7 @@
margin-top: 10px;
margin-bottom: 8px;
@media (--desktopViewport) {
@media (--viewportMedium) {
line-height: 16px;
/* margin-top + n * line-height + margin-bottom => x * 8px */
margin-top: 10px;
@ -173,7 +173,7 @@
margin-top: 9.5px;
margin-bottom: 8.5px;
@media (--desktopViewport) {
@media (--viewportMedium) {
line-height: 16px;
/* margin-top + n * line-height + margin-bottom => x * 8px */
margin-top: 10.5px;