Marcelo Puebla / wrapper-demo

Download as
Browse Code ยป

Commit 3b8cb3ff474ac614cf717388a8939d5794365577

Authored by Marcelo Puebla
1 parent c05a8c7f2f
Exists in master and in 1 other branch develop

Codigo identado, agregado clase en focus en botonera principal.

Showing 1 changed file with 39 additions and 35 deletions   Show diff stats
src/sass/_botonera-principal.scss
Diff comments   View file @ 3b8cb3f
1 .botonera-principal { 1 .botonera-principal {
2 menuitem { 2 menuitem {
3 display: inline-block; 3 display: inline-block;
4 height: 130px; 4 height: 130px;
5 text-align: center; 5 text-align: center;
6 width: 180px; 6 width: 180px;
7 @media (max-width: 576px) { 7 @media (max-width: 576px) {
8 width: 100%; 8 width: 100%;
9 } 9 }
10 @media (min-width: 992px) and (max-width: 1200px){ 10 @media (min-width: 992px) and (max-width: 1200px) {
11 width: 150px; 11 width: 150px;
12 } 12 }
13 } 13 }
14 button { 14 button {
15 background-image: url('../img/botonera.png'); 15 background-image: url("../img/botonera.png");
16 border-radius: 12px; 16 border-radius: 12px;
17 border-width: 0; 17 border-width: 0;
18 height: 90px; 18 height: 90px;
19 position: relative; 19 position: relative;
20 width: 90px; 20 width: 90px;
21 outline: 0; 21 outline: 0;
22 span { 22 span {
23 left: 0; 23 left: 0;
24 position: absolute; 24 position: absolute;
25 text-align: center; 25 text-align: center;
26 top: 90px; 26 top: 90px;
27 width: 100%; 27 width: 100%;
28 font-size: 12px; 28 font-size: 12px;
29 color: #777777; 29 color: #777777;
30 } 30 }
31 &:hover { 31 &:hover {
32 background-color:rgb(250,250,250); 32 background-color: rgb(250, 250, 250);
33 filter:drop-shadow(4px 4px 4px gray); 33 filter: drop-shadow(4px 4px 4px gray);
34 } 34 }
35 &:active { 35 &:active {
36 background-color: rgb(230, 230, 230); 36 background-color: rgb(230, 230, 230);
37 filter:drop-shadow(4px 4px 4px gray); 37 filter: drop-shadow(4px 4px 4px gray);
38 }
39 &:focus {
40 background-color: rgb(250, 250, 250);
41 filter: drop-shadow(4px 4px 4px gray);
38 } 42 }
39 } 43 }
40 &-menu { 44 &-menu {
41 width: 100%; 45 width: 100%;
42 padding-left: 90px; 46 padding-left: 90px;
43 @media (max-width: 576px) { 47 @media (max-width: 576px) {
44 padding: 0; 48 padding: 0;
45 } 49 }
46 } 50 }
47 &-logo { 51 &-logo {
48 width: 100%; 52 width: 100%;
49 margin-left: 50%; 53 margin-left: 50%;
50 opacity: .8; 54 opacity: 0.8;
51 @media (max-width: 576px) { 55 @media (max-width: 576px) {
52 width: 180%; 56 width: 180%;
53 margin-left: 20%; 57 margin-left: 20%;
54 } 58 }
55 } 59 }
56 &-vacio { 60 &-vacio {
57 & button { 61 & button {
58 background-position: -4380px 0; 62 background-position: -4380px 0;
59 &:hover { 63 &:hover {
60 background-position: -4380px -90px; 64 background-position: -4380px -90px;
61 } 65 }
62 } 66 }
63 } 67 }
64 &-abrir-turno { 68 &-abrir-turno {
65 & button { 69 & button {
66 background-position: 0 0; 70 background-position: 0 0;
67 &:hover { 71 &:hover {
68 background-position: 0 -90px; 72 background-position: 0 -90px;
69 } 73 }
70 } 74 }
71 } 75 }
72 &-cerrar-turno { 76 &-cerrar-turno {
73 & button { 77 & button {
74 background-position: -90px 0; 78 background-position: -90px 0;
75 &:hover { 79 &:hover {
76 background-position: -90px -90px; 80 background-position: -90px -90px;
77 } 81 }
78 } 82 }
79 } 83 }
80 &-caja { 84 &-caja {
81 & button { 85 & button {
82 background-position: -180px 0; 86 background-position: -180px 0;
83 &:hover { 87 &:hover {
84 background-position: -180px -90px; 88 background-position: -180px -90px;
85 } 89 }
86 } 90 }
87 } 91 }
88 &-estado-cisterna { 92 &-estado-cisterna {
89 & button { 93 & button {
90 background-image: url('../img/control_stock.png'); 94 background-image: url("../img/control_stock.png");
91 background-size: 90px 90px; 95 background-size: 90px 90px;
92 } 96 }
93 } 97 }
94 &-logistica { 98 &-logistica {
95 & button { 99 & button {
96 background-image: url('../img/logistica.png'); 100 background-image: url("../img/logistica.png");
97 background-size: 90px 90px; 101 background-size: 90px 90px;
98 } 102 }
99 } 103 }
100 &-facturador { 104 &-facturador {
101 & button { 105 & button {
102 background-position: -270px 0px; 106 background-position: -270px 0px;
103 &:hover { 107 &:hover {
104 background-position: -270px -90px; 108 background-position: -270px -90px;
105 } 109 }
106 } 110 }
107 } 111 }
108 &-nota-pedido { 112 &-nota-pedido {
109 & button { 113 & button {
110 background-image: url('../img/notaPedido.png'); 114 background-image: url("../img/notaPedido.png");
111 background-size: 90px 90px; 115 background-size: 90px 90px;
112 } 116 }
113 } 117 }
114 &-remito { 118 &-remito {
115 & button { 119 & button {
116 background-image: url('../img/remito.png'); 120 background-image: url("../img/remito.png");
117 background-size: 90px 90px; 121 background-size: 90px 90px;
118 } 122 }
119 } 123 }
120 &-hoja-ruta { 124 &-hoja-ruta {
121 & button { 125 & button {
122 background-image: url('../img/hoja-ruta.png'); 126 background-image: url("../img/hoja-ruta.png");
123 background-size: 86px 90px; 127 background-size: 86px 90px;
124 } 128 }
125 } 129 }
126 &-activar-hoja-ruta { 130 &-activar-hoja-ruta {
127 & button { 131 & button {
128 background-image: url('../img/activar_hoja.png'); 132 background-image: url("../img/activar_hoja.png");
129 background-size: 90px 90px; 133 background-size: 90px 90px;
130 } 134 }
131 } 135 }
132 &-hoja-ruta-transportista { 136 &-hoja-ruta-transportista {
133 & button { 137 & button {
134 background-image: url('../img/hojaRutaVolante.png'); 138 background-image: url("../img/hojaRutaVolante.png");
135 background-size: 90px 90px; 139 background-size: 90px 90px;
136 } 140 }
137 } 141 }
138 &-seguimiento { 142 &-seguimiento {
139 & button { 143 & button {
140 background-image: url('../img/seguimientoNotaPedido.png'); 144 background-image: url("../img/seguimientoNotaPedido.png");
141 background-size: 90px 90px; 145 background-size: 90px 90px;
142 } 146 }
143 } 147 }
144 &-seguimiento-hoja-ruta { 148 &-seguimiento-hoja-ruta {
145 & button { 149 & button {
146 background-image: url('../img/seguimientoHojaRuta.png'); 150 background-image: url("../img/seguimientoHojaRuta.png");
147 background-size: 90px 90px; 151 background-size: 90px 90px;
148 } 152 }
149 } 153 }
150 &-cobranzas { 154 &-cobranzas {
151 & button { 155 & button {
152 background-image: url('../img/cobranzas.png'); 156 background-image: url("../img/cobranzas.png");
153 background-size: 90px 90px; 157 background-size: 90px 90px;
154 } 158 }
155 } 159 }
156 &-seguimiento-cobranzas { 160 &-seguimiento-cobranzas {
157 & button { 161 & button {
158 background-image: url('../img/seguimientoCobranza.png'); 162 background-image: url("../img/seguimientoCobranza.png");
159 background-size: 90px 90px; 163 background-size: 90px 90px;
160 } 164 }
161 } 165 }
162 &-vehiculo { 166 &-vehiculo {
163 & button { 167 & button {
164 background-image: url('../img/abmVehiculos.png'); 168 background-image: url("../img/abmVehiculos.png");
165 background-size: 90px 90px; 169 background-size: 90px 90px;
166 } 170 }
167 } 171 }
168 &-precio-condicion { 172 &-precio-condicion {
169 & button { 173 & button {
170 background-image: url('../img/abmPrecios.png'); 174 background-image: url("../img/abmPrecios.png");
171 background-size: 90px 90px; 175 background-size: 90px 90px;
172 } 176 }
173 } 177 }
174 &-chofer { 178 &-chofer {
175 & button { 179 & button {
176 background-image: url('../img/abmChofer.png'); 180 background-image: url("../img/abmChofer.png");
177 background-size: 90px 90px; 181 background-size: 90px 90px;
178 } 182 }
179 } 183 }
180 &-agendar-visita { 184 &-agendar-visita {
181 & button { 185 & button {
182 background-image: url('../img/agendarVisita.png'); 186 background-image: url("../img/agendarVisita.png");
183 background-size: 90px 90px; 187 background-size: 90px 90px;
184 } 188 }
185 } 189 }
186 &-informes { 190 &-informes {
187 & button { 191 & button {
188 background-image: url('../img/informes.png'); 192 background-image: url("../img/informes.png");
189 background-size: 90px 90px; 193 background-size: 90px 90px;
190 } 194 }
191 } 195 }
192 &-vendedor-cobrador { 196 &-vendedor-cobrador {
193 & button { 197 & button {
194 background-image: url('../img/abmVendedorCobrador.png'); 198 background-image: url("../img/abmVendedorCobrador.png");
195 background-size: 90px 90px; 199 background-size: 90px 90px;
196 } 200 }
197 } 201 }
198 &-autorizar-nota { 202 &-autorizar-nota {
199 & button { 203 & button {
200 background-image: url('../img/autorizarNota.png'); 204 background-image: url("../img/autorizarNota.png");
201 background-size: 90px 90px; 205 background-size: 90px 90px;
202 } 206 }
203 } 207 }
204 208
205 &-cliente { 209 &-cliente {
206 & button { 210 & button {
207 background-image: url('../img/clientePrincipal.png'); 211 background-image: url("../img/clientePrincipal.png");
208 background-size: 90px 90px; 212 background-size: 90px 90px;
209 } 213 }
210 } 214 }
211 215
212 &-parametros { 216 &-parametros {
213 & button { 217 & button {
214 background-image: url('../img/parametrizar.png'); 218 background-image: url("../img/parametrizar.png");
215 background-size: 90px 90px; 219 background-size: 90px 90px;
216 } 220 }
217 } 221 }
218 .swiper-pagination { 222 .swiper-pagination {
219 bottom: 0px !important; 223 bottom: 0px !important;
220 } 224 }
221 225
222 .swiper-button-next { 226 .swiper-button-next {
223 background-image: url('../img/derecha.png'); 227 background-image: url("../img/derecha.png");
224 &:hover{ 228 &:hover {
225 filter:drop-shadow(4px 4px 4px gray); 229 filter: drop-shadow(4px 4px 4px gray);
226 } 230 }
227 } 231 }
228 232
229 .swiper-button-prev { 233 .swiper-button-prev {
230 background-image: url('../img/izquierda.png'); 234 background-image: url("../img/izquierda.png");
231 &:hover{ 235 &:hover {
232 filter:drop-shadow(4px 4px 4px gray); 236 filter: drop-shadow(4px 4px 4px gray);
233 } 237 }
234 } 238 }
235 @media (min-width: 992px){ 239 @media (min-width: 992px) {
236 a{ 240 a {
237 margin-top: 2.5rem; 241 margin-top: 2.5rem;
238 } 242 }
239 } 243 }
240 } 244 }
241 245