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

fab and raised now share some behavior for colors/shadows on hover/focus/active, though their baseline shadows are different. Spec is silent on fabs having hover/focus state, but UI is more responsive making them behave more like the raised, and "responsive UI" is a core concept of material design. Colored icons now back to default #fff, much better contrast, looks cleaner.

Browse Source
This commit is contained in:
Kevin Ross 2015-12-17 10:00:17 -06:00
parent 6e49b4d184
commit 4345c79604
2 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
scss/_buttons.scss
View File

@ -24,27 +24,20 @@
// flat removes bg, add color variations to text
@include mdb-button-color();
// fab and raised are colored, add their text and bg
// fab and raised
// - colored, add their text and bg
// - hover color contrasted
// - shared shadow state on hover/active/focus
&.btn-fab,
&.btn-raised,
.btn-group-raised & {
@include mdb-button-colored();
}
//---
// btn-raised
&.btn-raised,
.btn-group-raised & {
// baseline shadow
@include shadow-2dp();
// contrast bg colors on hover, focus, active
@include mdb-hover-focus-active() {
@include mdb-button-colored-bg(true);
//border: 1px solid $red;
}
// enlarged shadow on hover, focus
@include hover-focus() {
//border: 1px solid $blue;
@ -58,6 +51,15 @@
@include focus-shadow();
//border: 1px solid $green;
}
}
//---
// btn-raised
&.btn-raised,
.btn-group-raised & {
// baseline shadow
@include shadow-2dp();
// reverse any of the above for links
&.btn-link {
@ -75,7 +77,6 @@
// https://www.google.com/design/spec/components/buttons-floating-action-button.html
&.btn-fab {
// see above for color variations
position: relative;
width: $mdb-btn-fab-size;
min-width: $mdb-btn-fab-size;
height: $mdb-btn-fab-size;

10
scss/variables/bootstrap/_buttons.scss
View File

@ -6,7 +6,7 @@ $btn-padding-x: 1.875rem !default; // 1rem
$btn-padding-y: .5rem !default; // .375rem
$btn-font-weight: 500 !default; // normal
//
$btn-primary-color: $mdb-text-color-light !default; // #fff
//$btn-primary-color: #fff !default;
//$btn-primary-bg: $brand-primary !default;
//$btn-primary-border: $btn-primary-bg !default;
//
@ -14,19 +14,19 @@ $btn-secondary-color: $gray-dark !default;
$btn-secondary-bg: $body-bg !default; // #fff
//$btn-secondary-border: #ccc !default;
//
$btn-info-color: $mdb-text-color-light !default; // #fff
//$btn-info-color: #fff !default;
//$btn-info-bg: $brand-info !default;
//$btn-info-border: $btn-info-bg !default;
//
$btn-success-color: $mdb-text-color-light !default; // #fff
//$btn-success-color: #fff !default;
//$btn-success-bg: $brand-success !default;
//$btn-success-border: $btn-success-bg !default;
//
$btn-warning-color: $mdb-text-color-light !default; // #fff
//$btn-warning-color: #fff !default;
//$btn-warning-bg: $brand-warning !default;
//$btn-warning-border: $btn-warning-bg !default;
//
$btn-danger-color: $mdb-text-color-light !default; // #fff
//$btn-danger-color: #fff !default;
//$btn-danger-bg: $brand-danger !default;
//$btn-danger-border: $btn-danger-bg !default;
//