Mauricio Cattafi / wrapper-demo

Download as
Browse Code ยป

Commit 5b7ae9477f863d3e37c982f2b2a0d031727ce6b2

Authored by Marcelo Puebla
2 parents b3ba56d5ff 1edaacd3dd
Exists in master

Merge branch 'master' into 'develop' 

Master(benjamin)

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