Luigi / wrapper-demo

Download as
Browse Code ยป

Commit c913173aec6890c300594f66cd5accfd6c5a4939

Authored by Luigi
2 parents 8530f23431 39d58f3b6a
Exists in master

Merge remote-tracking branch 'upstream/develop'

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