javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(fab): add box shadow and transition for ios

Browse Source
This commit is contained in:
Brandy Carney
2018-03-21 11:56:09 -04:00
parent 6e683c54e0
commit d26074a17f
2 changed files with 29 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
core/src/components/fab-button/fab-button.ios.scss
View File

@ -7,14 +7,25 @@
.fab-button-ios { .fab-button-ios {
color: $fab-ios-text-color; color: $fab-ios-text-color;
background-color: $fab-ios-background-color; background-color: $fab-ios-background-color;
box-shadow: $fab-ios-box-shadow;
transition: $fab-ios-transition;
} }
.fab-button-ios.activated { .fab-button-ios.activated {
background-color: $fab-ios-background-color-activated; background-color: $fab-ios-background-color-activated;
box-shadow: $fab-ios-box-shadow-activated;
transform: $fab-ios-transform;
transition: $fab-ios-transition-activated;
} }
.fab-button-ios .icon { .fab-button-ios .icon {
fill: $fab-ios-icon-fill-color; fill: $fab-ios-icon-fill-color;
font-size: $fab-ios-icon-font-size;
} }
// FAB buttons in a list // FAB buttons in a list

18
core/src/components/fab-button/fab-button.ios.vars.scss
View File

@ -3,6 +3,21 @@
// iOS FAB Button // iOS FAB Button
// -------------------------------------------------- // --------------------------------------------------
/// @prop - Box shadow of the FAB button
$fab-ios-box-shadow: 0px 4px 16px rgba(0, 0, 0, .12) !default;
/// @prop - Box shadow of the activated FAB button
$fab-ios-box-shadow-activated: $fab-ios-box-shadow !default;
/// @prop - Transform of the FAB button
$fab-ios-transform: scale(1.1) !default;
/// @prop - Transition of the FAB button
$fab-ios-transition: .2s transform cubic-bezier(.25, 1.11, .78, 1.59) !default;
/// @prop - Transition of the activated FAB button
$fab-ios-transition-activated: .2s transform ease-out !default;
/// @prop - Background color of the button /// @prop - Background color of the button
$fab-ios-background-color: ion-color($colors-ios, primary, base, ios) !default; $fab-ios-background-color: ion-color($colors-ios, primary, base, ios) !default;
@ -15,6 +30,9 @@ $fab-ios-text-color: ion-color($colors-ios, $
/// @prop - Color of the button icon /// @prop - Color of the button icon
$fab-ios-icon-fill-color: $fab-ios-text-color !default; $fab-ios-icon-fill-color: $fab-ios-text-color !default;
/// @prop - Font size of the button icon
$fab-ios-icon-font-size: 28px !default;
/// @prop - Background color of the activated button /// @prop - Background color of the activated button
$fab-ios-background-color-activated: ion-color($colors-ios, $fab-ios-background-color, tint, ios) !default; $fab-ios-background-color-activated: ion-color($colors-ios, $fab-ios-background-color, tint, ios) !default;