ETHReport/components/searchBar/style.scss

83 lines
1.4 KiB
SCSS
Raw Normal View History

@import './assets/styles/global.scss';
.search-bar {
2018-07-11 09:18:07 +00:00
background-color: $blue;
background-image: url('/static/img/header-bg.jpg');
background-position: center;
background-size: cover;
2018-07-20 07:17:00 +00:00
margin-bottom: calculateRem(40);
2018-07-17 14:23:38 +00:00
height: calculateRem(164);
padding-top: calculateRem(52);
2018-07-17 14:23:38 +00:00
@media (min-width: $desktop) {
height: calculateRem(240);
2018-07-19 14:07:28 +00:00
padding-top: calculateRem(80);
2018-07-17 14:23:38 +00:00
}
.main-heading {
margin-bottom: calculateRem(12);
2018-07-11 09:18:07 +00:00
@media (min-width: $desktop) {
2018-07-17 14:23:38 +00:00
margin-bottom: calculateRem(32);
2018-07-11 09:18:07 +00:00
}
}
2018-07-20 07:17:00 +00:00
&.search-active {
margin-bottom: calculateRem(92);
}
}
2018-07-09 14:29:57 +00:00
.search-form {
position: relative;
bottom: calculateRem(-24);
}
.search-input {
width: 100%;
2018-07-17 13:07:07 +00:00
height: calculateRem(44);
border: 0;
2018-07-17 14:23:38 +00:00
box-shadow: 0 0 0 8px $navy-dark;
2018-07-11 09:18:07 +00:00
padding: calculateRem(12);
font-size: calculateRem(16);
&:focus,
&:active {
outline: none;
2018-07-17 14:23:38 +00:00
.search-icon {
display: none;
}
}
}
2018-07-09 14:29:57 +00:00
2018-07-17 14:23:38 +00:00
.search-icon {
position: absolute;
top: 50%;
right: calculateRem(12);
margin-top: calculateRem(-10);
}
2018-07-09 14:29:57 +00:00
.search-clear-button {
position: absolute;
top: 10%;
2018-07-17 14:23:38 +00:00
right: 0;
2018-07-09 14:29:57 +00:00
height: 80%;
border: 0;
padding: 0 calculateRem(16);
cursor: pointer;
font-size: calculateRem(14);
background-color: #fff;
display: flex;
align-items: center;
&:focus,
&:active {
outline: none;
}
}
2018-07-18 10:44:44 +00:00
.search-count {
margin: calculateRem(36) 0;
font-size: calculateRem(13);
}