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
  10   &.is-active {
  11     ul {
  12       li {
  13         display: flex;
  14         &:first-child {
  15           border-radius: 4px 4px 0 0 !important;
  16         }
  17
  18         &:last-child {
  19           border-radius: 0 0 4px 4px !important;
  20         }
  21         &:hover {
  22           background: darken(#083F4D, 5%);
  23         }
  24         &.is-active {
  25           border-radius: 0;
  26           color: #007880;
  27           background: #74bdc2;
  28         }
  29       }
  30     }
  31   }
  32
  33   ul {
  34     margin: 0;
  35     li {
  36       align-items: center;
  37       justify-content: center;
  38       font-weight: 700;
  39       font-size: 15px;
  40       line-height: 120%;
  41       display: none;
  42       cursor: pointer;
  43       width: 43px;
  44       height: 22px;
  45       transition: background $ease-out 450ms;
  46       text-align: center;
  47       color: #ffffff;
  48       background: #083F4D;
  49       &.is-active {
  50         display: flex;
  51         align-items: center;
  52         justify-content: center;
  53         background: transparent;
  54         border-radius: 4px;
  55         color: #007880;
  56         &:hover {
  57           background: #74bdc2;
  58         }
  59       }
  60     }
  61   }
  62 }