mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-02 12:54:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

reworked larger radio, better separation and better vertical centering on appropriate line height

Browse Source
This commit is contained in:
Kevin Ross 2015-12-15 11:21:16 -06:00
parent fee7f0a008
commit ef738470ad
3 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
scss/_radios.scss
View File

@ -1,30 +1,27 @@
.radio label span {
top: 0;
}
label.radio-inline span {
top: (($line-height * $font-size-base) - $mdb-radio-size) / 2;
}
.radio label, .radio label,
label.radio-inline { label.radio-inline {
position: relative; position: relative;
padding-left: $mdb-radio-size + $mdb-radio-label-padding; // absolutely positioned so add the radio size
span { span {
position: absolute; position: absolute;
top: (($line-height * $font-size-base) - $mdb-radio-size) / 2; // vertical center of line-height
left: 0; left: 0;
display: block; display: inline-block;
width: $mdb-radio-size; width: $mdb-radio-size;
height: $mdb-radio-size; height: $mdb-radio-size;
transition-duration: 0.2s; transition-duration: 0.2s;
&.mdb-radio-outer-circle { &.mdb-radio-outer-circle {
border: $mdb-radio-border solid $mdb-radio-color-off; border: $mdb-radio-border solid $mdb-radio-color-off;
border-radius: 100%; border-radius: 50%;
transition: border-color ease .28s;
} }
&.mdb-radio-inner-circle { &.mdb-radio-inner-circle {
display: inline-block; display: inline-block;
background-color: $mdb-radio-color-on; background-color: $mdb-radio-color-on;
border-radius: 50%; border-radius: 50%;
transition: transform ease .28s;
transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0);
// focus/press ripple // focus/press ripple

3
scss/_variables.scss
View File

@ -97,7 +97,8 @@ $mdb-dropdown-font-size: 16px !default;
// Radio: // Radio:
$mdb-radio-border: .125rem !default; // 2px $mdb-radio-border: .125rem !default; // 2px
$mdb-radio-size: 1rem !default; $mdb-radio-size: 1.25rem !default;
$mdb-radio-label-padding: .3125rem !default; // 5px
$mdb-radio-color-off: $mdb-label-color-inner-focus !default; // FIXME seems inconsistent, check spec $mdb-radio-color-off: $mdb-label-color-inner-focus !default; // FIXME seems inconsistent, check spec
$mdb-radio-color-on: $brand-primary !default; $mdb-radio-color-on: $brand-primary !default;

12
scss/mixins/_forms.scss
View File

@ -20,8 +20,8 @@
} }
// correct the above focus color for disabled items // correct the above focus color for disabled items
label:has(input[type=radio][disabled]), // css 4 which is unlikely to work for a while, but no other pure css way. label:has(input[type=radio][disabled]), // css 4 which is unlikely to work for a while, but no other pure css way.
label:has(input[type=checkbox][disabled]), // css 4 label:has(input[type=checkbox][disabled]), // css 4
fieldset[disabled] & { fieldset[disabled] & {
&, &,
&:hover, &:hover,
@ -53,7 +53,6 @@
} }
} }
@mixin mdb-form-color($label-color, $label-color-focus, $border-color) { @mixin mdb-form-color($label-color, $label-color-focus, $border-color) {
[class^='mdb-label'], [class^='mdb-label'],
@ -145,6 +144,13 @@
line-height: $variant-line-height; line-height: $variant-line-height;
} }
.radio label,
label.radio-inline,
.checkbox label,
label.checkbox-inline {
line-height: $line-height; // keep the same line height for radios and checkboxes
}
// Note: this may be inside or outside a form-group, may be .mdb-form-group.mdb-form-group-sm or .mdb-form-group.mdb-form-group-lg // Note: this may be inside or outside a form-group, may be .mdb-form-group.mdb-form-group-sm or .mdb-form-group.mdb-form-group-lg
input::placeholder { input::placeholder {
font-size: $font-size; font-size: $font-size;