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

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