ETHReport/components/interviews/interviewsList/style.scss

108 lines
1.7 KiB
SCSS

@import './assets/styles/global.scss';
.mob-interviews-link {
display: flex;
justify-content: space-between;
margin-bottom: calculateRem(24);
@media (min-width: $desktop) {
display: none;
}
button {
color: #fff;
padding: 0;
font-size: calculateRem($body-font-size);
&:hover span {
text-decoration: underline;
}
img {
position: relative;
top: calculateRem(2);
}
}
}
.interviews-nav-wrap {
@media (min-width: $desktop) {
display: flex;
justify-content: space-between;
justify-content: flex-end;
position: relative;
}
}
.interviews-list {
@media (min-width: $desktop) {
position: absolute;
top: 0;
left: 0;
height: 100%;
overflow: auto;
width: 95%;
}
/* width */
&::-webkit-scrollbar {
width: calculateRem(16);
}
/* Track */
&::-webkit-scrollbar-track {
background: $navy-dark;
border: 2px solid $navy;
}
/* Handle */
&::-webkit-scrollbar-thumb {
background: $navy;
}
.letter-block {
color: #fff;
padding-bottom: calculateRem(32);
> div {
font-size: calculateRem(32);
margin-bottom: calculateRem(20);
}
}
button {
border: 0;
padding: 0;
text-align: left;
font-size: calculateRem(18);
line-height: 1.3;
margin-bottom: calculateRem(12);
color: #fff;
&:hover {
text-decoration: underline;
}
}
}
.letters-nav {
display: none;
@media (min-width: $desktop) {
display: flex;
flex-direction: column;
button {
color: #fff;
margin-bottom: calculateRem(8);
text-transform: lowercase;
&.active {
background-color: $red;
}
}
}
}