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

filter dr done

Browse source
This commit is contained in:
Janne Koivistoinen 2018-01-18 00:58:28 +02:00
parent b8071ef906
commit 3d1e9f0b96
6 changed files with 50 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,5 +9,6 @@
.searchResultSummary {
@apply --marketplaceH4FontStyles;
line-height: 20px;
margin-top: 9px;
margin-top: 11px;
margin-bottom: 13px;
}

5
src/components/SearchFiltersMobile/SearchFiltersMobile.css
View file

@ -63,9 +63,9 @@
}
.modalHeadingWrapper {
padding-bottom: 26px;
padding-bottom: 31px;
border-bottom: 1px solid var(--matterColorNegative);
margin-bottom: 30px;
margin-bottom: 27px;
}
.modalHeading {
@ -82,6 +82,7 @@
display: inline;
float: right;
margin: 17px 0 0 0;
padding: 0;
/* Override button styles */
outline: none;

24
src/components/SelectSingleFilter/SelectSingleFilter.css
View file

@ -13,7 +13,7 @@
@apply --marketplaceButtonStylesSecondary;
@apply --marketplaceSearchFilterLabelFontStyles;
padding: 9px 16px 9px 16px;
padding: 9px 16px 10px 16px;
width: auto;
height: auto;
min-height: 0;
@ -33,15 +33,21 @@
@apply --marketplaceSearchFilterLabelFontStyles;
font-weight: var(--fontWeightSemiBold);
padding: 9px 16px 9px 16px;
padding: 9px 16px 10px 16px;
width: auto;
height: auto;
min-height: 0;
border-radius: 4px;
border: 1px solid var(--marketplaceColor);
&:hover,
&:focus {
border: 1px solid var(--marketplaceColorDark);
}
}
.menuContent {
margin-top: 8px;
margin-top: 7px;
padding-top: 13px;
min-width: 300px;
border-radius: 4px;
@ -63,7 +69,7 @@
position: absolute;
top: 2px;
left: 0px;
height: calc(100% - 4px);
height: calc(100% - 7px);
width: 6px;
background-color: var(--matterColorDark);
}
@ -83,6 +89,8 @@
text-align: left;
border: none;
cursor: pointer;
&:focus,
&:hover {
color: var(--matterColorDark);
@ -94,7 +102,7 @@
}
.clearMenuItem {
@apply --marketplaceH5FontStyles;
@apply --marketplaceH4FontStyles;
font-weight: var(--fontWeightMedium);
color: var(--matterColorAnti);
@ -102,15 +110,19 @@
position: relative;
min-width: 300px;
margin: 0;
padding: 34px 30px 19px 30px;
padding: 32px 30px 18px 30px;
/* Override button styles */
outline: none;
text-align: left;
border: none;
cursor: pointer;
transition: width var(--transitionStyleButton);
&:focus,
&:hover {
color: var(--matterColor);
transition: width var(--transitionStyleButton);
}
}

41
src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css
View file

@ -1,17 +1,21 @@
@import '../../marketplace.css';
.root {
padding-bottom: 18px;
padding-bottom: 16px;
border-bottom: 1px solid var(--matterColorNegative);
}
.filterLabel {
.filterLabel,
.filterLabelSelected {
@apply --marketplaceH3FontStyles;
margin-bottom: 16px;
}
.filterLabel {
color: var(--matterColorDark);
}
.filterLabelSelected {
@apply --marketplaceH3FontStyles;
color: var(--marketplaceColor);
}
@ -32,38 +36,38 @@
overflow: hidden;
}
.optionBorder,
.optionBorderSelected {
position: absolute;
height: calc(100% - 12px);
top: 4px;
left: -24px;
transition: width var(--transitionStyleButton);
}
/* left animated "border" like hover element */
.optionBorder {
position: absolute;
top: 2px;
left: -24px;
height: calc(100% - 7px);
width: 0;
background-color: var(--matterColorDark);
transition: width var(--transitionStyleButton);
}
/* left static border for selected element */
.optionBorderSelected {
position: absolute;
top: 2px;
left: -24px;
height: calc(100% - 7px);
width: 12px;
width: 8px;
background-color: var(--matterColorDark);
transition: width var(--transitionStyleButton);
}
.option {
@apply --marketplaceH3FontStyles;
@apply --marketplaceH4FontStyles;
font-weight: var(--fontWeightMedium);
font-size: 18px;
color: var(--matterColor);
/* Layout */
display: block;
position: relative;
margin: 0;
padding: 4px 0 4px 20px;
padding: 4px 0 8px 20px;
/* Override button styles */
outline: none;
@ -77,6 +81,10 @@
&:hover .menuItemBorder {
width: 6px;
}
&:last-child {
margin-bottom: 18px;
}
}
.clearButton {
@ -88,6 +96,7 @@
display: inline;
float: right;
margin-top: 6px;
padding: 0;
/* Override button styles */
outline: none;

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

@ -50,7 +50,7 @@
@media (--viewportLarge) {
flex-basis: 62.5%;
padding: 24px 36px 36px 36px;
padding: 23px 36px 36px 36px;
}
}
@ -74,7 +74,6 @@
@media (--viewportMedium) {
display: flex;
padding: 0 24px;
margin-top: 3px;
margin-bottom: 21px;
}
}

2
src/marketplace.css
View file

@ -470,7 +470,7 @@
width: auto;
/* Sizing (touch area) */
padding: 24px 40px;
padding: 24px;
margin: 0;
border: 0;