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

   1 .c-lang {
   2   position: absolute;
   3   top: 23px;
   4   margin-right: 217px;
   5   opacity: 0;
   6   pointer-events: none;
   7   transition: opacity 350ms $ease-out;
   8   z-index: $master-layer + 1;
   9
  10   &.is-open {
  11     .c-lang__button {
  12       .icon-arrow-down {
  13         transform: rotate(-180deg);
  14       }
  15     }
  16     .c-lang__list {
  17       transform: none;
  18       opacity: 1;
  19       pointer-events: all;
  20     }
  21   }
  22 }
  23
  24 .c-lang__button {
  25   display: flex;
  26   align-items: center;
  27   color: $color-white;
  28   cursor: pointer;
  29
  30   .icon-lang {
  31     color: #92BD39;
  32     @include font-size(26px);
  33     margin-right: 8px;
  34   }
  35
  36   .icon-arrow-down {
  37     margin-left: 8px;
  38     transition: transform 350ms $ease-out;
  39   }
  40 }
  41
  42 .c-lang__list {
  43   margin-top: 10px;
  44   border-radius: 10px;
  45   background-color: #F7BA00;
  46   overflow: hidden;
  47   transform: translateY(-10px);
  48   opacity: 0;
  49   transition: all 350ms $ease-out;
  50   pointer-events: none;
  51   a {
  52     display: block;
  53     padding: 9px 20px;
  54     color: #474747;
  55
  56     &:hover {
  57       background-color: #EDAA00;
  58     }
  59
  60     &.is-active {
  61       font-weight: $semibold;
  62       background-color: #EDAA00;
  63     }
  64   }
  65 }