X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/fbe0f421e3eef997ed79a0d8d8443bf84ae205b3..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 779324ae6..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,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) { @@ -217,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 { @@ -349,6 +367,12 @@ 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); @@ -513,6 +537,8 @@ } } + + //Input .l-checkout__input { display: flex; @@ -527,6 +553,7 @@ span { color: #FF4C54; } } input, select, textarea { + width: 100%; height: 56px; background: #FFFFFF; border: 1px solid #D5ECED; @@ -541,19 +568,25 @@ } 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; + } } } @@ -586,7 +619,7 @@ } } &:nth-child(2) { - width: calc(100% - 340px); + width: calc(100% - 402px); } &.full { width: 100%; @@ -635,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; } @@ -647,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; } } @@ -673,12 +706,6 @@ .l-checkout__input { width: 100%; - &:nth-child(1) { - padding-right: 10px; - } - &:nth-child(2) { - padding-left: 10px; - } } & > a { @@ -694,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 { @@ -943,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 { @@ -957,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); + } + } + } } } }