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

feat: cria responsidade reader #5

Merged
ThiagoDutraSampaioLeite merged 1 commits from feature/criaHeader into main 2022-12-14 19:03:56 +00:00
Conversation 0 Commits 1 Files Changed 2 +56 -4
2 changed files with 56 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
checkout/src/arquivos/js/components/Header.js
View File

@ -10,6 +10,7 @@ export default class Header {
await this.selectors();
this.progressBarDesktop();
await this.stepBarProcess();
this.containerMain();
}
async selectors() {
@ -58,7 +59,7 @@ export default class Header {
</ul>
`;
}
if (this.progressBar && window.innerWidth < 1024) {
if (this.progressBar && window.innerWidth <= 1024) {
this.progressBar.innerHTML = "";
}
}

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

@ -3,14 +3,26 @@
max-width: 100%;
width: 100%;
border-bottom: 1px solid $color-black;
.container {
width: 80% !important;
width: 80%;
padding: 29px 0;
@media (min-width: 275px) and (max-width: 1024px) {
width: 100%;
margin: 16px 0;
padding: 0;
}
}
&__wrapper {
display: flex;
align-items: center;
justify-content: space-between;
@media (max-width: 1024px) {
margin: 0 16px;
}
}
&__logo {
@ -18,6 +30,10 @@
height: 37px;
width: auto;
}
@media (max-width: 375px) {
width: 100%;
}
}
&__safeBuy {
@ -42,6 +58,10 @@
height: 15px;
margin-right: 8px;
}
@media (max-width: 375px) {
width: 100%;
}
}
#progressBar {
width: 43%;
@ -100,7 +120,7 @@
&__line {
position: absolute;
left: 27%;
width: calc(100% + 25px);
width: calc(100% + 50px);
bottom: 5px;
transform: translateY(-50%);
height: 1px;
@ -110,7 +130,7 @@
&__line2 {
position: absolute;
right: 21%;
width: calc(100% + 30px);
width: calc(100% + 60px);
bottom: 5px;
transform: translateY(-50%);
height: 1px;
@ -126,3 +146,34 @@
}
}
}
.container-main {
// background-color: burlywood;
#cart-title {
// display: none !important;
}
.empty-cart-content {
.empty-cart-title {
font-size: 24px;
font-family: $font-family;
}
.empty-cart-message {
display: none;
}
.empty-cart-links {
.btn {
width: 327px;
background-color: transparent;
border: 1px solid $color-black;
border-radius: 0;
color: $color-black;
}
// .btn::after {
// content: "continuar comprando";
// color: $color-black;
// }
}
}
}