X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/7bc61c00286672b6d39f6e45ed948b2c858cc2de..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 8f95d12f9..6aa6caa3e 100644 --- a/src/wolnelektury/static/2022/more.scss +++ b/src/wolnelektury/static/2022/more.scss @@ -1,21 +1,10 @@ +@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__logo { - height: 44px; -} - .l-navigation__menu { .scrollable { height: 100%; @@ -24,93 +13,77 @@ body.is-open { } } -.l-navigation__menu__book__header { - display: flex; - align-items: center; - justify-content: space-between; - - p { - margin: 0; - - &.korona { - &:before { - content: url('images/korona.svg'); - width: 21px; - margin-right: -21px; - position: relative; - top: -10px; - left: -3px; - } - } - } -} -.l-navigation__menu__book { - .button { - display: inline-block; - font-size: 16px; - font-weight: 700; - padding: 0 20px; - min-width: 212px; - line-height: 38px; - text-align: center; - - /* green 700 */ - background: #92BD39; - color: #083F4D; - border-radius: 6px; - - transition: background-color 150ms; - - &:hover { - background-color: #FBC40F; - } - } -} -.l-navigation__menu__book__info { - img { - width: 42px; - height: 60px; - } -} .l-navigation__menu__links ul li a em { font-style: normal; color: #FFA500; font-weight: 600; } -.l-navigation__login { - color: #74BDC2; - margin-right: 20px; - - a { - color: white; + +.l-collections .l-books { + width: 100%; +} +.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); @@ -137,39 +110,6 @@ body.is-open { position: relative; } -.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__footer__content__item > div ul { font-weight: normal; @@ -286,118 +226,87 @@ form { -.page-simple { - margin-bottom: 70px; - padding-bottom: 30px; - border-radius: 10px; - background: #E1F1F2; + + +.experiment { display: flex; - flex-direction: column; + margin: 1em 16px; + font-size: 1.5em; align-items: center; - - .white-box { - // for legacy templates - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - } - - h1 { - width: 100%; - margin: 0 0 50px 0; - padding: 32px 45px; - border-radius: 10px 10px 0 0; - - font-style: italic; - font-weight: 300; - font-size: 48px; - line-height: 55px; - letter-spacing: -0.02em; - background: #083F4D; - color: #92BD39; + flex-direction: column; + margin-top: 2em; + @include rwd($break-flow) { + flex-direction: row; + align-items: flex-end; } - > p, form { - min-width: 300px; - margin-left: 50px; - margin-right: 50px; - } + > span, > div { + text-align: center; + @include rwd($break-flow) { + width: 50%; + } + } } -.page-simple, .nice-controls { - button, input[type=submit] { - margin: 24px 0; - height: 56px; - background: #083F4D; - border: none; - border-radius: 3px; - font-weight: 600; - font-size: 20px; - line-height: 25px; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - color: #FFFFFF; - width: 340px; - - &.active { - outline: 2px solid #083F4D; - outline-offset: 3px; - } - - &:disabled { - opacity: .8; - } - } - - label { - font-style: normal; - font-weight: 600; - font-size: 15px; - line-height: 160%; - color: #083F4D; - margin-top: 24px; - } - input, textarea, select { - display: block; - width: 100%; - background: #FFFFFF; - color: black; - border: 1px solid #D5ECED; - border-radius: 3px; - transition: all cubic-bezier(0, 0, 0.2, 1) 250ms; - padding: 10px; - outline: 0; - } - input, select { - height: 56px; - } - input[type=checkbox], input[type=radio] { - display: inline; - float: left; - width: 1.2em; - height: 1.2em; - vertical-align: middle; - margin-right: 1em; - } +.legend { + margin: 1em 16px; + font-size: .7em; + color: #777; + text-align:right; + font-style:italic; } -.experiment { - display: flex; - align-items: center; +.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; -.page-simple { - .form-info { - h2 { - font-size: 1.5em; - margin-top: 0; - } + .poll-bar-inner { + height: 100%; + position: absolute; + border-radius: 5px; + background-color: #006066; + top: 0; left: 0; } }