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

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

@ -1,3 +1,6 @@
.empty-cart-message{
display: none;
}
.empty-cart {
font-family: $font-family;
&-content {
@ -8,30 +11,36 @@
padding: 0 16px;
}
}
&-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 {
.link-choose-products {
background: $color-black;
border: none;
border-radius: 5px;
transition: ease-in 0.22s all;
outline: none;
font-family: $font-family;
border: 1px solid #000000;
border-radius: 0;
width: 327px;
background-color: white;
color: black;
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 500;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-align: center;
letter-spacing: 0.05em;
color: $color-white;
text-transform: uppercase;
&: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 {
font-family: $font-family;
}
&.body-cart,
&.body-order-form {
@include mq(xl, min) {

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

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

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

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

9291
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff