Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 3407a1d2228bb5cd6147c49ef022a3b1d4531987

Authored by Marcelo Puebla
2 parents efd813e47c add521cdc6
Exists in develop and in 1 other branch 20200117-axion-responsive

Merge branch 'develop' into 'develop' 

Develop

See merge request !15
Showing 8 changed files   Show diff stats
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ 3407a1d
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="h-75"> 5 <div class="h-75">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 px-0 py-2 align-self-center"> 8 <div class="col-12 px-0 py-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p> 10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 14
15 <!-- CARRITO --> 15 <!-- CARRITO -->
16 <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible"> 16 <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible">
17 <!-- MENSAJE DE ADVERTENCIA --> 17 <!-- MENSAJE DE ADVERTENCIA -->
18 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length"> 18 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
19 <p class="h5 text-center">No hay artículos en el carrito</p> 19 <p class="h5 text-center">No hay artículos en el carrito</p>
20 </div> 20 </div>
21 <!-- ARTICULOS --> 21 <!-- ARTICULOS -->
22 <div 22 <div
23 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate" 23 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"
24 *ngFor="let articulo of articuloService.carrito; let i = index;" 24 *ngFor="let articulo of articuloService.carrito; let i = index;"
25 @EnterLeave> 25 @EnterLeave>
26 <!-- ARTICULO --> 26 <!-- ARTICULO -->
27 <div class="h-100 px-2 py-4 border border-primary rounded-sm"> 27 <div class="h-100 px-2 py-4 border border-primary rounded-sm">
28 <div class="row mx-0 h-100"> 28 <div class="row mx-0 h-100">
29 <!-- NOMBRE E IMAGEN --> 29 <!-- NOMBRE E IMAGEN -->
30 <div class="col-3 h-100 border-right border-primary align-self-center"> 30 <div class="col-3 h-100 border-right border-primary align-self-center">
31 <img 31 <img
32 draggable="false" 32 draggable="false"
33 ondragstart="return false;" 33 ondragstart="return false;"
34 (contextmenu)="false" 34 (contextmenu)="false"
35 class="d-block mx-auto h-55 rounded-sm shadow-sm" 35 class="d-block mx-auto h-55 rounded-sm shadow-sm"
36 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 36 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
37 onerror="this.src='assets/img/image-not-found.jpg'"> 37 onerror="this.src='assets/img/image-not-found.jpg'">
38 <div class="row mx-0 h-45"> 38 <div class="row mx-0 h-45">
39 <p class="col text-primary text-truncate align-self-end"> 39 <p class="col text-primary text-truncate align-self-end">
40 <small>{{articulo.DetArt}}</small> 40 <small>{{articulo.DetArt}}</small>
41 </p> 41 </p>
42 </div> 42 </div>
43 </div> 43 </div>
44 <!-- CANTIDAD --> 44 <!-- CANTIDAD -->
45 <div class="col-3 border-right border-primary"> 45 <div class="col-3 border-right border-primary">
46 <p><small>CANT</small></p> 46 <p><small>CANT</small></p>
47 <div class="row mt-2 mx-0"> 47 <div class="row mt-2 mx-0">
48 <div class="col-12 h-auto"> 48 <div class="col-12 h-auto">
49 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 49 <div class="row mx-0 justify-content-between bg-primary badge-pill">
50 <!-- BOTON MENOS --> 50 <!-- BOTON MENOS -->
51 <div class="col-auto px-0"> 51 <div class="col-auto px-0">
52 <img 52 <img
53 draggable="false" 53 draggable="false"
54 ondragstart="return false;" 54 ondragstart="return false;"
55 (contextmenu)="false" 55 (contextmenu)="false"
56 class="d-block ml-auto py-2 icon-20 btn-effect" 56 class="d-block ml-auto py-2 icon-20 btn-effect"
57 src="assets/img/menos-blanco.svg" 57 src="assets/img/menos-blanco.svg"
58 (click)="substractCant(articulo)"> 58 (click)="substractCant(articulo)">
59 </div> 59 </div>
60 <!-- CANTIDAD --> 60 <!-- CANTIDAD -->
61 <div class="col px-0 align-self-center text-white"> 61 <div class="col px-0 align-self-center text-white">
62 <p><small>{{articulo.cantidad}}</small></p> 62 <p><small>{{articulo.cantidad}}</small></p>
63 </div> 63 </div>
64 <!-- BOTON MAS --> 64 <!-- BOTON MAS -->
65 <div class="col-auto px-0"> 65 <div class="col-auto px-0">
66 <img 66 <img
67 draggable="false" 67 draggable="false"
68 ondragstart="return false;" 68 ondragstart="return false;"
69 (contextmenu)="false" 69 (contextmenu)="false"
70 class="d-block ml-auto py-2 icon-20 btn-effect" 70 class="d-block ml-auto py-2 icon-20 btn-effect"
71 src="assets/img/mas-blanco.svg" 71 src="assets/img/mas-blanco.svg"
72 (click)="addCant(articulo)"> 72 (click)="addCant(articulo)">
73 </div> 73 </div>
74 </div> 74 </div>
75 </div> 75 </div>
76 </div> 76 </div>
77 </div> 77 </div>
78 <!-- OPCIONALES --> 78 <!-- OPCIONALES -->
79 <div class="col-3 border-right border-primary"> 79 <!-- <div class="col-3 border-right border-primary">
80 <p><small>OPCIONALES</small></p> 80 <p><small>OPCIONALES</small></p>
81 <!-- <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div> 81 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div>
82 <div class="row mx-0 mt-2 justify-content-center"> 82 <div class="row mx-0 mt-2 justify-content-center">
83 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white"> 83 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white">
84 <span> 84 <span>
85 <small class="pr-2">CAMBIAR</small> 85 <small class="pr-2">CAMBIAR</small>
86 <img 86 <img
87 draggable="false" 87 draggable="false"
88 ondragstart="return false;" 88 ondragstart="return false;"
89 (contextmenu)="false" 89 (contextmenu)="false"
90 class="icon-20" 90 class="icon-20"
91 src="assets/img/ir.svg"> 91 src="assets/img/ir.svg">
92 </span> 92 </span>
93 </div> 93 </div>
94 </div> --> 94 </div> -->
95 <!-- PRECIO -->
96 <div class="col-3 border-right border-primary">
97 <p><small>PRECIO</small></p>
98 <div class="py-1 mt-2 badge-pill bg-dark text-white">
99 <p><small>{{articulo.PreVen | currency}}</small></p>
100 </div>
95 </div> 101 </div>
96 <!-- ELIMINAR --> 102 <!-- ELIMINAR -->
97 <div class="col-3 align-self-center"> 103 <div class="col-3 align-self-center">
98 <div class="row mx-0 justify-content-center"> 104 <div class="row mx-0 justify-content-center">
99 <div 105 <div
100 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white" 106 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
101 (click)="deleteArticulo(i)"> 107 (click)="deleteArticulo(i)">
102 <span> 108 <span>
103 <small class="pr-2">ELIMINAR</small> 109 <small class="pr-2">ELIMINAR</small>
104 <img 110 <img
105 draggable="false" 111 draggable="false"
106 ondragstart="return false;" 112 ondragstart="return false;"
107 (contextmenu)="false" 113 (contextmenu)="false"
108 class="icon-20 rotate-45" 114 class="icon-20 rotate-45"
109 src="assets/img/mas-blanco.svg"> 115 src="assets/img/mas-blanco.svg">
110 </span> 116 </span>
111 </div> 117 </div>
112 </div> 118 </div>
113 </div> 119 </div>
114 </div> 120 </div>
115 </div> 121 </div>
116 </div> 122 </div>
117 </div> 123 </div>
118 <!-- CONTINUAR --> 124 <!-- CONTINUAR -->
119 <div 125 <div
120 *ngIf="articuloService.carrito.length" 126 *ngIf="articuloService.carrito.length"
121 class="row mx-3 mt-4 h-auto justify-content-end"> 127 class="row mx-3 mt-4 h-auto justify-content-end">
122 <div 128 <div
123 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 129 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
124 [routerLink]="['/forma-pago']"> 130 [routerLink]="['/forma-pago']">
125 <span> 131 <span>
126 <small class="pr-2">CONTINUAR</small> 132 <small class="pr-2">CONTINUAR</small>
127 <img 133 <img
128 draggable="false" 134 draggable="false"
129 ondragstart="return false;" 135 ondragstart="return false;"
130 (contextmenu)="false" 136 (contextmenu)="false"
131 class="icon-20" 137 class="icon-20"
132 src="assets/img/ir.svg"> 138 src="assets/img/ir.svg">
133 </span> 139 </span>
134 </div> 140 </div>
135 </div> 141 </div>
136 <!-- SEGUIR COMPRANDO --> 142 <!-- SEGUIR COMPRANDO -->
137 <div class="row mx-3 mt-2 h-auto justify-content-end"> 143 <div class="row mx-3 mt-2 h-auto justify-content-end">
138 <div 144 <div
139 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 145 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
140 (click)="goBack()"> 146 (click)="goBack()">
141 <span> 147 <span>
142 <small class="pr-2">SEGUIR COMPRANDO</small> 148 <small class="pr-2">SEGUIR COMPRANDO</small>
143 <img 149 <img
144 draggable="false" 150 draggable="false"
145 ondragstart="return false;" 151 ondragstart="return false;"
146 (contextmenu)="false" 152 (contextmenu)="false"
147 class="icon-20" 153 class="icon-20"
148 src="assets/img/ir.svg"> 154 src="assets/img/ir.svg">
149 </span> 155 </span>
150 </div> 156 </div>
151 </div> 157 </div>
152 </div> 158 </div>
153 159
154 </div> 160 </div>
155 161
src/app/modules/pago-electronico/pago-electronico.component.html
Diff comments   View file @ 3407a1d
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <div class="row mx-0 h-15"> 2 <div class="row mx-0 h-15">
3 <div class="col-12 px-0 h-80 my-auto"> 3 <div class="col-12 px-0 h-80 my-auto">
4 <img 4 <img
5 draggable="false" 5 draggable="false"
6 ondragstart="return false;" 6 ondragstart="return false;"
7 (contextmenu)="false" 7 (contextmenu)="false"
8 class="d-block mx-auto h-100" 8 class="d-block mx-auto h-100"
9 src="assets/img/logo-spot.svg"> 9 src="assets/img/logo-spot.svg">
10 </div> 10 </div>
11 </div> 11 </div>
12 <div class="h-85"> 12 <div class="h-85">
13 <div class="row mt-5 mx-3 h-auto border border-primary rounded-sm"> 13 <div class="row mt-5 mx-3 h-auto border border-primary rounded-sm">
14 <div class="col-12 px-0 py-2 align-self-center"> 14 <div class="col-12 px-0 py-2 align-self-center">
15 <div class="px-3 text-center"> 15 <div class="px-3 text-center">
16 <p class="h6 text-truncate">PAGO ELECTRÓNICO</p> 16 <p class="h6 text-truncate">PAGO ELECTRÓNICO</p>
17 </div> 17 </div>
18 </div> 18 </div>
19 </div> 19 </div>
20 <!-- QR --> 20 <!-- QR -->
21 <div class="row mx-0 mt-5 h-60 justify-content-center"> 21 <div class="row mx-0 mt-5 h-60 justify-content-center">
22 <div class="col-10 px-0 h-100"> 22 <div class="col-10 px-0 h-55 position-absolute">
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="d-block mx-auto img-fluid" 27 class="d-block mx-auto h-100 w-auto shadow rounded"
28 src="assets/img/qr-skin.jpg">
29 </div>
30 <div class="col-10 px-0 h-100 mt-7 mt-lg-5">
31 <img
32 draggable="false"
33 ondragstart="return false;"
34 (contextmenu)="false"
35 class="d-block mx-auto h-40"
28 [src]="urlQr"> 36 [src]="urlQr">
29 </div> 37 </div>
30 </div> 38 </div>
31 </div> 39 </div>
32 </div> 40 </div>
33 41
src/app/modules/pago-electronico/pago-electronico.component.scss
Diff comments   View file @ 3407a1d
1 .mt-6 {
2 margin-top: 4.5rem;
3 }
4
5 .mt-7 {
6 margin-top: 6rem;
7 }
src/app/modules/pago-electronico/pago-electronico.component.ts
Diff comments   View file @ 3407a1d
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 2 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
3 import { Router } from '@angular/router'; 3 import { Router } from '@angular/router';
4 import { APP_SETTINGS } from 'src/etc/AppSettings'; 4 import { APP_SETTINGS } from 'src/etc/AppSettings';
5 5
6 @Component({ 6 @Component({
7 selector: 'app-pago-electronico', 7 selector: 'app-pago-electronico',
8 templateUrl: './pago-electronico.component.html', 8 templateUrl: './pago-electronico.component.html',
9 styleUrls: ['./pago-electronico.component.scss'] 9 styleUrls: ['./pago-electronico.component.scss']
10 }) 10 })
11 export class PagoElectronicoComponent implements OnInit { 11 export class PagoElectronicoComponent implements OnInit {
12 urlQr = `${APP_SETTINGS.apiDeboSuite}/qr/dev/${APP_SETTINGS.codigoP}/tienda/${APP_SETTINGS.terminal}`; 12 urlQr = `${APP_SETTINGS.apiDeboSuite}/qr/dev/${APP_SETTINGS.codigoP}/tienda/${APP_SETTINGS.terminal}`;
13 13
14 constructor( 14 constructor(
15 private articuloService: ArticuloService, 15 private articuloService: ArticuloService,
16 private router: Router, 16 private router: Router,
17 ) { } 17 ) { }
18 18
19 ngOnInit() { 19 ngOnInit() {
20 if (!this.articuloService.carrito.length) { 20 // if (!this.articuloService.carrito.length) {
21 this.router.navigate(['']); 21 // this.router.navigate(['']);
22 return; 22 // return;
23 } 23 // }
24 let dataPago = { 24 let dataPago = {
25 pedidoAnombreDe: '' 25 pedidoAnombreDe: ''
26 } 26 }
27 this.articuloService.pay(dataPago) 27 this.articuloService.pay(dataPago)
28 .subscribe((res: any) => { 28 .subscribe((res: any) => {
29 this.articuloService.idComanda = res.data; 29 this.articuloService.idComanda = res.data;
30 this.router.navigate(['mensaje-final']); 30 this.router.navigate(['mensaje-final']);
31 }, err => console.error(err)); 31 }, err => console.error(err));
32 } 32 }
33 33
34 } 34 }
35 35
src/app/modules/splash-screen/splash-screen.component.html
Diff comments   View file @ 3407a1d
1 <div *ngIf="showSplashScreen" class="vh-100 bg-splash"> 1 <div *ngIf="showSplashScreen" class="h-100 bg-splash">
2 <div class="row mx-0 h-100"> 2 <div class="row mx-0 h-100">
3 <div class="col-12 px-0 h-30 my-auto"> 3 <div class="col-12 px-0 h-30 my-auto">
4 <img 4 <img
5 draggable="false" 5 draggable="false"
6 ondragstart="return false;" 6 ondragstart="return false;"
7 (contextmenu)="false" 7 (contextmenu)="false"
8 class="d-block mx-auto h-100 focus-in-blur" 8 class="d-block mx-auto h-100 focus-in-blur"
9 src="assets/img/logo-spot.svg"> 9 src="assets/img/logo-spot.svg">
10 </div> 10 </div>
11 </div> 11 </div>
12 </div> 12 </div>
13 13
14 <div *ngIf="!showSplashScreen" class="vh-100 bg-primary fade-in"> 14 <div *ngIf="!showSplashScreen" class="h-100 bg-primary fade-in">
15 <div class="row mx-0 h-100"> 15 <div class="row mx-0 h-100">
16 <div class="col-12 px-0 h-100 my-auto"> 16 <div class="col-12 px-0 h-100 my-auto">
17 <div class="row mx-0 h-15"> 17 <div class="row mx-0 h-15">
18 <div class="col-12 px-0 h-80 my-auto"> 18 <div class="col-12 px-0 h-80 my-auto">
19 <img 19 <img
20 draggable="false" 20 draggable="false"
21 ondragstart="return false;" 21 ondragstart="return false;"
22 (contextmenu)="false" 22 (contextmenu)="false"
23 class="d-block mx-auto h-100" 23 class="d-block mx-auto h-100"
24 src="assets/img/negativo-spot.svg"> 24 src="assets/img/negativo-spot.svg">
25 </div> 25 </div>
26 </div> 26 </div>
27 <div class="row mx-0 h-75 justify-content-center text-white text-center"> 27 <div class="row mx-0 h-75 justify-content-center text-white text-center">
28 <div class="col-7 h-auto px-0 py-5 mb-5 align-self-end box"> 28 <div class="col-7 h-auto px-0 py-5 mb-5 align-self-end box">
29 <div class="h6 m-0 welcome-text text-info"> 29 <div class="h6 m-0 welcome-text text-info">
30 <span *ngFor="let letter of textWelcome | split textWelcome">{{letter}}</span> 30 <span *ngFor="let letter of textWelcome | split textWelcome">{{letter}}</span>
31 </div> 31 </div>
32 <div class="h1 m-0 como-estas-text"> 32 <div class="h1 m-0 como-estas-text">
33 <span *ngFor="let letter of textComoEstas | split textComoEstas">{{letter}}</span> 33 <span *ngFor="let letter of textComoEstas | split textComoEstas">{{letter}}</span>
34 </div> 34 </div>
35 </div> 35 </div>
36 <div class="col-7 h-auto px-0 py-5 mt-5 align-self-start box2"> 36 <div class="col-7 h-auto px-0 py-5 mt-5 align-self-start box2">
37 <div class="h6 m-0 invitamos-text text-info"> 37 <div class="h6 m-0 invitamos-text text-info">
38 <span *ngFor="let letter of textInvitamos | split textInvitamos">{{letter}}</span> 38 <span *ngFor="let letter of textInvitamos | split textInvitamos">{{letter}}</span>
39 </div> 39 </div>
40 <div class="h1 m-0 tu-pedido-text"> 40 <div class="h1 m-0 tu-pedido-text">
41 <span *ngFor="let letter of textTuPedido | split textTuPedido">{{letter}}</span> 41 <span *ngFor="let letter of textTuPedido | split textTuPedido">{{letter}}</span>
42 </div> 42 </div>
43 </div> 43 </div>
44 </div> 44 </div>
45 <div 45 <div
46 class="row mx-0 h-10 loop-color cursor-pointer" 46 class="row mx-0 h-10 loop-color cursor-pointer"
47 [routerLink]="['/info-formas-pago']"> 47 [routerLink]="['/info-formas-pago']">
48 <div class="col-12 text-center align-self-center px-0"> 48 <div class="col-12 text-center align-self-center px-0">
49 <p class="h6 text-white">TOCA PARA COMENZAR</p> 49 <p class="h6 text-white">TOCA PARA COMENZAR</p>
50 </div> 50 </div>
51 </div> 51 </div>
52 </div> 52 </div>
53 </div> 53 </div>
54 </div> 54 </div>
55 55
src/assets/img/qr-skin.jpg
Diff comments   View file @ 3407a1d

