src/wolnelektury/static/2022/more.scss

   1 .l-books {
   2     margin-right: -17px;
   3 }
   4 .l-books__grid {
   5     margin-right: -17px;
   6 }
   7
   8 .l-books__item {
   9     width: 212px;
  10
  11     margin-right: 17px !important; // reverse the 5n+5 rule.
  12
  13     transition: opacity .1s, all cubic-bezier(0.25, 1, 0.5, 1) 350ms;
  14 }
  15
  16
  17 .by-popularity {
  18     .l-books__item {
  19         order: attr(data-pop);
  20     }
  21 }
  22
  23
  24
  25 .toggle-input {
  26     left: calc(50% - 77px/2);
  27     opacity: 0;
  28     position: absolute;
  29     //top: 0;
  30     height: 26px;
  31     width: 77px;
  32     z-index: 2;
  33
  34     &:checked {
  35         z-index: 0;
  36     }
  37 }
  38
  39
  40 .l-checkout__payments {
  41     display: none;
  42 }
  43 .toggle-input{
  44     &#switch-once:checked {
  45         ~.l-switch__wrapper {
  46             label {
  47                 &:nth-of-type(1) { color: #003C3C; }
  48                 &:nth-of-type(2) { color: #74BDC2; }
  49             }
  50             .toggle {
  51                 left: 5px;
  52             }
  53         }
  54         ~.payments-once {
  55             display: flex;
  56         }
  57     }
  58     &#switch-monthly:checked {
  59         ~.l-switch__wrapper {
  60             label {
  61                 &:nth-of-type(1) { color: #74BDC2; }
  62                 &:nth-of-type(2) { color: #003C3C; }
  63             }
  64             .toggle {
  65                 left: 39px;
  66             }
  67         }
  68         ~.payments-recurring {
  69             display: flex;
  70         }
  71     }
  72 }
  73
  74
  75
  76 .l-checkout__form__row {
  77     .iframe {
  78         margin-bottom: 16px;
  79     }
  80 }
  81
  82
  83
  84 .l-books__item__content {
  85     width: 100%;
  86
  87     .fragment-text {
  88         max-width: 390px;
  89         margin-top: 20px;
  90         font-weight: 400;
  91         font-size: 18px;
  92         font-size: 1.125rem;
  93         line-height: 150%;
  94         color: #474747;
  95
  96         h1, h2, h3, h4 {
  97             font-size: 1em;
  98         }
  99     }
 100 }