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 // flat removes bg, add color variations to text
@include mdb-button-color(); @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-fab,
&.btn-raised, &.btn-raised,
.btn-group-raised & { .btn-group-raised & {
@include mdb-button-colored(); @include mdb-button-colored();
}
//---
// btn-raised
&.btn-raised,
.btn-group-raised & {
// baseline shadow
@include shadow-2dp();
// contrast bg colors on hover, focus, active // contrast bg colors on hover, focus, active
@include mdb-hover-focus-active() { @include mdb-hover-focus-active() {
@include mdb-button-colored-bg(true); @include mdb-button-colored-bg(true);
//border: 1px solid $red; //border: 1px solid $red;
} }
// enlarged shadow on hover, focus // enlarged shadow on hover, focus
@include hover-focus() { @include hover-focus() {
//border: 1px solid $blue; //border: 1px solid $blue;
@ -58,6 +51,15 @@
@include focus-shadow(); @include focus-shadow();
//border: 1px solid $green; //border: 1px solid $green;
} }
}
//---
// btn-raised
&.btn-raised,
.btn-group-raised & {
// baseline shadow
@include shadow-2dp();
// reverse any of the above for links // reverse any of the above for links
&.btn-link { &.btn-link {
@ -75,7 +77,6 @@
// https://www.google.com/design/spec/components/buttons-floating-action-button.html // https://www.google.com/design/spec/components/buttons-floating-action-button.html
&.btn-fab { &.btn-fab {
// see above for color variations // see above for color variations
position: relative;
width: $mdb-btn-fab-size; width: $mdb-btn-fab-size;
min-width: $mdb-btn-fab-size; min-width: $mdb-btn-fab-size;
height: $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-padding-y: .5rem !default; // .375rem
$btn-font-weight: 500 !default; // normal $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-bg: $brand-primary !default;
//$btn-primary-border: $btn-primary-bg !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-bg: $body-bg !default; // #fff
//$btn-secondary-border: #ccc !default; //$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-bg: $brand-info !default;
//$btn-info-border: $btn-info-bg !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-bg: $brand-success !default;
//$btn-success-border: $btn-success-bg !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-bg: $brand-warning !default;
//$btn-warning-border: $btn-warning-bg !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-bg: $brand-danger !default;
//$btn-danger-border: $btn-danger-bg !default; //$btn-danger-border: $btn-danger-bg !default;
// //