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