forked from M3-Academy/m3-academy-template-checkout
feat(personal-data): created styles to client data route and shipping route for small, medium devices
This commit is contained in:
parent
76d825f04a
commit
304870cc53
@ -289,10 +289,195 @@
|
||||
}
|
||||
|
||||
.container-order-form {
|
||||
.checkout-container {
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
#orderform-title {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
#shipping-data,
|
||||
#payment-data,
|
||||
.cart-template.mini-cart {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
#shipping-data {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#client-profile-data .client-profile-data.active {
|
||||
margin: 0 16px 16px;
|
||||
}
|
||||
|
||||
#shipping-data,
|
||||
#payment-data,
|
||||
#client-profile-data .client-profile-data.active {
|
||||
float: none;
|
||||
}
|
||||
|
||||
#find-pickups-manualy-button-denied {
|
||||
@include btn-primary-blue-white();
|
||||
}
|
||||
|
||||
#postalCode-finished-loading {
|
||||
.vtex-omnishipping-1-x-deliveryChannelsToggle {
|
||||
background-color: $clr-common-white;
|
||||
border: 1px solid $clr-common-black;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryOptionActive {
|
||||
color: $clr-common-black;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-isLoading {
|
||||
background: $clr-primary-blue-500;
|
||||
}
|
||||
}
|
||||
|
||||
.checkout-container
|
||||
.shipping-data
|
||||
.accordion-group
|
||||
.accordion-inner
|
||||
.vtex-omnishipping-1-x-deliveryChannelsToggle {
|
||||
background-color: $clr-primary-blue-500;
|
||||
border: 1px solid $clr-primary-blue-500;
|
||||
}
|
||||
|
||||
.checkout-container .shipping-data .accordion-group,
|
||||
.checkout-container .payment-data .accordion-group,
|
||||
.checkout-container .client-profile-data .accordion-group,
|
||||
.checkout-container
|
||||
.shipping-data
|
||||
.accordion-group
|
||||
.accordion-inner
|
||||
.vtex-omnishipping-1-x-deliveryGroup
|
||||
.shp-lean,
|
||||
.checkout-container .shipping-data .accordion-group .accordion-inner .address-summary,
|
||||
.cart-template.mini-cart .cart-fixed {
|
||||
border: 1px solid $clr-gray-100;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.checkout-container .form-page.client-pre-email {
|
||||
padding: 5px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.checkout-container .client-profile-data .accordion-group {
|
||||
padding: 16px 16px 44px;
|
||||
}
|
||||
|
||||
.client-profile-data .accordion-group .accordion-heading span i.icon-user {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.client-profile-data .accordion-group .accordion-heading span span[data-i18n] {
|
||||
font-size: 0px;
|
||||
|
||||
&::before {
|
||||
content: "Identificação";
|
||||
font-size: 16px;
|
||||
line-height: 18.72px;
|
||||
font-family: $font-family-200;
|
||||
}
|
||||
}
|
||||
|
||||
.checkout-container .shipping-data .accordion-group .accordion-inner p label,
|
||||
.checkout-container .payment-data .accordion-group .accordion-inner p label,
|
||||
.checkout-container .client-profile-data .accordion-group .accordion-inner p label {
|
||||
color: #7d7d7d;
|
||||
font-size: 12px;
|
||||
line-height: 19.07px;
|
||||
}
|
||||
|
||||
.checkout-container .shipping-data .accordion-group .accordion-inner p select,
|
||||
.checkout-container .shipping-data .accordion-group .accordion-inner p input,
|
||||
.checkout-container .payment-data .accordion-group .accordion-inner p select,
|
||||
.checkout-container .payment-data .accordion-group .accordion-inner p input,
|
||||
.checkout-container .client-profile-data .accordion-group .accordion-inner p select,
|
||||
.checkout-container .client-profile-data .accordion-group .accordion-inner p input {
|
||||
border: 1px solid #f0f0f0;
|
||||
padding: 0 11px;
|
||||
border-radius: 5px;
|
||||
height: 42px;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
background-position: right 50%;
|
||||
}
|
||||
|
||||
.checkout-container .payment-data .accordion-group .accordion-heading a,
|
||||
.checkout-container .shipping-data .accordion-group .accordion-heading a,
|
||||
.checkout-container .client-profile-data .accordion-group .accordion-heading a {
|
||||
background-color: $clr-common-white;
|
||||
font-size: 24px;
|
||||
color: $clr-primary-blue-500;
|
||||
}
|
||||
|
||||
.box-client-info-pf {
|
||||
width: 100%;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
}
|
||||
|
||||
p.client-phone,
|
||||
p.client-document,
|
||||
p.client-first-name,
|
||||
p.client-last-name {
|
||||
float: none !important;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p.client-first-name,
|
||||
p.client-document {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
p.client-phone,
|
||||
p.client-last-name {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
p.client-email {
|
||||
grid-column: 1/3;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
p.client-first-name,
|
||||
p.client-last-name {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
p.client-document,
|
||||
p.client-phone {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
p.newsletter {
|
||||
margin: 0 0 45px;
|
||||
}
|
||||
|
||||
.checkbox.newsletter-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
|
||||
#opt-in-newsletter {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.links.unstyled,
|
||||
.client-notice.notice {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkout-container .client-pre-email {
|
||||
padding: 8px 16px 0;
|
||||
}
|
||||
@ -306,7 +491,160 @@
|
||||
line-height: 16.34px;
|
||||
}
|
||||
|
||||
.orderform-template {
|
||||
.cart-template.mini-cart {
|
||||
padding: 0 16px;
|
||||
width: 100% !important;
|
||||
margin: 0;
|
||||
|
||||
h2 {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
#go-to-cart-button {
|
||||
padding: 0 16px;
|
||||
|
||||
a {
|
||||
font-size: 12px;
|
||||
line-height: 16.34px;
|
||||
text-decoration: none;
|
||||
color: $clr-common-black;
|
||||
}
|
||||
}
|
||||
|
||||
.cart {
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cart-fixed {
|
||||
padding-top: 16px;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.cart-totalizers.totalizers {
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
tr {
|
||||
border-top: 1px solid $clr-gray-200;
|
||||
border-bottom: 1px solid $clr-gray-200;
|
||||
}
|
||||
|
||||
tbody {
|
||||
td.info,
|
||||
td.monetary {
|
||||
color: $clr-gray-400;
|
||||
}
|
||||
|
||||
td.info {
|
||||
padding: 25px 0 25px 16px;
|
||||
}
|
||||
td.monetary {
|
||||
padding: 25px 16px 25px 0;
|
||||
}
|
||||
}
|
||||
|
||||
tfoot {
|
||||
tr {
|
||||
border: none;
|
||||
}
|
||||
|
||||
td.info,
|
||||
td.monetary {
|
||||
color: $clr-gray-600;
|
||||
}
|
||||
|
||||
td.info {
|
||||
padding: 30px 0 22px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 19.07px;
|
||||
}
|
||||
td.monetary {
|
||||
padding: 30px 16px 22px 0;
|
||||
font-size: 14px;
|
||||
line-height: 24.51px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ship-country {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.orderform-template.active {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
.orderform-template-holder {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
grid-template-columns: fluid(677px, 1018px) fluid(331px, 1018px);
|
||||
gap: 0 16px;
|
||||
|
||||
.orderform-template-holder {
|
||||
grid-column: 1/2;
|
||||
}
|
||||
}
|
||||
|
||||
div.row-fluid {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
#shipping-data {
|
||||
.shipping-data {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#client-profile-data,
|
||||
#shipping-data,
|
||||
#payment-data {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.client-profile-data.filled {
|
||||
margin: 0 16px 16px;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
grid-template-columns: fluid(331px, 677px) fluid(330px, 677px);
|
||||
grid-template-rows: auto auto auto;
|
||||
gap: 0 16px;
|
||||
|
||||
#shipping-data,
|
||||
#payment-data {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#client-profile-data {
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/4;
|
||||
}
|
||||
|
||||
#payment-data {
|
||||
grid-column: 2/3;
|
||||
}
|
||||
|
||||
.client-profile-data.filled {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-step.box-edit .row-fluid {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
.client-pre-email {
|
||||
.link-cart a {
|
||||
font-size: 10px;
|
||||
@ -323,6 +661,18 @@
|
||||
.client-pre-email .client-email button {
|
||||
@include btn-primary-blue-black();
|
||||
}
|
||||
|
||||
.checkout-container .shipping-data .accordion-group .accordion-inner button.submit,
|
||||
.checkout-container .payment-data .accordion-group .accordion-inner button.submit,
|
||||
.checkout-container .client-profile-data .accordion-group .accordion-inner button.submit,
|
||||
#btn-go-to-payment {
|
||||
@include btn-primary-blue-white();
|
||||
}
|
||||
|
||||
#btn-go-to-payment {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.client-pre-email-h {
|
||||
label {
|
||||
span,
|
||||
@ -338,9 +688,73 @@
|
||||
}
|
||||
}
|
||||
|
||||
.checkout-container .accordion-group .accordion-heading span > i,
|
||||
.client-pre-email .emailInfo .icon-lock {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.submit.btn-submit-wrapper {
|
||||
button#go-to-shipping,
|
||||
button#go-to-payment {
|
||||
@include btn-primary-blue-white();
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-address {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
.input {
|
||||
float: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.checkout-container
|
||||
.shipping-data
|
||||
.accordion-group
|
||||
.accordion-inner
|
||||
.vtex-omnishipping-1-x-deliveryGroup
|
||||
.shp-lean
|
||||
.vtex-omnishipping-1-x-leanShippingOptionActive {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.shp-lean-option.shp-lean-option-active.vtex-omnishipping-1-x-leanShippingOptionActive {
|
||||
.vtex-omnishipping-1-x-leanShippingIcon.shp-option-icon {
|
||||
svg {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png")
|
||||
center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shp-lean-option.vtex-omnishipping-1-x-leanShippingOption {
|
||||
.vtex-omnishipping-1-x-leanShippingIcon.shp-option-icon {
|
||||
svg {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png")
|
||||
center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container-order-form {
|
||||
@ -352,14 +766,64 @@
|
||||
.container-order-form {
|
||||
width: 100%;
|
||||
|
||||
#shipping-data,
|
||||
#payment-data {
|
||||
float: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 490px) {
|
||||
.orderform-template-holder .client-profile-data input[type="text"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.orderform-template-holder .client-profile-data {
|
||||
p.client-phone,
|
||||
p.client-document,
|
||||
p.client-first-name,
|
||||
p.client-last-name {
|
||||
float: none !important;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
||||
input {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 375px) {
|
||||
.checkout-container .shipping-data .accordion-group .accordion-inner p label,
|
||||
.checkout-container .payment-data .accordion-group .accordion-inner p label,
|
||||
.checkout-container .client-profile-data .accordion-group .accordion-inner p label {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
.checkout-container .client-pre-email .emailInfo {
|
||||
width: fluid(343px, 992px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
#shipping-data,
|
||||
#payment-data {
|
||||
float: none;
|
||||
}
|
||||
|
||||
#client-profile-data .client-profile-data.active {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cart-template.mini-cart {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
width: fluid(1018px, 1280px);
|
||||
min-height: calc(100vh - 175px);
|
||||
|
||||
.checkout-container .client-pre-email {
|
||||
padding: 8px 0 0;
|
||||
|
||||
@ -2,12 +2,14 @@
|
||||
border: none;
|
||||
color: $clr-common-black;
|
||||
background: $clr-primary-blue-500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@mixin btn-primary-blue-white() {
|
||||
border: none;
|
||||
color: $clr-common-white;
|
||||
background: $clr-primary-blue-500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.cart-template {
|
||||
@ -999,10 +1001,6 @@
|
||||
}
|
||||
|
||||
.cart-more-options {
|
||||
.srp-container {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.srp-data {
|
||||
width: 343px;
|
||||
}
|
||||
|
||||
@ -1,11 +1,3 @@
|
||||
body .container-main.container-order-form .orderform-template.active {
|
||||
.mini-cart {
|
||||
width: 32.3242%;
|
||||
margin-left: unset;
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
}
|
||||
.orderform-template-holder {
|
||||
width: 66.1132%;
|
||||
}
|
||||
--none-rules: #000;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user