src/wolnelektury/static/2022/styles/components/_lang.scss

   1 .c-lang {
   2   position: absolute;
   3   top: 11px;
   4
   5   width: 150px;
   6   right: 50px + 16px;
   7   opacity: 0;
   8   pointer-events: none;
   9   transition: opacity 350ms $ease-out;
  10   z-index: $master-layer + 1;
  11   display: none;
  12
  13   @include rwd($break-menu) {
  14       display: block;
  15   }
  16
  17   &.is-open {
  18     .c-lang__button {
  19       .icon-arrow-down {
  20         transform: rotate(-180deg);
  21       }
  22     }
  23     .c-lang__list {
  24       transform: none;
  25       opacity: 1;
  26       pointer-events: all;
  27     }
  28   }
  29 }
  30
  31 .c-lang__button {
  32   display: flex;
  33   align-items: center;
  34   color: $color-white;
  35   cursor: pointer;
  36
  37   .icon-lang {
  38     color: #92BD39;
  39     @include font-size(26px);
  40     margin-right: 8px;
  41   }
  42
  43   .icon-arrow-down {
  44     margin-left: 8px;
  45     transition: transform 350ms $ease-out;
  46   }
  47 }
  48
  49 .c-lang__list {
  50   margin-top: 10px;
  51   border-radius: 10px;
  52   background-color: #F7BA00;
  53   overflow: hidden;
  54   transform: translateY(-10px);
  55   opacity: 0;
  56   transition: all 350ms $ease-out;
  57   pointer-events: none;
  58   display: flex;
  59   flex-direction: column;
  60
  61   button {
  62     display: block;
  63     padding: 9px 20px;
  64     color: #474747;
  65     background-color: transparent;
  66     border: 0;
  67     cursor: pointer;
  68     font-family: "Source Sans Pro";
  69     font-size: 16px;
  70     line-height: 18.4px;
  71     text-align: left;
  72
  73     &:hover {
  74       background-color: #EDAA00;
  75     }
  76
  77     &.is-active {
  78       font-weight: $semibold;
  79       background-color: #EDAA00;
  80     }
  81   }
  82 }