X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/b0fadf2591f3af957c1c8e0307d0bcef9e9f8538..6407cf24cd6cf3f9ea6fdf4a8924dad109a590e6:/src/wolnelektury/static/2022/styles/layout/_checkout.scss?ds=sidebyside diff --git a/src/wolnelektury/static/2022/styles/layout/_checkout.scss b/src/wolnelektury/static/2022/styles/layout/_checkout.scss index 26203f5d7..870da2311 100644 --- a/src/wolnelektury/static/2022/styles/layout/_checkout.scss +++ b/src/wolnelektury/static/2022/styles/layout/_checkout.scss @@ -1,6 +1,9 @@ //Support bar .l-checkout__support { - margin-bottom: 22px; + margin-bottom: 22px; + + margin-left: 16px; + margin-right: 16px; } .l-checkout__support__bar { @@ -49,11 +52,19 @@ border-radius: 10px; padding-bottom: 30px; overflow: hidden; + margin: 0 16px; } .l-checkout__box__header { display: flex; background: #083F4D; + + img { + display: none; + @include rwd($break-flow) { + display: block; + } + } } .l-checkout__box__header__content h1 { @@ -92,9 +103,13 @@ //Steps .l-checkout__steps { display: flex; - padding: 0 125px; - justify-content: space-between; margin-top: -24px; + justify-content: space-around; + + @include rwd($break-flow) { + padding: 0 125px; + justify-content: space-between; + } div { width: 145px; @@ -126,6 +141,10 @@ text-align: center; letter-spacing: -0.01em; color: #083F4D; + display: none; + @include rwd($break-flow) { + display: block; + } } &.is-completed { @@ -155,6 +174,7 @@ align-items: center; justify-content: center; margin-top: 35px; + width: 100%; } .l-switch { @@ -167,13 +187,17 @@ } .l-switch label { - color: #fff; + color: #74BDC2; font-weight: 600; - font-size: 21.5px; + font-size: 18.5px; line-height: 26px; transition: color .2s ease; width: 122px; cursor: pointer; + + @include rwd($break-flow) { + font-size: 21.5px; + } } .l-switch label:nth-of-type(1) { @@ -198,10 +222,23 @@ z-index: 2; } +.toggle-input-left:checked ~ .l-switch__wrapper { + .toggle-for-left { + color: #003C3C; + } + .toggle { + left: 5px; + } +} +.toggle-input-right:checked ~ .l-switch__wrapper { + .toggle-for-right { + color: #003C3C; + } + .toggle { + left: 39px; + } +} .l-switch input:checked~label:nth-of-type(1) { color: #003C3C; } -.l-switch input:checked~label:nth-of-type(2) { color: #74BDC2; } - -.l-switch input~:checked~label:nth-of-type(1) { color: #74BDC2; } .l-switch input~:checked~label:nth-of-type(2) { color: #003C3C; } .l-switch input:checked~.toggle { @@ -232,39 +269,35 @@ //Payments .l-checkout__payments { display: none; - padding: 0 30px; + padding: 0 16px; margin-top: 34px; margin-bottom: 0; flex-wrap: wrap; justify-content: flex-start; - flex-direction: column; + flex-direction: row; + column-gap: 16px; @include rwd($break-flow) { - flex-direction: row; + //flex-direction: row; + padding: 0 30px; + column-gap: 30px; } } .l-checkout__payments__box { display: flex; flex-direction: column; - width: calc(33.333% - 20px); background: #FFFFFF; border-radius: 10px; overflow: hidden; transition: box-shadow $ease-out 250ms; box-shadow: 0px 0px 0px rgba(55, 170, 156, 0); margin-bottom: 30px; - margin-right: 30px; - - &:nth-child(3) { - margin-right: 0; - } + width: 100%; - &:nth-child(5) { - margin-right: 0; - width: calc(67.4% - 20px); + @include rwd($break-flow) { + width: calc(33.333% - 20px); } - h3 { margin: 0; font-weight: bold; @@ -289,9 +322,12 @@ } } .l-checkout__payments__box__btn-wrp { - padding: 20px; + padding: 0 20px 20px 20px; margin-bottom: 0; margin-top: auto; + @include rwd($break-flow) { + padding-top: 20px; + } } p { margin-top: 0; @@ -313,8 +349,8 @@ outline: 0; cursor: pointer; font-weight: 600; - font-size: 20px; - line-height: 25px; + font-size: 16px; + line-height: 24px; display: flex; align-items: center; justify-content: center; @@ -322,13 +358,26 @@ color: #083F4D; transition: background $ease-out 250ms; + @include rwd($break-flow) { + font-size: 20px; + line-height: 25px; + } + &:hover { background: rgba(#92BD39, 0.75); } } + img { + display: none; + @include rwd($break-flow) { + display: block; + } + } &.is-active { - box-shadow: 0px 0px 20px rgba(55, 170, 156, 0.35); + box-shadow: 0px 0px 20px rgba(55, 170, 156, 0.35); + background: white; + color: black; h3 { color: white; @@ -343,23 +392,82 @@ } } - &.l-checkout__payments__box--xl { - flex-direction: row; - & > div { - display: flex; - &:first-child { - width: 50%; - flex-wrap: wrap; - max-width: 340px; - margin-right: 20px; + &.l-checkout__payments__box--half { + width: calc(50% - 8px); + @include rwd($break-flow) { + width: calc(33.333% - 20px); } - &:last-child { - width: 49%; - align-items: center; - justify-content: center; + &.is-active { + background: #083F4D; + color: white; + + @include rwd($break-flow) { + background: white; + color: black; + } + } + } + &.l-checkout__payments__box--bar { + flex-direction: row; + + @include rwd($break-flow) { + flex-direction: column; + } + + &.is-active { + background: #083F4D; + color: white; + + @include rwd($break-flow) { + background: white; + color: black; + } + } + + h3, .l-checkout__payments__box__btn-wrp { + flex-grow: 1; + } + } + &.l-checkout__payments__box--card { + } + + &.l-checkout__payments__box--xl { + width: 100%; + justify-content: center; + min-height: 160px; + + @include rwd($break-flow) { + width: calc(67.4% - 20px); + padding-left: calc(33.7% - 10px); + position: relative; + + h3 { + position: absolute; + left: 0; + top: 0; + padding-right: 50%; + } + + .l-checkout__payments__box__btn-wrp { + margin: 0; + + p { + flex-wrap: wrap; + max-width: 340px; + margin-right: 20px; + } + + button { + position: absolute; + bottom: 20px; + left: 20px; + width: calc(50% - 50px); + align-items: center; + justify-content: center; + } + } } - } h3 { width: 100%; @@ -369,6 +477,14 @@ width: 100%; } + &.once { + h3 { + text-indent: 0; + padding-left: 0; + } + } + } + &.l-checkout__payments__box--special { button { border-color: #FFA500; background-color: #FFA500; @@ -376,23 +492,23 @@ background: darken(#FFA500, 5%); } } - - &.once { - h3 { - text-indent: 0; - padding-left: 0; - } - } } } //Amount .l-checkout__amount { display: flex; - align-items: flex-end; - justify-content: flex-end; - padding-right: 30px; + flex-direction: column; + padding: 0 16px; + row-gap: 16px; + @include rwd($break-flow) { + flex-direction: row; + align-items: flex-end; + justify-content: flex-end; + padding-right: 30px; + } + button { border: none; height: 56px; @@ -405,16 +521,24 @@ align-items: center; justify-content: center; text-align: center; - margin-left: 32px; color: #FFFFFF; - width: 340px; + + @include rwd($break-flow) { + margin-left: 32px; + width: 340px; + } + } .l-checkout__input { - width: 340px; + @include rwd($break-flow) { + width: 340px; + } } } + + //Input .l-checkout__input { display: flex; @@ -429,6 +553,7 @@ span { color: #FF4C54; } } input, select, textarea { + width: 100%; height: 56px; background: #FFFFFF; border: 1px solid #D5ECED; @@ -443,28 +568,40 @@ } button { - height: 56px; + height: 40px; background: #083F4D; + border: none; border-radius: 3px; font-weight: 600; - font-size: 20px; + font-size: 16px; line-height: 25px; display: flex; align-items: center; justify-content: center; text-align: center; - margin-left: 32px; color: #FFFFFF; - width: 340px; + + @include rwd($break-flow) { + height: 56px; + font-size: 20px; + width: 340px; + margin-left: 32px; + } } } //Cols .l-checkout__cols { display: flex; - padding: 0 30px; + flex-direction: column; margin-top: 50px; + padding: 0 16px; + @include rwd($break-flow) { + padding: 0 30px; + flex-direction: row; + } + &.bt-w { margin-top: 30px; padding-top: 20px; @@ -473,6 +610,7 @@ } .l-checkout__col { + @include rwd($break-flow) { &:nth-child(1) { width: 402px; padding-right: 62px; @@ -481,7 +619,7 @@ } } &:nth-child(2) { - width: calc(100% - 340px); + width: calc(100% - 402px); } &.full { width: 100%; @@ -500,15 +638,28 @@ } } } + } } -.l-checkout__footer__img { - display: flex; - margin-right: 30px; - margin-left: auto; - margin-top: 30px; +.l-checkout__secure { + margin-top: 30px; + margin-right: 30px; + text-align: right; + font-size: 15px; + color: #888; + + .l-checkout__secure__padlock { + margin-right: 5px; + vertical-align: baseline; + } + + .l-checkout__secure__img { + margin-left: 10px; + vertical-align: bottom; + } } + //Form .l-checkout__form { display: flex; @@ -517,9 +668,15 @@ } .l-checkout__form__row { - display: flex; + display: flex; + flex-direction: column; + gap: 20px; margin-bottom: 24px; + @include rwd($break-flow) { + flex-direction: row; + } + &:nth-child(4) { .l-checkout__input { &:nth-child(1) { width: 172px; } @@ -529,14 +686,8 @@ &.full { flex-direction: column; - - .l-checkout__input { - &:nth-child(1) { - padding-right: 0; - } - &:nth-child(2) { - padding-left: 0; - } + @include rwd($break-flow) { + flex-direction: column; } } @@ -555,12 +706,6 @@ .l-checkout__input { width: 100%; - &:nth-child(1) { - padding-right: 10px; - } - &:nth-child(2) { - padding-left: 10px; - } } & > a { @@ -576,13 +721,23 @@ } &.confirm { - display: flex; + display: flex; + flex-direction: row; align-items: center; - justify-content: space-between; + justify-content: stretch; width: 100%; + gap: 50px; + @include rwd($break-flow) { + justify-content: space-between; + } + .l-checkout__input { - width: auto; + flex-grow: 1; + @include rwd($break-flow) { + width: auto; + flex-grow: 0; + } } } .errorlist { @@ -709,6 +864,8 @@ flex-wrap: wrap; margin-top: 12px; margin-bottom: 52px; + margin-left: 16px; + margin-right: 16px; } .l-checkout__footer > img { @@ -723,7 +880,12 @@ .l-checkout__footer__content__item { display: flex; + flex-direction: column; + @include rwd($break-flow) { + flex-direction: row; + } + &:not(:last-child) { padding-bottom: 30px; margin-bottom: 30px; @@ -732,17 +894,21 @@ } .l-checkout__footer__content h3 { + @include rwd($break-flow) { font-weight: 600; font-size: 21.5px; line-height: 140%; letter-spacing: -0.01em; color: #083F4D; width: 318px; + } } .l-checkout__footer__content__item > div { + @include rwd($break-flow) { width: 100%; padding-left: 120px; + } } .l-checkout__footer__content__item > div p { @@ -814,6 +980,26 @@ } ~.payments-once { display: flex; + + &.wide-spot-1 ~.l-checkout__amount { + @include rwd($break-flow) { + margin-top: -110px; + + > div, > button { + width: calc(33.333% - 20px); + } + } + } + &.wide-spot-2 ~.l-checkout__amount { + @include rwd($break-flow) { + flex-direction: column; + margin-top: -182px; + + > div, > button { + width: calc(33.333% - 20px); + } + } + } } } &#switch-monthly:checked { @@ -828,6 +1014,27 @@ } ~.payments-recurring { display: flex; + + &.wide-spot-1 ~.l-checkout__amount { + @include rwd($break-flow) { + margin-top: -110px; + + > div, > button { + width: calc(33.333% - 20px); + margin-left: 24px; + } + } + } + &.wide-spot-2 ~.l-checkout__amount { + @include rwd($break-flow) { + flex-direction: column; + margin-top: -182px; + + > div, > button { + width: calc(33.333% - 20px); + } + } + } } } }