Letters
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / layout / _your-books.scss
1 .l-your-books {
2   background-color: $color-dark-primary;
3   padding-bottom: 40px;
4
5   .l-container {
6     display: flex;
7     overflow: hidden;
8   }
9 }
10
11 .l-your-books__header {
12   margin-top: 36px;
13   display: flex;
14   justify-content: space-between;
15   h3 {
16     margin-top: 0;
17     color: $color-secondary;
18     font-weight: $semibold;
19     @include font-size(21px);
20     line-height: 140%;
21     letter-spacing: -0.01em;
22   }
23 }
24
25 .l-your-books__header__actions {
26   display: none;
27   
28   @include rwd($break-flow) {
29     display: flex;
30   }
31
32   button {
33     outline: 0;
34     width: 40px;
35     height: 40px;
36     background: transparent;
37     border: 1px solid #007880;
38     border-radius: 50%;
39     display: flex;
40     align-content: center;
41     justify-content: center;
42     margin-left: 10px;
43     cursor: pointer;
44
45     &:hover {
46       background-color: darken($color-dark-primary, 2%);
47     }
48
49     &.js-collapse {
50       border-color: transparent;
51     }
52
53     .icon {
54       margin: auto;
55       color: $color-white;
56     }
57   }
58 }
59
60 .l-your-books__continue {
61   .l-books {
62       border-right: 0;
63       padding-right: 0;
64       margin-right: 10px;
65
66       @include rwd($break-flow) {
67           border-right: 1px solid #007880;
68           padding-right: 40px;
69           margin-right: 40px;
70       }
71   }
72 }
73
74 .l-your-books__shelf {
75   width: 100%;
76     max-width: 189px;
77
78     @include rwd($break-flow) {
79         width: 100%;
80         max-width: 928px;
81     }
82
83   .l-your-books__header {
84     padding-right: 85px;
85   }
86
87   .l-books {
88     display: block;
89     flex-wrap: initial;
90   }
91 }