X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/b8c235267a6345ebe3891f49c16ad3fc5f1d3f25..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 2b3899520..6aa6caa3e 100644 --- a/src/wolnelektury/static/2022/more.scss +++ b/src/wolnelektury/static/2022/more.scss @@ -1,61 +1,89 @@ -.is-open { +@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__menu { + .scrollable { + height: 100%; + overflow-y: scroll; + padding-bottom: 30px; + } } -.l-navigation { - //opacity: .5; +.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 { - .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; - margin-right: 17px !important; // reverse the 5n+5 rule. + width: 100%; + padding: 5.28vw; - transition: opacity .1s, all cubic-bezier(0.25, 1, 0.5, 1) 350ms; + @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; + } + + @include rwd($B5) { + width: calc(20vw - 32px/5 - 10px); + padding: 1.63vw; + } + + @include rwd($break-wide) { + width: 212px; + padding: 21px; + } } + + + .by-popularity { .l-books__item { order: attr(data-pop); @@ -78,42 +106,18 @@ } } - -.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 { @@ -140,3 +144,169 @@ } } } + + + +#user-menu { + //display: none; + + position:absolute; + top: 60px; + z-index: 1; + + position: absolute; + width: 186px; + top: 48px; + right: 45px; + + /* yellow 900 */ + background: #F7BA00; + box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2); + border-radius: 10px; + overflow: hidden; + + opacity:0; + pointer-events: none; + transition: 200ms opacity; + + &.is-open { + //display: block; + pointer-events: all; + opacity: 100%; + } + + ul { + margin: 0; + padding: 0; + list-style: none; + + li { + a { + color: #474747; + display: block; + line-height: 27px; + padding: 8px 21px; + &:hover { + color: #474747; + background: #EDAA00; + } + + strong { + font-weight: 600; + } + } + } + } +} + + +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; + } +}