309 KB
No preview for this file type
1 @import "scss/styles-bootstrap.scss"; 1 @import "scss/styles-bootstrap.scss";
2 @import "scss/typography.scss"; 2 @import "scss/typography.scss";
3 @import "scss/height-width.scss"; 3 @import "scss/height-width.scss";
4 @import "scss/animations.scss"; 4 @import "scss/animations.scss";
5 @import "scss/icons.scss"; 5 @import "scss/icons.scss";
6 @import "scss/scroll.scss"; 6 @import "scss/scroll.scss";
7 @import "node_modules/bootstrap/scss/_variables.scss"; 7 @import "node_modules/bootstrap/scss/_variables.scss";
8 8
9 @font-face { 9 @font-face {
10 font-family: "Gotham"; 10 font-family: "Gotham";
11 font-style: normal; 11 font-style: normal;
12 font-weight: normal; 12 font-weight: normal;
13 src: url("assets/fonts/gotham-medium.woff") format("woff"); 13 src: url("assets/fonts/gotham-medium.woff") format("woff");
14 } 14 }
15 15
16 html, 16 html,
17 body { 17 body {
18 min-height: 100vh;
19 max-height: 100vh; 18 max-height: 100vh;
20 height: 100vh; 19 height: 100%;
21 font-family: "Gotham"; 20 font-family: "Gotham";
22 overflow: hidden; 21 overflow: hidden;
23 user-select: none; 22 user-select: none;
24 } 23 }
25 24
26 .btn-effect { 25 .btn-effect {
27 transition: all 0.3s; 26 transition: all 0.3s;
28 &:hover { 27 &:hover {
29 cursor: pointer; 28 cursor: pointer;
30 opacity: 0.7; 29 opacity: 0.7;
31 } 30 }
32 &:active { 31 &:active {
33 transform: scale(1.02); 32 transform: scale(1.02);
34 } 33 }
35 } 34 }
36 35
37 .cursor-pointer { 36 .cursor-pointer {
38 cursor: pointer; 37 cursor: pointer;
39 } 38 }
40 39
41 p { 40 p {
42 margin: 0 !important; 41 margin: 0 !important;
43 } 42 }
44 43
45 .img-in-top { 44 .img-in-top {
46 position: absolute; 45 position: absolute;
47 top: -35px; 46 top: -35px;
48 left: 50%; 47 left: 50%;
49 height: 70px; 48 height: 70px;
50 -webkit-transform: translateX(-50%); 49 -webkit-transform: translateX(-50%);
51 transform: translateX(-50%); 50 transform: translateX(-50%);
52 } 51 }
53 52
54 .rotate-45 { 53 .rotate-45 {
55 transform: rotate(45deg); 54 transform: rotate(45deg);
56 } 55 }
57 56
58 .rotate-90 { 57 .rotate-90 {
59 transform: rotate(90deg); 58 transform: rotate(90deg);
60 } 59 }
61 60
62 .rotate-90-neg { 61 .rotate-90-neg {
63 transform: rotate(-90deg); 62 transform: rotate(-90deg);
64 } 63 }
65 64
66 .rotate-180-neg { 65 .rotate-180-neg {
67 transform: rotate(-180deg); 66 transform: rotate(-180deg);
68 } 67 }
69 68