Commit 5eb6f3a5fe7f89f025347e802b1d6a969cc3b01d

Authored by Nicolás Guarnieri
1 parent bb50dfbc3e
Exists in master

mejoras en mobile para botonera y modales

1 <html ng-app="appWrapperDemo"> 1 <html ng-app="appWrapperDemo">
2 <head> 2 <head>
3 <meta charset="UTF-8"/> 3 <meta charset="UTF-8"/>
4 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 4 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5 <base href="./"> 5 <base href="./">
6 6
7 <!--CSS--> 7 <!--CSS-->
8 <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/> 8 <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
9 <link href="./node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet"/> 9 <link href="./node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
10 <link rel="stylesheet" href="node_modules/angular-ui-swiper/dist/angular-ui-swiper.css"> 10 <link rel="stylesheet" href="node_modules/angular-ui-swiper/dist/angular-ui-swiper.css">
11 <link href="./node_modules/ladda/dist/ladda-themeless.min.css" rel="stylesheet"> 11 <link href="./node_modules/ladda/dist/ladda-themeless.min.css" rel="stylesheet">
12 <link href="css/general.css" rel="stylesheet"/> 12 <link href="css/general.css" rel="stylesheet"/>
13 13
14 <!--VENDOR JS--> 14 <!--VENDOR JS-->
15 <script src="./node_modules/jquery/dist/jquery.min.js"></script> 15 <script src="./node_modules/jquery/dist/jquery.min.js"></script>
16 <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script> 16 <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
17 <script src="./node_modules/angular/angular.min.js"></script> 17 <script src="./node_modules/angular/angular.min.js"></script>
18 <script src="./node_modules/angular-route/angular-route.min.js"></script> 18 <script src="./node_modules/angular-route/angular-route.min.js"></script>
19 <script src="./node_modules/angular-cookies/angular-cookies.min.js"></script> 19 <script src="./node_modules/angular-cookies/angular-cookies.min.js"></script>
20 <script src="./node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script> 20 <script src="./node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
21 <script src="./node_modules/angular-on-screen-keyboard/dist/angular-on-screen-keyboard.min.js"></script> 21 <script src="./node_modules/angular-on-screen-keyboard/dist/angular-on-screen-keyboard.min.js"></script>
22 <script src="./node_modules/angular-sanitize/angular-sanitize.min.js"></script> 22 <script src="./node_modules/angular-sanitize/angular-sanitize.min.js"></script>
23 <script src="./node_modules/angular-i18n/angular-locale_es-ar.js"></script> 23 <script src="./node_modules/angular-i18n/angular-locale_es-ar.js"></script>
24 <script src="./node_modules/angular-ui-swiper/dist/angular-ui-swiper.js"></script> 24 <script src="./node_modules/angular-ui-swiper/dist/angular-ui-swiper.js"></script>
25 <script src="./node_modules/ladda/dist/spin.min.js"></script> 25 <script src="./node_modules/ladda/dist/spin.min.js"></script>
26 <script src="./node_modules/ladda/dist/ladda.min.js"></script> 26 <script src="./node_modules/ladda/dist/ladda.min.js"></script>
27 <script src="./node_modules/angular-ladda/dist/angular-ladda.min.js"></script> 27 <script src="./node_modules/angular-ladda/dist/angular-ladda.min.js"></script>
28 28
29 <script src="./node_modules/foca-directivas/dist/foca-directivas.min.js"></script> 29 <script src="./node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
30 <script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script> 30 <script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script>
31 <script src="./node_modules/foca-turno-apertura/dist/foca-turno-apertura.min.js"></script> 31 <script src="./node_modules/foca-turno-apertura/dist/foca-turno-apertura.min.js"></script>
32 <script src="./node_modules/foca-abm-plazo-pago/dist/foca-abm-plazo-pago.min.js"></script> 32 <script src="./node_modules/foca-abm-plazo-pago/dist/foca-abm-plazo-pago.min.js"></script>
33 <script src="./node_modules/foca-abm-precios-condiciones/dist/foca-abm-precios-condiciones.min.js"></script> 33 <script src="./node_modules/foca-abm-precios-condiciones/dist/foca-abm-precios-condiciones.min.js"></script>
34 <script src="./node_modules/foca-abm-sectores/dist/foca-abm-sectores.min.js"></script> 34 <script src="./node_modules/foca-abm-sectores/dist/foca-abm-sectores.min.js"></script>
35 <script src="./node_modules/foca-crear-nota-pedido/dist/foca-crear-nota-pedido.min.js"></script> 35 <script src="./node_modules/foca-crear-nota-pedido/dist/foca-crear-nota-pedido.min.js"></script>
36 <script src="./node_modules/foca-login/dist/foca-login.min.js"></script> 36 <script src="./node_modules/foca-login/dist/foca-login.min.js"></script>
37 <script src="./node_modules/foca-modal/dist/foca-modal.min.js"></script> 37 <script src="./node_modules/foca-modal/dist/foca-modal.min.js"></script>
38 <script src="./node_modules/foca-modal-busqueda-productos/dist/foca-busqueda-productos.min.js"></script> 38 <script src="./node_modules/foca-modal-busqueda-productos/dist/foca-busqueda-productos.min.js"></script>
39 <script src="./node_modules/foca-modal-cotizacion/dist/foca-modal-cotizacion.min.js"></script> 39 <script src="./node_modules/foca-modal-cotizacion/dist/foca-modal-cotizacion.min.js"></script>
40 <script src="./node_modules/foca-modal-flete/dist/foca-modal-flete.min.js"></script> 40 <script src="./node_modules/foca-modal-flete/dist/foca-modal-flete.min.js"></script>
41 <script src="./node_modules/foca-modal-moneda/dist/foca-modal-moneda.min.js"></script> 41 <script src="./node_modules/foca-modal-moneda/dist/foca-modal-moneda.min.js"></script>
42 <script src="./node_modules/foca-modal-precio-condiciones/dist/foca-modal-precio-condiciones.min.js"></script> 42 <script src="./node_modules/foca-modal-precio-condiciones/dist/foca-modal-precio-condiciones.min.js"></script>
43 <script src="./node_modules/foca-modal-proveedor/dist/foca-modal-proveedor.min.js"></script> 43 <script src="./node_modules/foca-modal-proveedor/dist/foca-modal-proveedor.min.js"></script>
44 <script src="./node_modules/foca-modal-vendedores/dist/foca-modal-vendedores.min.js"></script> 44 <script src="./node_modules/foca-modal-vendedores/dist/foca-modal-vendedores.min.js"></script>
45 <script src="./node_modules/foca-busqueda-cliente/dist/foca-busqueda-cliente.min.js"></script> 45 <script src="./node_modules/foca-busqueda-cliente/dist/foca-busqueda-cliente.min.js"></script>
46 <script src="./node_modules/foca-teclado/dist/foca-teclado.min.js"></script> 46 <script src="./node_modules/foca-teclado/dist/foca-teclado.min.js"></script>
47 <script src="./node_modules/foca-modal-domicilio/dist/foca-modal-domicilios.min.js"></script> 47 <script src="./node_modules/foca-modal-domicilio/dist/foca-modal-domicilios.min.js"></script>
48 48
49 <!-- BUILD --> 49 <!-- BUILD -->
50 <script src="./src/js/app.js"></script> 50 <script src="./src/js/app.js"></script>
51 <script src="./src/js/controller.js"></script> 51 <script src="./src/js/controller.js"></script>
52 <script src="./src/etc/develop.js"></script> 52 <script src="./src/etc/develop.js"></script>
53 <!-- /BUILD --> 53 <!-- /BUILD -->
54 54
55 </head> 55 </head>
56 <body> 56 <body>
57 <style> 57 <style>
58 </style> 58 </style>
59 <botonera-horizontal></botonera-horizontal> 59 <botonera-horizontal></botonera-horizontal>
60 <div ng-view class="container contenedor"></div> 60 <div ng-view class="container contenedor"></div>
61 <div ng-controller="appWrapperDemoController" class="container d-none d-sm-block"> 61 <div ng-controller="appWrapperDemoController" class="container d-none d-md-block">
62 <div 62 <div
63 class="btn-group-toggle" 63 class="btn-group-toggle"
64 data-toggle="buttons" 64 data-toggle="buttons"
65 ng-click="mostrarTeclado = !mostrarTeclado"> 65 ng-click="mostrarTeclado = !mostrarTeclado">
66 <label 66 <label
67 class="btn btn-secondary active boton-activar-teclado" 67 class="btn btn-secondary active boton-activar-teclado"
68 ng-class="{'teclado-activar': mostrarTeclado}"> 68 ng-class="{'teclado-activar': mostrarTeclado}">
69 <input 69 <input
70 type="checkbox" 70 type="checkbox"
71 autocomplete="off" 71 autocomplete="off"
72 > 72 >
73 <i class="fa fa-keyboard-o fa-3x" aria-hidden="true"></i> 73 <i class="fa fa-keyboard-o fa-3x" aria-hidden="true"></i>
74 </label> 74 </label>
75 </div> 75 </div>
76 <foca-teclado 76 <foca-teclado
77 ng-show="mostrarTeclado && hasFocus" 77 ng-show="mostrarTeclado && hasFocus"
78 alfanumeric="true" 78 alfanumeric="true"
79 numeric="true" 79 numeric="true"
80 > 80 >
81 </foca-teclado> 81 </foca-teclado>
82 </div> 82 </div>
83 </body> 83 </body>
84 </html> 84 </html>
85 85
1 { 1 {
2 "name": "wrapper-demo", 2 "name": "wrapper-demo",
3 "version": "0.0.1", 3 "version": "0.0.1",
4 "description": "", 4 "description": "",
5 "main": "main.js", 5 "main": "main.js",
6 "scripts": { 6 "scripts": {
7 "initdev": "npm install gulp --global && npm install && npm install -g jshint", 7 "initdev": "npm install gulp --global && npm install && npm install -g jshint",
8 "gulp-pre-commit": "gulp pre-commit", 8 "gulp-pre-commit": "gulp pre-commit",
9 "compile": "gulp uglify && gulp sass", 9 "compile": "gulp uglify && gulp sass",
10 "electron": "electron .", 10 "electron": "electron .",
11 "electron-build": "gulp uglify && gulp html && gulp sass && electron ." 11 "electron-build": "gulp uglify && gulp html && gulp sass && electron ."
12 }, 12 },
13 "pre-commit": [ 13 "pre-commit": [
14 "gulp-pre-commit" 14 "gulp-pre-commit"
15 ], 15 ],
16 "repository": { 16 "repository": {
17 "type": "git", 17 "type": "git",
18 "url": "https://debo.suite.repo/Wrappers/wrapper-demo.git" 18 "url": "https://debo.suite.repo/Wrappers/wrapper-demo.git"
19 }, 19 },
20 "author": "Foca Software", 20 "author": "Foca Software",
21 "license": "ISC", 21 "license": "ISC",
22 "dependencies": { 22 "dependencies": {
23 "angular": "^1.7.5", 23 "angular": "^1.7.5",
24 "angular-cookies": "^1.7.5", 24 "angular-cookies": "^1.7.5",
25 "angular-i18n": "^1.7.5", 25 "angular-i18n": "^1.7.5",
26 "angular-ladda": "^0.4.3", 26 "angular-ladda": "^0.4.3",
27 "angular-on-screen-keyboard": "git+https://github.com/ericf97/angular-on-screen-keyboard.git", 27 "angular-on-screen-keyboard": "git+https://github.com/ericf97/angular-on-screen-keyboard.git",
28 "angular-route": "^1.7.5", 28 "angular-route": "^1.7.5",
29 "angular-sanitize": "^1.7.5", 29 "angular-sanitize": "^1.7.5",
30 "angular-ui-swiper": "^2.3.8", 30 "angular-ui-swiper": "^2.3.8",
31 "bootstrap": "^4.1.3", 31 "bootstrap": "^4.1.3",
32 "foca-abm-plazo-pago": "git+https://debo.suite.repo/modulos-npm/foca-abm-plazo-pago.git", 32 "foca-abm-plazo-pago": "git+https://debo.suite.repo/modulos-npm/foca-abm-plazo-pago.git",
33 "foca-abm-precios-condiciones": "git+https://debo.suite.repo/modulos-npm/foca-abm-precios-condiciones.git", 33 "foca-abm-precios-condiciones": "git+https://debo.suite.repo/modulos-npm/foca-abm-precios-condiciones.git",
34 "foca-abm-sectores": "git+https://debo.suite.repo/modulos-npm/foca-abm-sectores", 34 "foca-abm-sectores": "git+https://debo.suite.repo/modulos-npm/foca-abm-sectores",
35 "foca-botonera-principal": "git+https://debo.suite.repo/modulos-npm/foca-botonera-principal.git", 35 "foca-botonera-principal": "git+https://debo.suite.repo/modulos-npm/foca-botonera-principal.git",
36 "foca-busqueda-cliente": "git+https://debo.suite.repo/modulos-npm/foca-busqueda-cliente.git", 36 "foca-busqueda-cliente": "git+https://debo.suite.repo/modulos-npm/foca-busqueda-cliente.git",
37 "foca-crear-nota-pedido": "git+https://debo.suite.repo/modulos-npm/foca-crear-nota-pedido.git", 37 "foca-crear-nota-pedido": "git+https://debo.suite.repo/modulos-npm/foca-crear-nota-pedido.git",
38 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas.git", 38 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas.git",
39 "foca-login": "git+https://debo.suite.repo/modulos-npm/foca-login.git", 39 "foca-login": "git+https://debo.suite.repo/modulos-npm/foca-login.git",
40 "foca-modal": "git+https://debo.suite.repo/modulos-npm/foca-modal", 40 "foca-modal": "git+https://debo.suite.repo/modulos-npm/foca-modal",
41 "foca-modal-busqueda-productos": "git+https://debo.suite.repo/modulos-npm/foca-modal-busqueda-productos", 41 "foca-modal-busqueda-productos": "git+https://debo.suite.repo/modulos-npm/foca-modal-busqueda-productos",
42 "foca-modal-cotizacion": "git+https://debo.suite.repo/modulos-npm/foca-modal-cotizacion.git", 42 "foca-modal-cotizacion": "git+https://debo.suite.repo/modulos-npm/foca-modal-cotizacion.git",
43 "foca-modal-domicilio": "git+https://debo.suite.repo/modulos-npm/foca-modal-domicilio.git", 43 "foca-modal-domicilio": "git+https://debo.suite.repo/modulos-npm/foca-modal-domicilio.git",
44 "foca-modal-flete": "git+https://debo.suite.repo/modulos-npm/foca-modal-flete.git", 44 "foca-modal-flete": "git+https://debo.suite.repo/modulos-npm/foca-modal-flete.git",
45 "foca-modal-moneda": "git+https://debo.suite.repo/modulos-npm/foca-modal-moneda.git", 45 "foca-modal-moneda": "git+https://debo.suite.repo/modulos-npm/foca-modal-moneda.git",
46 "foca-modal-precio-condiciones": "git+https://debo.suite.repo/modulos-npm/foca-modal-precio-condiciones.git", 46 "foca-modal-precio-condiciones": "git+https://debo.suite.repo/modulos-npm/foca-modal-precio-condiciones.git",
47 "foca-modal-proveedor": "git+https://debo.suite.repo/modulos-npm/foca-modal-proveedor.git", 47 "foca-modal-proveedor": "git+https://debo.suite.repo/modulos-npm/foca-modal-proveedor.git",
48 "foca-modal-vendedores": "git+https://debo.suite.repo/modulos-npm/foca-modal-vendedores.git", 48 "foca-modal-vendedores": "git+https://debo.suite.repo/modulos-npm/foca-modal-vendedores.git",
49 "foca-teclado": "git+https://debo.suite.repo/modulos-npm/foca-teclado.git", 49 "foca-teclado": "git+https://debo.suite.repo/modulos-npm/foca-teclado.git",
50 "foca-turno-apertura": "git+https://debo.suite.repo/modulos-npm/foca-turno-apertura.git", 50 "foca-turno-apertura": "git+https://debo.suite.repo/modulos-npm/foca-turno-apertura.git",
51 "font-awesome": "^4.7.0", 51 "font-awesome": "^4.7.0",
52 "gulp-angular-templatecache": "^2.2.1", 52 "gulp-angular-templatecache": "^2.2.1",
53 "gulp-htmlmin": "^5.0.1", 53 "gulp-htmlmin": "^5.0.1",
54 "gulp-uglify": "^3.0.1", 54 "gulp-uglify": "^3.0.1",
55 "gulp-uglify-es": "^1.0.4",
55 "jquery": "^3.3.1", 56 "jquery": "^3.3.1",
56 "ladda": "1.0.6", 57 "ladda": "1.0.6",
57 "node-sass": "^4.9.4", 58 "node-sass": "^4.9.4",
58 "uglify": "^0.1.5", 59 "uglify": "^0.1.5",
59 "ui-bootstrap4": "^3.0.5" 60 "ui-bootstrap4": "^3.0.5"
60 }, 61 },
61 "devDependencies": { 62 "devDependencies": {
62 "electron": "^3.0.2", 63 "electron": "^3.0.2",
63 "gulp": "^3.9.1", 64 "gulp": "^3.9.1",
64 "gulp-clean": "^0.4.0", 65 "gulp-clean": "^0.4.0",
65 "gulp-concat": "^2.6.1", 66 "gulp-concat": "^2.6.1",
66 "gulp-connect": "^5.6.1", 67 "gulp-connect": "^5.6.1",
67 "gulp-jshint": "^2.1.0", 68 "gulp-jshint": "^2.1.0",
68 "gulp-rename": "^1.4.0", 69 "gulp-rename": "^1.4.0",
69 "gulp-replace": "^1.0.0", 70 "gulp-replace": "^1.0.0",
70 "gulp-sass": "^4.0.1", 71 "gulp-sass": "^4.0.1",
71 "gulp-uglify": "^1.0.4", 72 "gulp-uglify": "^1.0.4",
72 "gulp-watch": "^5.0.1", 73 "gulp-watch": "^5.0.1",
73 "jasmine-core": "^3.2.1", 74 "jasmine-core": "^3.2.1",
74 "jshint": "^2.9.6", 75 "jshint": "^2.9.6",
75 "pre-commit": "^1.2.2", 76 "pre-commit": "^1.2.2",
76 "pump": "^3.0.0" 77 "pump": "^3.0.0"
77 } 78 }
78 } 79 }
79 80
src/sass/_bootstrap.scss
1 .active{ 1 .active{
2 color: #fff; 2 color: #fff;
3 text-decoration: none; 3 text-decoration: none;
4 outline: 0; 4 outline: 0;
5 background-color: #337ab7; 5 background-color: #337ab7;
6 } 6 }
7 .btn-xs { 7 .btn-xs {
8 padding: .15rem .5rem; 8 padding: .15rem .5rem;
9 font-size: .8rem; 9 font-size: .8rem;
10 line-height: 1.5; 10 line-height: 1.5;
11 border-radius: .2rem; 11 border-radius: .2rem;
12 } 12 }
13 .no-border-bottom { 13 .no-border-bottom {
14 border-bottom: 0 !important; 14 border-bottom: 0 !important;
15 } 15 }
16 .no-border-top { 16 .no-border-top {
17 border-top: 0 !important; 17 border-top: 0 !important;
18 } 18 }
19 .no-border { 19 .no-border {
20 border: 0 !important; 20 border: 0 !important;
21 } 21 }
22 .margin-bottom-mobile { 22 .margin-bottom-mobile {
23 margin-bottom: 2.5em !important; 23 margin-bottom: 2.5em !important;
24 } 24 }
25 .tamaño-boton { 25 .tamaño-boton {
26 width:44px; 26 width:44px;
27 }
28 .modal-content {
29 @media (max-width: 576px) {
30 height: auto;
31 height: 100%;
32 border-radius: 0;
33 }
34 }
35 .modal-dialog {
36 @media (max-width: 576px) {
37 width: 100%;
38 height: 100%;
39 margin: 0;
40 padding: 0;
41 }
42 }
43 .modal-body {
44 @media (max-width: 576px) {
45 overflow-y: auto;
46 }
27 } 47 }
src/sass/_botonera-principal.scss
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) {
8 width: 100%;
9 }
7 } 10 }
8 button { 11 button {
9 background-image: url('../img/botonera.png'); 12 background-image: url('../img/botonera.png');
10 border-radius: 12px; 13 border-radius: 12px;
11 border-width: 0; 14 border-width: 0;
12 height: 90px; 15 height: 90px;
13 position: relative; 16 position: relative;
14 width: 90px; 17 width: 90px;
15 span { 18 span {
16 left: 0; 19 left: 0;
17 position: absolute; 20 position: absolute;
18 text-align: center; 21 text-align: center;
19 top: 90px; 22 top: 90px;
20 width: 100%; 23 width: 100%;
21 font-size: 12px; 24 font-size: 12px;
22 color: #777777; 25 color: #777777;
23 } 26 }
24 } 27 }
25 &-menu { 28 &-menu {
26 padding-left: 90px; 29 padding-left: 90px;
30 @media (max-width: 576px) {
31 padding: 0;
32 }
27 } 33 }
28 &-logo { 34 &-logo {
29 width: 80%; 35 width: 80%;
30 opacity: .8; 36 opacity: .8;
37 @media (max-width: 576px) {
38 width: 100%;
39 }
31 } 40 }
32 &-vacio { 41 &-vacio {
33 & button { 42 & button {
34 background-position: -4380px 0; 43 background-position: -4380px 0;
35 &:hover { 44 &:hover {
36 background-position: -4380px -90px; 45 background-position: -4380px -90px;
37 } 46 }
38 } 47 }
39 } 48 }
40 &-abrir-turno { 49 &-abrir-turno {
41 & button { 50 & button {
42 background-position: 0 0; 51 background-position: 0 0;
43 &:hover { 52 &:hover {
44 background-position: 0 -90px; 53 background-position: 0 -90px;
45 } 54 }
46 } 55 }
47 } 56 }
48 &-cerrar-turno { 57 &-cerrar-turno {
49 & button { 58 & button {
50 background-position: -90px 0; 59 background-position: -90px 0;
51 &:hover { 60 &:hover {
52 background-position: -90px -90px; 61 background-position: -90px -90px;
53 } 62 }
54 } 63 }
55 } 64 }
56 &-caja { 65 &-caja {
57 & button { 66 & button {
58 background-position: -180px 0; 67 background-position: -180px 0;
59 &:hover { 68 &:hover {
60 background-position: -180px -90px; 69 background-position: -180px -90px;
61 } 70 }
62 } 71 }
63 } 72 }
64 &-facturador { 73 &-facturador {
65 & button { 74 & button {
66 background-position: -270px 0px; 75 background-position: -270px 0px;
67 &:hover { 76 &:hover {
68 background-position: -270px -90px; 77 background-position: -270px -90px;
69 } 78 }
70 } 79 }
71 } 80 }
72 &-nota-pedido { 81 &-nota-pedido {
73 & button { 82 & button {
74 background-position: -1250px 0px; 83 background-position: -1250px 0px;
75 &:hover { 84 &:hover {
76 background-position: -1250px -90px; 85 background-position: -1250px -90px;
77 } 86 }
78 } 87 }
79 } 88 }
89
90 .swiper-pagination {
91 bottom: 0px !important;
92 }
80 } 93 }
81 94
src/sass/_contenedor.scss
1 body { 1 body {
2 background-color: #cccccc; 2 @media (min-width: 768px) {
3 background-color: #cccccc;
4 }
5 @media (max-width: 768px) {
6 background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
7 }
3 } 8 }
4 9
5 .contenedor { 10 .contenedor {
6 background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
7 @media (min-width: 768px) { 11 @media (min-width: 768px) {
12 background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
8 min-height: 600px; 13 min-height: 600px;
9 min-width: 800px; 14 min-width: 800px;
10 } 15 }
11 16
12 } 17 }
13 18
14 .grilla-articulo { 19 .grilla-articulo {
15 background-color: rgba(0, 0, 0, 0.8); 20 background-color: rgba(0, 0, 0, 0.8);
16 @media (min-width: 768px) { 21 @media (min-width: 768px) {
17 height: 430px; 22 height: 430px;
18 } 23 }
19 } 24 }