ETHReport/components/searchBar/style.scss

79 lines
1.3 KiB
SCSS

@import './assets/styles/global.scss';
.search-bar {
background-color: $blue;
background-image: url('/static/img/header-bg.jpg');
background-position: center;
background-size: cover;
margin-bottom: calculateRem(56);
height: calculateRem(164);
padding-top: calculateRem(52);
@media (min-width: $desktop) {
height: calculateRem(240);
padding-top: calculateRem(88);
}
.main-heading {
margin-bottom: calculateRem(12);
@media (min-width: $desktop) {
margin-bottom: calculateRem(32);
}
}
}
.search-form {
position: relative;
bottom: calculateRem(-24);
}
.search-input {
width: 100%;
height: calculateRem(44);
border: 0;
box-shadow: 0 0 0 8px $navy-dark;
padding: calculateRem(12);
font-size: calculateRem(16);
&:focus,
&:active {
outline: none;
.search-icon {
display: none;
}
}
}
.search-icon {
position: absolute;
top: 50%;
right: calculateRem(12);
margin-top: calculateRem(-10);
}
.search-clear-button {
position: absolute;
top: 10%;
right: 0;
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;
}
}
.search-count {
margin: calculateRem(36) 0;
font-size: calculateRem(13);
}