diff --git a/Gruntfile.js b/Gruntfile.js index 2b3a23a7..462ec4d0 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -151,11 +151,11 @@ module.exports = function (grunt) { }, // button variations mixin replacement(s) - //{ // Multi-line replacement - https://regex101.com/r/qD9qB8/2 - // pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)contrast[\s\S]+?(?!\r|\n)(\d+)[\s\S]+?(?!\r|\n)}\);$\n/mg, - // replacement: "@include button-variations(unquote($1), $2, $3%);\n", - // order: 20 - //}, + { // Multi-line replacement - https://regex101.com/r/qD9qB8/2 + pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)contrast[\s\S]+?(?!\r|\n)(\d+)[\s\S]+?(?!\r|\n)}\);$\n/mg, + replacement: "@include button-variations(unquote($1), $2, $3%);\n", + order: 20 + }, //// background-color generic-variations //{ // Multi-line replacement - https://regex101.com/r/cW6pH8/2 diff --git a/less/_buttons.less b/less/_buttons.less index 8fefe205..5bd7de37 100644 --- a/less/_buttons.less +++ b/less/_buttons.less @@ -62,34 +62,50 @@ .background-variations(~".btn", ~"", @mdb-btn-background-color); } - //--- // btn-raised &.btn-raised { &:not(.btn-link) { .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 + .generic-variations(~".btn", ~"", @mdb-btn-background-color, { + background-color: contrast(@variation-color, darken(@variation-color, 4%), lighten(@variation-color, 4%), @contrast-factor); }); // 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 - //.generic-variations(~".btn", ~"", @mdb-btn-background-color, { - // // 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? - // background-color: contrast(@variation-color, darken(@variation-color, 4%), lighten(@variation-color, 4%), @contrast-factor); - //}); } } + // shadow on active &.active, &:active { - .shadow-4dp(); + &, + &:hover { + .shadow-4dp(); + } } - &:focus:not(:active) { - .focus-shadow(); + // shadow on focus + // Focus should take precedence over active, so specificity is needed + &:focus { + &, + &.active, + &:active { + &, + &:hover { + .focus-shadow(); + } + } } } } @@ -139,7 +155,6 @@ vertical-align: middle; } - // Size variations &.btn-lg, .btn-group-lg & { @@ -198,7 +213,6 @@ //border-radius: 2px; margin: 10px 1px; - // spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons &.open { .dropdown-toggle { diff --git a/less/_shadows.less b/less/_shadows.less index 6cf0edcb..edee775c 100644 --- a/less/_shadows.less +++ b/less/_shadows.less @@ -39,7 +39,8 @@ // Focus shadow mixin. .focus-shadow() { - box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36); + box-shadow: 0 0 8px rgba(0,0,0,.18), + 0 8px 16px rgba(0,0,0,.36); } .shadow-2dp() { diff --git a/less/_variables.less b/less/_variables.less index 33c3b1d7..90fdb3fe 100644 --- a/less/_variables.less +++ b/less/_variables.less @@ -144,7 +144,7 @@ @mdb-btn-font-size-xs: 10px; -@mdb-btn-background-color: transparent; +@mdb-btn-background-color: @body-bg; //transparent; @mdb-btn-background-color-text: @mdb-text-color-primary; diff --git a/sass/_buttons.scss b/sass/_buttons.scss index 840b871a..6d0341f0 100644 --- a/sass/_buttons.scss +++ b/sass/_buttons.scss @@ -64,31 +64,49 @@ @include background-variations(unquote(".btn"), unquote(""), $mdb-btn-background-color); } - //--- // btn-raised &.btn-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(); + } + } } } } @@ -138,7 +156,6 @@ vertical-align: middle; } - // Size variations &.btn-lg, .btn-group-lg & { @@ -197,7 +214,6 @@ //border-radius: 2px; margin: 10px 1px; - // spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons &.open { .dropdown-toggle { diff --git a/sass/_mixins.scss b/sass/_mixins.scss index 6ae91f35..dec878c4 100644 --- a/sass/_mixins.scss +++ b/sass/_mixins.scss @@ -41,20 +41,20 @@ //@mixin text-variations-content($args) { // color: map-get($args, variation-color); //} -// -//@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)); -//} -// + +@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)); +} + //@mixin bg-color-variations($component, $selector-suffix, $color-default, $mdb-param-1) { // @include generic-variations($component, $selector-suffix, $color-default, "bg-color-variations-content", $mdb-param-1); //} diff --git a/sass/_shadows.scss b/sass/_shadows.scss index 37781762..691d2e92 100644 --- a/sass/_shadows.scss +++ b/sass/_shadows.scss @@ -41,7 +41,8 @@ // Focus shadow mixin. @mixin focus-shadow(){ - box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36); + box-shadow: 0 0 8px rgba(0,0,0,.18), + 0 8px 16px rgba(0,0,0,.36); } @mixin shadow-2dp(){ diff --git a/sass/_togglebutton.scss b/sass/_togglebutton.scss index 337f5917..31d3e359 100644 --- a/sass/_togglebutton.scss +++ b/sass/_togglebutton.scss @@ -66,18 +66,6 @@ } } - //// Switch bg on - //.generic-variations(unquote(" label input[type=checkbox]:checked + .toggle"), $primary, { - // background-color: rgba($material-color, (50/100)); - //}); - //// Handle on - //.variations(unquote(" label input[type=checkbox]:checked + .toggle:after"), background-color, $primary); - //// Ripple on - //.generic-variations(unquote(" label input[type=checkbox]:checked + .toggle:active:after"), $primary, { - // box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba($material-color, (10/100)); - //}); - - // set bg when checked input[type=checkbox]:checked { + .toggle { diff --git a/sass/_variables.scss b/sass/_variables.scss index c2bb9cee..856201d5 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -146,7 +146,7 @@ $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; //transparent !default; $mdb-btn-background-color-text: $mdb-text-color-primary !default; diff --git a/testcase.html b/testcase.html index 5a01ef3c..c7c0ff96 100644 --- a/testcase.html +++ b/testcase.html @@ -41,58 +41,28 @@ Test case
-
-
- Horizontal Form +

btn

+ btn + .active -
-
-
- -
-
-
-
-
-
- -
-
-
-
-
+

btn.btn-raised

+ btn + .active -
-
- Standard Form +

btn.btn-default

+ btn + .active -
-
-
- -
-
-
-
-
-
- -
-
-
-
-
+

btn.btn-default.btn-raised

+ btn + .active + + +

btn.btn-primary.btn-raised

+ btn + .active
-