diff --git a/scss/_buttons.scss b/scss/_buttons.scss index db1bfdf0..a5381eb2 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -57,34 +57,55 @@ //-- // color variations &.btn-raised, - &.btn-fab { + &.btn-fab, + .btn-group-raised & { @include background-variations(unquote(".btn"), unquote(""), $mdb-btn-background-color); } //--- // btn-raised - &.btn-raised { + &.btn-raised, + .btn-group-raised & { &:not(.btn-link) { @include shadow-2dp(); - &:hover { + // colors on hover, focus, active + &:hover, + &:focus, + &.active, + &:active { + + // FIXME: SPEC - this should be the 600 color, how can we get that programmatically if at all? Or are we limited to the color palette only? + // SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content + @include alert-variations(unquote(".btn"), unquote(""), $mdb-btn-background-color); // Spec: // - Raised Light/Light theme no hover. // - Raised Dark/Dark theme Hover color: 600 .theme-dark & { - //// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content - //@include alert-variations(unquote(".btn"), unquote(""), $mdb-btn-background-color); } } + // shadow on active &.active, &:active { - @include shadow-4dp(); + &, + &:hover { + @include shadow-4dp(); + } } - &:focus:not(:active) { - @include focus-shadow(); + // shadow on focus + // Focus should take precedence over active, so specificity is needed + &:focus { + &, + &.active, + &:active { + &, + &:hover { + @include focus-shadow(); + } + } } } } diff --git a/scss/_switch.scss b/scss/_switch.scss index 3d2a2bb1..b9e6cdec 100644 --- a/scss/_switch.scss +++ b/scss/_switch.scss @@ -13,6 +13,10 @@ height: 0; opacity: 0; } + .switch-decorator { + text-align: left; // Issue #737 horizontal form + } + // Switch bg off and disabled .switch-decorator, input[type=checkbox][disabled] + .switch-decorator { @@ -60,7 +64,8 @@ } } - label input[type=checkbox]:checked { + // set bg when checked + input[type=checkbox]:checked { + .switch-decorator { background-color: rgba($brand-primary, (50 / 100)); // Switch bg on } diff --git a/scss/_variables.scss b/scss/_variables.scss index 41e5f110..0147c23a 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -101,7 +101,7 @@ $mdb-btn-font-size-lg: 16px !default; $mdb-btn-font-size-sm: 12px !default; $mdb-btn-font-size-xs: 10px !default; -$mdb-btn-background-color: transparent !default; +$mdb-btn-background-color: $body-bg !default; // transparent $mdb-btn-background-color-text: $mdb-text-color-primary !default; $mdl-btn-border-radus: 2px !default; diff --git a/scss/mixins/_variations.scss b/scss/mixins/_variations.scss index 1d7e20fc..293bb175 100644 --- a/scss/mixins/_variations.scss +++ b/scss/mixins/_variations.scss @@ -23,6 +23,19 @@ } } +@mixin button-variations($component, $selector-suffix, $color-default, $mdb-param-1) { + @include generic-variations($component, $selector-suffix, $color-default, "button-variations-content", $mdb-param-1); +} + +@mixin button-variations-content($args) { + //@debug "#{inspect($args)}"; + $variation-color: map-get($args, variation-color); + $mdb-param-1: map-get($args, material-param-1); + background-color: contrast-color($variation-color, + darken($variation-color, $mdb-param-1), + lighten($variation-color, $mdb-param-1)); +} + // navbar-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary //@mixin navbar-variations($component, $selector-suffix, $color-default) { // @include generic-variations($component, $selector-suffix, $color-default, "navbar-variations-content", null);