status-im/ETHReport
2
0
Fork 0
mirror of https://github.com/status-im/ETHReport.git synced 2025-02-13 14:46:41 +00:00
Code Issues Projects Releases Wiki Activity

search bar bottom spacing

Browse Source
This commit is contained in:
Sharyn 2018-07-20 09:17:00 +02:00
parent 122ef68de9
commit 14035aa6ff
3 changed files with 50 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/searchBar/index.js
View File

@ -6,7 +6,10 @@ import './style.scss';
const { publicRuntimeConfig } = getConfig();
const SearchBar = props => (
<div className="search-bar" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/header-bg.jpg)` }}>
<div
className={`search-bar ${props.isSearchActive ? 'search-active': ''}`}
style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/header-bg.jpg)` }}
>
<div className="container">
<h3 className="main-heading" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/heading-textured-bg.jpg)` }}>
Archives

6
components/searchBar/style.scss
View File

@ -5,7 +5,7 @@
background-image: url('/static/img/header-bg.jpg');
background-position: center;
background-size: cover;
margin-bottom: calculateRem(56);
margin-bottom: calculateRem(40);
height: calculateRem(164);
padding-top: calculateRem(52);
@ -21,6 +21,10 @@
margin-bottom: calculateRem(32);
}
}
&.search-active {
margin-bottom: calculateRem(92);
}
}
.search-form {

86
components/searchResults/style.scss
View File

@ -1,61 +1,57 @@
@import './assets/styles/global.scss';
.search-results {
margin-top: calculateRem(32);
.search-results li {
margin-bottom: calculateRem(32);
li {
margin-bottom: calculateRem(32);
button {
text-align: left;
width: 100%;
padding: 0;
button {
text-align: left;
width: 100%;
padding: 0;
&:hover h3 {
text-decoration: underline;
&:hover h3 {
text-decoration: underline;
&.matched-name::before {
display: none;
}
&.matched-name::before {
display: none;
}
}
h3 {
color: #fff;
font-size: calculateRem(24);
display: inline-block;
margin-bottom: calculateRem(12);
h3 {
color: #fff;
font-size: calculateRem(24);
display: inline-block;
margin-bottom: calculateRem(12);
&.matched-name {
@include hasRedUnderline;
position: relative;
}
&.matched-name {
@include hasRedUnderline;
position: relative;
}
}
h5 {
color: #fff;
font-size: calculateRem(16);
margin-bottom: calculateRem(8);
}
h5 {
color: #fff;
font-size: calculateRem(16);
margin-bottom: calculateRem(8);
}
p {
color: hsla(0, 0, 100, .6);
font-size: calculateRem(14);
line-height: 1.6;
p {
color: hsla(0, 0, 100, .6);
font-size: calculateRem(14);
line-height: 1.6;
span {
position: relative;
span {
position: relative;
&::before {
content: '';
position: absolute;
top: -10%;
left: -2%;
height: 120%;
width: 104%;
background-color: $red;
color: $navy;
z-index: -1;
}
&::before {
content: '';
position: absolute;
top: -10%;
left: -2%;
height: 120%;
width: 104%;
background-color: $red;
color: $navy;
z-index: -1;
}
}
}