src/wolnelektury/static/2022/styles/layout/_navigation.scss

   1 .l-navigation {
   2   max-width: 100%;
   3   margin: 0 auto;
   4   background-color: #083F4D;
   5   padding: 12px 0;
   6   display: flex;
   7   align-items: center;
   8   justify-content: space-between;
   9   flex-direction: column;
  10
  11   .l-container {
  12     display: flex;
  13     align-items: center;
  14     justify-content: space-between;
  15   }
  16
  17   &.is-open {
  18     position: fixed;
  19     top: 0; left: 0;
  20     width: 100%;
  21     z-index: $master-layer;
  22     .l-navigation__menu {
  23       opacity: 1;
  24       pointer-events: all;
  25     }
  26
  27     .c-lang {
  28       opacity: 1;
  29       .c-lang__button {
  30         pointer-events: all;
  31       }
  32     }
  33   }
  34 }
  35
  36 .l-navigation__logo {
  37   position: relative;
  38   z-index: $master-layer + 1;
  39 }
  40
  41 .l-navigation__button {
  42   appearance: none;
  43   border: 0;
  44   background: 0;
  45   padding: 0;
  46   margin: 0;
  47   outline: 0;
  48   position: relative;
  49   z-index: $master-layer + 1;
  50 }
  51
  52 .l-naviagion__search {
  53   width: 60%;
  54   max-width: 580px;
  55   margin-left: 60px;
  56   margin-right: auto;
  57
  58   input {
  59     font-family: $base-font;
  60     font-size: 18px;
  61     font-style: italic;
  62     border: 0;
  63     padding: 10px 20px;
  64     border-radius: 52px;
  65     width: 100%;
  66     max-width: 580px;
  67     outline: 0;
  68   }
  69 }
  70
  71 .l-navigation__actions {
  72   display: flex;
  73   align-items: center;
  74   justify-content: center;
  75
  76   .icon-liked {
  77     color: #85C7CC;
  78     font-size: 30px;
  79     margin-right: 25px;
  80   }
  81 }
  82
  83 .l-change-pop {
  84   align-items: center;
  85   max-width: 1140px;
  86   border-radius: 10px;
  87   padding: 10px 50px;
  88   width: 100%;
  89   margin-bottom: 10px;
  90   background-color: #FBC40F;
  91   position: relative;
  92   display: none;
  93
  94   &.show {
  95     display: flex;
  96   }
  97
  98   h3 {
  99     font-style: italic;
 100     font-weight: normal;
 101     font-size: 32px;
 102     line-height: 100%;
 103     letter-spacing: -0.02em;
 104     color: #333333;
 105     margin: 0;
 106     min-width: 189px;
 107     margin-right: 48px;
 108   }
 109
 110   p {
 111     font-weight: normal;
 112     font-size: 15px;
 113     line-height: 150%;
 114     color: #333333;
 115     margin: 0;
 116     max-width: 590px;
 117   }
 118 }
 119
 120 .l-change-pop__close {
 121   border: 0;
 122   background: transparent;
 123   color: #333333;
 124   outline: 0;
 125   position: absolute;
 126   right: 26px;
 127   top: 0;
 128   bottom: 0;
 129   margin: auto;
 130   cursor: pointer;
 131 }
 132
 133 .l-navigation__menu {
 134   position: fixed;
 135   top: 0; left: 0;
 136   width: 100%; height: 100%;
 137   background-color: #083F4D;
 138   z-index: $master-layer;
 139   padding-top: 93px;
 140   opacity: 0;
 141   pointer-events: none;
 142   transition: opacity 350ms $ease-out;
 143
 144   .l-container {
 145     display: flex;
 146     flex-direction: column;
 147   }
 148 }
 149
 150 .l-navigation__menu__links {
 151   width: 100%;
 152   display: flex;
 153   justify-content: space-between;
 154
 155   ul {
 156     margin: 0;
 157     padding: 0;
 158     list-style: none;
 159     max-width: 212px;
 160
 161     li {
 162       font-weight: $regular;
 163       @include font-size(18px);
 164       line-height: 100%;
 165       padding-top: 16px;
 166
 167       strong {
 168         color: #92BD39;
 169         font-weight: $semibold;
 170         @include font-size(21px);
 171         line-height: 140%;
 172         letter-spacing: -0.01em;
 173       }
 174
 175       a {
 176         color: $color-white;
 177         &:hover {
 178           text-decoration: underline;
 179         }
 180       }
 181
 182       hr {
 183         width: 34px;
 184         height: 1px;
 185         background: #007880;
 186         margin-left: 0;
 187         border: 0;
 188       }
 189     }
 190   }
 191 }
 192
 193 .l-navigation__menu__info {
 194   display: flex;
 195   width: 100%;
 196   padding-top: 58px;
 197   justify-content: space-between;
 198   align-items: flex-end;
 199 }
 200
 201 .l-navigation__menu__book {
 202   p {
 203     color: $color-white;
 204     @include font-size(21px);
 205     line-height: 140%;
 206     strong {
 207       color: #92BD39;
 208       letter-spacing: -0.01em;
 209       font-weight: $semibold;
 210     }
 211   }
 212 }
 213
 214 .l-navigation__menu__book__info {
 215   display: flex;
 216   margin-top: 20px;
 217   align-items: flex-start;
 218   padding: 12px;
 219   background-color: $color-white;
 220   border-radius: 6px;
 221   color: #808080;
 222
 223   img {
 224     margin-right: 10px;
 225   }
 226
 227   h3 {
 228     margin: 0;
 229     font-weight: $regular;
 230     @include font-size(15px);
 231     line-height: 120%;
 232     width: 150px;
 233     strong {
 234       display: block;
 235       font-weight: $semibold;
 236       @include font-size(18px);
 237       line-height: 130%;
 238     }
 239   }
 240
 241   p {
 242     margin: 0;
 243     width: 427px;
 244     font-weight: $regular;
 245     @include font-size(15px);
 246     line-height: 130%;
 247     color: #808080;
 248   }
 249 }
 250
 251 .l-navigation__menu__social {
 252   ul {
 253     display: flex;
 254     list-style: none;
 255     padding: 0;
 256     margin: 0;
 257     li {
 258       &:not(:last-child) {
 259         margin-right: 36px;
 260       }
 261       a {
 262         color: $color-white;
 263         &:hover {
 264           color: #92BD39;
 265         }
 266       }
 267       .icon {
 268         @include font-size(28px);
 269       }
 270     }
 271   }
 272 }