border-radius: 10px;
width: 100%; height: 34px;
position: relative;
+ flex: 1;
span {
position: absolute;
top: 0; left: 0;
background: #92BD39;
border-radius: 10px;
&:after {
+ white-space: nowrap;
+ color: #083F4D;
+ top: 0; left:10px; bottom: 2px;
+ @include rwd($B5) {
+ color: #FFFFFF;
+ right: 13px;
+ left: auto;
+ }
margin: auto;
position: absolute;
- top: 0; right: 13px; bottom: 2px;
content: attr(data-label);
font-weight: bold;
font-size: 15px;
- color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
display: flex;
margin-top: 7px;
justify-content: space-between;
- align-items: center;
+ align-items: flex-start;
+ gap: 15px;
p {
margin: 0;
font-weight: normal;
align-items: center;
justify-content: center;
margin-top: 35px;
+ width: 100%;
}
.l-switch {
}
.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) {
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 {
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);
}
}
+
+
//Input
.l-checkout__input {
display: flex;
span { color: #FF4C54; }
}
input, select, textarea {
+ width: 100%;
height: 56px;
background: #FFFFFF;
border: 1px solid #D5ECED;
}
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;
+ }
}
}
}
}
&:nth-child(2) {
- width: calc(100% - 340px);
+ width: calc(100% - 402px);
}
&.full {
width: 100%;
}
.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; }
&.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;
}
}
.l-checkout__input {
width: 100%;
- &:nth-child(1) {
- padding-right: 10px;
- }
- &:nth-child(2) {
- padding-left: 10px;
- }
}
& > a {
}
&.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 {
}
~.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 {
}
~.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);
+ }
+ }
+ }
}
}
}