src/wolnelektury/static/2022/styles/layout/_button.scss

   1 .l-button {
   2   &.l-button--media {
   3     @include font-size(14px);
   4     border: 2px solid #D5ECED;
   5     border-radius: 5px;
   6     padding: 10px;
   7     cursor: pointer;
   8     transition: all $ease-dynamic 350ms;
   9     background-color: $color-white;
  10     outline: 0;
  11
  12     font-weight: bold;
  13     line-height: 17.6px;
  14     display: flex;
  15     align-items: center;
  16     text-align: center;
  17     letter-spacing: -0.01em;
  18     color: #007880;
  19     font-family: $base-font;
  20
  21     @include rwd($break-flow) {
  22         @include font-size(16px);
  23         line-height: 20px;
  24         padding: 19px 0;
  25     }
  26
  27     .icon {
  28       font-size: 21px;
  29       margin-right: 10px;
  30     }
  31
  32     img {
  33         height: 21px;
  34     }
  35
  36     &:hover {
  37       background-color: #D5ECED;
  38     }
  39
  40     &.l-button--media--full {
  41       color: $color-white;
  42       background: #083F4D;
  43       border: 2px solid #083F4D;
  44       &:hover {
  45         background: darken(#083F4D, 2%);
  46         border-color: darken(#083F4D, 2%);
  47       }
  48     }
  49   }
  50
  51   &.l-button--default {
  52     cursor: pointer;
  53     color: $color-white;
  54     background: #007880;
  55     border: 2px solid #007880;
  56     border-radius: 5px;
  57     letter-spacing: -0.01em;
  58     font-weight: $semibold;
  59     text-align: center;
  60     @include font-size(18px);
  61     line-height: 140%;
  62     padding: 5px 20px;
  63     transition: all $ease-dynamic 350ms;
  64
  65     @include rwd($break-flow) {
  66       @include font-size(25px);
  67     }
  68
  69     &:hover {
  70       background: #083F4D;
  71       border-color: #083F4D;
  72     }
  73
  74     &.l-button--default--dark {
  75       color: #083F4D;
  76       background: #92BD39;
  77       border-color: #92BD39;
  78       &:hover {
  79         background: #FFA500;
  80         border-color: #FFA500;
  81       }
  82     }
  83   }
  84 }