mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-03-10 23:05:46 +03:00
position checkbox same way of radios (absolutely) and unified css used to hide native inputs
This commit is contained in:
parent
9fab7c7baa
commit
c2e3218e05
|
@ -1,13 +1,15 @@
|
|||
// http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
|
||||
.checkbox label,
|
||||
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;
|
||||
|
||||
.checkbox-decorator {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
position: absolute;
|
||||
top: 0.125rem;
|
||||
left: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
&::before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
|
@ -46,9 +46,15 @@ label.radio-inline {
|
|||
}
|
||||
|
||||
input[type=radio] {
|
||||
// Hide native radio
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
|
||||
&:checked {
|
||||
|
|
|
@ -94,6 +94,7 @@ $bmd-checkbox-size: 1.25rem !default;
|
|||
$bmd-checkbox-animation-ripple: 500ms !default;
|
||||
$bmd-checkbox-animation-check: 0.3s !default;
|
||||
$bmd-checkbox-checked-color: $brand-primary !default;
|
||||
$bmd-checkbox-label-padding: .3125rem !default; // 5px
|
||||
|
||||
$bmd-checkbox-border-size: .125rem !default;
|
||||
$bmd-checkbox-border-color: $bmd-label-color-inner-focus !default;
|
||||
|
|
Loading…
Reference in New Issue
Block a user