Luigi / wrapper-demo

Download as
Browse Code »

Commit ceafa0ebb0baa7ba1b64c6bcdfa0b58d4d33ea64

Authored by Luigi
1 parent 485d8b1e22
Exists in master

Boton login - botones transparentes

Showing 3 changed files with 27 additions and 2 deletions   Show diff stats
src/sass/_bootstrap.scss
Diff comments   View file @ ceafa0e
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: .15rem .5rem; 11 padding: .15rem .5rem;
12 font-size: .8rem; 12 font-size: .8rem;
13 line-height: 1.5; 13 line-height: 1.5;
14 border-radius: .2rem; 14 border-radius: .2rem;
15 } 15 }
16
16 .no-border-bottom { 17 .no-border-bottom {
17 border-bottom: 0 !important; 18 border-bottom: 0 !important;
18 } 19 }
19 .no-border-top { 20 .no-border-top {
20 border-top: 0 !important; 21 border-top: 0 !important;
21 } 22 }
22 .no-border { 23 .no-border {
23 border: 0 !important; 24 border: 0 !important;
24 } 25 }
25 .margin-bottom-mobile { 26 .margin-bottom-mobile {
26 margin-bottom: 2.5em !important; 27 margin-bottom: 2.5em !important;
27 } 28 }
28 .tamaño-boton { 29 .tamaño-boton {
29 width:44px; 30 width:44px;
30 } 31 }
31 .modal-content { 32 .modal-content {
32 .modal-header{ 33 .modal-header{
33 display: block; 34 display: block;
34 >div.row{ 35 >div.row{
35 margin: 0 !important; 36 margin: 0 !important;
36 >div{ 37 >div{
37 padding: 0 !important; 38 padding: 0 !important;
38 } 39 }
39 } 40 }
40 } 41 }
41 @media (max-width: 576px) { 42 @media (max-width: 576px) {
42 height: auto; 43 height: auto;
43 height: 100%; 44 height: 100%;
44 border-radius: 0; 45 border-radius: 0;
45 } 46 }
46 } 47 }
47 .modal.show .modal-dialog { 48 .modal.show .modal-dialog {
48 @media (min-width: 1201px){ 49 @media (min-width: 1201px){
49 -webkit-transform: translate(0, 70px); 50 -webkit-transform: translate(0, 70px);
50 transform: translate(0, 70px); 51 transform: translate(0, 70px);
51 } 52 }
52 @media (min-width: 576px) { 53 @media (min-width: 576px) {
53 -webkit-transform: translate(0, 90px); 54 -webkit-transform: translate(0, 90px);
54 transform: translate(0, 90px); 55 transform: translate(0, 90px);
55 } 56 }
56 @media (max-width: 576px) { 57 @media (max-width: 576px) {
57 width: 100%; 58 width: 100%;
58 height: 100%; 59 height: 100%;
59 margin: 0; 60 margin: 0;
60 padding: 0; 61 padding: 0;
61 } 62 }
62 } 63 }
63 .modal-body { 64 .modal-body {
64 @media (max-width: 576px) { 65 @media (max-width: 576px) {
65 overflow-y: auto; 66 overflow-y: auto;
66 } 67 }
67 } 68 }
68 69
69 .boton-salir { 70 .boton-salir {
70 position: absolute; 71 position: absolute;
71 bottom: 10px; 72 bottom: 10px;
72 right: 15px; 73 right: 15px;
73 width: calc(100% - 15px); 74 width: calc(100% - 15px);
74 } 75 }
75 76
76 input[type=number]::-webkit-inner-spin-button, 77 input[type=number]::-webkit-inner-spin-button,
77 78
78 input[type=number]::-webkit-outer-spin-button { 79 input[type=number]::-webkit-outer-spin-button {
79 -webkit-appearance: none; 80 -webkit-appearance: none;
80 margin: 0; 81 margin: 0;
81 } 82 }
82 83
83 .invisible { 84 .invisible {
84 color: rgba(0,0,0,0); 85 color: rgba(0,0,0,0);
85 } 86 }
86 87
src/sass/_constants.scss
Diff comments   View file @ ceafa0e
1 $primary: #cd9035; 1 $primary: #cd9035;
2 $primaryTransparency: #cd9137cc; 2 $primaryTransparency: #d6a55bcc;
3 $highlightedArea: #df9424; 3 $highlightedArea: #df9424;
4 $default: #6c757d; 4 $default: #6c757d;
5 $defaultTransparency: #6c757dcc;
5 $defaultTransparency: #6c757dcc;
6 $danger: #dc3545;
src/sass/general.scss
Diff comments   View file @ ceafa0e
1 @import 'constants'; 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; 43 color: $primary;
44 border-color: $primary; 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; 48 background-color: $primary;
49 } 49 }
50 &:focus { 50 &:focus {
51 box-shadow: none !important; 51 box-shadow: none !important;
52 } 52 }
53 &:active{ 53 &:active{
54 color: #FFF; 54 color: #FFF;
55 background-color: $primary !important; 55 background-color: $primary !important;
56 box-shadow: 0px 0px 0px 3px $primaryTransparency !important; 56 box-shadow: 0px 0px 0px 3px $primaryTransparency !important;
57 } 57 }
58 } 58 }
59 59
60 .btn-login {
61 box-shadow: none !important;
62 }
63
64 input[type="file"] {
65 display: none;
66 }
67 .custom-file-upload {
68 border: 1px solid #ccc;
69 display: inline-block;
70 padding: 6px 12px;
71 cursor: pointer;
72 }
73
60 .btn-brown { 74 .btn-brown {
61 background-color:$primary; 75 background-color:$primary;
62 -webkit-appearance: none; 76 -webkit-appearance: none;
63 border-color: transparent; 77 border-color: transparent;
64 &:focus { 78 &:focus {
65 outline: 0 !important; 79 outline: 0 !important;
66 box-shadow: none; 80 box-shadow: none;
67 } 81 }
68 .icon-white { 82 .icon-white {
69 color: white; 83 color: white;
70 } 84 }
71 } 85 }
72 86
73 .btn-Guardar { 87 .btn-Guardar {
74 background-color:green; 88 background-color:green;
75 -webkit-appearance: none; 89 -webkit-appearance: none;
76 border-color: transparent; 90 border-color: transparent;
77 &:focus { 91 &:focus {
78 outline: 0 !important; 92 outline: 0 !important;
79 box-shadow: none; 93 box-shadow: none;
80 } 94 }
81 .icon-white { 95 .icon-white {
82 color: white; 96 color: white;
83 } 97 }
84 } 98 }
85 99
86 .page-item.active .page-link { 100 .page-item.active .page-link {
87 z-index: 1; 101 z-index: 1;
88 color: #fff; 102 color: #fff;
89 background-color: $primary; 103 background-color: $primary;
90 border-color: $primary; 104 border-color: $primary;
91 } 105 }
92 106
93 .foca-input { 107 .foca-input {
94 &:focus { 108 &:focus {
95 border-color: $primary; 109 border-color: $primary;
96 box-shadow: 0 0 5px $primary; 110 box-shadow: 0 0 5px $primary;
97 } 111 }
98 } 112 }
99 113
100 .btn-primary { 114 .btn-primary {
101 background-color: $primary !important; 115 background-color: $primary !important;
102 border-color: $primary !important; 116 border-color: $primary !important;
103 &:focus { 117 &:focus {
104 box-shadow: none !important; 118 box-shadow: none !important;
105 } 119 }
106 &:hover { 120 &:hover {
107 border-color: $primaryTransparency !important; 121 border-color: $primaryTransparency !important;
108 background-color: $primaryTransparency !important; 122 background-color: $primaryTransparency !important;
109 } 123 }
110 &:active{ 124 &:active{
111 background-color: $primary !important; 125 background-color: $primary !important;
112 box-shadow: 0px 0px 0px 3px $primaryTransparency !important; 126 box-shadow: 0px 0px 0px 3px $primaryTransparency !important;
113 } 127 }
114 } 128 }
115 129
116 .btn-default { 130 .btn-default {
117 color: #FFF; 131 color: #FFF;
118 background-color: $default !important; 132 background-color: $default !important;
119 border-color: $default !important; 133 border-color: $default !important;
120 &:focus { 134 &:focus {
121 box-shadow: none !important; 135 box-shadow: none !important;
122 } 136 }
123 &:hover { 137 &:hover {
124 color: #FFF; 138 color: #FFF;
125 border-color: $defaultTransparency !important; 139 border-color: $defaultTransparency !important;
126 background-color: $defaultTransparency !important; 140 background-color: $defaultTransparency !important;
127 } 141 }
128 &:active{ 142 &:active{
129 background-color: $default !important; 143 background-color: $default !important;
130 box-shadow: 0px 0px 0px 3px $defaultTransparency !important; 144 box-shadow: 0px 0px 0px 3px $defaultTransparency !important;
131 } 145 }
132 } 146 }
133 147
148 .btn-danger {
149 &:hover {
150 color: #FFF;
151 border-color: $dangerTransparency !important;
152 background-color: $dangerTransparency !important;
153 }
154 }
155
134 .table-celda-total { 156 .table-celda-total {
135 background-color: $highlightedArea; 157 background-color: $highlightedArea;
136 } 158 }
137 159
138 marquee { 160 marquee {
139 background-color: $highlightedArea; 161 background-color: $highlightedArea;
140 } 162 }
141 163
142 .front-index{ 164 .front-index{
143 z-index: 9999; 165 z-index: 9999;
144 } 166 }
145 167
146 .uib-daypicker{ 168 .uib-daypicker{
147 outline: 0 169 outline: 0
148 } 170 }
149 171
150 .right-0{ 172 .right-0{
151 right: 0; 173 right: 0;
152 } 174 }
153 175
154 .tabla-factura{ 176 .tabla-factura{
155 word-wrap: break-word; 177 word-wrap: break-word;
156 table-layout: fixed; 178 table-layout: fixed;
157 } 179 }
158 180
159 .ladda-w-100 .ladda-label{ 181 .ladda-w-100 .ladda-label{
160 width: 100%; 182 width: 100%;
161 float: right; 183 float: right;
162 } 184 }
163 185
164 .btn-delete-image{ 186 .btn-delete-image{
165 height: 25px; 187 height: 25px;
166 width: 25px; 188 width: 25px;
167 top: -10px; 189 top: -10px;
168 right: 0; 190 right: 0;
169 } 191 }
170 192
171 button.clear-input{ 193 button.clear-input{
172 cursor: pointer; 194 cursor: pointer;
173 background: transparent; 195 background: transparent;
174 border: none; 196 border: none;
175 margin-left: -24px; 197 margin-left: -24px;
176 z-index: 9; 198 z-index: 9;
177 color: #a3a3a3; 199 color: #a3a3a3;
178 &:focus{ 200 &:focus{
179 outline: none; 201 outline: none;
180 } 202 }
181 } 203 }
182 .custom-control-input { 204 .custom-control-input {
183 &:checked ~ .custom-control-label::before { 205 &:checked ~ .custom-control-label::before {
184 border: none !important; 206 border: none !important;
185 color: $primary !important; 207 color: $primary !important;
186 background-color: $primary !important; 208 background-color: $primary !important;
187 box-shadow: 0px 0px 0px 2px $primaryTransparency !important; 209 box-shadow: 0px 0px 0px 2px $primaryTransparency !important;
188 } 210 }
189 &:active ~ .custom-control-label::before { 211 &:active ~ .custom-control-label::before {
190 border: none !important; 212 border: none !important;
191 color: $primary !important; 213 color: $primary !important;
192 background-color: $primary !important; 214 background-color: $primary !important;
193 } 215 }
194 &:focus ~ .custom-control-label::before { 216 &:focus ~ .custom-control-label::before {
195 border: none !important; 217 border: none !important;
196 box-shadow: 0px 0px 0px 2px $primaryTransparency !important; 218 box-shadow: 0px 0px 0px 2px $primaryTransparency !important;
197 } 219 }
198 &:focus:not(:checked) ~ .custom-control-label::before { 220 &:focus:not(:checked) ~ .custom-control-label::before {
199 border: none !important; 221 border: none !important;
200 } 222 }
201 &:not(:disabled):active ~ .custom-control-label::before { 223 &:not(:disabled):active ~ .custom-control-label::before {
202 border: none !important; 224 border: none !important;
203 color: $primary !important; 225 color: $primary !important;
204 box-shadow: 0px 0px 0px 2px $primaryTransparency !important; 226 box-shadow: 0px 0px 0px 2px $primaryTransparency !important;
205 } 227 }
206 &:hover ~ .custom-control-label::before { 228 &:hover ~ .custom-control-label::before {
207 border: none !important; 229 border: none !important;
208 background-color: $primaryTransparency; 230 background-color: $primaryTransparency;
209 } 231 }
210 } 232 }
211 233