Commit 752dacedc05ce1001fefab3c6f51152da4c926e2
1 parent
849355e180
Exists in
master
Cambio en los estilos de los checkbox.
Showing
1 changed file
with
28 additions
and
50 deletions
Show diff stats
src/sass/general.scss
| ... | ... | @@ -167,54 +167,32 @@ button.clear-input{ |
| 167 | 167 | outline: none; |
| 168 | 168 | } |
| 169 | 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; | |
| 170 | +.custom-control-input { | |
| 171 | + &:checked ~ .custom-control-label::before { | |
| 172 | + border: none !important; | |
| 173 | + color: $primary !important; | |
| 174 | + background-color: $primary !important; | |
| 175 | + box-shadow: 0px 0px 0px 2px $primaryTransparency !important; | |
| 176 | + } | |
| 177 | + &:active ~ .custom-control-label::before { | |
| 178 | + border: none !important; | |
| 179 | + color: $primary !important; | |
| 180 | + background-color: $primary !important; | |
| 181 | + } | |
| 182 | + &:focus ~ .custom-control-label::before { | |
| 183 | + border: none !important; | |
| 184 | + box-shadow: 0px 0px 0px 2px $primaryTransparency !important; | |
| 185 | + } | |
| 186 | + &:focus:not(:checked) ~ .custom-control-label::before { | |
| 187 | + border: none !important; | |
| 188 | + } | |
| 189 | + &:not(:disabled):active ~ .custom-control-label::before { | |
| 190 | + border: none !important; | |
| 191 | + color: $primary !important; | |
| 192 | + box-shadow: 0px 0px 0px 2px $primaryTransparency !important; | |
| 193 | + } | |
| 194 | + &:hover ~ .custom-control-label::before { | |
| 195 | + border: none !important; | |
| 196 | + background-color: $primaryTransparency; | |
| 197 | + } | |
| 220 | 198 | } |