style.scss
1 @import './assets/styles/global.scss'; 2 3 .mob-interviews-link { 4 display: flex; 5 justify-content: space-between; 6 margin-bottom: calculateRem(32); 7 8 @media (min-width: $desktop) { 9 display: none; 10 } 11 12 button { 13 color: #fff; 14 padding: 0; 15 font-size: calculateRem($body-font-size); 16 17 &:hover span { 18 text-decoration: underline; 19 } 20 21 img { 22 position: relative; 23 top: calculateRem(2); 24 } 25 } 26 } 27 28 .interviews-nav-wrap { 29 30 @media (min-width: $desktop) { 31 display: flex; 32 justify-content: space-between; 33 justify-content: flex-end; 34 position: relative; 35 } 36 } 37 38 .interviews-list { 39 40 @media (min-width: $desktop) { 41 position: absolute; 42 top: 0; 43 left: 0; 44 height: 100%; 45 overflow: auto; 46 width: 95%; 47 } 48 49 /* width */ 50 &::-webkit-scrollbar { 51 width: calculateRem(16); 52 } 53 54 /* Track */ 55 &::-webkit-scrollbar-track { 56 background: $navy-dark; 57 border: 2px solid $navy; 58 } 59 60 /* Handle */ 61 &::-webkit-scrollbar-thumb { 62 background: $navy; 63 } 64 65 .letter-block { 66 color: #fff; 67 padding-bottom: calculateRem(32); 68 69 > div { 70 font-size: calculateRem(32); 71 margin-bottom: calculateRem(20); 72 } 73 } 74 75 button { 76 border: 0; 77 padding: 0; 78 text-align: left; 79 font-size: calculateRem(18); 80 line-height: 1.3; 81 margin-bottom: calculateRem(12); 82 color: #fff; 83 84 &:hover { 85 text-decoration: underline; 86 } 87 } 88 } 89 90 .letters-nav { 91 display: none; 92 93 @media (min-width: $desktop) { 94 display: flex; 95 flex-direction: column; 96 97 button { 98 color: #fff; 99 margin-bottom: calculateRem(8); 100 text-transform: lowercase; 101 102 &.active { 103 background-color: $red; 104 } 105 } 106 } 107 }