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): remove button dependency and fix button color

Browse Source
This commit is contained in:
Brandy Carney
2018-02-07 17:48:37 -05:00
parent f6410bacbd
commit 0514cec902
4 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,7 @@ $fab-ios-icon-fill-color: $fab-ios-text-color !def
$fab-ios-background-color-activated: ion-color($colors-ios, $fab-ios-background-color, tint, ios) !default;
/// @prop - Background color of the button in a list
$fab-ios-list-button-background-color: ion-color($colors-ios, tertiary, base, ios) !default;
$fab-ios-list-button-background-color: ion-color($colors-ios, light, base, ios) !default;
/// @prop - Background color of the button in a list
$fab-ios-list-button-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;

2
packages/core/src/components/fab-button/fab-button.md.vars.scss
View File

@@ -22,7 +22,7 @@ $fab-md-icon-fill-color: $fab-md-text-color !default;
$fab-md-background-color-activated: ion-color($colors-md, $fab-md-background-color, tint, md) !default;
/// @prop - Background color of the button in a list
$fab-md-list-button-background-color: ion-color($colors-md, tertiary, base, md) !default;
$fab-md-list-button-background-color: ion-color($colors-md, light, base, md) !default;
/// @prop - Text color of the button in a list
$fab-md-list-button-text-color: ion-color($colors-md, $fab-md-list-button-background-color, contrast, md) !default;

6
packages/core/src/components/fab-button/fab-button.scss
View File

@@ -43,7 +43,7 @@
line-height: 1;
}
.button-inner {
.fab-button-inner {
display: flex;
flex-flow: row nowrap;
@@ -93,7 +93,7 @@ ion-fab-button[mini] .fab-button {
// FAB Animation
// --------------------------------------------------
.fab-button .button-inner {
.fab-button-inner {
transition: all ease-in-out 300ms;
transition-property: transform, opacity;
}
@@ -103,7 +103,7 @@ ion-fab-button[mini] .fab-button {
transform: scale(1) rotateZ(0deg);
}
.fab-button-close-active .button-inner {
.fab-button-close-active .fab-button-inner {
opacity: 0;
transform: scale(.4) rotateZ(45deg);
}

2
packages/core/src/components/fab-button/fab-button.tsx
View File

@@ -102,7 +102,7 @@ export class FabButton {
href={this.href}
onClick={this.clickedFab.bind(this)}>
<ion-icon name='close' class='fab-button-close-icon'></ion-icon>
<span class='button-inner'>
<span class='fab-button-inner'>
<slot></slot>
</span>
{ this.mode === 'md' && <ion-ripple-effect useTapClick={true} /> }