Marcelo Puebla / wrapper-demo

Download as
Browse Code »

Commit c6aa05d45b7ffcee551026a46143e0137d73af58

Authored by Benjamin Rodriguez
1 parent a865056cbb
Exists in develop

cambio nombre clase

Showing 5 changed files with 4 additions and 11 deletions   Show diff stats
1 const gulp = require('gulp'); 1 const gulp = require('gulp');
2 const sass = require('gulp-sass'); 2 const sass = require('gulp-sass');
3 const concat = require('gulp-concat'); 3 const concat = require('gulp-concat');
4 const rename = require('gulp-rename'); 4 const rename = require('gulp-rename');
5 const uglify = require('gulp-uglify'); 5 const uglify = require('gulp-uglify');
6 const pump = require('pump'); 6 const pump = require('pump');
7 const jshint = require('gulp-jshint'); 7 const jshint = require('gulp-jshint');
8 const replace = require('gulp-replace'); 8 const replace = require('gulp-replace');
9 const connect = require('gulp-connect'); 9 const connect = require('gulp-connect');
10 const watch = require('gulp-watch'); 10 const watch = require('gulp-watch');
11 const gulpSequence = require('gulp-sequence') 11 const gulpSequence = require('gulp-sequence')
12 var paths = { 12 var paths = {
13 srcHTML : 'src/views/*.html', 13 srcHTML : 'src/views/*.html',
14 srcJS : 'src/js/*.js', 14 srcJS : 'src/js/*.js',
15 confJS : 'src/etc/develop.js', 15 confJS : 'src/etc/develop.js',
16 dist : 'dist/', 16 dist : 'dist/',
17 distHTML : 'dist/views/' 17 distHTML : 'dist/views/'
18 }; 18 };
19 19
20 gulp.task('uglify', function() { 20 gulp.task('uglify', function() {
21 pump( 21 pump(
22 [ 22 [
23 gulp.src([paths.srcJS, paths.confJS]), 23 gulp.src([paths.srcJS, paths.confJS]),
24 concat('wrapper-demo.js'), 24 concat('wrapper-demo.js'),
25 replace('/src/', '/dist/'), 25 replace('/src/', '/dist/'),
26 gulp.dest(paths.dist), 26 gulp.dest(paths.dist),
27 rename('wrapper-demo.min.js'), 27 rename('wrapper-demo.min.js'),
28 uglify(), 28 uglify(),
29 gulp.dest(paths.dist) 29 gulp.dest(paths.dist)
30 ] 30 ]
31 ); 31 );
32 }); 32 });
33 33
34 gulp.task('html', function() { 34 gulp.task('html', function() {
35 pump([ 35 pump([
36 gulp.src('index.html'), 36 gulp.src('index.html'),
37 replace(/\<!\-\- BUILD \-\-\>.*\<!\-\- \/BUILD \-\-\>/sgm, '<script src="wrapper-demo.min.js"></script>'), 37 replace(/\<!\-\- BUILD \-\-\>.*\<!\-\- \/BUILD \-\-\>/sgm, '<script src="wrapper-demo.min.js"></script>'),
38 gulp.dest(paths.dist) 38 gulp.dest(paths.dist)
39 ]); 39 ]);
40 pump([ 40 pump([
41 gulp.src(paths.srcHTML), 41 gulp.src(paths.srcHTML),
42 gulp.dest(paths.distHTML) 42 gulp.dest(paths.distHTML)
43 ]); 43 ]);
44 }); 44 });
45 45
46 gulp.task('sass', function() { 46 gulp.task('sass', function() {
47 return gulp.src('src/sass/*.scss') 47 return gulp.src('src/sass/*.scss')
48 .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)) 48 .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
49 .pipe(gulp.dest('css')); 49 .pipe(gulp.dest('css'));
50 }); 50 });
51 51
52 gulp.task('pre-install', function() { 52 gulp.task('pre-install', function() {
53 pump([ 53 pump([
54 gulp.src('package.json'), 54 gulp.src('package.json'),
55 replace('ssh://git@debonline.dyndns.org:', 'http://git.focasoftware.com/'), 55 replace('ssh://git@debonline.dyndns.org:', 'http://git.focasoftware.com/'),
56 replace('.git', '.git#develop'), 56 replace('.git', '.git#develop'),
57 gulp.dest('') 57 gulp.dest('')
58 ]); 58 ]);
59 }); 59 });
60 60
61 gulp.task('post-install', function() { 61 gulp.task('post-install', function() {
62 pump([ 62 pump([
63 gulp.src('package.json'), 63 gulp.src('package.json'),
64 replace('http://git.focasoftware.com/', 'ssh://git@debonline.dyndns.org:'), 64 replace('http://git.focasoftware.com/', 'ssh://git@debonline.dyndns.org:'),
65 replace('#develop', ''), 65 replace('#develop', ''),
66 gulp.dest('') 66 gulp.dest('')
67 ]); 67 ]);
68 }); 68 });
69 69
70 gulp.task('pre-commit', function() { 70 gulp.task('pre-commit', function() {
71 return pump( 71 return pump(
72 [ 72 [
73 gulp.src(paths.srcJS), 73 gulp.src(paths.srcJS),
74 jshint('.jshintrc'), 74 jshint('.jshintrc'),
75 jshint.reporter('default'), 75 jshint.reporter('default'),
76 jshint.reporter('fail') 76 jshint.reporter('fail')
77 ] 77 ]
78 ); 78 );
79 }); 79 });
80 80
81 gulp.task('webserver', function() { 81 gulp.task('webserver', function() {
82 pump [ 82 pump [
83 connect.server( 83 connect.server(
84 { 84 {
85 port: 4203, 85 port: 8086,
86 host: '0.0.0.0', 86 host: '0.0.0.0',
87 livereload: true 87 livereload: true
88 } 88 }
89 ) 89 )
90 ] 90 ]
91 }); 91 });
92 92
93 gulp.task('watch', function() { 93 gulp.task('watch', function() {
94 gulp.watch([paths.srcJS], ['uglify']); 94 gulp.watch([paths.srcJS], ['uglify']);
95 gulp.watch('src/sass/*.scss', ['sass']); 95 gulp.watch('src/sass/*.scss', ['sass']);
96 }); 96 });
97 97
98 gulp.task('reload', function() { 98 gulp.task('reload', function() {
99 gulp.src(['src/sass/*.scss', 'index.html']) 99 gulp.src(['src/sass/*.scss', 'index.html'])
100 .pipe(connect.reload()); 100 .pipe(connect.reload());
101 }); 101 });
102 102
103 gulp.task('livereload', function() { 103 gulp.task('livereload', function() {
104 gulp.watch('css/*.css', ['reload']); 104 gulp.watch('css/*.css', ['reload']);
105 gulp.watch('js/dist/*.js', ['reload']); 105 gulp.watch('js/dist/*.js', ['reload']);
106 gulp.watch('vistas/**/*.html', ['reload']); 106 gulp.watch('vistas/**/*.html', ['reload']);
107 gulp.watch('index.html', ['reload']); 107 gulp.watch('index.html', ['reload']);
108 }); 108 });
109 109
110 gulp.task('default', gulpSequence(['sass', 'webserver', 'livereload', 'watch'])); 110 gulp.task('default', gulpSequence(['sass', 'webserver', 'livereload', 'watch']));
111 111
src/sass/_bootstrap.scss
Diff comments   View file @ c6aa05d
1 button.active { 1 button.active {
2 text-decoration: none; 2 text-decoration: none;
3 outline: 0; 3 outline: 0;
4 color: white; 4 color: white;
5 background-color: $primary; 5 background-color: $primary;
6 &:focus { 6 &:focus {
7 box-shadow: 0 0 0 0.2rem $primaryTransparency; 7 box-shadow: 0 0 0 0.2rem $primaryTransparency;
8 } 8 }
9 } 9 }
10 .btn-xs { 10 .btn-xs {
11 padding: 0.15rem 0.5rem; 11 padding: 0.15rem 0.5rem;
12 font-size: 0.8rem; 12 font-size: 0.8rem;
13 line-height: 1.5; 13 line-height: 1.5;
14 border-radius: 0.2rem; 14 border-radius: 0.2rem;
15 } 15 }
16 16
17 .no-border-bottom { 17 .no-border-bottom {
18 border-bottom: 0 !important; 18 border-bottom: 0 !important;
19 } 19 }
20 .no-border-top { 20 .no-border-top {
21 border-top: 0 !important; 21 border-top: 0 !important;
22 } 22 }
23 .no-border { 23 .no-border {
24 border: 0 !important; 24 border: 0 !important;
25 } 25 }
26 .margin-bottom-mobile { 26 .margin-bottom-mobile {
27 margin-bottom: 2.5em !important; 27 margin-bottom: 2.5em !important;
28 } 28 }
29 .tamaño-boton { 29 .tamaño-boton {
30 width: 44px; 30 width: 44px;
31 } 31 }
32 .modal-content { 32 .modal-content {
33 .modal-header { 33 .modal-header {
34 display: block; 34 display: block;
35 > div.row { 35 > div.row {
36 margin: 0 !important; 36 margin: 0 !important;
37 > div { 37 > div {
38 padding: 0 !important; 38 padding: 0 !important;
39 } 39 }
40 } 40 }
41 } 41 }
42 @media (max-width: 576px) { 42 @media (max-width: 576px) {
43 height: auto; 43 height: auto;
44 height: 100%; 44 height: 100%;
45 border-radius: 0; 45 border-radius: 0;
46 } 46 }
47 } 47 }
48 .modal.show .modal-dialog { 48 .modal.show .modal-dialog {
49 @media (min-width: 1201px) { 49 @media (min-width: 1201px) {
50 -webkit-transform: translate(0, 70px); 50 -webkit-transform: translate(0, 70px);
51 transform: translate(0, 70px); 51 transform: translate(0, 70px);
52 } 52 }
53 @media (min-width: 576px) { 53 @media (min-width: 576px) {
54 -webkit-transform: translate(0, 90px); 54 -webkit-transform: translate(0, 90px);
55 transform: translate(0, 90px); 55 transform: translate(0, 90px);
56 } 56 }
57 @media (max-width: 576px) { 57 @media (max-width: 576px) {
58 width: 100%; 58 width: 100%;
59 height: 100%; 59 height: 100%;
60 margin: 0; 60 margin: 0;
61 padding: 0; 61 padding: 0;
62 } 62 }
63 } 63 }
64 .modal-body { 64 .modal-body {
65 @media (max-width: 576px) { 65 @media (max-width: 576px) {
66 overflow-y: auto; 66 overflow-y: auto;
67 } 67 }
68 } 68 }
69 69
70 .boton-salir { 70 .boton-salir {
71 position: absolute; 71 position: absolute;
72 bottom: 10px; 72 bottom: 10px;
73 right: 15px; 73 right: 15px;
74 width: calc(100% - 15px); 74 width: calc(100% - 15px);
75 } 75 }
76 76
77 input[type="number"]::-webkit-inner-spin-button, 77 input[type="number"]::-webkit-inner-spin-button,
78 input[type="number"]::-webkit-outer-spin-button { 78 input[type="number"]::-webkit-outer-spin-button {
79 -webkit-appearance: none; 79 -webkit-appearance: none;
80 margin: 0; 80 margin: 0;
81 } 81 }
82 82
83 .invisible { 83 .invisible {
84 color: rgba(0, 0, 0, 0); 84 color: rgba(0, 0, 0, 0);
85 } 85 }
86 86
87 .badge-success { 87 .badge-success {
88 background-color: #9aae47 !important; 88 background-color: #9aae47 !important;
89 } 89 }
90 90
91 .border-warning { 91 .border-warning {
92 border-color: #cd9035 !important; 92 border-color: #cd9035 !important;
93 } 93 }
94 94
95 .puntero { 95 .cursero-default {
96 cursor: default; 96 cursor: default;
97 } 97 }
src/sass/_botonera-lateral.scss
Diff comments   View file @ c6aa05d
1 .botonera-lateral { 1 .botonera-lateral {
2 pointer-events: none; 2 pointer-events: none;
3 position: absolute; 3 position: absolute;
4 left: 0; 4 left: 0;
5 right: 0; 5 right: 0;
6 top: 402px; 6 top: 402px;
7 &.teclado{ 7 &.teclado{
8 top: 449px; 8 top: 449px;
9 z-index: 100000; 9 z-index: 100000;
10 } 10 }
11 .row{ 11 .row{
12 margin: 0 !important; 12 margin: 0 !important;
13 pointer-events: none; 13 pointer-events: none;
14 } 14 }
15 15
16 .container{ 16 .container{
17 @media (min-width: 768px){ 17 @media (min-width: 768px){
18 display: grid !important; 18 display: grid !important;
19 } 19 }
20 } 20 }
21 21
22 button{ 22 button{
23 pointer-events: all; 23 pointer-events: all;
24 background-color: #DDD; 24 background-color: #DDD;
25 } 25 }
26 26
27 .teclado-activar { 27 .teclado-activar {
28 background-color: #17d236 !important; 28 background-color: #17d236 !important;
29 color: #FFF !important; 29 color: #FFF !important;
30 } 30 }
31 div[ladda]{ 31 div[ladda]{
32 background-color: #DDD; 32 background-color: #DDD;
33 } 33 }
34 34
35 button, .btn-group-toggle{ 35 button, .btn-group-toggle{
36 background-color: #DDD; 36 background-color: #DDD;
37 color: #000; 37 color: #000;
38 text-transform: uppercase; 38 text-transform: uppercase;
39 min-width: 109px; 39 min-width: 109px;
40 &:hover{ 40 &:hover{
41 color: #FFF; 41 color: #FFF;
42 .boton-activar-teclado{ 42 .boton-activar-teclado{
43 color: #FFF; 43 color: #FFF;
44 } 44 }
45 background-color: #000; 45 background-color: #000;
46 } 46 }
47 } 47 }
48 48
49
50 .btn-group-toggle{ 49 .btn-group-toggle{
51 pointer-events: all; 50 pointer-events: all;
52 &.active{ 51 &.active{
53 background-color: $primary; 52 background-color: $primary;
54 .boton-activar-teclado{ 53 .boton-activar-teclado{
55 color: #FFF; 54 color: #FFF;
56 } 55 }
57 } 56 }
58 57
59 .boton-activar-teclado{ 58 .boton-activar-teclado{
60 cursor: pointer; 59 cursor: pointer;
61 color: #000; 60 color: #000;
62 background-color: transparent; 61 background-color: transparent;
63 } 62 }
64 63
65 input{ 64 input{
66 display: none; 65 display: none;
67 } 66 }
68 } 67 }
69 68
70 .guardado{ 69 .guardado{
71 animation:guardado 4s 1; 70 animation:guardado 4s 1;
72 -webkit-animation:guardado 4s 1; /* Safari and Chrome */ 71 -webkit-animation:guardado 4s 1; /* Safari and Chrome */
73 } 72 }
74 73
75 @keyframes guardado 74 @keyframes guardado
76 { 75 {
77 0% {background:#DDD; color: #000;} 76 0% {background:#DDD; color: #000;}
78 25% {background:#28a745; color: #FFF;} 77 25% {background:#28a745; color: #FFF;}
79 75% {background:#28a745; color: #FFF;} 78 75% {background:#28a745; color: #FFF;}
80 100% {background:#DDD; color: #000;} 79 100% {background:#DDD; color: #000;}
81 } 80 }
82 81
83 @-webkit-keyframes guardado /* Safari and Chrome */ 82 @-webkit-keyframes guardado /* Safari and Chrome */
84 { 83 {
85 0% {background:#DDD; color: #000;} 84 0% {background:#DDD; color: #000;}
86 25% {background:#28a745; color: #FFF;} 85 25% {background:#28a745; color: #FFF;}
87 75% {background:#28a745; color: #FFF;} 86 75% {background:#28a745; color: #FFF;}
88 100% {background:#DDD; color: #000;} 87 100% {background:#DDD; color: #000;}
89 } 88 }
90 } 89 }
91 90
src/sass/_botonera-principal.scss
Diff comments   View file @ c6aa05d
1 1
2 .botonera-principal { 2 .botonera-principal {
3 menuitem { 3 menuitem {
4 display: inline-block; 4 display: inline-block;
5 height: 130px; 5 height: 130px;
6 text-align: center; 6 text-align: center;
7 width: 180px; 7 width: 180px;
8 @media (max-width: 576px) { 8 @media (max-width: 576px) {
9 width: 100%; 9 width: 100%;
10 } 10 }
11 @media (min-width: 992px) and (max-width: 1200px) { 11 @media (min-width: 992px) and (max-width: 1200px) {
12 width: 150px; 12 width: 150px;
13 } 13 }
14 } 14 }
15 button { 15 button {
16 cursor: pointer; 16 cursor: pointer;
17 background-image: url("../img/botonera.png"); 17 background-image: url("../img/botonera.png");
18 border-radius: 12px; 18 border-radius: 12px;
19 border-width: 0; 19 border-width: 0;
20 height: 90px; 20 height: 90px;
21 position: relative; 21 position: relative;
22 width: 90px; 22 width: 90px;
23 outline: 0; 23 outline: 0;
24 transition: 0.3s; 24 transition: 0.3s;
25 span { 25 span {
26 left: 0; 26 left: 0;
27 position: absolute; 27 position: absolute;
28 text-align: center; 28 text-align: center;
29 top: 90px; 29 top: 90px;
30 width: 100%; 30 width: 100%;
31 font-size: 12px; 31 font-size: 12px;
32 color: #777777; 32 color: #777777;
33 } 33 }
34 &:hover { 34 &:hover {
35 background-color: rgb(250, 250, 250); 35 background-color: rgb(250, 250, 250);
36 filter: drop-shadow(4px 4px 4px gray); 36 filter: drop-shadow(4px 4px 4px gray);
37 } 37 }
38 &:active { 38 &:active {
39 background-color: rgb(230, 230, 230); 39 background-color: rgb(230, 230, 230);
40 filter: drop-shadow(4px 4px 4px gray); 40 filter: drop-shadow(4px 4px 4px gray);
41 } 41 }
42 &:focus { 42 &:focus {
43 background-color: rgb(250, 250, 250); 43 background-color: rgb(250, 250, 250);
44 filter: drop-shadow(4px 4px 4px gray); 44 filter: drop-shadow(4px 4px 4px gray);
45 } 45 }
46 } 46 }
47 &-menu { 47 &-menu {
48 width: 100%; 48 width: 100%;
49 padding-left: 90px; 49 padding-left: 90px;
50 @media (max-width: 576px) { 50 @media (max-width: 576px) {
51 padding: 0; 51 padding: 0;
52 } 52 }
53 } 53 }
54 &-logo { 54 &-logo {
55 width: 100%; 55 width: 100%;
56 margin-left: 50%; 56 margin-left: 50%;
57 opacity: 0.8; 57 opacity: 0.8;
58 @media (max-width: 576px) { 58 @media (max-width: 576px) {
59 width: 180%; 59 width: 180%;
60 margin-left: 20%; 60 margin-left: 20%;
61 } 61 }
62 } 62 }
63 &-vacio { 63 &-vacio {
64 & button { 64 & button {
65 background-position: -4380px 0; 65 background-position: -4380px 0;
66 &:hover { 66 &:hover {
67 background-position: -4380px -90px; 67 background-position: -4380px -90px;
68 } 68 }
69 } 69 }
70 } 70 }
71 &-abrir-turno { 71 &-abrir-turno {
72 & button { 72 & button {
73 background-position: 0 0; 73 background-position: 0 0;
74 &:hover { 74 &:hover {
75 background-position: 0 -90px; 75 background-position: 0 -90px;
76 } 76 }
77 } 77 }
78 } 78 }
79 &-cerrar-turno { 79 &-cerrar-turno {
80 & button { 80 & button {
81 background-position: -90px 0; 81 background-position: -90px 0;
82 &:hover { 82 &:hover {
83 background-position: -90px -90px; 83 background-position: -90px -90px;
84 } 84 }
85 } 85 }
86 } 86 }
87 &-caja { 87 &-caja {
88 & button { 88 & button {
89 background-position: -180px 0; 89 background-position: -180px 0;
90 &:hover { 90 &:hover {
91 background-position: -180px -90px; 91 background-position: -180px -90px;
92 } 92 }
93 } 93 }
94 } 94 }
95 &-estado-cisterna { 95 &-estado-cisterna {
96 & button { 96 & button {
97 background-image: url("../img/control_stock.png"); 97 background-image: url("../img/control_stock.png");
98 background-size: 90px 90px; 98 background-size: 90px 90px;
99 } 99 }
100 } 100 }
101 &-logistica { 101 &-logistica {
102 & button { 102 & button {
103 background-image: url("../img/logistica.png"); 103 background-image: url("../img/logistica.png");
104 background-size: 90px 90px; 104 background-size: 90px 90px;
105 } 105 }
106 } 106 }
107 &-facturador { 107 &-facturador {
108 & button { 108 & button {
109 background-position: -270px 0px; 109 background-position: -270px 0px;
110 &:hover { 110 &:hover {
111 background-position: -270px -90px; 111 background-position: -270px -90px;
112 } 112 }
113 } 113 }
114 } 114 }
115 &-nota-pedido { 115 &-nota-pedido {
116 & button { 116 & button {
117 background-image: url("../img/notaPedido.png"); 117 background-image: url("../img/notaPedido.png");
118 background-size: 90px 90px; 118 background-size: 90px 90px;
119 } 119 }
120 } 120 }
121 &-remito { 121 &-remito {
122 & button { 122 & button {
123 background-image: url("../img/remito.png"); 123 background-image: url("../img/remito.png");
124 background-size: 90px 90px; 124 background-size: 90px 90px;
125 } 125 }
126 } 126 }
127 &-hoja-ruta { 127 &-hoja-ruta {
128 & button { 128 & button {
129 background-image: url("../img/hoja-ruta.png"); 129 background-image: url("../img/hoja-ruta.png");
130 background-size: 86px 90px; 130 background-size: 86px 90px;
131 } 131 }
132 } 132 }
133 &-activar-hoja-ruta { 133 &-activar-hoja-ruta {
134 & button { 134 & button {
135 background-image: url("../img/activar_hoja.png"); 135 background-image: url("../img/activar_hoja.png");
136 background-size: 90px 90px; 136 background-size: 90px 90px;
137 } 137 }
138 } 138 }
139 &-hoja-ruta-transportista { 139 &-hoja-ruta-transportista {
140 & button { 140 & button {
141 background-image: url("../img/hojaRutaVolante.png"); 141 background-image: url("../img/hojaRutaVolante.png");
142 background-size: 90px 90px; 142 background-size: 90px 90px;
143 } 143 }
144 } 144 }
145 &-seguimiento { 145 &-seguimiento {
146 & button { 146 & button {
147 background-image: url("../img/seguimientoNotaPedido.png"); 147 background-image: url("../img/seguimientoNotaPedido.png");
148 background-size: 90px 90px; 148 background-size: 90px 90px;
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 } 155 }
156 } 156 }
157 &-cobranzas { 157 &-cobranzas {
158 & button { 158 & button {
159 background-image: url("../img/cobranzas.png"); 159 background-image: url("../img/cobranzas.png");
160 background-size: 90px 90px; 160 background-size: 90px 90px;
161 } 161 }
162 } 162 }
163 &-seguimiento-cobranzas { 163 &-seguimiento-cobranzas {
164 & button { 164 & button {
165 background-image: url("../img/seguimientoCobranza.png"); 165 background-image: url("../img/seguimientoCobranza.png");
166 background-size: 90px 90px; 166 background-size: 90px 90px;
167 } 167 }
168 } 168 }
169 &-vehiculo { 169 &-vehiculo {
170 & button { 170 & button {
171 background-image: url("../img/abmVehiculos.png"); 171 background-image: url("../img/abmVehiculos.png");
172 background-size: 90px 90px; 172 background-size: 90px 90px;
173 } 173 }
174 } 174 }
175 &-precio-condicion { 175 &-precio-condicion {
176 & button { 176 & button {
177 background-image: url("../img/abmPrecios.png"); 177 background-image: url("../img/abmPrecios.png");
178 background-size: 90px 90px; 178 background-size: 90px 90px;
179 } 179 }
180 } 180 }
181 &-chofer { 181 &-chofer {
182 & button { 182 & button {
183 background-image: url("../img/abmChofer.png"); 183 background-image: url("../img/abmChofer.png");
184 background-size: 90px 90px; 184 background-size: 90px 90px;
185 } 185 }
186 } 186 }
187 &-agendar-visita { 187 &-agendar-visita {
188 & button { 188 & button {
189 background-image: url("../img/agendarVisita.png"); 189 background-image: url("../img/agendarVisita.png");
190 background-size: 90px 90px; 190 background-size: 90px 90px;
191 } 191 }
192 } 192 }
193 &-informes { 193 &-informes {
194 & button { 194 & button {
195 background-image: url("../img/informes.png"); 195 background-image: url("../img/informes.png");
196 background-size: 90px 90px; 196 background-size: 90px 90px;
197 } 197 }
198 } 198 }
199 &-vendedor-cobrador { 199 &-vendedor-cobrador {
200 & button { 200 & button {
201 background-image: url("../img/abmVendedorCobrador.png"); 201 background-image: url("../img/abmVendedorCobrador.png");
202 background-size: 90px 90px; 202 background-size: 90px 90px;
203 } 203 }
204 } 204 }
205 &-autorizar-nota { 205 &-autorizar-nota {
206 & button { 206 & button {
207 background-image: url("../img/autorizarNota.png"); 207 background-image: url("../img/autorizarNota.png");
208 background-size: 90px 90px; 208 background-size: 90px 90px;
209 } 209 }
210 } 210 }
211 211
212 &-cliente { 212 &-cliente {
213 & button { 213 & button {
214 background-image: url("../img/clientePrincipal.png"); 214 background-image: url("../img/clientePrincipal.png");
215 background-size: 90px 90px; 215 background-size: 90px 90px;
216 } 216 }
217 } 217 }
218 218
219 &-parametros { 219 &-parametros {
220 & button { 220 & button {
221 background-image: url("../img/parametrizar.png"); 221 background-image: url("../img/parametrizar.png");
222 background-size: 90px 90px; 222 background-size: 90px 90px;
223 } 223 }
224 } 224 }
225 225
226 &-factura { 226 &-factura {
227 & button { 227 & button {
228 background-image: url("../img/factura.png"); 228 background-image: url("../img/factura.png");
229 background-size: 90px 90px; 229 background-size: 90px 90px;
230 } 230 }
231 } 231 }
232 232
233 &-orden-carga { 233 &-orden-carga {
234 & button { 234 & button {
235 background-image: url("../img/Orden_de_Carga.png"); 235 background-image: url("../img/Orden_de_Carga.png");
236 background-size: 90px 90px; 236 background-size: 90px 90px;
237 } 237 }
238 } 238 }
239 239
240 .swiper-pagination { 240 .swiper-pagination {
241 bottom: 0px !important; 241 bottom: 0px !important;
242 background: none; 242 background: none;
243 } 243 }
244 244
245 .swiper-button-next { 245 .swiper-button-next {
246 background-image: url("../img/derecha.png"); 246 background-image: url("../img/derecha.png");
247 // &:hover {
248 // // filter: drop-shadow(4px 4px 4px gray);
249 // }
250 } 247 }
251 248
252 .swiper-button-prev { 249 .swiper-button-prev {
253 background-image: url("../img/izquierda.png"); 250 background-image: url("../img/izquierda.png");
254 // &:hover {
255 // filter: drop-shadow(4px 4px 4px gray);
256 // }
257 } 251 }
258 252
259 .btn-tareas-pausadas { 253 .btn-tareas-pausadas {
260 padding-left: 2rem; 254 padding-left: 2rem;
261 padding-right: 2rem; 255 padding-right: 2rem;
262 border-radius: 4px; 256 border-radius: 4px;
263 font-size: 14px; 257 font-size: 14px;
264 width: auto; 258 width: auto;
265 height: 35px; 259 height: 35px;
266 color: white; 260 color: white;
267 background-image: none; 261 background-image: none;
268 background-color: #cd9035; 262 background-color: #cd9035;
269 transition: 0.3s; 263 transition: 0.3s;
270 &:hover, 264 &:hover,
271 &:focus { 265 &:focus {
272 background-color: #cd9035; 266 background-color: #cd9035;
273 } 267 }
274 } 268 }
275 269
276 .dropdown-tareas-pausadas { 270 .dropdown-tareas-pausadas {
277 padding: 0px; 271 padding: 0px;
278 border-radius: 4px; 272 border-radius: 4px;
279 background: linear-gradient(0, #ffffff, #e6e6e6); 273 background: linear-gradient(0, #ffffff, #e6e6e6);
280 transform: translate3d(0px, 30px, 0px); 274 transform: translate3d(0px, 30px, 0px);
281 box-sizing: content-box; 275 box-sizing: content-box;
282 font-size: 12px; 276 font-size: 12px;
283 transition: 0.3s; 277 transition: 0.3s;
284 } 278 }
285 279
286 .items-dropdown { 280 .items-dropdown {
287 cursor: pointer; 281 cursor: pointer;
288 width: auto; 282 width: auto;
289 background-color: rgba(0, 0, 0, 0); 283 background-color: rgba(0, 0, 0, 0);
290 transition: 0.3s; 284 transition: 0.3s;
291 &:hover, 285 &:hover,
292 &:focus { 286 &:focus {
293 background-color: #e6e6e6; 287 background-color: #e6e6e6;
294 } 288 }
295 } 289 }
296 290
297 @media (min-width: 992px) { 291 @media (min-width: 992px) {
298 a { 292 a {
299 margin-top: 2.5rem; 293 margin-top: 2.5rem;
300 } 294 }
301 } 295 }
302 } 296 }
303 297
src/sass/_tabla-articulos.scss
Diff comments   View file @ c6aa05d
1 .tabla-articulo { 1 .tabla-articulo {
2 max-height: 420px; 2 max-height: 420px;
3 background-color: #67615e; 3 background-color: #67615e;
4 color: #FFF; 4 color: #FFF;
5 5
6 tr { 6 tr {
7 display: inline-table; 7 display: inline-table;
8 table-layout: fixed; 8 table-layout: fixed;
9 } 9 }
10 10
11 tbody { 11 tbody {
12 overflow-y: auto; 12 overflow-y: auto;
13 max-height: 280px; 13 max-height: 280px;
14 display: block; 14 display: block;
15 } 15 }
16 16
17 thead > tr > th { 17 thead > tr > th {
18 line-height: 30px 18 line-height: 30px
19 } 19 }
20 20
21 @media(max-width: 992px){ 21 @media(max-width: 768px){
22 tr{ 22 tr{
23 display: block; 23 display: block;
24 span{ 24 span{
25 line-height: 35px; 25 line-height: 35px;
26 } 26 }
27 } 27 }
28 tfoot tr{ 28 tfoot tr{
29 display: flex; 29 display: flex;
30 } 30 }
31 } 31 }
32 } 32 }
33 33