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