Commit 849355e180c8c4e7c1434d90b0130e32ed0bb1f5
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
src/sass/_botonera-lateral.scss
src/sass/_paginador-abm.scss
src/sass/general.scss
1 | -$primary-color: #e09125; | |
1 | +@import 'constants'; | |
2 | 2 | @import 'admin-seguimiento'; |
3 | 3 | @import 'bootstrap'; |
4 | 4 | @import 'botonera'; |
... | ... | @@ -40,17 +40,25 @@ input::-webkit-inner-spin-button { |
40 | 40 | |
41 | 41 | .btn-outline-debo{ |
42 | 42 | background-color: transparent; |
43 | - color: $primary-color; | |
44 | - border-color: $primary-color; | |
43 | + color: $primary; | |
44 | + border-color: $primary; | |
45 | 45 | &:hover{ |
46 | 46 | color: #FFF; |
47 | 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 | 60 | .btn-brown { |
53 | - background-color:#Cd9035; | |
61 | + background-color:$primary; | |
54 | 62 | -webkit-appearance: none; |
55 | 63 | border-color: transparent; |
56 | 64 | &:focus { |
... | ... | @@ -66,45 +74,57 @@ input::-webkit-inner-spin-button { |
66 | 74 | .page-item.active .page-link { |
67 | 75 | z-index: 1; |
68 | 76 | color: #fff; |
69 | - background-color: #Cd9035; | |
70 | - border-color: #Cd9035; | |
77 | + background-color: $primary; | |
78 | + border-color: $primary; | |
71 | 79 | } |
72 | 80 | |
73 | 81 | .foca-input { |
74 | 82 | &:focus { |
75 | - border-color: #Cd9035; | |
76 | - box-shadow: 0 0 5px #Cd9035; | |
83 | + border-color: $primary; | |
84 | + box-shadow: 0 0 5px $primary; | |
77 | 85 | } |
78 | 86 | } |
79 | 87 | |
80 | -.btn-info { | |
81 | - background-color: #Cd9035; | |
82 | - border-color: #Cd9035; | |
88 | +.btn-primary { | |
89 | + background-color: $primary !important; | |
90 | + border-color: $primary !important; | |
83 | 91 | &:focus { |
84 | - box-shadow: none; | |
92 | + box-shadow: none !important; | |
85 | 93 | } |
86 | 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 { | |
92 | - background-color: #Cd9035; | |
93 | - border-color: #Cd9035; | |
104 | +.btn-default { | |
105 | + color: #FFF; | |
106 | + background-color: $default !important; | |
107 | + border-color: $default !important; | |
94 | 108 | &:focus { |
95 | - box-shadow: none; | |
109 | + box-shadow: none !important; | |
96 | 110 | } |
97 | 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 | 122 | .table-celda-total { |
103 | - background-color: #E09524; | |
123 | + background-color: $highlightedArea; | |
104 | 124 | } |
105 | 125 | |
106 | 126 | marquee { |
107 | - background-color: #E09524; | |
127 | + background-color: $highlightedArea; | |
108 | 128 | } |
109 | 129 | |
110 | 130 | .front-index{ |
... | ... | @@ -147,3 +167,54 @@ button.clear-input{ |
147 | 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 | +} |