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

   1 .c-select {
   2   margin: 0 5px 0 5px;
   3   margin-right: 15px;
   4   width: 40px;
   5   height: 40px;
   6   display: flex;
   7   align-items: center;
   8   justify-content: center;
   9   position: absolute;
  10   left: calc(10% - 20px);
  11   top: 15px;
  12
  13   @include rwd($break-flow) {
  14       position: static;
  15   }
  16
  17   &.is-active {
  18     ul {
  19       li {
  20         display: flex;
  21         &:first-child {
  22           border-radius: 4px 4px 0 0 !important;
  23         }
  24
  25         &:last-child {
  26           border-radius: 0 0 4px 4px !important;
  27         }
  28         &:hover {
  29           background: darken(#083F4D, 5%);
  30         }
  31         &.is-active {
  32           border-radius: 0;
  33           color: #007880;
  34           background: #74bdc2;
  35         }
  36       }
  37     }
  38   }
  39
  40   ul {
  41       margin: 0;
  42       padding: 0;
  43     li {
  44       align-items: center;
  45       justify-content: center;
  46       font-weight: 700;
  47       font-size: 15px;
  48       line-height: 120%;
  49       display: none;
  50       cursor: pointer;
  51       width: 43px;
  52       height: 22px;
  53       transition: background $ease-out 450ms;
  54       text-align: center;
  55       color: #ffffff;
  56       background: #083F4D;
  57       &.is-active {
  58         display: flex;
  59         align-items: center;
  60         justify-content: center;
  61         background: transparent;
  62         border-radius: 4px;
  63         color: #007880;
  64         &:hover {
  65           background: #74bdc2;
  66         }
  67       }
  68     }
  69   }
  70 }