X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/a37fe43b4e66df55d0491ae6defae31a07a645be..ab6d1311a5ddff7151ff0c574a202a7bcd0dfcc0:/src/wolnelektury/static/2022/more.scss?ds=sidebyside diff --git a/src/wolnelektury/static/2022/more.scss b/src/wolnelektury/static/2022/more.scss index dadf44990..6aa6caa3e 100644 --- a/src/wolnelektury/static/2022/more.scss +++ b/src/wolnelektury/static/2022/more.scss @@ -1,68 +1,89 @@ +@import "styles/utils/mixins"; + body.is-open { height: 100%; overflow-y: hidden; } -.l-change-pop { - margin-top: 18px; -} -.is-open .l-change-pop { - height: auto; - margin-top: 18px; - padding: 10px 50px; -} - -.l-navigation { - //opacity: .5; +.l-navigation__menu { + .scrollable { + height: 100%; + overflow-y: scroll; + padding-bottom: 30px; + } } -.l-navigation__logo { - height: 44px; +.l-navigation__menu__links ul li a em { + font-style: normal; + color: #FFA500; + font-weight: 600; } -.l-navigation__menu { - overflow-y: scroll; -} -.l-navigation__menu__book__info { - img { - width: 42px; - height: 60px; - } +.l-collections .l-books { + width: 100%; } -.l-navigation__login { - color: #74BDC2; - margin-right: 20px; - - a { - color: white; +.l-books, .l-books__grid { + @include rwd($break-wide) { + //justify-content: space-between; + gap: 20px; + .l-books__item { + margin: 0; + } } } -.l-navigation__actions { - position: relative; - height: 44px; - .user { - margin-right: 25px; +.slick-track { + margin: 0; + + .l-books__item { + @include rwd($break-wide) { + + width: 214.4px; + margin-left: 17px; + margin-right: 0; + &:first-of-type { + margin-left: 0px; + } + } } } -.l-books { - margin-right: -17px; -} -.l-books__grid { - margin-right: -17px; -} .l-books__item { - width: 212px; + //transition: opacity .1s, all cubic-bezier(0.25, 1, 0.5, 1) 350ms; + + width: 100%; + padding: 5.28vw; + + @include rwd($B2) { + width: calc(50vw - 32px/2 - 10px); + padding: 3.8vw; + } + @include rwd($B3) { + width: calc(33.33vw - 32px/3 - 10px); + padding: 2.73vw; + } + @include rwd($B4) { + width: calc(25vw - 32px/4 - 10px); + padding: 2.1vw; + } - margin-right: 17px !important; // reverse the 5n+5 rule. + @include rwd($B5) { + width: calc(20vw - 32px/5 - 10px); + padding: 1.63vw; + } - transition: opacity .1s, all cubic-bezier(0.25, 1, 0.5, 1) 350ms; + @include rwd($break-wide) { + width: 212px; + padding: 21px; + } } + + + .by-popularity { .l-books__item { order: attr(data-pop); @@ -85,42 +106,18 @@ body.is-open { } } - -.l-checkout__payments { - display: none; -} -.toggle-input{ - &#switch-once:checked { - ~.l-switch__wrapper { - label { - &:nth-of-type(1) { color: #003C3C; } - &:nth-of-type(2) { color: #74BDC2; } - } - .toggle { - left: 5px; - } - } - ~.payments-once { - display: flex; - } - } - &#switch-monthly:checked { - ~.l-switch__wrapper { - label { - &:nth-of-type(1) { color: #74BDC2; } - &:nth-of-type(2) { color: #003C3C; } - } - .toggle { - left: 39px; - } - } - ~.payments-recurring { - display: flex; - } - } +.l-checkout__box { + position: relative; } +.l-checkout__footer__content__item > div ul { + font-weight: normal; + font-size: 15px; + line-height: 150%; + color: #808080; +} + .l-checkout__form__row { .iframe { @@ -201,3 +198,115 @@ body.is-open { } } } + + +form { + label.required:before { + content: "* "; + color: #FF4C54; + } + .helptext { + color: #808080; + font-size: 15px; + line-height: 150%; + margin-bottom: 30px; + } + +} + +.socialaccount_providers { + list-style: none; + padding: 0; + + li { + display: inline-block; + margin-right: 10px; + } +} + + + + + +.experiment { + display: flex; + margin: 1em 16px; + font-size: 1.5em; + align-items: center; + flex-direction: column; + margin-top: 2em; + @include rwd($break-flow) { + flex-direction: row; + align-items: flex-end; + } + + > span, > div { + text-align: center; + @include rwd($break-flow) { + width: 50%; + } + } +} + + +.legend { + margin: 1em 16px; + font-size: .7em; + color: #777; + text-align:right; + font-style:italic; +} + + +.funding-promo-bar { + margin: 18px auto; + + .l-checkout__support { + margin: 0; + a { + display: flex; + align-items: start; + + .buttonlike { + margin-right: 10px; + background: #FFA500; + //color: #083F4D; + color: black; + border-radius: 5px; + font-size: 1.125rem; + line-height: 50px; + letter-spacing: -0.01em; + padding: 0 20px; + font-weight: 600; + transition: all cubic-bezier(0.25, 1, 0.5, 1) 350ms; + &:hover { + background: #92BD39; + } + } + .funding-bar-container { + flex-grow: 1; + } + } + } +} + +.l-checkout__support__bar { + overflow: hidden; +} + +.poll-bar { + height: 10px; + width: 100%; + display: block; + border-radius: 5px; + position: relative; + overflow: hidden; + + .poll-bar-inner { + height: 100%; + position: absolute; + border-radius: 5px; + background-color: #006066; + top: 0; left: 0; + } +}