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

Review fixes

Browse source
This commit is contained in:
Kimmo Puputti 2017-06-02 11:41:18 +03:00
parent 07bb79ab6a
commit cdf83b70a9
4 changed files with 19 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -44,10 +44,10 @@ size and position, etc.
padding-bottom: 98px;
top: var(--inputHeight);
background-color: var(--marketplaceColor);
z-index: 1;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: var(--borderRadius);
border-bottom-right-radius: var(--borderRadius);
box-shadow: var(--boxShadowPopup);
z-index: var(--zIndexPopup + 1);
}
/*
@ -64,14 +64,14 @@ bottom of the container.
background-size: auto var(--poweredImageHeight);
background-position: center;
@media (--desktop-viewport) {
@media (--desktopViewport) {
background-position: center left var(--sidePaddingDesktop);
}
}
/* List of predictions, with a responsive padding size */
.predictions {
composes: searchResultsFont;
composes: searchResultsFont from '../../marketplace.css';
margin: 0;
padding: 14px 0;
@ -82,7 +82,7 @@ bottom of the container.
/* Assign enough vertical padding to make the element at least 44px high */
padding: 10px var(--sidePadding);
@media (--desktop-viewport) {
@media (--desktopViewport) {
padding: 10px var(--sidePaddingDesktop);
}

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

@ -4,7 +4,7 @@
display: flex;
flex-direction: column;
@media (--desktop-viewport) {
@media (--desktopViewport) {
flex-direction: row;
}
}
@ -12,7 +12,7 @@
.withPadding {
padding: calc(2 * var(--spacingUnit));
@media (--desktop-viewport) {
@media (--desktopViewport) {
padding: calc(2 * var(--spacingUnitDesktop));
}
}
@ -21,7 +21,7 @@
.defaultWrapperStyles {
margin: calc(2 * var(--spacingUnit)) 0;
@media (--desktop-viewport) {
@media (--desktopViewport) {
margin: calc(2 * var(--spacingUnitDesktop)) 0;
}
}
@ -37,7 +37,7 @@
flex-grow: 1;
composes: withPadding;
@media (--desktop-viewport) {
@media (--desktopViewport) {
padding: 56px 0 0 16px;
}
}
@ -66,7 +66,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 5h10M0 11h10M0 17h10" stroke="#f1f1f1"/><path d="M0 23h10" stroke="#ddd" stroke-width="1"/></svg>');
background-repeat: repeat;
@media (--desktop-viewport) {
@media (--desktopViewport) {
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 7h10M0 15h10M0" stroke="#f1f1f1"/><path d="M0 23h10" stroke="#ddd" stroke-width="1"/></svg>');
background-repeat: repeat;
}

7
src/containers/Topbar/Topbar.css
View file

@ -23,7 +23,7 @@
/* shadows */
box-shadow: 0 1px 1px 0 #dcdcdc;
@media (min-width: 768px) {
@media (--desktopViewport) {
display: none;
}
}
@ -47,7 +47,7 @@
.desktop {
display: none;
@media (min-width: 768px) {
@media (--desktopViewport) {
display: block;
}
}
@ -67,7 +67,8 @@
color: var(--matterColorAnti);
margin: 0 24px;
/* Absolute position to prevent changing search form positioning */
/* Absolute position to avoid affecting the layout of the autocomplete
predictions list */
position: absolute;
top: 115px;

8
src/marketplace.css
View file

@ -41,7 +41,7 @@
/* ================ Custom media queries ================ */
@custom-media --desktop-viewport (min-width: 768px);
@custom-media --desktopViewport (min-width: 768px);
/* ================ Fonts ================ */
@ -59,7 +59,7 @@ h1,
letter-spacing: -1px;
/* TODO: this seems to be biggest font in Page titles (except in Hero) - is it h1 then? */
@media (--desktop-viewport) {
@media (--desktopViewport) {
font-family: "sofiapro";
font-weight: 600;
font-size: 48px;
@ -79,7 +79,7 @@ h2,
letter-spacing: -0.5px;
/* TODO Are these correct settings? */
@media (--desktop-viewport) {
@media (--desktopViewport) {
font-size: 24px;
line-height: 32px;
padding: 4px 0 4px 0; /* 4px + 4px = 8px */
@ -150,7 +150,7 @@ li,
letter-spacing: -0.1px;
/* TODO Desktop styles needs to be extracted */
@media (min-width: 768px) {
@media (--desktopViewport) {
font-weight: 500;
font-size: 16px;
line-height: 24px;