mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-03-10 23:05:46 +03:00
Code Issues Packages Projects Releases Wiki Activity

position checkbox same way of radios (absolutely) and unified css used to hide native inputs

Browse Source
This commit is contained in:
FezVrasta 2016-08-03 00:19:20 +02:00
parent 9fab7c7baa
commit c2e3218e05
3 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
scss/_checkboxes.scss
View File

@ -1,13 +1,15 @@
// http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox // http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
.checkbox label, .checkbox label,
label.checkbox-inline { label.checkbox-inline {
padding-left: 0; // Reset for Bootstrap rule padding-left: $bmd-checkbox-size + $bmd-checkbox-label-padding; // absolutely positioned so add the radio size
cursor: pointer; cursor: pointer;
.checkbox-decorator { .checkbox-decorator {
position: relative; position: absolute;
top: 3px; top: 0.125rem;
left: 0;
vertical-align: middle; vertical-align: middle;
&::before { // FIXME: document why this is necessary (doesn't seem to be on chrome) &::before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
position: absolute; position: absolute;
left: 0; left: 0;

6
scss/_radios.scss
View File

@ -46,9 +46,15 @@ label.radio-inline {
} }
input[type=radio] { input[type=radio] {
// Hide native radio
position: absolute;
left: 0;
z-index: -1;
width: 0; width: 0;
height: 0; height: 0;
margin: 0;
overflow: hidden; overflow: hidden;
pointer-events: none;
opacity: 0; opacity: 0;
&:checked { &:checked {

1
scss/_variables.scss
View File

@ -94,6 +94,7 @@ $bmd-checkbox-size: 1.25rem !default;
$bmd-checkbox-animation-ripple: 500ms !default; $bmd-checkbox-animation-ripple: 500ms !default;
$bmd-checkbox-animation-check: 0.3s !default; $bmd-checkbox-animation-check: 0.3s !default;
$bmd-checkbox-checked-color: $brand-primary !default; $bmd-checkbox-checked-color: $brand-primary !default;
$bmd-checkbox-label-padding: .3125rem !default; // 5px
$bmd-checkbox-border-size: .125rem !default; $bmd-checkbox-border-size: .125rem !default;
$bmd-checkbox-border-color: $bmd-label-color-inner-focus !default; $bmd-checkbox-border-color: $bmd-label-color-inner-focus !default;