Luigi / wrapper-demo

Download as
Browse Code »

Commit 27fa6f5f8564829736fb8212229accfdaac50199

Authored by Luigi
1 parent d0eba8884b
Exists in master

Logo nuevo - Tamaño del logo

Showing 2 changed files with 4 additions and 2 deletions   Show diff stats

256 KB
src/sass/_botonera-principal.scss
Diff comments   View file @ 27fa6f5
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: 80%; 39 width: 100%;
40 margin-left: 50%;
40 opacity: .8; 41 opacity: .8;
41 @media (max-width: 576px) { 42 @media (max-width: 576px) {
42 width: 100%; 43 width: 180%;
44 margin-left: 20%;
43 } 45 }
44 } 46 }
45 &-vacio { 47 &-vacio {
46 & button { 48 & button {
47 background-position: -4380px 0; 49 background-position: -4380px 0;
48 &:hover { 50 &:hover {
49 background-position: -4380px -90px; 51 background-position: -4380px -90px;
50 } 52 }
51 } 53 }
52 } 54 }
53 &-abrir-turno { 55 &-abrir-turno {
54 & button { 56 & button {
55 background-position: 0 0; 57 background-position: 0 0;
56 &:hover { 58 &:hover {
57 background-position: 0 -90px; 59 background-position: 0 -90px;
58 } 60 }
59 } 61 }
60 } 62 }
61 &-cerrar-turno { 63 &-cerrar-turno {
62 & button { 64 & button {
63 background-position: -90px 0; 65 background-position: -90px 0;
64 &:hover { 66 &:hover {
65 background-position: -90px -90px; 67 background-position: -90px -90px;
66 } 68 }
67 } 69 }
68 } 70 }
69 &-caja { 71 &-caja {
70 & button { 72 & button {
71 background-position: -180px 0; 73 background-position: -180px 0;
72 &:hover { 74 &:hover {
73 background-position: -180px -90px; 75 background-position: -180px -90px;
74 } 76 }
75 } 77 }
76 } 78 }
77 &-facturador { 79 &-facturador {
78 & button { 80 & button {
79 background-position: -270px 0px; 81 background-position: -270px 0px;
80 &:hover { 82 &:hover {
81 background-position: -270px -90px; 83 background-position: -270px -90px;
82 } 84 }
83 } 85 }
84 } 86 }
85 &-nota-pedido { 87 &-nota-pedido {
86 & button { 88 & button {
87 background-position: -1250px 0px; 89 background-position: -1250px 0px;
88 &:hover { 90 &:hover {
89 background-position: -1250px -90px; 91 background-position: -1250px -90px;
90 } 92 }
91 } 93 }
92 } 94 }
93 &-remito { 95 &-remito {
94 & button { 96 & button {
95 background-position: -4560px 0px; 97 background-position: -4560px 0px;
96 &:hover { 98 &:hover {
97 background-position: -4560px -90px; 99 background-position: -4560px -90px;
98 } 100 }
99 } 101 }
100 } 102 }
101 &-hoja-ruta { 103 &-hoja-ruta {
102 & button { 104 & button {
103 background-position: -4650px 0px; 105 background-position: -4650px 0px;
104 &:hover { 106 &:hover {
105 background-position: -4650px -90px; 107 background-position: -4650px -90px;
106 } 108 }
107 } 109 }
108 } 110 }
109 &-hoja-ruta-transportista { 111 &-hoja-ruta-transportista {
110 & button { 112 & button {
111 background-image: url('../img/hojaRutaVolante.png'); 113 background-image: url('../img/hojaRutaVolante.png');
112 background-size: 90px 90px; 114 background-size: 90px 90px;
113 &:hover { 115 &:hover {
114 background-color: rgb(250,250,250); 116 background-color: rgb(250,250,250);
115 } 117 }
116 } 118 }
117 } 119 }
118 &-seguimiento { 120 &-seguimiento {
119 & button { 121 & button {
120 background-image: url('../img/seguimientoNotaPedido.png'); 122 background-image: url('../img/seguimientoNotaPedido.png');
121 background-size: 90px 90px; 123 background-size: 90px 90px;
122 background-position: 15px 10px; 124 background-position: 15px 10px;
123 &:hover { 125 &:hover {
124 background-color: rgb(250,250,250); 126 background-color: rgb(250,250,250);
125 } 127 }
126 } 128 }
127 } 129 }
128 &-seguimiento-hoja-ruta { 130 &-seguimiento-hoja-ruta {
129 & button { 131 & button {
130 background-image: url('../img/seguimientoHojaRuta.png'); 132 background-image: url('../img/seguimientoHojaRuta.png');
131 background-size: 90px 90px; 133 background-size: 90px 90px;
132 background-position: 15px 10px; 134 background-position: 15px 10px;
133 &:hover { 135 &:hover {
134 background-color: rgb(250,250,250); 136 background-color: rgb(250,250,250);
135 } 137 }
136 } 138 }
137 } 139 }
138 &-cobranzas { 140 &-cobranzas {
139 & button { 141 & button {
140 background-position: -1880 0px; 142 background-position: -1880 0px;
141 &:hover { 143 &:hover {
142 background-position: -1880 -90px; 144 background-position: -1880 -90px;
143 } 145 }
144 } 146 }
145 } 147 }
146 &-seguimiento-cobranzas { 148 &-seguimiento-cobranzas {
147 & button { 149 & button {
148 background-image: url('../img/seguimientoCobranza.png'); 150 background-image: url('../img/seguimientoCobranza.png');
149 background-size: 90px 90px; 151 background-size: 90px 90px;
150 background-position: 15px 10px; 152 background-position: 15px 10px;
151 &:hover { 153 &:hover {
152 background-color: rgb(250,250,250); 154 background-color: rgb(250,250,250);
153 } 155 }
154 } 156 }
155 } 157 }
156 &-vehiculo { 158 &-vehiculo {
157 & button { 159 & button {
158 background-image: url('../img/abmVehiculos.png'); 160 background-image: url('../img/abmVehiculos.png');
159 background-size: 90px 90px; 161 background-size: 90px 90px;
160 &:hover { 162 &:hover {
161 background-color: rgb(250,250,250); 163 background-color: rgb(250,250,250);
162 } 164 }
163 } 165 }
164 } 166 }
165 &-precio-condicion { 167 &-precio-condicion {
166 & button { 168 & button {
167 background-image: url('../img/abmPrecios.png'); 169 background-image: url('../img/abmPrecios.png');
168 background-size: 90px 90px; 170 background-size: 90px 90px;
169 &:hover { 171 &:hover {
170 background-color: rgb(250,250,250); 172 background-color: rgb(250,250,250);
171 } 173 }
172 } 174 }
173 } 175 }
174 &-chofer { 176 &-chofer {
175 & button { 177 & button {
176 background-image: url('../img/abmChofer.png'); 178 background-image: url('../img/abmChofer.png');
177 background-size: 90px 90px; 179 background-size: 90px 90px;
178 &:hover { 180 &:hover {
179 background-color: rgb(250,250,250); 181 background-color: rgb(250,250,250);
180 } 182 }
181 } 183 }
182 } 184 }
183 &-agendar-visita { 185 &-agendar-visita {
184 & button { 186 & button {
185 background-image: url('../img/agendarVisita.png'); 187 background-image: url('../img/agendarVisita.png');
186 background-size: 90px 90px; 188 background-size: 90px 90px;
187 &:hover { 189 &:hover {
188 background-color: rgb(250,250,250); 190 background-color: rgb(250,250,250);
189 } 191 }
190 } 192 }
191 } 193 }
192 &-informes { 194 &-informes {
193 & button { 195 & button {
194 background-image: url('../img/informes.png'); 196 background-image: url('../img/informes.png');
195 background-size: 90px 90px; 197 background-size: 90px 90px;
196 &:hover { 198 &:hover {
197 background-color: rgb(250,250,250); 199 background-color: rgb(250,250,250);
198 } 200 }
199 } 201 }
200 } 202 }
201 &-vendedor-cobrador { 203 &-vendedor-cobrador {
202 & button { 204 & button {
203 background-image: url('../img/abmVendedorCobrador.png'); 205 background-image: url('../img/abmVendedorCobrador.png');
204 background-size: 90px 90px; 206 background-size: 90px 90px;
205 &:hover { 207 &:hover {
206 background-color: rgb(250,250,250); 208 background-color: rgb(250,250,250);
207 } 209 }
208 } 210 }
209 } 211 }
210 .swiper-pagination { 212 .swiper-pagination {
211 bottom: 0px !important; 213 bottom: 0px !important;
212 } 214 }
213 215
214 .swiper-button-next { 216 .swiper-button-next {
215 background-image: url('../img/derecha.png'); 217 background-image: url('../img/derecha.png');
216 } 218 }
217 219
218 .swiper-button-prev { 220 .swiper-button-prev {
219 background-image: url('../img/izquierda.png'); 221 background-image: url('../img/izquierda.png');
220 } 222 }
221 223
222 @media (min-width: 992px){ 224 @media (min-width: 992px){
223 a{ 225 a{
224 margin-top: 2.5rem; 226 margin-top: 2.5rem;
225 } 227 }
226 } 228 }
227 } 229 }
228 230