Luis Suarez / autoservicio-axion

Commit a13d413f4d8951e4c9e468142c5c6bd23fde6501

Authored by Marcelo Puebla 2020-01-21 11:02:54 -0300

Exists in develop

Merge branch 'master' into 'develop'

Master(benjamin)

See merge request !25

Showing 3 changed files Show diff stats

src/app/modules/seleccion-articulos/seleccion-articulos.component.html

Diff comments View file @ a13d413

1	<div class="h-92 bg-white fade-in-left">	1	<div class="h-92 bg-white fade-in-left">
2	<!-- PUBLICIDADES -->	2	<!-- PUBLICIDADES -->
3	<app-header-publicidad></app-header-publicidad>	3	<app-header-publicidad></app-header-publicidad>
4		4
5	<div class="row mx-0 h-80 align-items-end">	5	<div class="row mx-0 h-80 align-items-end">
6	<!-- CABECERA -->	6	<!-- CABECERA -->
7	<div class="row w-100 mx-3 h-auto border border-primary rounded-sm">	7	<div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
8	<div class="col-12 p-2 align-self-center">	8	<div class="col-12 p-2 align-self-center">
9	<div class="px-3">	9	<div class="px-3">
10	<p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>	10	<p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
11	</div>	11	</div>
12	</div>	12	</div>
13	</div>	13	</div>
14	<!-- CUERPO -->	14	<!-- CUERPO -->
15	<div class="row w-100 mr-4 h-70">	15	<div class="row w-100 mr-4 h-70">
16	<div class="col-12 h-100 px-0 py-3">	16	<div class="col-12 h-100 px-0 py-3">
17	<div class="row mx-0 h-100">	17	<div class="row mx-0 h-100">
18	<!-- FILTRO CATEGORIAS -->	18	<!-- FILTRO CATEGORIAS -->
19	<div class="col-5 col-sm-3 col-xl-2 h-100">	19	<div class="col-5 col-sm-3 col-xl-2 h-100">
20	<p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>	20	<p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
21	<div class="row mx-0 h-94 justify-content-center align-items-center">	21	<div class="row mx-0 h-94 justify-content-center align-items-center">
22	<div class="col-auto btn-effect h-5">	22	<div class="col-auto btn-effect h-5">
23	<img	23	<img
24	draggable="false"	24	draggable="false"
25	ondragstart="return false;"	25	ondragstart="return false;"
26	(contextmenu)="false"	26	(contextmenu)="false"
27	class="h-100 d-block mx-auto rotate-90-neg"	27	class="h-100 d-block mx-auto rotate-90-neg"
28	src="assets/img/ir-color.svg"	28	src="assets/img/ir-color.svg"
29	(mousedown)="scrollY(templateCategorias, -100)"	29	(mousedown)="scrollY(templateCategorias, -100)"
30	(mouseup)="mouseup()"	30	(mouseup)="mouseup()"
31	(mouseleave)="mouseup()">	31	(mouseleave)="mouseup()">
32	</div>	32	</div>
33	<!-- CATEGORIAS -->	33	<!-- CATEGORIAS -->
34	<div	34	<div
35	#templateCategorias	35	#templateCategorias
36	class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">	36	class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
37	<div	37	<div
38	class="row mx-4 mb-2 h-32 justify-content-center tab"	38	class="row mx-4 mb-2 h-32 justify-content-center tab"
39	[ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"	39	[ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
40	(click)="selectCategoria(-1, 0)">	40	(click)="selectCategoria(-1, 0)">
41	<img	41	<img
42	draggable="false"	42	draggable="false"
43	ondragstart="return false;"	43	ondragstart="return false;"
44	(contextmenu)="false"	44	(contextmenu)="false"
45	class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"	45	class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
46	src="assets/img/logo-spot.svg">	46	src="assets/img/logo-spot.svg">
47	<small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>	47	<small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
48	</div>	48	</div>
49	<div	49	<div
50	class="row mx-4 mb-2 h-32 justify-content-center tab"	50	class="row mx-4 mb-2 h-32 justify-content-center tab"
51	[ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"	51	[ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
52	(click)="selectCategoria(i, categoria.id)"	52	(click)="selectCategoria(i, categoria.id)"
53	*ngFor="let categoria of categorias; let i = index;">	53	*ngFor="let categoria of categorias; let i = index;">
54	<img	54	<img
55	draggable="false"	55	draggable="false"
56	ondragstart="return false;"	56	ondragstart="return false;"
57	(contextmenu)="false"	57	(contextmenu)="false"
58	class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"	58	class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
59	src="{{urlImagenes}}{{categoria.path_imagen}}">	59	src="{{urlImagenes}}{{categoria.path_imagen}}">
60	<small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>	60	<small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
61	</div>	61	</div>
62	</div>	62	</div>
63	<div class="col-auto btn-effect h-5">	63	<div class="col-auto btn-effect h-5">
64	<img	64	<img
65	draggable="false"	65	draggable="false"
66	ondragstart="return false;"	66	ondragstart="return false;"
67	(contextmenu)="false"	67	(contextmenu)="false"
68	class="h-100 d-block mx-auto rotate-90"	68	class="h-100 d-block mx-auto rotate-90"
69	src="assets/img/ir-color.svg"	69	src="assets/img/ir-color.svg"
70	(mousedown)="scrollY(templateCategorias, 100)"	70	(mousedown)="scrollY(templateCategorias, 100)"
71	(mouseup)="mouseup()"	71	(mouseup)="mouseup()"
72	(mouseleave)="mouseup()">	72	(mouseleave)="mouseup()">
73	</div>	73	</div>
74	</div>	74	</div>
75	</div>	75	</div>
76	<!-- LISTA DE ARTICULOS -->	76	<!-- LISTA DE ARTICULOS -->
77	<div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible">	77	<div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible">
78	<div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">	78	<div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
79	<!-- ARTICULO -->	79	<!-- ARTICULO -->
80	<div	80	<div
81	class="col px-2 my-1 my-md-3 h-auto"	81	class="col px-2 my-1 my-md-3 h-auto"
82	*ngFor="let articulo of auxArticulos \| slice:0:showQuantity;">	82	*ngFor="let articulo of auxArticulos \| slice:0:showQuantity;">
83	<div class="swing-in-top-fwd card h-auto">	83	<div class="swing-in-top-fwd card h-auto">
84	<div *ngIf="articulo.PRO">	84	<div *ngIf="articulo.PRO">
85	<i class="fas fa-piggy-bank"></i>	85	<i class="fas fa-piggy-bank"></i>
86	</div>	86	</div>
87	<img	87	<img
88	draggable="false"	88	draggable="false"
89	ondragstart="return false;"	89	ondragstart="return false;"
90	(contextmenu)="false"	90	(contextmenu)="false"
91	src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"	91	src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
92	onerror="this.src='assets/img/image-not-found.jpg'"	92	onerror="this.src='assets/img/image-not-found.jpg'"
93	class="card-img-top h-55 rounded-sm">	93	class="card-img-top h-55 rounded-sm">
94	<div class="row mx-0 py-1 h-auto justify-content-center">	94	<div class="row mx-0 py-1 h-auto justify-content-center">
95	<p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60">{{articulo.DetArt}}</p>	95	<p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60">{{articulo.DetArt}}</p>
96	<p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">	96	<p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
97	<small>{{articulo.DET_LAR}}</small>	97	<small>{{articulo.DET_LAR}}</small>
98	</p>	98	</p>
99	<div class="col-12 px-1 align-self-end btn-effect h-auto">	99	<div class="col-12 px-1 align-self-end btn-effect h-auto">
100	<div	100	<div
101	[ngClass]="{'bg-secondary': articulo.promo}"	101	[ngClass]="{'bg-secondary': articulo.PRO}"
102	class="row mx-0 justify-content-between bg-primary badge-pill"	102	class="row mx-0 justify-content-between bg-primary badge-pill"
103	(click)="elegirArticulo(articulo)">	103	(click)="elegirArticulo(articulo)">
104	<div class="col px-0 align-self-center text-white text-right">	104	<div class="col px-0 align-self-center text-white text-right">
105	{{articulo.PreVen \| currency}}	105	{{articulo.PreVen \| currency}}
106	</div>	106	</div>
107	<div class="col-5 px-0">	107	<div class="col-5 px-0">
108	<img	108	<img
109	draggable="false"	109	draggable="false"
110	ondragstart="return false;"	110	ondragstart="return false;"
111	(contextmenu)="false"	111	(contextmenu)="false"
112	class="d-block ml-auto py-1 icon-30"	112	class="d-block ml-auto py-1 icon-30"
113	src="assets/img/ir.svg">	113	src="assets/img/ir.svg">
114	</div>	114	</div>
115	</div>	115	</div>
116	</div>	116	</div>
117	</div>	117	</div>
118	</div>	118	</div>
119	</div>	119	</div>
120	</div>	120	</div>
121	<!-- BOTON VER MAS -->	121	<!-- BOTON VER MAS -->
122	<div class="row mx-0">	122	<div class="row mx-0">
123	<div	123	<div
124	*ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"	124	*ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
125	class="col-12 px-0 mb-2">	125	class="col-12 px-0 mb-2">
126	<button	126	<button
127	(click)="increaseShow()"	127	(click)="increaseShow()"
128	class="btn btn-block btn-outline-primary">	128	class="btn btn-block btn-outline-primary">
129	Ver Más	129	Ver Más
130	</button>	130	</button>
131	</div>	131	</div>
132	</div>	132	</div>
133	</div>	133	</div>
134	</div>	134	</div>
135	</div>	135	</div>
136	</div>	136	</div>
137	<!-- FOOTER CARRITO DE COMPRAS -->	137	<!-- FOOTER CARRITO DE COMPRAS -->
138	<div class="row w-90 mx-auto h-auto justify-content-center">	138	<div class="row w-90 mx-auto h-auto justify-content-center">
139	<div class="col-12 h-75 px-0 border border-primary rounded">	139	<div class="col-12 h-75 px-0 border border-primary rounded">
140	<!-- CABECERA -->	140	<!-- CABECERA -->
141	<div class="row mx-0 h-15 border-bottom border-primary">	141	<div class="row mx-0 h-15 border-bottom border-primary">
142	<p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>	142	<p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
143	</div>	143	</div>
144	<!-- CUERPO -->	144	<!-- CUERPO -->
145	<div class="row h-85 mx-0 justify-content-around">	145	<div class="row h-85 mx-0 justify-content-around">
146	<!-- BOTON SCROLL IZQUIERDA -->	146	<!-- BOTON SCROLL IZQUIERDA -->
147	<div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">	147	<div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
148	<img	148	<img
149	draggable="false"	149	draggable="false"
150	ondragstart="return false;"	150	ondragstart="return false;"
151	(contextmenu)="false"	151	(contextmenu)="false"
152	class="icon-30 rotate-180-neg"	152	class="icon-30 rotate-180-neg"
153	src="assets/img/ir-fondo-color.svg"	153	src="assets/img/ir-fondo-color.svg"
154	(mousedown)="scrollX(templateCarrito, -100)"	154	(mousedown)="scrollX(templateCarrito, -100)"
155	(mouseup)="mouseup()"	155	(mouseup)="mouseup()"
156	(mouseleave)="mouseup()">	156	(mouseleave)="mouseup()">
157	</div>	157	</div>
158	<!-- CARRITO -->	158	<!-- CARRITO -->
159	<div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">	159	<div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
160	<div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x">	160	<div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x">
161	<!-- MENSAJE DE ADVERTENCIA -->	161	<!-- MENSAJE DE ADVERTENCIA -->
162	<div *ngIf="!articuloService.carrito.length" class="col h-100">	162	<div *ngIf="!articuloService.carrito.length" class="col h-100">
163	<p class="text-center py-5">No hay articulos en el carrito</p>	163	<p class="text-center py-5">No hay articulos en el carrito</p>
164	</div>	164	</div>
165	<!-- ARTICULOS -->	165	<!-- ARTICULOS -->
166	<div	166	<div
167	class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"	167	class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
168	*ngFor="let articulo of articuloService.carrito; let i = index;">	168	*ngFor="let articulo of articuloService.carrito; let i = index;">
169	<div class="swing-in-top-fwd">	169	<div class="swing-in-top-fwd">
170	<img	170	<img
171	draggable="false"	171	draggable="false"
172	ondragstart="return false;"	172	ondragstart="return false;"
173	(contextmenu)="false"	173	(contextmenu)="false"
174	class="d-block img-fluid p-2 mx-auto rounded"	174	class="d-block img-fluid p-2 mx-auto rounded"
175	src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"	175	src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
176	onerror="this.src='assets/img/image-not-found.jpg'">	176	onerror="this.src='assets/img/image-not-found.jpg'">
177	<p class="d-block mt-auto text-center text-primary text-truncate">	177	<p class="d-block mt-auto text-center text-primary text-truncate">
178	<small>{{articulo.DetArt}}</small>	178	<small>{{articulo.DetArt}}</small>
179	</p>	179	</p>
180	</div>	180	</div>
181	</div>	181	</div>
182	</div>	182	</div>
183	</div>	183	</div>
184	<!-- BOTON SCROLL DERECHA -->	184	<!-- BOTON SCROLL DERECHA -->
185	<div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">	185	<div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
186	<img	186	<img
187	draggable="false"	187	draggable="false"
188	ondragstart="return false;"	188	ondragstart="return false;"
189	(contextmenu)="false"	189	(contextmenu)="false"
190	class="icon-30"	190	class="icon-30"
191	src="assets/img/ir-fondo-color.svg"	191	src="assets/img/ir-fondo-color.svg"
192	(mousedown)="scrollX(templateCarrito, 100)"	192	(mousedown)="scrollX(templateCarrito, 100)"
193	(mouseup)="mouseup()"	193	(mouseup)="mouseup()"
194	(mouseleave)="mouseup()">	194	(mouseleave)="mouseup()">
195	</div>	195	</div>
196	</div>	196	</div>
197	</div>	197	</div>
198	<!-- VER CARRITO Y TOTAL-->	198	<!-- VER CARRITO Y TOTAL-->
199	<div	199	<div
200	class="col-auto p-0 mt-2 ml-auto h-20"	200	class="col-auto p-0 mt-2 ml-auto h-20"
201	*ngIf="articuloService.carrito.length">	201	*ngIf="articuloService.carrito.length">
202	<div	202	<div
203	class="btn-effect col-auto align-self-center px-0 bg-white"	203	class="btn-effect col-auto align-self-center px-0 bg-white"
204	[routerLink]="['/carrito']">	204	[routerLink]="['/carrito']">
205	<div class="row justify-content-between mx-0">	205	<div class="row justify-content-between mx-0">
206	<div class="col-auto align-self-center text-primary">TOTAL</div>	206	<div class="col-auto align-self-center text-primary">TOTAL</div>
207	<div class="col-auto p-0 bg-primary d-none d-sm-block bg-total">	207	<div class="col-auto p-0 bg-primary d-none d-sm-block bg-total">
208	<p class="text-center text-white mt-1 py-1">{{articuloService.subTotal \| currency}}</p>	208	<p class="text-center text-white mt-1 py-1">{{articuloService.subTotal \| currency}}</p>
209	</div>	209	</div>
210	<div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div>	210	<div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div>
211	<div class="col-auto p-0 bg-primary d-none d-sm-block">	211	<div class="col-auto p-0 bg-primary d-none d-sm-block">
212	<img	212	<img
213	draggable="false"	213	draggable="false"
214	ondragstart="return false;"	214	ondragstart="return false;"
215	(contextmenu)="false"	215	(contextmenu)="false"
216	class="p-2 icon-40"	216	class="p-2 icon-40"
217	src="assets/img/carrito.svg">	217	src="assets/img/carrito.svg">
218	</div>	218	</div>
219	</div>	219	</div>
220	</div>	220	</div>
221	</div>	221	</div>
222		222
223	</div>	223	</div>
224	</div>	224	</div>
225		225
226	</div>	226	</div>
227		227

src/app/shared/promocion/promocion.component.html

Diff comments View file @ a13d413

1	<div class="modal-header bg-primary">	1	<div class="modal-header bg-primary rounded-top">
2	<div class="col-12">	2	<div class="col-12">
3	<div class="row justify-content-between" *ngIf="articulosPromo.length">	3	<div class="row justify-content-between" *ngIf="articulosPromo.length">
4	<div>	4	<div>
5	<h3 class="ml-2 text-white mt-2">{{articulosPromo[0].DetArt}}</h3>	5	<h3 class="ml-2 text-white mt-2">{{articulosPromo[0].DetArt}}</h3>
6	</div>	6	</div>
7	<div>	7	<div>
8	<div	8	<div
9	class="row mr-3 justify-content-between bg-white badge-pill"	9	class="row mr-3 justify-content-between bg-white badge-pill"
10	(click)="elegirPromo(articulosPromo[0])">	10	(click)="elegirPromo(articulosPromo[0])">
11	<div class="col px-0 align-self-center text-primary">	11	<div class="col px-0 align-self-center text-primary">
12	<p class="font-weight-bold">{{articulosPromo[0].PreVen \| currency}}</p>	12	<p class="font-weight-bold">{{articulosPromo[0].PreVen \| currency}}</p>
13	</div>	13	</div>
14	<div class="col-3 px-0">	14	<div class="col-3 px-0">
15	<img	15	<img
16	draggable="false"	16	draggable="false"
17	ondragstart="return false;"	17	ondragstart="return false;"
18	(contextmenu)="false"	18	(contextmenu)="false"
19	class="d-block ml-auto py-1 icon-30 mr-2 pt-2"	19	class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
20	src="assets/img/ir-color.svg">	20	src="assets/img/ir-color.svg">
21	</div>	21	</div>
22	</div>	22	</div>
23	</div>	23	</div>
24	</div>	24	</div>
25	</div>	25	</div>
26	</div>	26	</div>
27	<div class="modal-body bg-primary" *ngIf="articulosPromo.length">	27	<div class="modal-body bg-primary rounded-bottom" *ngIf="articulosPromo.length">
28	<div class="row">	28	<div class="row">
29	<div class="col-9">	29	<div class="col-9">
30	<p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>	30	<p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
31	<h1 class="text-white mb-4">en un combo?</h1>	31	<h1 class="text-white mb-4">en un combo?</h1>
32	<div *ngFor="let promo of promociones">	32	<div *ngFor="let promo of promociones">
33	<div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)">	33	<div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)">
34	<div class="row mx-0 justify-content-between">	34	<div class="row mx-0 justify-content-between">
35	<p class="ml-4 text-truncate">{{promo.DetArt}}</p>	35	<p class="text-truncate"><small>{{promo.DetArt}}</small></p>
36	<p class="mr-4 font-weight-bold">{{promo.PreVen \| currency}}</p>	36	<p class="font-weight-bold">{{promo.PreVen \| currency}}</p>
37	</div>	37	</div>
38	</div>	38	</div>
39	</div>	39	</div>
40	</div>	40	</div>
41	<div class="col-3 rounded-circle">	41	<div class="col-3 rounded-circle">
42	<img	42	<img
43	draggable="false"	43	draggable="false"
44	ondragstart="return false;"	44	ondragstart="return false;"
45	(contextmenu)="false"	45	(contextmenu)="false"
46	src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"	46	src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
47	onerror="this.src='assets/img/image-not-found.jpg'"	47	onerror="this.src='assets/img/image-not-found.jpg'"
48	class="card-img-top img-fluid rounded-circle">	48	class="card-img-top img-fluid rounded-circle">
49	</div>	49	</div>
50	</div>	50	</div>
51	</div>	51	</div>
52		52

src/scss/styles-bootstrap.scss

Diff comments View file @ a13d413

 @import "node_modules/bootstrap/scss/functions";
 @import "node_modules/bootstrap/scss/variables";
 @import "node_modules/bootstrap/scss/mixins";
 $primary: #aa006b;
 $secondary: #00acd8;
 $info: #f4b223;
 $light: #e6e7e9;
 $dark: #61666c;
 $theme-colors: (
   primary: $primary,
   secondary: $secondary,
   info: $info,
   light: $light,
   dark: $dark
 );
 $border-radius: 1.5rem;
 $border-radius-lg: 2.5rem;
 $border-radius-sm: 0.5rem;
 .custom-modal {
   max-width: 90% !important;
   & > .modal-content {
     background-color: $primary !important;
     color: white;
     border: none !important;
     border-radius: $border-radius !important;
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
   }
 }
 .carousel-control {
   visibility: hidden !important;
 }
 .carousel,
 .carousel-inner,
 .carousel-item,
 .item {
   height: 100% !important;
 }
 .modal-promo > div {
-  background-color: $primary !important;
   border: none !important;
   border-radius: 10rem;
   margin-left: 10px !important;
 }
 @import "node_modules/bootstrap/scss/bootstrap";