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