mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-09-21 03:19:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

Resolves #763 - button active and focus states

Browse Source
This commit is contained in:
Kevin Ross 2015-12-08 14:39:12 -06:00
parent 1768d1156b
commit 3877095274
10 changed files with 93 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
Gruntfile.js
View File

@ -151,11 +151,11 @@ module.exports = function (grunt) {
}, },
// button variations mixin replacement(s) // button variations mixin replacement(s)
//{ // Multi-line replacement - https://regex101.com/r/qD9qB8/2 { // 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, 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", replacement: "@include button-variations(unquote($1), $2, $3%);\n",
// order: 20 order: 20
//}, },
//// background-color generic-variations //// background-color generic-variations
//{ // Multi-line replacement - https://regex101.com/r/cW6pH8/2 //{ // Multi-line replacement - https://regex101.com/r/cW6pH8/2

34
less/_buttons.less
View File

@ -62,37 +62,53 @@
.background-variations(~".btn", ~"", @mdb-btn-background-color); .background-variations(~".btn", ~"", @mdb-btn-background-color);
} }
//--- //---
// btn-raised // btn-raised
&.btn-raised { &.btn-raised {
&:not(.btn-link) { &:not(.btn-link) {
.shadow-2dp(); .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: // Spec:
// - Raised Light/Light theme no hover. // - Raised Light/Light theme no hover.
// - Raised Dark/Dark theme Hover color: 600 // - Raised Dark/Dark theme Hover color: 600
.theme-dark & { .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,
&:active { &:active {
&,
&:hover {
.shadow-4dp(); .shadow-4dp();
} }
}
&:focus:not(:active) { // shadow on focus
// Focus should take precedence over active, so specificity is needed
&:focus {
&,
&.active,
&:active {
&,
&:hover {
.focus-shadow(); .focus-shadow();
} }
} }
} }
}
}
&.btn-fab { &.btn-fab {
// see above for color variations // see above for color variations
@ -139,7 +155,6 @@
vertical-align: middle; vertical-align: middle;
} }
// Size variations // Size variations
&.btn-lg, &.btn-lg,
.btn-group-lg & { .btn-group-lg & {
@ -198,7 +213,6 @@
//border-radius: 2px; //border-radius: 2px;
margin: 10px 1px; margin: 10px 1px;
// spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons // spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
&.open { &.open {
.dropdown-toggle { .dropdown-toggle {

3
less/_shadows.less
View File

@ -39,7 +39,8 @@
// Focus shadow mixin. // Focus shadow mixin.
.focus-shadow() { .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() { .shadow-2dp() {

2
less/_variables.less
View File

@ -144,7 +144,7 @@
@mdb-btn-font-size-xs: 10px; @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; @mdb-btn-background-color-text: @mdb-text-color-primary;

30
sass/_buttons.scss
View File

@ -64,34 +64,52 @@
@include background-variations(unquote(".btn"), unquote(""), $mdb-btn-background-color); @include background-variations(unquote(".btn"), unquote(""), $mdb-btn-background-color);
} }
//--- //---
// btn-raised // btn-raised
&.btn-raised { &.btn-raised {
&:not(.btn-link) { &:not(.btn-link) {
@include shadow-2dp(); @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: // Spec:
// - Raised Light/Light theme no hover. // - Raised Light/Light theme no hover.
// - Raised Dark/Dark theme Hover color: 600 // - Raised Dark/Dark theme Hover color: 600
.theme-dark & { .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,
&:active { &:active {
&,
&:hover {
@include shadow-4dp(); @include shadow-4dp();
} }
}
&:focus:not(:active) { // shadow on focus
// Focus should take precedence over active, so specificity is needed
&:focus {
&,
&.active,
&:active {
&,
&:hover {
@include focus-shadow(); @include focus-shadow();
} }
} }
} }
}
}
&.btn-fab { &.btn-fab {
// see above for color variations // see above for color variations
@ -138,7 +156,6 @@
vertical-align: middle; vertical-align: middle;
} }
// Size variations // Size variations
&.btn-lg, &.btn-lg,
.btn-group-lg & { .btn-group-lg & {
@ -197,7 +214,6 @@
//border-radius: 2px; //border-radius: 2px;
margin: 10px 1px; margin: 10px 1px;
// spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons // spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
&.open { &.open {
.dropdown-toggle { .dropdown-toggle {

28
sass/_mixins.scss
View File

@ -41,20 +41,20 @@
//@mixin text-variations-content($args) { //@mixin text-variations-content($args) {
// color: map-get($args, variation-color); // color: map-get($args, variation-color);
//} //}
//
//@mixin button-variations($component, $selector-suffix, $color-default, $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); @include generic-variations($component, $selector-suffix, $color-default, "button-variations-content", $mdb-param-1);
//} }
//
//@mixin button-variations-content($args) { @mixin button-variations-content($args) {
// //@debug "#{inspect($args)}"; //@debug "#{inspect($args)}";
// $variation-color: map-get($args, variation-color); $variation-color: map-get($args, variation-color);
// $mdb-param-1: map-get($args, material-param-1); $mdb-param-1: map-get($args, material-param-1);
// background-color: contrast-color($variation-color, background-color: contrast-color($variation-color,
// darken($variation-color, $mdb-param-1), darken($variation-color, $mdb-param-1),
// lighten($variation-color, $mdb-param-1)); lighten($variation-color, $mdb-param-1));
//} }
//
//@mixin bg-color-variations($component, $selector-suffix, $color-default, $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); // @include generic-variations($component, $selector-suffix, $color-default, "bg-color-variations-content", $mdb-param-1);
//} //}

3
sass/_shadows.scss
View File

@ -41,7 +41,8 @@
// Focus shadow mixin. // Focus shadow mixin.
@mixin 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);
} }
@mixin shadow-2dp(){ @mixin shadow-2dp(){

12
sass/_togglebutton.scss
View File

@ -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 // set bg when checked
input[type=checkbox]:checked { input[type=checkbox]:checked {
+ .toggle { + .toggle {

2
sass/_variables.scss
View File

@ -146,7 +146,7 @@ $mdb-btn-font-size-sm: 12px !default;
$mdb-btn-font-size-xs: 10px !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; $mdb-btn-background-color-text: $mdb-text-color-primary !default;

64
testcase.html
View File

@ -41,58 +41,28 @@ Test case
<div class="container"> <div class="container">
<form class="form-horizontal"> <h4><mark>btn</mark></h4>
<fieldset> <a href="javascript:void(0)" class="btn"><code>btn</code></a>
<legend>Horizontal Form</legend> <a href="javascript:void(0)" class="btn active"><code>.active</code></a>
<div class="form-group"> <h4><mark>btn.btn-raised</mark></h4>
<div class="col-md-offset-2 col-md-10"> <a href="javascript:void(0)" class="btn btn-raised"><code>btn</code></a>
<div class="togglebutton"> <a href="javascript:void(0)" class="btn btn-raised active"><code>.active</code></a>
<label>
<input type="checkbox" checked> Checked
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="togglebutton">
<label>
<input type="checkbox"> Unchecked
</label>
</div>
</div>
</div>
</fieldset>
</form>
<form class="form"> <h4><mark>btn.btn-default</mark></h4>
<fieldset> <a href="javascript:void(0)" class="btn btn-default"><code>btn</code></a>
<legend>Standard Form</legend> <a href="javascript:void(0)" class="btn btn-default active"><code>.active</code></a>
<div class="form-group"> <h4><mark>btn.btn-default.btn-raised</mark></h4>
<div class="col-md-offset-2 col-md-10"> <a href="javascript:void(0)" class="btn btn-raised btn-default"><code>btn</code></a>
<div class="togglebutton"> <a href="javascript:void(0)" class="btn btn-raised btn-default active"><code>.active</code></a>
<label>
<input type="checkbox" checked> Checked
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="togglebutton">
<label>
<input type="checkbox"> Unchecked
</label>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<h4><mark>btn.btn-primary.btn-raised</mark></h4>
<a href="javascript:void(0)" class="btn btn-raised btn-primary"><code>btn</code></a>
<a href="javascript:void(0)" class="btn btn-raised btn-primary active"><code>.active</code></a>
</div>
<!-- <!--