javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(fab): add box shadow transition for md fab list buttons

Browse Source 
This adds the box-shadow, background-color, and color to the transition
for Material Design buttons in a fab list, Sass variables for this
transition in all modes, it also defaults the md ripple color to the
contrast of the fab button color (which by default is primary).

Closes #9557
This commit is contained in:
Brandy Carney
2016-12-08 13:01:21 -05:00
parent 5ba09a1b78
commit 1e2374f910
4 changed files with 48 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/fab/fab.ios.scss
View File

@@ -21,6 +21,15 @@ $fab-ios-list-button-text-color: color-contrast($colors-ios, $f
/// @prop - Background color of the activated button in a list
$fab-ios-list-button-background-color-activated: color-shade($fab-ios-list-button-background-color) !default;
/// @prop - Transition duration of the transform and opacity of the button in a list
$fab-ios-list-button-transition-duration: 200ms !default;
/// @prop - Speed curve of the transition of the transform and opacity of the button in a list
$fab-ios-list-button-transition-timing-function: ease !default;
/// @prop - Transition delay of the transform and opacity of the button in a list
$fab-ios-list-button-transition-delay: 10ms !default;
.fab-ios {
color: $fab-ios-text-color;
@@ -34,6 +43,9 @@ $fab-ios-list-button-background-color-activated: color-shade($fab-ios-list-butt
.fab-ios-in-list {
color: $fab-ios-list-button-text-color;
background-color: $fab-ios-list-button-background-color;
transition: transform $fab-ios-list-button-transition-duration $fab-ios-list-button-transition-timing-function $fab-ios-list-button-transition-delay,
opacity $fab-ios-list-button-transition-duration $fab-ios-list-button-transition-timing-function $fab-ios-list-button-transition-delay;
}
.fab-ios-in-list.activated {

22
src/components/fab/fab.md.scss
View File

@@ -27,6 +27,15 @@ $fab-md-list-button-text-color: color-contrast($colors-md, $fa
/// @prop - Background color of the activated button in a list
$fab-md-list-button-background-color-activated: color-shade($fab-md-list-button-background-color) !default;
/// @prop - Transition duration of the transform and opacity of the button in a list
$fab-md-list-button-transition-duration: 200ms !default;
/// @prop - Speed curve of the transition of the transform and opacity of the button in a list
$fab-md-list-button-transition-timing-function: ease !default;
/// @prop - Transition delay of the transform and opacity of the button in a list
$fab-md-list-button-transition-delay: 10ms !default;
.fab-md {
color: $fab-md-text-color;
@@ -47,12 +56,25 @@ $fab-md-list-button-background-color-activated: color-shade($fab-md-list-butto
.fab-md-in-list {
color: $fab-md-list-button-text-color;
background-color: $fab-md-list-button-background-color;
transition: transform $fab-md-list-button-transition-duration $fab-md-list-button-transition-timing-function $fab-md-list-button-transition-delay,
opacity $fab-md-list-button-transition-duration $fab-md-list-button-transition-timing-function $fab-md-list-button-transition-delay,
box-shadow $button-md-transition-duration $button-md-transition-timing-function,
background-color $button-md-transition-duration $button-md-transition-timing-function,
color $button-md-transition-duration $button-md-transition-timing-function;
}
.fab-md-in-list.activated {
background-color: $fab-md-list-button-background-color-activated;
}
// Material Design FAB Ripple
// --------------------------------------------------
.fab-md .button-effect {
background-color: color-contrast($colors-md, $fab-md-background-color);
}
// Generate MD FAB colors
// --------------------------------------------------

7
src/components/fab/fab.scss
View File

@@ -132,7 +132,7 @@ ion-fab-list {
min-height: $fab-size;
}
ion-fab-list .fab-in-list {
.fab-in-list {
margin: 8px 0;
width: $fab-mini-size;
@@ -141,12 +141,9 @@ ion-fab-list .fab-in-list {
opacity: 0;
visibility: hidden;
transform: scale(0);
transition: all 200ms ease;
transition-delay: 10ms;
transition-property: transform, opacity;
}
ion-fab-list .fab-in-list.show {
.fab-in-list.show {
opacity: 1;
visibility: visible;
transform: scale(1);

12
src/components/fab/fab.wp.scss
View File

@@ -21,6 +21,15 @@ $fab-wp-list-button-text-color: color-contrast($colors-wp, $fa
/// @prop - Background color of the activated button in a list
$fab-wp-list-button-background-color-activated: color-shade($fab-wp-list-button-background-color) !default;
/// @prop - Transition duration of the transform and opacity of the button in a list
$fab-wp-list-button-transition-duration: 200ms !default;
/// @prop - Speed curve of the transition of the transform and opacity of the button in a list
$fab-wp-list-button-transition-timing-function: ease !default;
/// @prop - Transition delay of the transform and opacity of the button in a list
$fab-wp-list-button-transition-delay: 10ms !default;
.fab-wp {
color: $fab-wp-text-color;
@@ -34,6 +43,9 @@ $fab-wp-list-button-background-color-activated: color-shade($fab-wp-list-butto
.fab-wp-in-list {
color: $fab-wp-list-button-text-color;
background-color: $fab-wp-list-button-background-color;
transition: transform $fab-wp-list-button-transition-duration $fab-wp-list-button-transition-timing-function $fab-wp-list-button-transition-delay,
opacity $fab-wp-list-button-transition-duration $fab-wp-list-button-transition-timing-function $fab-wp-list-button-transition-delay;
}
.fab-wp-in-list.activated {