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

   1 .l-books__wrapper {
   2   margin-top: 27px;
   3   width: 100%;
   4   background-color: #F2F2F2;
   5   padding-top: 38px;
   6   position: relative;
   7   padding-bottom: 80px;
   8
   9   h2 {
  10     font-weight: 600;
  11     font-size: 31px;
  12     line-height: 140%;
  13     letter-spacing: -0.01em;
  14     color: #474747;
  15     margin-top: 0;
  16   }
  17 }
  18
  19 .l-books {
  20   display: flex;
  21   flex-wrap: wrap;
  22   margin-top: 36px;
  23 }
  24
  25 .l-books__item {
  26   background: #FFFFFF;
  27   border-radius: 9px;
  28   padding: 21px;
  29   box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
  30   transition: all $ease-dynamic 350ms;
  31   outline: 0;
  32
  33   @include rwd(tablet) {
  34     padding: 16px;
  35   }
  36
  37   &.l-books__item--placeholder {
  38     opacity: 0;
  39     visibility: hidden;
  40   }
  41
  42   & * {
  43     outline: 0;
  44   }
  45
  46   &:not(:last-child) {
  47     margin-right: 17px;
  48
  49     @include rwd(tablet) {
  50       margin-right: 5px;
  51       margin-left: 5px;
  52     }
  53   }
  54
  55   &:hover {
  56     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  57   }
  58
  59   &.l-books__item--link {
  60     width: 212px;
  61     height: 350px;
  62
  63     background-color: #007880;
  64
  65     font-weight: 600;
  66     font-size: 21.5px;
  67     line-height: 140%;
  68     letter-spacing: -0.01em;
  69     color: #FFFFFF;
  70
  71     display: flex;
  72     flex-direction: column;
  73     justify-content: space-between;
  74
  75     .icon-link {
  76       margin-left: auto;
  77       margin-right: 0;
  78       &:hover {
  79         text-decoration: none;
  80       }
  81     }
  82
  83     a {
  84       &:hover {
  85         color: white;
  86       }
  87     }
  88   }
  89
  90   a {
  91     &:hover {
  92       text-decoration: underline;
  93     }
  94   }
  95
  96   h2 {
  97     font-weight: normal;
  98     font-size: 18px;
  99     line-height: 150%;
 100     color: #474747;
 101     margin: 0;
 102   }
 103   h3 {
 104     font-weight: normal;
 105     font-size: 15px;
 106     line-height: 160%;
 107     color: #808080;
 108     margin: 0;
 109   }
 110 }
 111
 112 .l-books__item__img {
 113   font-size: 0;
 114   margin: 0 0 11px;
 115
 116   img {
 117     max-width: 170px;
 118
 119     @include rwd(tablet) {
 120       max-width: 140px;
 121     }
 122   }
 123 }
 124
 125 .l-books__item__actions {
 126   display: flex;
 127   align-content: center;
 128   justify-content: flex-start;
 129   margin-bottom: 5px;
 130
 131   .icon {
 132     color: #083F4D;
 133     margin-right: 10px;
 134     @include font-size(16px);
 135
 136     &.icon-like,
 137     &.icon-liked {
 138       color: #FF4C54;
 139       @include font-size(19px);
 140       margin-right: 0;
 141       margin-left: auto;
 142     }
 143
 144     &:hover {
 145       text-decoration: none;
 146     }
 147   }
 148 }
 149
 150 .l-books__header {
 151   width: 100%;
 152   display: flex;
 153   margin-top: 34px;
 154   align-items: center;
 155   justify-content: space-between;
 156 }
 157
 158 .l-books__input {
 159   position: relative;
 160   display: flex;
 161   align-content: center;
 162   width: 560px;
 163
 164   .icon {
 165     @include font-size(22px);
 166     color: #083F4D;
 167     position: absolute;
 168     margin: auto;
 169     top: 0;
 170     bottom: 0;
 171     left: 19px;
 172     display: flex;
 173     align-items: center;
 174     justify-content: center;
 175     pointer-events: none;
 176   }
 177
 178   input {
 179     font-family: $base-font;
 180     font-size: 18px;
 181     font-style: italic;
 182     padding: 10px 20px 10px 50px;
 183     border-radius: 52px;
 184     border: 1px solid #D9D9D9;
 185     width: 100%;
 186     max-width: 580px;
 187     outline: 0;
 188     transition: border $ease-out 350ms;
 189
 190     &:focus {
 191       border-color: #007880;
 192     }
 193   }
 194 }
 195
 196 .l-books__sorting {
 197   display: flex;
 198   align-content: center;
 199
 200   span {
 201     font-weight: $bold;
 202     @include font-size(18px);
 203     line-height: 150%;
 204     color: #083F4D;
 205   }
 206
 207   div {
 208     display: flex;
 209     align-content: center;
 210
 211     button {
 212       border: 0;
 213       padding: 0;
 214       margin: 0 0 0 30px;
 215       background-color: transparent;
 216       outline: 0;
 217       font-weight: $regular;
 218       @include font-size(18px);
 219       line-height: 150%;
 220       color: #808080;
 221       cursor: pointer;
 222
 223       &.is-active {
 224         color: #083F4D;
 225         font-weight: $semibold;
 226       }
 227     }
 228   }
 229 }
 230
 231 .l-books__grid {
 232   display: flex;
 233   flex-wrap: wrap;
 234   margin-top: 34px;
 235
 236   .l-books__item {
 237     border: 1px solid #D9D9D9;
 238     margin-bottom: 17px;
 239
 240     &:nth-child(5n + 5) {
 241       margin-right: 0;
 242     }
 243   }
 244 }
 245
 246 .l-books__col {
 247   display: flex;
 248   flex-direction: column;
 249   margin-top: 34px;
 250
 251   .l-books__item {
 252     width: 705px;
 253     border: 1px solid #D9D9D9;
 254     margin-bottom: 17px;
 255     display: flex;
 256
 257     .l-books__item__img {
 258       margin-bottom: 0;
 259     }
 260   }
 261 }
 262
 263 .l-books__item__content {
 264   padding-left: 40px;
 265   position: relative;
 266
 267   .l-books__item__actions {
 268     position: absolute;
 269     right: 0;
 270   }
 271
 272   h2 {
 273     font-weight: $semibold;
 274     @include font-size(21px);
 275     line-height: 140%;
 276     letter-spacing: -0.01em;
 277   }
 278
 279   p {
 280     max-width: 390px;
 281     margin-top: 20px;
 282     font-weight: $regular;
 283     @include font-size(18px);
 284     line-height: 150%;
 285     color: #474747;
 286   }
 287
 288   & > a {
 289     display: block;
 290     margin-top: 20px;
 291     font-weight: $regular;
 292     @include font-size(18px);
 293     line-height: 150%;
 294     color: #007880;
 295   }
 296 }