From f2425407ea168b0a897617b332135cf08582c0dd Mon Sep 17 00:00:00 2001
From: Bernardo Waldhelm <ernaniwaldhelm@gmail.com>
Date: Thu, 8 Dec 2022 09:38:36 -0300
Subject: [PATCH] Adicionando carriho ao desktop e mobile

---
 src/arquivos/js/app/app.js                    |   2 +-
 src/arquivos/js/app/components/Minicart.js    |  12 +-
 src/arquivos/sass/components/_mini-cart.scss  | 174 +++++++++++++-----
 src/arquivos/sass/partials/_header.scss       |  45 +----
 src/arquivos/sass/partials/_menu.scss         |  10 +
 src/arquivos/sass/utils/_variaveis.scss       |   2 +
 src/arquivos/sprite/lock-cart-icon.png        | Bin 0 -> 536 bytes
 .../sub-templates/bernardo-header.html        |  12 +-
 8 files changed, 151 insertions(+), 106 deletions(-)
 create mode 100644 src/arquivos/sprite/lock-cart-icon.png

diff --git a/src/arquivos/js/app/app.js b/src/arquivos/js/app/app.js
index 0fef959..a04444f 100644
--- a/src/arquivos/js/app/app.js
+++ b/src/arquivos/js/app/app.js
@@ -64,7 +64,7 @@ const app = new Container({
 	],
 });
 
