Samuel/m3-academy-template-checkout-samuelcondack
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Adiciona responsividade desktop

Browse Source
This commit is contained in:
SamuelCondack 2022-12-14 17:04:05 -03:00
parent dae2a99c3b
commit ade878424a
7 changed files with 9407 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -5,6 +5,7 @@
} }
.cart-template { .cart-template {
font-family: $font-family; font-family: $font-family;
@include mq(md, max) { @include mq(md, max) {
padding: 0 0; padding: 0 0;
@ -135,6 +136,7 @@
} }
.cart-items { .cart-items {
width: 100%;
.product-item { .product-item {
padding: 16px 0; padding: 16px 0;
} }
@ -292,8 +294,6 @@
.icon-plus-sign, .icon-plus-sign,
.icon-minus-sign { .icon-minus-sign {
&::before { &::before {
background-color: #00C8FF;
border: 0.05px solid;
border-radius: 50%; border-radius: 50%;
color: $color-black; color: $color-black;
display: block; display: block;
@ -305,8 +305,7 @@
.icon-minus-sign { .icon-minus-sign {
&:before { &:before {
align-items: center; align-items: center;
content: "-"; color: #00C8FF;
color: #f0f0f0;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
} }
@ -315,8 +314,7 @@
.icon-plus-sign { .icon-plus-sign {
&:before { &:before {
align-items: center; align-items: center;
content: "+"; color: #00C8FF;
color: #f0f0f0;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
} }
@ -451,7 +449,7 @@
width: 280px; width: 280px;
@include mq(cstm, max) { @include mq(cstm, max) {
width: calc(100vw - 32px); width: 100%;
} }
@include mq(md, max) { @include mq(md, max) {
@ -651,6 +649,9 @@
&-totalizers { &-totalizers {
padding: 0; padding: 0;
width: 346px; width: 346px;
@media (max-width: 1024px){
width: 100%;
}
.coupon-data { .coupon-data {
#cart-link-coupon-add { #cart-link-coupon-add {
@ -776,6 +777,7 @@
line-height: 16px; line-height: 16px;
color: $color-black; color: $color-black;
padding: 12px 0; padding: 12px 0;
padding-left: 0px;
} }
&.info { &.info {
@ -783,7 +785,9 @@
} }
&.monetary { &.monetary {
text-align: right; @media (max-width: 1024px){
padding-left: 0;
}
} }
} }
} }
@ -791,7 +795,7 @@
tfoot { tfoot {
td.info, td.info,
td.monetary { td.monetary {
padding-left: 17px; padding-right: 8px;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
@ -808,7 +812,15 @@
.cart-links-bottom { .cart-links-bottom {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: left;
align-items: left;
width: 343px; width: 343px;
@media (max-width: 1024px){
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
@ -841,7 +853,9 @@
} }
} }
.btn-place-order-wrapper { .btn-place-order-wrapper {
@media (max-width: 1024px){
width: 100%;
}
a { a {
background: #00C8FF; background: #00C8FF;
border: none; border: none;
@ -873,3 +887,16 @@
} }
} }
} }
@media (min-width: 1025px){
.row-fluid{
display: block;
width: 100%;
}
}
@media (max-width: 1024px){
.row-fluid{
display: flex;
flex-direction: column;
}
}

43
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -1,3 +1,6 @@
.empty-cart-message{
display: none;
}
.empty-cart { .empty-cart {
font-family: $font-family; font-family: $font-family;
&-content { &-content {
@ -8,31 +11,37 @@
padding: 0 16px; padding: 0 16px;
} }
} }
&-title { &-title {
font-size: 20px; font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
text-transform: uppercase;
} }
&-links { &-links {
.link-choose-products { .link-choose-products {
background: $color-black; border: 1px solid #000000;
border: none; border-radius: 0;
border-radius: 5px; width: 327px;
transition: ease-in 0.22s all; background-color: white;
outline: none; color: black;
font-family: $font-family; font-family: 'Tenor Sans';
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;
letter-spacing: 0.05em; text-transform: uppercase;
color: $color-white;
text-transform: uppercase;
&:hover { &:hover {
background: lighten($color-black, 5); background: none;
} }
@media (max-width: 1024px) {
width: 60%;
}
} }
} }
} }

1
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -33,7 +33,6 @@ body {
&.body-cart { &.body-cart {
font-family: $font-family; font-family: $font-family;
} }
&.body-cart, &.body-cart,
&.body-order-form { &.body-order-form {
@include mq(xl, min) { @include mq(xl, min) {

25
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -11,11 +11,15 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center;
padding-top: 16px; padding-top: 16px;
width: 100%; width: 100%;
@include mq(dt, max) {
display: flex;
flex-direction: column;
align-items: left !important;
justify-content: none !important;
}
} }
.images_footer{ .images_footer{
width: 35.65px; width: 35.65px;
height: 20px; height: 20px;
@ -50,8 +54,15 @@
@include mq(dt, max) { @include mq(dt, max) {
display: flex; display: flex;
order: 2; order: 2;
margin-bottom: 24px; padding: 0;
padding-top: 23px;
padding-left: 16px;
padding-right: 16px;
}
@include mq(md, max){
max-width: 100%; max-width: 100%;
padding-top: 16px;
} }
} }
@ -81,7 +92,13 @@
display: flex; display: flex;
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
@include mq(dt, max) {
display: flex;
order: 3;
padding: 0;
padding-top: 16px;
padding-left: 16px;
}
.footerCheckout__stamps__div_wrapperDeveloper{ .footerCheckout__stamps__div_wrapperDeveloper{
display: flex; display: flex;
flex-direction: row; flex-direction: row;

13
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -109,6 +109,14 @@
img { img {
height: 52px; height: 52px;
width: auto; width: auto;
@media (max-width: 1024px){
width: 155px;
max-width: none;
padding-left: 16px;
}
}
@media (max-width: 1024px){
padding-left: 0px;
} }
} }
@ -136,5 +144,10 @@
i { i {
margin-right: 8px; margin-right: 8px;
} }
@media (max-width: 1024px) {
width: 100%;
font-size: 12px;
padding-right: 0;
}
} }
} }

20
package-lock.json generated
View File

@ -45,6 +45,7 @@
"jquery": "^3.6.0", "jquery": "^3.6.0",
"m3-utils": "^0.1.0", "m3-utils": "^0.1.0",
"sass": "^1.38.1", "sass": "^1.38.1",
"slick-carousel": "^1.8.1",
"terser-webpack-plugin": "^5.1.4" "terser-webpack-plugin": "^5.1.4"
}, },
"devDependencies": { "devDependencies": {
@ -3484,6 +3485,8 @@
}, },
"checkout/node_modules/core-util-is": { "checkout/node_modules/core-util-is": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
"license": "MIT" "license": "MIT"
}, },
"checkout/node_modules/cosmiconfig": { "checkout/node_modules/cosmiconfig": {
@ -4844,6 +4847,8 @@
}, },
"checkout/node_modules/get-intrinsic": { "checkout/node_modules/get-intrinsic": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
"integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"function-bind": "^1.1.1", "function-bind": "^1.1.1",
@ -6294,6 +6299,8 @@
}, },
"checkout/node_modules/micromatch": { "checkout/node_modules/micromatch": {
"version": "4.0.5", "version": "4.0.5",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"braces": "^3.0.2", "braces": "^3.0.2",
@ -6305,6 +6312,8 @@
}, },
"checkout/node_modules/micromatch/node_modules/braces": { "checkout/node_modules/micromatch/node_modules/braces": {
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"fill-range": "^7.0.1" "fill-range": "^7.0.1"
@ -19345,6 +19354,7 @@
"m3-utils": "^0.1.0", "m3-utils": "^0.1.0",
"prettier": "^2.3.2", "prettier": "^2.3.2",
"sass": "^1.38.1", "sass": "^1.38.1",
"slick-carousel": "^1.8.1",
"terser-webpack-plugin": "^5.1.4", "terser-webpack-plugin": "^5.1.4",
"webpack": "^5.51.1", "webpack": "^5.51.1",
"webpack-merge": "^5.8.0" "webpack-merge": "^5.8.0"
@ -21672,7 +21682,9 @@
} }
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.3" "version": "1.0.3",
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
}, },
"cosmiconfig": { "cosmiconfig": {
"version": "7.1.0", "version": "7.1.0",
@ -22645,6 +22657,8 @@
}, },
"get-intrinsic": { "get-intrinsic": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
"integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
"requires": { "requires": {
"function-bind": "^1.1.1", "function-bind": "^1.1.1",
"has": "^1.0.3", "has": "^1.0.3",
@ -23679,6 +23693,8 @@
}, },
"micromatch": { "micromatch": {
"version": "4.0.5", "version": "4.0.5",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
"requires": { "requires": {
"braces": "^3.0.2", "braces": "^3.0.2",
"picomatch": "^2.3.1" "picomatch": "^2.3.1"
@ -23686,6 +23702,8 @@
"dependencies": { "dependencies": {
"braces": { "braces": {
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"requires": { "requires": {
"fill-range": "^7.0.1" "fill-range": "^7.0.1"
} }

9291
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff