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       padding: 0;
  36     li {
  37       align-items: center;
  38       justify-content: center;
  39       font-weight: 700;
  40       font-size: 15px;
  41       line-height: 120%;
  42       display: none;
  43       cursor: pointer;
  44       width: 43px;
  45       height: 22px;
  46       transition: background $ease-out 450ms;
  47       text-align: center;
  48       color: #ffffff;
  49       background: #083F4D;
  50       &.is-active {
  51         display: flex;
  52         align-items: center;
  53         justify-content: center;
  54         background: transparent;
  55         border-radius: 4px;
  56         color: #007880;
  57         &:hover {
  58           background: #74bdc2;
  59         }
  60       }
  61     }
  62   }
  63 }