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

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