Luigi / wrapper-demo

Download as
Browse Code ยป

Commit ff16897d0c0c27fee72927d5e9136cf6a8cc081d

Authored by --global
1 parent d4523eb00c
Exists in master

url img

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