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
  18 .l-navigation__button {
  19   appearance: none;
  20   border: 0;
  21   background: 0;
  22   padding: 0;
  23   margin: 0;
  24   outline: 0;
  25 }
  26
  27 .l-naviagion__search {
  28   width: 60%;
  29   max-width: 580px;
  30   margin-left: 60px;
  31   margin-right: auto;
  32
  33   input {
  34     font-family: $base-font;
  35     font-size: 18px;
  36     font-style: italic;
  37     border: 0;
  38     padding: 10px;
  39     border-radius: 52px;
  40     width: 100%;
  41     max-width: 580px;
  42     outline: 0;
  43   }
  44 }
  45
  46 .l-navigation__actions {
  47   display: flex;
  48   align-items: center;
  49   justify-content: center;
  50
  51   .icon-liked {
  52     color: #85C7CC;
  53     font-size: 30px;
  54     margin-right: 25px;
  55   }
  56 }
  57
  58 .l-change-pop {
  59   align-items: center;
  60   max-width: 1140px;
  61   border-radius: 10px;
  62   padding: 10px 50px;
  63   width: 100%;
  64   margin-bottom: 10px;
  65   background-color: #FBC40F;
  66   position: relative;
  67   display: none;
  68
  69   &.show {
  70     display: flex;
  71   }
  72
  73   h3 {
  74     font-style: italic;
  75     font-weight: normal;
  76     font-size: 32px;
  77     line-height: 100%;
  78     letter-spacing: -0.02em;
  79     color: #333333;
  80     margin: 0;
  81     min-width: 189px;
  82     margin-right: 48px;
  83   }
  84
  85   p {
  86     font-weight: normal;
  87     font-size: 15px;
  88     line-height: 150%;
  89     color: #333333;
  90     margin: 0;
  91     max-width: 590px;
  92   }
  93 }
  94
  95 .l-change-pop__close {
  96   border: 0;
  97   background: transparent;
  98   color: #333333;
  99   outline: 0;
 100   position: absolute;
 101   right: 26px;
 102   top: 0;
 103   bottom: 0;
 104   margin: auto;
 105   cursor: pointer;
 106 }