mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-10-31 16:07:53 +03:00
Resolves #763 - button active and focus states
This commit is contained in:
Kevin Ross
parent
1768d1156b
commit
3877095274
10
Gruntfile.js
10
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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
//}
|
||||
|
|
|
|||
|
|
@ -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(){
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -41,58 +41,28 @@ Test case
|
|||
|
||||
<div class="container">
|
||||
|
||||
<form class="form-horizontal">
|
||||
<fieldset>
|
||||
<legend>Horizontal Form</legend>
|
||||
<h4><mark>btn</mark></h4>
|
||||
<a href="javascript:void(0)" class="btn"><code>btn</code></a>
|
||||
<a href="javascript:void(0)" class="btn active"><code>.active</code></a>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="col-md-offset-2 col-md-10">
|
||||
<div class="togglebutton">
|
||||
<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>
|
||||
<h4><mark>btn.btn-raised</mark></h4>
|
||||
<a href="javascript:void(0)" class="btn btn-raised"><code>btn</code></a>
|
||||
<a href="javascript:void(0)" class="btn btn-raised active"><code>.active</code></a>
|
||||
|
||||
<form class="form">
|
||||
<fieldset>
|
||||
<legend>Standard Form</legend>
|
||||
<h4><mark>btn.btn-default</mark></h4>
|
||||
<a href="javascript:void(0)" class="btn btn-default"><code>btn</code></a>
|
||||
<a href="javascript:void(0)" class="btn btn-default active"><code>.active</code></a>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="col-md-offset-2 col-md-10">
|
||||
<div class="togglebutton">
|
||||
<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>
|
||||
<h4><mark>btn.btn-default.btn-raised</mark></h4>
|
||||
<a href="javascript:void(0)" class="btn btn-raised btn-default"><code>btn</code></a>
|
||||
<a href="javascript:void(0)" class="btn btn-raised btn-default active"><code>.active</code></a>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<!--
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user