X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/9eeeeab0b4b72b405b2c2a6e69969537706535bf..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 89b97f164..870da2311 100644 --- a/src/wolnelektury/static/2022/styles/layout/_checkout.scss +++ b/src/wolnelektury/static/2022/styles/layout/_checkout.scss @@ -174,6 +174,7 @@ align-items: center; justify-content: center; margin-top: 35px; + width: 100%; } .l-switch { @@ -186,7 +187,7 @@ } .l-switch label { - color: #fff; + color: #74BDC2; font-weight: 600; font-size: 18.5px; line-height: 26px; @@ -221,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 { @@ -523,6 +537,8 @@ } } + + //Input .l-checkout__input { display: flex; @@ -964,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 { @@ -978,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); + } + } + } } } }