Luigi / wrapper-demo

Download as
Browse Code »

Commit 849355e180c8c4e7c1434d90b0130e32ed0bb1f5

Authored by Marcelo Puebla
1 parent 924b239a8c
Exists in master

Cambio de colores de botones.

Showing 4 changed files with 95 additions and 24 deletions   Show diff stats
src/sass/_bootstrap.scss
Diff comments   View file @ 849355e
1 button.active{ 1 button.active{
2 text-decoration: none; 2 text-decoration: none;
3 outline: 0; 3 outline: 0;
4 background-color: $primary-color; 4 background-color: $primary;
5 &:focus{ 5 &:focus{
6 box-shadow: 0 0 0 0.2rem #d8b07d; 6 box-shadow: 0 0 0 0.2rem #d8b07d;
7 } 7 }
8 } 8 }
9 .btn-xs { 9 .btn-xs {
10 padding: .15rem .5rem; 10 padding: .15rem .5rem;
11 font-size: .8rem; 11 font-size: .8rem;
12 line-height: 1.5; 12 line-height: 1.5;
13 border-radius: .2rem; 13 border-radius: .2rem;
14 } 14 }
15 .no-border-bottom { 15 .no-border-bottom {
16 border-bottom: 0 !important; 16 border-bottom: 0 !important;
17 } 17 }
18 .no-border-top { 18 .no-border-top {
19 border-top: 0 !important; 19 border-top: 0 !important;
20 } 20 }
21 .no-border { 21 .no-border {
22 border: 0 !important; 22 border: 0 !important;
23 } 23 }
24 .margin-bottom-mobile { 24 .margin-bottom-mobile {
25 margin-bottom: 2.5em !important; 25 margin-bottom: 2.5em !important;
26 } 26 }
27 .tamaño-boton { 27 .tamaño-boton {
28 width:44px; 28 width:44px;
29 } 29 }
30 .modal-content { 30 .modal-content {
31 .modal-header{ 31 .modal-header{
32 display: block; 32 display: block;
33 >div.row{ 33 >div.row{
34 margin: 0 !important; 34 margin: 0 !important;
35 >div{ 35 >div{
36 padding: 0 !important; 36 padding: 0 !important;
37 } 37 }
38 } 38 }
39 } 39 }
40 @media (max-width: 576px) { 40 @media (max-width: 576px) {
41 height: auto; 41 height: auto;
42 height: 100%; 42 height: 100%;
43 border-radius: 0; 43 border-radius: 0;
44 } 44 }
45 } 45 }
46 .modal.show .modal-dialog { 46 .modal.show .modal-dialog {
47 @media (min-width: 1201px){ 47 @media (min-width: 1201px){
48 -webkit-transform: translate(0, 70px); 48 -webkit-transform: translate(0, 70px);
49 transform: translate(0, 70px); 49 transform: translate(0, 70px);
50 } 50 }
51 @media (min-width: 576px) { 51 @media (min-width: 576px) {
52 -webkit-transform: translate(0, 90px); 52 -webkit-transform: translate(0, 90px);
53 transform: translate(0, 90px); 53 transform: translate(0, 90px);
54 } 54 }
55 @media (max-width: 576px) { 55 @media (max-width: 576px) {
56 width: 100%; 56 width: 100%;
57 height: 100%; 57 height: 100%;
58 margin: 0; 58 margin: 0;
59 padding: 0; 59 padding: 0;
60 } 60 }
61 } 61 }
62 .modal-body { 62 .modal-body {
63 @media (max-width: 576px) { 63 @media (max-width: 576px) {
64 overflow-y: auto; 64 overflow-y: auto;
65 } 65 }
66 } 66 }
67 67
68 .boton-salir { 68 .boton-salir {
69 position: absolute; 69 position: absolute;
70 bottom: 10px; 70 bottom: 10px;
71 right: 15px; 71 right: 15px;
72 width: calc(100% - 15px); 72 width: calc(100% - 15px);
73 } 73 }
74 74
75 input[type=number]::-webkit-inner-spin-button, 75 input[type=number]::-webkit-inner-spin-button,
76 76
77 input[type=number]::-webkit-outer-spin-button { 77 input[type=number]::-webkit-outer-spin-button {
78 -webkit-appearance: none; 78 -webkit-appearance: none;
79 margin: 0; 79 margin: 0;
80 } 80 }
81 81
82 .invisible { 82 .invisible {
83 color: rgba(0,0,0,0); 83 color: rgba(0,0,0,0);
84 } 84 }
85 85
src/sass/_botonera-lateral.scss
Diff comments   View file @ 849355e
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 49
50 .btn-group-toggle{ 50 .btn-group-toggle{
51 pointer-events: all; 51 pointer-events: all;
52 &.active{ 52 &.active{
53 background-color: $primary-color; 53 background-color: $primary;
54 .boton-activar-teclado{ 54 .boton-activar-teclado{
55 color: #FFF; 55 color: #FFF;
56 } 56 }
57 } 57 }
58 58
59 .boton-activar-teclado{ 59 .boton-activar-teclado{
60 cursor: pointer; 60 cursor: pointer;
61 color: #000; 61 color: #000;
62 background-color: transparent; 62 background-color: transparent;
63 } 63 }
64 64
65 input{ 65 input{
66 display: none; 66 display: none;
67 } 67 }
68 } 68 }
69 69
70 .guardado{ 70 .guardado{
71 animation:guardado 4s 1; 71 animation:guardado 4s 1;
72 -webkit-animation:guardado 4s 1; /* Safari and Chrome */ 72 -webkit-animation:guardado 4s 1; /* Safari and Chrome */
73 } 73 }
74 74
75 @keyframes guardado 75 @keyframes guardado
76 { 76 {
77 0% {background:#DDD; color: #000;} 77 0% {background:#DDD; color: #000;}
78 25% {background:#28a745; color: #FFF;} 78 25% {background:#28a745; color: #FFF;}
79 75% {background:#28a745; color: #FFF;} 79 75% {background:#28a745; color: #FFF;}
80 100% {background:#DDD; color: #000;} 80 100% {background:#DDD; color: #000;}
81 } 81 }
82 82
83 @-webkit-keyframes guardado /* Safari and Chrome */ 83 @-webkit-keyframes guardado /* Safari and Chrome */
84 { 84 {
85 0% {background:#DDD; color: #000;} 85 0% {background:#DDD; color: #000;}
86 25% {background:#28a745; color: #FFF;} 86 25% {background:#28a745; color: #FFF;}
87 75% {background:#28a745; color: #FFF;} 87 75% {background:#28a745; color: #FFF;}
88 100% {background:#DDD; color: #000;} 88 100% {background:#DDD; color: #000;}
89 } 89 }
90 } 90 }
91 91
src/sass/_paginador-abm.scss
Diff comments   View file @ 849355e
1 .paginador-abm { 1 .paginador-abm {
2 margin-top: 1rem; 2 margin-top: 1rem;
3 li { 3 li {
4 &.active{ 4 &.active{
5 > a { 5 > a {
6 background: $primary-color !important; 6 background: $primary !important;
7 color: #FFF !important; 7 color: #FFF !important;
8 } 8 }
9 } 9 }
10 10
11 > a { 11 > a {
12 background-color: transparent !important; 12 background-color: transparent !important;
13 border-color: #67615e !important; 13 border-color: #67615e !important;
14 color: #000 !important; 14 color: #000 !important;
15 15
16 } 16 }
17 } 17 }
18 } 18 }
19 19
src/sass/general.scss
Diff comments   View file @ 849355e
1 $primary-color: #e09125; 1 @import 'constants';
2 @import 'admin-seguimiento'; 2 @import 'admin-seguimiento';
3 @import 'bootstrap'; 3 @import 'bootstrap';
4 @import 'botonera'; 4 @import 'botonera';
5 @import 'botonera-lateral'; 5 @import 'botonera-lateral';
6 @import 'botonera-principal'; 6 @import 'botonera-principal';
7 @import 'botonera-secundaria'; 7 @import 'botonera-secundaria';
8 @import 'contenedor'; 8 @import 'contenedor';
9 @import 'lista'; 9 @import 'lista';
10 @import 'login'; 10 @import 'login';
11 @import 'panel-informativo'; 11 @import 'panel-informativo';
12 @import 'tabla'; 12 @import 'tabla';
13 @import 'teclado'; 13 @import 'teclado';
14 @import 'tabla-articulos'; 14 @import 'tabla-articulos';
15 @import 'acciones-mobile'; 15 @import 'acciones-mobile';
16 @import 'swiper'; 16 @import 'swiper';
17 @import 'foca-crear'; 17 @import 'foca-crear';
18 @import 'logistica-pedido-ruta'; 18 @import 'logistica-pedido-ruta';
19 @import 'tabs'; 19 @import 'tabs';
20 @import 'grid'; 20 @import 'grid';
21 @import 'paginador-abm'; 21 @import 'paginador-abm';
22 @import 'table-autorizar-nota-pedido'; 22 @import 'table-autorizar-nota-pedido';
23 23
24 24
25 //OCULTA FLECHAS INPUT NUMBER 25 //OCULTA FLECHAS INPUT NUMBER
26 input[type='number'] { 26 input[type='number'] {
27 -moz-appearance:textfield; 27 -moz-appearance:textfield;
28 } 28 }
29 29
30 input::-webkit-outer-spin-button, 30 input::-webkit-outer-spin-button,
31 input::-webkit-inner-spin-button { 31 input::-webkit-inner-spin-button {
32 -webkit-appearance: none; 32 -webkit-appearance: none;
33 } 33 }
34 34
35 .d-md-grid{ 35 .d-md-grid{
36 @media (min-width: 768px) { 36 @media (min-width: 768px) {
37 display: grid !important; 37 display: grid !important;
38 } 38 }
39 } 39 }
40 40
41 .btn-outline-debo{ 41 .btn-outline-debo{
42 background-color: transparent; 42 background-color: transparent;
43 color: $primary-color; 43 color: $primary;
44 border-color: $primary-color; 44 border-color: $primary;
45 &:hover{ 45 &:hover{
46 color: #FFF; 46 color: #FFF;
47 border-color: transparent; 47 border-color: transparent;
48 background-color: $primary-color; 48 background-color: $primary;
49 }
50 &:focus {
51 box-shadow: none !important;
52 }
53 &:active{
54 color: #FFF;
55 background-color: $primary !important;
56 box-shadow: 0px 0px 0px 3px $primaryTransparency !important;
49 } 57 }
50 } 58 }
51 59
52 .btn-brown { 60 .btn-brown {
53 background-color:#Cd9035; 61 background-color:$primary;
54 -webkit-appearance: none; 62 -webkit-appearance: none;
55 border-color: transparent; 63 border-color: transparent;
56 &:focus { 64 &:focus {
57 outline: 0 !important; 65 outline: 0 !important;
58 box-shadow: none; 66 box-shadow: none;
59 } 67 }
60 .icon-white { 68 .icon-white {
61 color: white; 69 color: white;
62 } 70 }
63 } 71 }
64 72
65 73
66 .page-item.active .page-link { 74 .page-item.active .page-link {
67 z-index: 1; 75 z-index: 1;
68 color: #fff; 76 color: #fff;
69 background-color: #Cd9035; 77 background-color: $primary;
70 border-color: #Cd9035; 78 border-color: $primary;
71 } 79 }
72 80
73 .foca-input { 81 .foca-input {
74 &:focus { 82 &:focus {
75 border-color: #Cd9035; 83 border-color: $primary;
76 box-shadow: 0 0 5px #Cd9035; 84 box-shadow: 0 0 5px $primary;
77 } 85 }
78 } 86 }
79 87
80 .btn-info { 88 .btn-primary {
81 background-color: #Cd9035; 89 background-color: $primary !important;
82 border-color: #Cd9035; 90 border-color: $primary !important;
83 &:focus { 91 &:focus {
84 box-shadow: none; 92 box-shadow: none !important;
85 } 93 }
86 &:hover { 94 &:hover {
87 background-color: #Cd9035; 95 border-color: $primaryTransparency !important;
96 background-color: $primaryTransparency !important;
97 }
98 &:active{
99 background-color: $primary !important;
100 box-shadow: 0px 0px 0px 3px $primaryTransparency !important;
88 } 101 }
89 } 102 }
90 103
91 .btn-primary { 104 .btn-default {
92 background-color: #Cd9035; 105 color: #FFF;
93 border-color: #Cd9035; 106 background-color: $default !important;
107 border-color: $default !important;
94 &:focus { 108 &:focus {
95 box-shadow: none; 109 box-shadow: none !important;
96 } 110 }
97 &:hover { 111 &:hover {
98 background-color: #Cd9035; 112 color: #FFF;
113 border-color: $defaultTransparency !important;
114 background-color: $defaultTransparency !important;
115 }
116 &:active{
117 background-color: $default !important;
118 box-shadow: 0px 0px 0px 3px $defaultTransparency !important;
99 } 119 }
100 } 120 }
101 121
102 .table-celda-total { 122 .table-celda-total {
103 background-color: #E09524; 123 background-color: $highlightedArea;
104 } 124 }
105 125
106 marquee { 126 marquee {
107 background-color: #E09524; 127 background-color: $highlightedArea;
108 } 128 }
109 129
110 .front-index{ 130 .front-index{
111 z-index: 9999; 131 z-index: 9999;
112 } 132 }
113 133
114 .uib-daypicker{ 134 .uib-daypicker{
115 outline: 0 135 outline: 0
116 } 136 }
117 137
118 .right-0{ 138 .right-0{
119 right: 0; 139 right: 0;
120 } 140 }
121 141
122 .tabla-factura{ 142 .tabla-factura{
123 word-wrap: break-word; 143 word-wrap: break-word;
124 table-layout: fixed; 144 table-layout: fixed;
125 } 145 }
126 146
127 .ladda-w-100 .ladda-label{ 147 .ladda-w-100 .ladda-label{
128 width: 100%; 148 width: 100%;
129 float: right; 149 float: right;
130 } 150 }
131 151
132 .btn-delete-image{ 152 .btn-delete-image{
133 height: 25px; 153 height: 25px;
134 width: 25px; 154 width: 25px;
135 top: -10px; 155 top: -10px;
136 right: 0; 156 right: 0;
137 } 157 }
138 158
139 button.clear-input{ 159 button.clear-input{
140 cursor: pointer; 160 cursor: pointer;
141 background: transparent; 161 background: transparent;
142 border: none; 162 border: none;
143 margin-left: -24px; 163 margin-left: -24px;
144 z-index: 9; 164 z-index: 9;
145 color: #a3a3a3; 165 color: #a3a3a3;
146 &:focus{ 166 &:focus{
147 outline: none; 167 outline: none;
148 } 168 }
149 } 169 }
170
171 .checkbox {
172 display: inline-block;
173 position: relative;
174 }
175
176 /* Hide the browser's default checkbox */
177 .checkbox input {
178 position: absolute;
179 opacity: 0;
180 cursor: pointer;
181 height: 0;
182 width: 0;
183 }
184
185 /* Create a custom checkbox */
186 .checkmark {
187 cursor: pointer;
188 position: absolute;
189 top: -2px;
190 left: -15px;
191 height: 12px;
192 width: 12px;
193 background-color: #ffffff;
194 border: 1px solid #a3a3a3;
195 }
196
197 /* When the checkbox is checked, add a blue background */
198 .checkbox input:checked ~ .checkmark {
199 background-color: $primary;
200 border: 1px solid $primary;
201 box-shadow: 0px 0px 0px 3px $primaryTransparency !important;
202 }
203
204 /* Create the checkmark/indicator (hidden when not checked) */
205 .checkmark:after {
206 content: "";
207 position: absolute;
208 display: none;
209 }
210
211 /* Show the checkmark when checked */
212 .checkbox input:checked ~ .checkmark:after {
213 display: block;
214 }
215 .col-centered {
216 display: block;
217 margin-left: auto;
218 margin-right: auto;
219 text-align: center;
220 }
150 221