diff --git a/scss/_checkboxes.scss b/scss/_checkboxes.scss index 97c81dcb..84301777 100644 --- a/scss/_checkboxes.scss +++ b/scss/_checkboxes.scss @@ -4,9 +4,10 @@ label.checkbox-inline, .checkbox label, .checkbox-inline label { padding-left: 0; // Reset for Bootstrap rule - color: $mdb-checkbox-label-color; cursor: pointer; + @include mdb-label-color-toggle-focus(); + // Hide native checkbox input[type=checkbox] { position: absolute; diff --git a/scss/_forms.scss b/scss/_forms.scss index 30ada79f..09153298 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -1,9 +1,3 @@ -// label variations -.label { - border-radius: $border-radius-small; - //@include variations(unquote(""), background-color, $grey); -} - // must be broken out for reuse - webkit selector breaks firefox @mixin label-static($label-top, $static-font-size, $static-line-height) { label.control-label { @@ -20,7 +14,6 @@ // @include material-placeholder { // font-size: $placeholder-font-size; // line-height: $line-height; - // color: $mdb-input-placeholder-color; // font-weight: 400; // } // @@ -35,7 +28,6 @@ label { //font-size: $placeholder-font-size; //line-height: $line-height; - //color: $mdb-input-placeholder-color; //font-weight: 400; } @@ -43,8 +35,6 @@ label.control-label { //font-size: $static-font-size; //line-height: $static-line-height; - //color: $mdb-input-placeholder-color; - //font-weight: 400; //margin: 16px 0 0 0; // std and lg } @@ -264,21 +254,22 @@ } } - .help-block { - //display: block; - } + //.help-block { + // display: block; + //} } - textarea { - //resize: none; - } + //textarea { + // resize: none; + //} +} - select { - //appearance: none; // Fix for OS X - - ~ .mdb-form-control-decorator::after { - //display: none; - } +select { + &, + &.form-control { + // Use vendor prefixes as `appearance` isn't part of the CSS spec. OSX doesn't obey the border-radius: 0 without this. + -moz-appearance: none; + -webkit-appearance: none; } } @@ -294,23 +285,6 @@ // lg floating size/location @include mdb-form-group-size-variant(unquote(".mdb-form-group.mdb-form-group-lg"), $font-size-lg, $mdb-label-top-margin-lg, $mdb-input-padding-y-lg, $line-height-lg, $mdb-label-as-placeholder-shim-lg); -select.form-control { - //border: 0; - //box-shadow: none; - //border-radius: 0; - - .mdb-form-group.is-focused & { - //box-shadow: none; - //border-color: $mdb-input-underline-color; - } - - &[multiple] { - &, - .mdb-form-group.is-focused & { - //height: 85px; - } - } -} // Input files - hide actual input - requires specific markup in the sample. //.mdb-form-group input[type=file] { diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 971959ef..6f7590ac 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -1,4 +1,4 @@ @import "mixins/utilities"; @import "mixins/shadows"; @import "mixins/variations"; -@import "mixins/inputs"; +@import "mixins/forms"; diff --git a/scss/_radios.scss b/scss/_radios.scss index c8b96bfa..de5dfc35 100644 --- a/scss/_radios.scss +++ b/scss/_radios.scss @@ -19,7 +19,9 @@ label.radio-inline, .radio-inline label { position: relative; padding-left: 45px; - color: $mdb-radio-label-color; + + @include mdb-label-color-toggle-focus(); + cursor: pointer; span { diff --git a/scss/_switch.scss b/scss/_switch.scss index b9e6cdec..a1ed89db 100644 --- a/scss/_switch.scss +++ b/scss/_switch.scss @@ -4,8 +4,8 @@ user-select: none; } label { - color: $mdb-switch-label-color; cursor: pointer; + @include mdb-label-color-toggle-focus(); // Hide original checkbox input[type=checkbox] { diff --git a/scss/_variables.scss b/scss/_variables.scss index 2f8383cc..5d1191b2 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -46,7 +46,9 @@ $contrast-factor: 40% !default; // inputs //$mdb-input-placeholder-color: #BDBDBD !default; -$mdb-label-color: rgba($black, 0.26) !default; // synced +$mdb-label-color: rgba($black, 0.26) !default; +$mdb-label-color-toggle-focus: rgba($black, .54) !default; + //$mdb-input-underline-color: #d2d2d2 !default; $mdb-label-static-size-ratio: 75 / 100 !default; @@ -79,9 +81,8 @@ $background-disabled: #eaeaea !default; $mdb-checkbox-size: 20px !default; $mdb-checkbox-animation-ripple: 500ms !default; $mdb-checkbox-animation-check: 0.3s !default; -$mdb-checkbox-checked-color: #4caf50 !default; -$mdb-checkbox-label-color: rgba($black, .54) !default; -$mdb-checkbox-border-color: $mdb-checkbox-label-color !default; +$mdb-checkbox-checked-color: $brand-primary; // #4caf50 !default; +$mdb-checkbox-border-color: $mdb-label-color-toggle-focus !default; // Popovers and Popups $mdb-popover-background: rgba(101, 101, 101, 0.9) !default; @@ -90,12 +91,8 @@ $mdb-popover-color: #ececec !default; // Dropdown Menu $mdb-dropdown-font-size: 16px !default; -// Toggle -$mdb-switch-label-color: $mdb-checkbox-label-color !default; - // Radio: -$mdb-radio-label-color: $mdb-checkbox-label-color !default; -$mdb-radio-color-off: $mdb-checkbox-border-color !default; +$mdb-radio-color-off: $mdb-label-color-toggle-focus !default; $mdb-radio-color-on: $brand-primary !default; // Buttons: diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss new file mode 100644 index 00000000..6374b913 --- /dev/null +++ b/scss/mixins/_forms.scss @@ -0,0 +1,25 @@ +@mixin mdb-label-color-toggle-focus() { + // override bootstrap focus and keep all the standard color (could be multiple radios in the form group) + .mdb-form-group.is-focused & { + color: $mdb-label-color; + + // on focus just darken the specific labels, do not turn them to the brand-primary + &:hover, + &:focus { + color: $mdb-label-color-toggle-focus; + } + } +} + +//// Placeholder text +//@mixin material-placeholder() { +// &::placeholder { +// @content; +// } +// // Firefox +// //&::-moz-placeholder {@content; } // Firefox +// //&:-ms-input-placeholder {@content; } // Internet Explorer 10+ +// //&::-webkit-input-placeholder {@content; } // Safari and Chrome +//} + + diff --git a/scss/mixins/_inputs.scss b/scss/mixins/_inputs.scss deleted file mode 100644 index 1aa5155d..00000000 --- a/scss/mixins/_inputs.scss +++ /dev/null @@ -1,10 +0,0 @@ -// Placeholder text -@mixin material-placeholder() { - &::placeholder { - @content; - } - // Firefox - //&::-moz-placeholder {@content; } // Firefox - //&:-ms-input-placeholder {@content; } // Internet Explorer 10+ - //&::-webkit-input-placeholder {@content; } // Safari and Chrome -}