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__logo {
  16     height: 44px;
  17 }
  18
  19 .l-navigation__menu {
  20     .scrollable {
  21         height: 100%;
  22         overflow-y: scroll;
  23         padding-bottom: 30px;
  24     }
  25 }
  26
  27 .l-navigation__menu__book__header {
  28     display: flex;
  29     align-items: center;
  30     justify-content: space-between;
  31
  32     p {
  33         margin: 0;
  34
  35         &.korona {
  36             &:before {
  37                 content: url('images/korona.svg');
  38                 width: 21px;
  39                 margin-right: -21px;
  40                 position: relative;
  41                 top: -10px;
  42                 left: -3px;
  43             }
  44         }
  45     }
  46 }
  47 .l-navigation__menu__book {
  48     .button {
  49         display: inline-block;
  50         font-size: 16px;
  51         font-weight: 700;
  52         padding: 0 20px;
  53         min-width: 212px;
  54         line-height: 38px;
  55         text-align: center;
  56
  57         /* green 700 */
  58         background: #92BD39;
  59         color: #083F4D;
  60         border-radius: 6px;
  61
  62         transition: background-color 150ms;
  63
  64         &:hover {
  65             background-color: #FBC40F;
  66         }
  67     }
  68 }
  69 .l-navigation__menu__book__info {
  70     img {
  71         width: 42px;
  72         height: 60px;
  73     }
  74 }
  75 .l-navigation__menu__links ul li a em {
  76     font-style: normal;
  77     color: #FFA500;
  78     font-weight: 600;
  79 }
  80 .l-navigation__login {
  81     color: #74BDC2;
  82     margin-right: 20px;
  83
  84     a {
  85         color: white;
  86     }
  87 }
  88 .l-navigation__actions {
  89     position: relative;
  90     height: 44px;
  91
  92     .user {
  93         margin-right: 25px;
  94     }
  95 }
  96
  97
  98 .l-books {
  99     margin-right: -17px;
 100 }
 101 .l-books__grid {
 102     margin-right: -17px;
 103 }
 104
 105 .l-books__item {
 106     width: 212px;
 107
 108     margin-right: 17px !important; // reverse the 5n+5 rule.
 109
 110     transition: opacity .1s, all cubic-bezier(0.25, 1, 0.5, 1) 350ms;
 111 }
 112
 113
 114 .by-popularity {
 115     .l-books__item {
 116         order: attr(data-pop);
 117     }
 118 }
 119
 120
 121
 122 .toggle-input {
 123     left: calc(50% - 77px/2);
 124     opacity: 0;
 125     position: absolute;
 126     //top: 0;
 127     height: 26px;
 128     width: 77px;
 129     z-index: 2;
 130
 131     &:checked {
 132         z-index: 0;
 133     }
 134 }
 135
 136 .l-checkout__box {
 137     position: relative;
 138 }
 139
 140 .l-checkout__payments {
 141     display: none;
 142 }
 143 .toggle-input{
 144     &#switch-once:checked {
 145         ~.l-switch__wrapper {
 146             label {
 147                 &:nth-of-type(1) { color: #003C3C; }
 148                 &:nth-of-type(2) { color: #74BDC2; }
 149             }
 150             .toggle {
 151                 left: 5px;
 152             }
 153         }
 154         ~.payments-once {
 155             display: flex;
 156         }
 157     }
 158     &#switch-monthly:checked {
 159         ~.l-switch__wrapper {
 160             label {
 161                 &:nth-of-type(1) { color: #74BDC2; }
 162                 &:nth-of-type(2) { color: #003C3C; }
 163             }
 164             .toggle {
 165                 left: 39px;
 166             }
 167         }
 168         ~.payments-recurring {
 169             display: flex;
 170         }
 171     }
 172 }
 173
 174
 175
 176 .l-checkout__form__row {
 177     .iframe {
 178         margin-bottom: 16px;
 179     }
 180 }
 181
 182
 183
 184 .l-books__item__content {
 185     width: 100%;
 186
 187     .fragment-text {
 188         max-width: 390px;
 189         margin-top: 20px;
 190         font-weight: 400;
 191         font-size: 18px;
 192         font-size: 1.125rem;
 193         line-height: 150%;
 194         color: #474747;
 195
 196         h1, h2, h3, h4 {
 197             font-size: 1em;
 198         }
 199     }
 200 }
 201
 202
 203
 204 #user-menu {
 205     //display: none;
 206
 207     position:absolute;
 208     top: 60px;
 209     z-index: 1;
 210
 211     position: absolute;
 212     width: 186px;
 213     top: 48px;
 214     right: 45px;
 215
 216     /* yellow 900 */
 217     background: #F7BA00;
 218     box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
 219     border-radius: 10px;
 220     overflow: hidden;
 221
 222     opacity:0;
 223     pointer-events: none;
 224     transition: 200ms opacity;
 225
 226     &.is-open {
 227         //display: block;
 228         pointer-events: all;
 229         opacity: 100%;
 230     }
 231
 232     ul {
 233         margin: 0;
 234         padding: 0;
 235         list-style: none;
 236
 237         li {
 238             a {
 239                 color: #474747;
 240                 display: block;
 241                 line-height: 27px;
 242                 padding: 8px 21px;
 243                 &:hover {
 244                     color: #474747;
 245                     background: #EDAA00;
 246                 }
 247
 248                 strong {
 249                     font-weight: 600;
 250                 }
 251             }
 252         }
 253     }
 254 }