-app.bind(Minicart.name, ".carrinho .mini-cart");
+app.bind(Minicart.name, ".minicart__drawer");
 app.bind(Newsletter.name, {
 	elemento: ".news-form",
 	textButtom: "Cadastre-se",
diff --git a/src/arquivos/js/app/components/Minicart.js b/src/arquivos/js/app/components/Minicart.js
index f45f291..bf003ff 100644
--- a/src/arquivos/js/app/components/Minicart.js
+++ b/src/arquivos/js/app/components/Minicart.js
@@ -6,7 +6,7 @@ export default class Minicart {
 		const structure = `
 			<div class="mini-cart-container">
 				<div class="mini-cart-header">
-					<i class="sprite sprite-cadeado"></i>
+					<i class="sprite sprite-lock-cart-icon"></i>
 					<span>
 						COMPRA 100% SEGURA
 					</span>
@@ -20,12 +20,10 @@ export default class Minicart {
 				</div>
 				<div class="mini-cart-footer">
 					<div class="totals-container">
-						<div class="qtd-items">
-							Total de <span class="value">0</span> itens
-						</div>
 						<div class="total">
-							Subtotal: <strong>R$<span class="value">00,00</span></strong>
+							<div> Total:</div> <strong>R$<span class="value">00,00</span></strong>
 						</div>
+
 					</div>
 					<button class="continue-buying" aria-label="Continuar comprando">
 						Continuar comprando
@@ -290,8 +288,6 @@ export default class Minicart {
 		}
 
 		this.createMiniCartStructure(element);
-		this.configureEvents(
-			"header .carrinho> a, .mobile-bottom-options .portal-totalizers-ref, .popup-add-cart .cart"
-		);
+		this.configureEvents(".minicart__button");
 	}
 }
diff --git a/src/arquivos/sass/components/_mini-cart.scss b/src/arquivos/sass/components/_mini-cart.scss
index a1365c0..5efb09b 100644
--- a/src/arquivos/sass/components/_mini-cart.scss
+++ b/src/arquivos/sass/components/_mini-cart.scss
@@ -1,21 +1,69 @@
-.mini-cart {
-	height: 475px;
-	max-height: 200px;
-	opacity: 0;
-	position: absolute;
-	right: 0px;
-	top: 50px;
-	transition: all 0.3s ease-in-out;
-	visibility: hidden;
-	width: 375px;
-	z-index: 16;
+.minicart{
+	position: relative;
 
-	@include mq(md, max) {
-		bottom: 0;
-		height: 100%;
-		left: 0;
-		position: fixed;
-		top: 0;
+	&__button{
+		position: relative;
+		background: transparent;
+		margin: 0;
+		padding: 0;
+		outline: 0;
+		border: 0;
+		cursor: pointer;
+
+		.portal-totalizers-ref{
+			.title,
+			.amount-products,
+			.amount-items strong,
+			.amount-kits,
+			.total-cart {
+				display: none;
+			}
+		}
+
+		.cart-info {
+			margin: 0;
+		}
+
+		.amount-items-em {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			position: absolute;
+			top: 4px;
+			right: -4px;
+			height: 15px;
+			width: 15px;
+			border-radius: 50%;
+			font-style: normal;
+			font-weight: bold;
+			line-height: 11px;
+			font-size: 9px;
+			color: $white;
+			background: $blue;
+
+		}
+	}
+
+	&__drawer {
+		height: 475px;
+		max-height: 200px;
+		opacity: 0;
+		position: absolute;
+		right: 0px;
+		top: 80px;
+		transition: all 0.3s ease-in-out;
+		visibility: hidden;
+		width: 375px;
+		z-index: 16;
+
+		@include mq(md, max) {
+			bottom: 0;
+			height: 100%;
+			left: 0;
+			position: fixed;
+			top: 0;
+		}
 	}
 }
 
@@ -51,14 +99,26 @@
 	}
 
 	.mini-cart-header {
-		border-bottom: 1px solid hsla(0, 0%, 90%, 1);
-		color: #142032;
+		// border-bottom: 1px solid hsla(0, 0%, 90%, 1);
+		color: $gray-300;
+		line-height: 15px;
+		font-weight: 400;
 		font-size: 12px;
-		letter-spacing: 0.5px;
 		padding: 20px 15px 16px;
 		position: relative;
 		text-align: left;
 		text-transform: uppercase;
+		display: flex;
+		align-items: center;
+
+		&::after {
+			content: "";
+			width: 1px;
+			height: 38px;
+			position: absolute;
+			right: 72px;
+			background: $gray-100;
+		}
 
 		span {
 			margin-left: 4px;
@@ -204,6 +264,8 @@
 			max-width: 85px;
 			width: 100%;
 
+			border: 1px solid $gray-100;
+
 			a {
 				display: block;
 			}
@@ -223,15 +285,18 @@
 			width: 100%;
 
 			.name {
-				font-size: 14px;
-				line-height: 17px;
+				font-weight: 500;
+				font-size: 10px;
+				line-height: 12px;
+				color: $black;
 			}
 
 			.product-price {
-				color: #000;
-				font-size: 18px;
-				font-weight: 700;
-				margin-bottom: 8px;
+				color: $black;
+				font-weight: 900;
+				font-size: 13px;
+				line-height: 16px;
+				margin-bottom: 16px;
 			}
 
 			.value,
@@ -250,7 +315,7 @@
 			}
 
 			button {
-				background-color: #f71963;
+				background-color: $black;
 				color: $white;
 				font-weight: 500;
 				font-size: 16px;
@@ -261,11 +326,11 @@
 				padding: 0;
 
 				&:hover {
-					background-color: lighten(#f71963, 5);
+					background-color: lighten($black, 5);
 				}
 
 				&:active {
-					background-color: darken(#f71963, 10);
+					background-color: darken($black, 10);
 				}
 			}
 
@@ -302,17 +367,17 @@
 
 				&:hover,
 				&:active {
-					border-color: darken(#142032, 15);
+					border-color: darken($gray-400, 15);
 
 					&:after,
 					&:before {
-						border-color: darken(#142032, 15);
+						border-color: darken($gray-400, 15);
 					}
 				}
 
 				&:after,
 				&:before {
-					border-bottom: 1.25px solid #142032;
+					border-bottom: 1.25px solid $gray-400;
 					content: "";
 					width: 16px;
 					position: absolute;
@@ -337,17 +402,20 @@
 
 		.totals-container {
 			display: none;
-			background-color: $white;
-			border-top: 1px solid hsla(0, 0%, 90%, 1);
-			margin: 0 16px;
-			padding: 16px 0;
+			background-color: transparent;
+			color: $black;
+			padding: 16px 48px;
+
 		}
 
 		.total {
-			color:  hsla(220, 1%, 43%, 1);
-			font-size: 12px;
-			line-height: 15px;
-			letter-spacing: 3px;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			width: 100%;
+			font-weight: 900;
+			font-size: 13px;
+			line-height: 16px;
 			text-transform: uppercase;
 
 			strong {
@@ -363,9 +431,10 @@
 			background-color: transparent;
 			border: none;
 			cursor: pointer;
-			color: #6d6e70;
+			color: $gray-300;
 			display: block;
-			font-size: 14px;
+			line-height: 12px;
+			font-size: 10px;
 			padding: 17px 15px;
 			position: relative;
 			transition: all 0.15s ease-in-out;
@@ -375,29 +444,36 @@
 
 			&:hover,
 			&:active {
-				color: darken(#6d6e70, 15);
+				color: darken($gray-300, 15);
 			}
 		}
 
 		.finish-order {
-			background-color: #2fab61;
+			background-color: $black;
 			color: $white;
 			display: block;
-			font-weight: 700;
-			font-size: 14px;
-			padding: 15px;
+			font-weight: 900;
+			line-height: 15px;
+			font-size: 12px;
+			padding: 18px;
 			text-align: center;
 			transition: all 0.15s linear;
 			text-transform: uppercase;
 			width: 100%;
 
 			&:hover {
-				background-color: lighten(#2fab61, 2.5);
+				background-color: lighten($black, 2.5);
 			}
 
 			&:active {
-				background-color: darken(#2fab61, 10);
+				background-color: darken($black, 10);
 			}
 		}
 	}
+
+	&.have-item {
+		.totals-container {
+			display: block;
+		}
+	}
 }
diff --git a/src/arquivos/sass/partials/_header.scss b/src/arquivos/sass/partials/_header.scss
index 44f480f..f936009 100644
--- a/src/arquivos/sass/partials/_header.scss
+++ b/src/arquivos/sass/partials/_header.scss
@@ -69,51 +69,8 @@
 				}
 			}
 		}
-
-		&__minicart-button{
-			position: relative;
-			background: transparent;
-			margin: 0;
-			padding: 0;
-			outline: 0;
-			border: 0;
-			.portal-totalizers-ref{
-				.title,
-				.amount-products,
-				.amount-items strong,
-				.amount-kits,
-				.total-cart {
-					display: none;
-				}
-			}
-
-			.cart-info {
-				margin: 0;
-			}
-
-			.amount-items-em {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-
-				position: absolute;
-				top: 4px;
-				right: -4px;
-				height: 15px;
-				width: 15px;
-				border-radius: 50%;
-				font-style: normal;
-				font-weight: bold;
-				line-height: 11px;
-				font-size: 9px;
-				color: $white;
-				background: $blue;
-
-			}
-		}
-
-
 	}
+
 	&__search-box {
 		margin-top: 18px;
 		border-top: 1px solid $gray;
diff --git a/src/arquivos/sass/partials/_menu.scss b/src/arquivos/sass/partials/_menu.scss
index 8e97077..d522df7 100644
--- a/src/arquivos/sass/partials/_menu.scss
+++ b/src/arquivos/sass/partials/_menu.scss
@@ -33,6 +33,15 @@
 			line-height: 15px;
 			font-size: 12px;
 
+			&::after {
+				content: "";
+				width: 1px;
+				height: 38px;
+				position: absolute;
+				right: 72px;
+				background: $gray-100;
+			}
+
 			i {
 				margin-right: 10px;
 			}
@@ -42,6 +51,7 @@
 			padding: 0;
 			border: 0;
 			outline: 0;
+			background: transparent;
 
 		}
 
diff --git a/src/arquivos/sass/utils/_variaveis.scss b/src/arquivos/sass/utils/_variaveis.scss
index e8129ca..3468fb4 100644
--- a/src/arquivos/sass/utils/_variaveis.scss
+++ b/src/arquivos/sass/utils/_variaveis.scss
@@ -11,6 +11,8 @@ $blue: #00c8ff;
 $gray: #333;
 $gray-100: #e0e0e0;
 $gray-200: #828282;
+$gray-300: #6D6E70;
+$gray-400: #bdbdbd;
 
 // Grid breakpoints
 
diff --git a/src/arquivos/sprite/lock-cart-icon.png b/src/arquivos/sprite/lock-cart-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..cc8c56c475a823a14ec8ba1c0eb7087d445188ee
GIT binary patch
literal 536
zcmV+z0_XjSP)<h;3K|Lk000e1NJLTq000;O000{Z1^@s6X5&v*00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0j)_yK~#7Fy;gx$
zgD?=i&<?-`;s$ks+6i=oI)Qe87AOno1l0*}1KFUs0UHzt0Q`rc1_a*WgZ}sONG`d5
z$4_#gs0W_s*_LIkl~T*1C>Ag|dMbe}f$c5N^9bvbE)LZ-5d?t?f+uus>IVmV-EOzO
zC;(?Yo6SOy-_ihJeT=q(e`?z2e<CXNq2(}<vK&mJ*DTQP=vT7RhDV6Ds_{`h`!zH_
zG&1vD*Y&6czVCY=b{po+Znt}`29`Mka#u>u;5lB?G*jCfAo~RZ9F4gInOu_q`~Chz
z#$mw8x&dEYdjo8&L-p)GNeIXknPVh+-otZ%EX(YM(}{#Y#$R1?7EKI=3w4AXoPE_Q
zq`FDa>I)UpdCQsaavFlt7u?fJG<ksefVHgaJ9M=hm35Q=iM~ALrsL@#P^jxqFQgLr
zW|idnkGFV{IEn&*%xT(i^RGw%Q2<Es$hE2(b6<aq#tA?_=h~?Tx^9W?$dF^2R2|f<
zSnBkz03<IV@_PVT4ygMjvAzo;KXCvM-Wz?X+XZS7vWaLS@Lvd*>j(7t?_fzI0(>#b
a%jO$Yl)r?`u71@30000<MNUMnLSTYAYvzLh

literal 0
HcmV?d00001

diff --git a/src/template-pagina/sub-templates/bernardo-header.html b/src/template-pagina/sub-templates/bernardo-header.html
index 446cbae..cd17e3e 100644
--- a/src/template-pagina/sub-templates/bernardo-header.html
+++ b/src/template-pagina/sub-templates/bernardo-header.html
@@ -26,10 +26,14 @@
 					<i class="sprite sprite-user-icon"></i>
 				</a>
 
-				<button class="user-items__minicart-button">
-					<i class="sprite sprite-bag-icon"></i>
-					<vtex.cmc:AmountItemsInCart />
-				</button>
+				<div class="minicart">
+					<button class="minicart__button">
+						<i class="sprite sprite-bag-icon"></i>
+						<vtex.cmc:AmountItemsInCart />
+					</button>
+
+					<div class="minicart__drawer"></div>
+				</div>
 			</div>
 		</div>
 	</div>