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

listingPage review and bookingModal between 768-1023

Browse source
This commit is contained in:
Janne Koivistoinen 2017-07-24 14:25:54 +03:00 • committed by Vesa Luusua
parent 21a8879c35
commit 1efcc44976
8 changed files with 49 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -23,9 +23,14 @@
background-color: var(--marketplaceColor);
@media (--viewportMedium) {
top: 41px;
top: 45px;
}
@media (--viewportLarge) {
top: 42px;
min-height: auto;
box-shadow: var(--boxShadowPopup);
border-radius: 0 0 2px 2px;
}
}
& :global(.DateRangePickerInput) {
@ -207,7 +212,7 @@
width: calc(100% - 48px);
margin: 0 24px 3px 24px;
@media (--viewportMedium) {
@media (--viewportLarge) {
width: 100%;
margin: 0;
}
@ -225,7 +230,7 @@
& :global(.DateInput:first-of-type) {
margin-right: 12px;
@media (--viewportMedium) {
@media (--viewportLarge) {
margin-right: 24px;
}
}

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

@ -22,6 +22,7 @@
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
font-weight: 600;
}
}
@ -87,7 +88,7 @@
transition: all 0.15s ease-out;
}
@media (--viewportMedium) {
@media (--viewportLarge) {
width: 100%;
margin: 0;

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

@ -62,6 +62,10 @@
/* Font */
@apply --marketplaceH6FontStyles;
margin: -2.5px 0 0 0;
@media (--viewportMedium) {
margin-top: -1px;
}
}
.closeIcon {

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

@ -11,6 +11,8 @@
}
.modalContent {
width: 100%;
@media (--viewportMedium) {
height: 100%;

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

@ -8,20 +8,16 @@
.bookingDates {
flex-shrink: 0;
margin-bottom: 46px;
@media (--viewportMedium) {
margin-bottom: 64px;
}
}
.priceBreakdownContainer {
padding: 0 24px;
margin-bottom: 40px;
@media (--viewportMedium) {
@media (--viewportLarge) {
padding: 0;
margin-bottom: 0;
margin-top: 7px;
margin-top: 1px;
}
}
@ -31,9 +27,9 @@
margin-top: 5px;
margin-bottom: 14px;
@media (--viewportMedium) {
@media (--viewportLarge) {
margin-top: 5px;
margin-bottom: 25px;
margin-bottom: 26px;
}
}
@ -56,7 +52,12 @@
flex-shrink: 0;
@media (--viewportMedium) {
margin-top: 50px;
margin-top: auto;
margin-bottom: 20px;
}
@media (--viewportLarge) {
margin-top: 4px;
margin-bottom: 22px;
}
}
@ -66,7 +67,7 @@
margin: 0 24px 24px 24px;
width: calc(100% - 48px);
@media (--viewportMedium) {
@media (--viewportLarge) {
margin: 0;
width: 100%;
}

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

@ -77,6 +77,7 @@
@media (--viewportLarge) {
margin-top: 51px;
margin-bottom: 0px;
/* contentContainer's full width - (bookingColumn + gutters) */
flex-basis: calc(100% - 431px);
flex-shrink: 0;
@ -212,9 +213,11 @@
@apply --marketplaceH4FontStyles;
margin-top: 7px;
margin-bottom: 0;
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
color: var(--matterColor);
}
}
@ -375,9 +378,9 @@
.bookingHeading {
display: none;
@media (--viewportMedium) {
@media (--viewportLarge) {
display: block;
margin-top: 11px;
margin-top: 6px;
margin-bottom: 42px;
}
}
@ -385,10 +388,10 @@
.bookingTitle {
@media (--viewportMedium) {
/* Font */
color: var(--matterColorAnti);
color: var(--matterColor);
margin-top: 0;
margin-bottom: 10px;
margin-bottom: 7px;
}
}
@ -397,7 +400,9 @@
@apply --marketplaceH5FontStyles;
@media (--viewportMedium) {
color: var(--matterColor);
display: block;
margin-top: 0;
}
}
@ -407,7 +412,7 @@
flex-direction: column;
margin: 0;
@media (--viewportMedium) {
@media (--viewportLarge) {
min-width: 311px;
}
}

4
src/containers/ListingPage/ListingPage.js
View file

@ -255,9 +255,9 @@ export class ListingPageComponent extends Component {
</div>
<div className={css.bookingHeading}>
<h3 className={css.bookingTitle}>
<h2 className={css.bookingTitle}>
<FormattedMessage id="ListingPage.bookingTitle" values={{ title }} />
</h3>
</h2>
<div className={css.bookingHelp}>
<FormattedMessage id="ListingPage.bookingHelp" />
</div>

10
src/marketplaceIndex.css
View file

@ -11,6 +11,16 @@ body {
background-color: var(--matterColorBright);
}
::selection {
background: var(--marketplaceColor); /* WebKit/Blink Browsers */
color: var(--matterColorLight);
}
::-moz-selection {
background: var(--marketplaceColor); /* Gecko Browsers */
color: var(--matterColorLight);
}
a {
@apply --marketplaceLinkStyles;
}