src/wolnelektury/static/2022/more.scss

   1 body.is-open {
   2     height: 100%;
   3     overflow-y: hidden;
   4 }
   5
   6 .l-change-pop {
   7     margin-top: 18px;
   8 }
   9 .is-open .l-change-pop {
  10     height: auto;
  11     margin-top: 18px;
  12     padding: 10px 50px;
  13 }
  14
  15 .l-navigation {
  16     //opacity: .5;
  17 }
  18
  19 .l-navigation__logo {
  20     height: 44px;
  21 }
  22
  23 .l-navigation__menu {
  24     overflow-y: scroll;
  25 }
  26 .l-navigation__menu__book__info {
  27     img {
  28         width: 42px;
  29         height: 60px;
  30     }
  31 }
  32 .l-navigation__login {
  33     color: #74BDC2;
  34     margin-right: 20px;
  35
  36     a {
  37         color: white;
  38     }
  39 }
  40 .l-navigation__actions {
  41     position: relative;
  42     height: 44px;
  43
  44     .user {
  45         margin-right: 25px;
  46     }
  47 }
  48
  49
  50 .l-books {
  51     margin-right: -17px;
  52 }
  53 .l-books__grid {
  54     margin-right: -17px;
  55 }
  56
  57 .l-books__item {
  58     width: 212px;
  59
  60     margin-right: 17px !important; // reverse the 5n+5 rule.
  61
  62     transition: opacity .1s, all cubic-bezier(0.25, 1, 0.5, 1) 350ms;
  63 }
  64
  65
  66 .by-popularity {
  67     .l-books__item {
  68         order: attr(data-pop);
  69     }
  70 }
  71
  72
  73
  74 .toggle-input {
  75     left: calc(50% - 77px/2);
  76     opacity: 0;
  77     position: absolute;
  78     //top: 0;
  79     height: 26px;
  80     width: 77px;
  81     z-index: 2;
  82
  83     &:checked {
  84         z-index: 0;
  85     }
  86 }
  87
  88
  89 .l-checkout__payments {
  90     display: none;
  91 }
  92 .toggle-input{
  93     &#switch-once:checked {
  94         ~.l-switch__wrapper {
  95             label {
  96                 &:nth-of-type(1) { color: #003C3C; }
  97                 &:nth-of-type(2) { color: #74BDC2; }
  98             }
  99             .toggle {
 100                 left: 5px;
 101             }
 102         }
 103         ~.payments-once {
 104             display: flex;
 105         }
 106     }
 107     &#switch-monthly:checked {
 108         ~.l-switch__wrapper {
 109             label {
 110                 &:nth-of-type(1) { color: #74BDC2; }
 111                 &:nth-of-type(2) { color: #003C3C; }
 112             }
 113             .toggle {
 114                 left: 39px;
 115             }
 116         }
 117         ~.payments-recurring {
 118             display: flex;
 119         }
 120     }
 121 }
 122
 123
 124
 125 .l-checkout__form__row {
 126     .iframe {
 127         margin-bottom: 16px;
 128     }
 129 }
 130
 131
 132
 133 .l-books__item__content {
 134     width: 100%;
 135
 136     .fragment-text {
 137         max-width: 390px;
 138         margin-top: 20px;
 139         font-weight: 400;
 140         font-size: 18px;
 141         font-size: 1.125rem;
 142         line-height: 150%;
 143         color: #474747;
 144
 145         h1, h2, h3, h4 {
 146             font-size: 1em;
 147         }
 148     }
 149 }
 150
 151
 152
 153 #user-menu {
 154     //display: none;
 155
 156     position:absolute;
 157     top: 60px;
 158     z-index: 1;
 159
 160     position: absolute;
 161     width: 186px;
 162     top: 48px;
 163     right: 45px;
 164
 165     /* yellow 900 */
 166     background: #F7BA00;
 167     box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
 168     border-radius: 10px;
 169     overflow: hidden;
 170
 171     opacity:0;
 172     pointer-events: none;
 173     transition: 200ms opacity;
 174
 175     &.is-open {
 176         //display: block;
 177         pointer-events: all;
 178         opacity: 100%;
 179     }
 180
 181     ul {
 182         margin: 0;
 183         padding: 0;
 184         list-style: none;
 185
 186         li {
 187             a {
 188                 color: #474747;
 189                 display: block;
 190                 line-height: 27px;
 191                 padding: 8px 21px;
 192                 &:hover {
 193                     color: #474747;
 194                     background: #EDAA00;
 195                 }
 196
 197                 strong {
 198                     font-weight: 600;
 199                 }
 200             }
 201         }
 202     }
 203 }