X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/d019a9b5e928dcf777852d0c8d5413fd3d69b4dd..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 604c24d38..6aa6caa3e 100644 --- a/src/wolnelektury/static/2022/more.scss +++ b/src/wolnelektury/static/2022/more.scss @@ -1,3 +1,312 @@ +@import "styles/utils/mixins"; + +body.is-open { + height: 100%; + overflow-y: hidden; +} + +.l-navigation__menu { + .scrollable { + height: 100%; + overflow-y: scroll; + padding-bottom: 30px; + } +} + +.l-navigation__menu__links ul li a em { + font-style: normal; + color: #FFA500; + font-weight: 600; +} + +.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; + } + } +} + +.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__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; + } + + @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); + } +} + + + +.toggle-input { + left: calc(50% - 77px/2); + opacity: 0; + position: absolute; + //top: 0; + height: 26px; + width: 77px; + z-index: 2; + + &:checked { + z-index: 0; + } +} + +.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 { + margin-bottom: 16px; + } +} + + + +.l-books__item__content { + width: 100%; + + .fragment-text { + max-width: 390px; + margin-top: 20px; + font-weight: 400; + font-size: 18px; + font-size: 1.125rem; + line-height: 150%; + color: #474747; + + h1, h2, h3, h4 { + font-size: 1em; + } + } +} + + + +#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; + } }