Mauricio Cattafi / wrapper-demo

Download as
Browse Code ยป

Commit 220234a4e0df7db2ea88849a654003aa563f7f25

Authored by Marcelo Puebla
2 parents c488654e13 05e274de90
Exists in master

Merge branch 'master' into 'develop' 

Master(mpuebla)

See merge request !173
Showing 1 changed file   Show diff stats
src/sass/_botonera-principal.scss
Diff comments   View file @ 220234a
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 cursor: pointer; 15 cursor: pointer;
16 background-image: url("../img/botonera.png"); 16 background-image: url("../img/botonera.png");
17 border-radius: 12px; 17 border-radius: 12px;
18 border-width: 0; 18 border-width: 0;
19 height: 90px; 19 height: 90px;
20 position: relative; 20 position: relative;
21 width: 90px; 21 width: 90px;
22 outline: 0; 22 outline: 0;
23 transition: 0.3s;
23 span { 24 span {
24 left: 0; 25 left: 0;
25 position: absolute; 26 position: absolute;
26 text-align: center; 27 text-align: center;
27 top: 90px; 28 top: 90px;
28 width: 100%; 29 width: 100%;
29 font-size: 12px; 30 font-size: 12px;
30 color: #777777; 31 color: #777777;
31 } 32 }
32 &:hover { 33 &:hover {
33 background-color: rgb(250, 250, 250); 34 background-color: rgb(250, 250, 250);
34 filter: drop-shadow(4px 4px 4px gray); 35 filter: drop-shadow(4px 4px 4px gray);
35 } 36 }
36 &:active { 37 &:active {
37 background-color: rgb(230, 230, 230); 38 background-color: rgb(230, 230, 230);
38 filter: drop-shadow(4px 4px 4px gray); 39 filter: drop-shadow(4px 4px 4px gray);
39 } 40 }
40 &:focus { 41 &:focus {
41 background-color: rgb(250, 250, 250); 42 background-color: rgb(250, 250, 250);
42 filter: drop-shadow(4px 4px 4px gray); 43 filter: drop-shadow(4px 4px 4px gray);
43 } 44 }
44 } 45 }
45 &-menu { 46 &-menu {
46 width: 100%; 47 width: 100%;
47 padding-left: 90px; 48 padding-left: 90px;
48 @media (max-width: 576px) { 49 @media (max-width: 576px) {
49 padding: 0; 50 padding: 0;
50 } 51 }
51 } 52 }
52 &-logo { 53 &-logo {
53 width: 100%; 54 width: 100%;
54 margin-left: 50%; 55 margin-left: 50%;
55 opacity: 0.8; 56 opacity: 0.8;
56 @media (max-width: 576px) { 57 @media (max-width: 576px) {
57 width: 180%; 58 width: 180%;
58 margin-left: 20%; 59 margin-left: 20%;
59 } 60 }
60 } 61 }
61 &-vacio { 62 &-vacio {
62 & button { 63 & button {
63 background-position: -4380px 0; 64 background-position: -4380px 0;
64 &:hover { 65 &:hover {
65 background-position: -4380px -90px; 66 background-position: -4380px -90px;
66 } 67 }
67 } 68 }
68 } 69 }
69 &-abrir-turno { 70 &-abrir-turno {
70 & button { 71 & button {
71 background-position: 0 0; 72 background-position: 0 0;
72 &:hover { 73 &:hover {
73 background-position: 0 -90px; 74 background-position: 0 -90px;
74 } 75 }
75 } 76 }
76 } 77 }
77 &-cerrar-turno { 78 &-cerrar-turno {
78 & button { 79 & button {
79 background-position: -90px 0; 80 background-position: -90px 0;
80 &:hover { 81 &:hover {
81 background-position: -90px -90px; 82 background-position: -90px -90px;
82 } 83 }
83 } 84 }
84 } 85 }
85 &-caja { 86 &-caja {
86 & button { 87 & button {
87 background-position: -180px 0; 88 background-position: -180px 0;
88 &:hover { 89 &:hover {
89 background-position: -180px -90px; 90 background-position: -180px -90px;
90 } 91 }
91 } 92 }
92 } 93 }
93 &-estado-cisterna { 94 &-estado-cisterna {
94 & button { 95 & button {
95 background-image: url("../img/control_stock.png"); 96 background-image: url("../img/control_stock.png");
96 background-size: 90px 90px; 97 background-size: 90px 90px;
97 } 98 }
98 } 99 }
99 &-logistica { 100 &-logistica {
100 & button { 101 & button {
101 background-image: url("../img/logistica.png"); 102 background-image: url("../img/logistica.png");
102 background-size: 90px 90px; 103 background-size: 90px 90px;
103 } 104 }
104 } 105 }
105 &-facturador { 106 &-facturador {
106 & button { 107 & button {
107 background-position: -270px 0px; 108 background-position: -270px 0px;
108 &:hover { 109 &:hover {
109 background-position: -270px -90px; 110 background-position: -270px -90px;
110 } 111 }
111 } 112 }
112 } 113 }
113 &-nota-pedido { 114 &-nota-pedido {
114 & button { 115 & button {
115 background-image: url("../img/notaPedido.png"); 116 background-image: url("../img/notaPedido.png");
116 background-size: 90px 90px; 117 background-size: 90px 90px;
117 } 118 }
118 } 119 }
119 &-remito { 120 &-remito {
120 & button { 121 & button {
121 background-image: url("../img/remito.png"); 122 background-image: url("../img/remito.png");
122 background-size: 90px 90px; 123 background-size: 90px 90px;
123 } 124 }
124 } 125 }
125 &-hoja-ruta { 126 &-hoja-ruta {
126 & button { 127 & button {
127 background-image: url("../img/hoja-ruta.png"); 128 background-image: url("../img/hoja-ruta.png");
128 background-size: 86px 90px; 129 background-size: 86px 90px;
129 } 130 }
130 } 131 }
131 &-activar-hoja-ruta { 132 &-activar-hoja-ruta {
132 & button { 133 & button {
133 background-image: url("../img/activar_hoja.png"); 134 background-image: url("../img/activar_hoja.png");
134 background-size: 90px 90px; 135 background-size: 90px 90px;
135 } 136 }
136 } 137 }
137 &-hoja-ruta-transportista { 138 &-hoja-ruta-transportista {
138 & button { 139 & button {
139 background-image: url("../img/hojaRutaVolante.png"); 140 background-image: url("../img/hojaRutaVolante.png");
140 background-size: 90px 90px; 141 background-size: 90px 90px;
141 } 142 }
142 } 143 }
143 &-seguimiento { 144 &-seguimiento {
144 & button { 145 & button {
145 background-image: url("../img/seguimientoNotaPedido.png"); 146 background-image: url("../img/seguimientoNotaPedido.png");
146 background-size: 90px 90px; 147 background-size: 90px 90px;
147 } 148 }
148 } 149 }
149 &-seguimiento-hoja-ruta { 150 &-seguimiento-hoja-ruta {
150 & button { 151 & button {
151 background-image: url("../img/seguimientoHojaRuta.png"); 152 background-image: url("../img/seguimientoHojaRuta.png");
152 background-size: 90px 90px; 153 background-size: 90px 90px;
153 } 154 }
154 } 155 }
155 &-cobranzas { 156 &-cobranzas {
156 & button { 157 & button {
157 background-image: url("../img/cobranzas.png"); 158 background-image: url("../img/cobranzas.png");
158 background-size: 90px 90px; 159 background-size: 90px 90px;
159 } 160 }
160 } 161 }
161 &-seguimiento-cobranzas { 162 &-seguimiento-cobranzas {
162 & button { 163 & button {
163 background-image: url("../img/seguimientoCobranza.png"); 164 background-image: url("../img/seguimientoCobranza.png");
164 background-size: 90px 90px; 165 background-size: 90px 90px;
165 } 166 }
166 } 167 }
167 &-vehiculo { 168 &-vehiculo {
168 & button { 169 & button {
169 background-image: url("../img/abmVehiculos.png"); 170 background-image: url("../img/abmVehiculos.png");
170 background-size: 90px 90px; 171 background-size: 90px 90px;
171 } 172 }
172 } 173 }
173 &-precio-condicion { 174 &-precio-condicion {
174 & button { 175 & button {
175 background-image: url("../img/abmPrecios.png"); 176 background-image: url("../img/abmPrecios.png");
176 background-size: 90px 90px; 177 background-size: 90px 90px;
177 } 178 }
178 } 179 }
179 &-chofer { 180 &-chofer {
180 & button { 181 & button {
181 background-image: url("../img/abmChofer.png"); 182 background-image: url("../img/abmChofer.png");
182 background-size: 90px 90px; 183 background-size: 90px 90px;
183 } 184 }
184 } 185 }
185 &-agendar-visita { 186 &-agendar-visita {
186 & button { 187 & button {
187 background-image: url("../img/agendarVisita.png"); 188 background-image: url("../img/agendarVisita.png");
188 background-size: 90px 90px; 189 background-size: 90px 90px;
189 } 190 }
190 } 191 }
191 &-informes { 192 &-informes {
192 & button { 193 & button {
193 background-image: url("../img/informes.png"); 194 background-image: url("../img/informes.png");
194 background-size: 90px 90px; 195 background-size: 90px 90px;
195 } 196 }
196 } 197 }
197 &-vendedor-cobrador { 198 &-vendedor-cobrador {
198 & button { 199 & button {
199 background-image: url("../img/abmVendedorCobrador.png"); 200 background-image: url("../img/abmVendedorCobrador.png");
200 background-size: 90px 90px; 201 background-size: 90px 90px;
201 } 202 }
202 } 203 }
203 &-autorizar-nota { 204 &-autorizar-nota {
204 & button { 205 & button {
205 background-image: url("../img/autorizarNota.png"); 206 background-image: url("../img/autorizarNota.png");
206 background-size: 90px 90px; 207 background-size: 90px 90px;
207 } 208 }
208 } 209 }
209 210
210 &-cliente { 211 &-cliente {
211 & button { 212 & button {
212 background-image: url("../img/clientePrincipal.png"); 213 background-image: url("../img/clientePrincipal.png");
213 background-size: 90px 90px; 214 background-size: 90px 90px;
214 } 215 }
215 } 216 }
216 217
217 &-parametros { 218 &-parametros {
218 & button { 219 & button {
219 background-image: url("../img/parametrizar.png"); 220 background-image: url("../img/parametrizar.png");
220 background-size: 90px 90px; 221 background-size: 90px 90px;
221 } 222 }
222 } 223 }
223 224
224 &-factura { 225 &-factura {
225 & button { 226 & button {
226 background-image: url("../img/factura.png"); 227 background-image: url("../img/factura.png");
227 background-size: 90px 90px; 228 background-size: 90px 90px;
228 } 229 }
229 } 230 }
230 231
231 &-orden-carga { 232 &-orden-carga {
232 & button { 233 & button {
233 background-image: url("../img/Orden_de_Carga.png"); 234 background-image: url("../img/Orden_de_Carga.png");
234 background-size: 90px 90px; 235 background-size: 90px 90px;
235 } 236 }
236 } 237 }
237 238
238 .swiper-pagination { 239 .swiper-pagination {
239 bottom: 0px !important; 240 bottom: 0px !important;
240 background: none; 241 background: none;
241 } 242 }
242 243
243 .swiper-button-next { 244 .swiper-button-next {
244 background-image: url("../img/derecha.png"); 245 background-image: url("../img/derecha.png");
245 &:hover { 246 &:hover {
246 filter: drop-shadow(4px 4px 4px gray); 247 filter: drop-shadow(4px 4px 4px gray);
247 } 248 }
248 } 249 }
249 250
250 .swiper-button-prev { 251 .swiper-button-prev {
251 background-image: url("../img/izquierda.png"); 252 background-image: url("../img/izquierda.png");
252 &:hover { 253 &:hover {
253 filter: drop-shadow(4px 4px 4px gray); 254 filter: drop-shadow(4px 4px 4px gray);
254 } 255 }
255 } 256 }
256 257
257 .btn-tareas-pausadas{ 258 .btn-tareas-pausadas {
258 background-color: #cd9035; 259 padding-left: 2rem;
259 border-color: #cd9035 !important; 260 padding-right: 2rem;
260 height: 30px; 261 border-radius: 4px;
261 text-align: center; 262 font-size: 14px;
262 width: 280px; 263 width: auto;
264 height: 35px;
265 color: white;
263 background-image: none; 266 background-image: none;
264 flood-color: #ffffff; 267 background-color: #cd9035;
265 &:hover { 268 transition: 0.3s;
266 background-color: #cd9035; 269 &:hover,
267 }
268 &:focus { 270 &:focus {
269 background-color: #cd9035; 271 background-color: #cd9035;
270 } 272 }
271 } 273 }
272 274
273 .dropdown-tareas-pausadas{ 275 .dropdown-tareas-pausadas {
274 background: linear-gradient(0 ,#ffffff, #e6e6e6);
275 position: absolute;
276 will-change: transform;
277 top: 0px;
278 left: 0px;
279 transform: translate3d(0px, 0px, 0px);
280 margin-bottom: 5px;
281 padding: 0px; 276 padding: 0px;
282 box-sizing: content-box; 277 border-radius: 4px;
283 border-radius: 12px; 278 background: linear-gradient(0, #ffffff, #e6e6e6);
284 font: small;
285 transform: translate3d(0px, 30px, 0px); 279 transform: translate3d(0px, 30px, 0px);
280 box-sizing: content-box;
281 font-size: 12px;
282 transition: 0.3s;
286 } 283 }
287 284
288 .items-dropdown{ 285 .items-dropdown {
289 background-color:rgba(0, 0, 0, 0); 286 cursor: pointer;
290 cursor: hand; 287 width: auto;
291 &:hover { 288 background-color: rgba(0, 0, 0, 0);
289 transition: 0.3s;
290 &:hover,
291 &:focus {
292 background-color: #e6e6e6; 292 background-color: #e6e6e6;
293 width: 98%;
294 border-radius: 12px;
295 } 293 }