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

fix(fab): position icons properly and rename sass variables

Browse Source
This commit is contained in:
Brandy Carney
2017-07-28 16:30:07 -04:00
parent adc4cb3e86
commit d06563e7a2
5 changed files with 30 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/core/src/components/fab/fab.ios.scss
View File

@ -23,7 +23,7 @@ $fab-ios-list-button-background-color: $fab-list-button-background-co
$fab-ios-list-button-text-color: color-contrast($colors-ios, $fab-ios-list-button-background-color) !default; $fab-ios-list-button-text-color: color-contrast($colors-ios, $fab-ios-list-button-background-color) !default;
/// @prop - Color of the button icon in a list /// @prop - Color of the button icon in a list
$fab-ios-list-icon-fill-color: $fab-ios-list-button-text-color !default; $fab-ios-list-button-icon-fill-color: $fab-ios-list-button-text-color !default;
/// @prop - Background color of the activated button in a list /// @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; $fab-ios-list-button-background-color-activated: color-shade($fab-ios-list-button-background-color) !default;
@ -67,7 +67,7 @@ $fab-ios-list-button-transition-delay: 10ms !default;
} }
.fab-ios-in-list .icon { .fab-ios-in-list .icon {
fill: $fab-ios-list-icon-fill-color; fill: $fab-ios-list-button-icon-fill-color;
} }

4
packages/core/src/components/fab/fab.md.scss
View File

@ -29,7 +29,7 @@ $fab-md-list-button-background-color: $fab-list-button-background-co
$fab-md-list-button-text-color: color-contrast($colors-md, $fab-md-list-button-background-color) !default; $fab-md-list-button-text-color: color-contrast($colors-md, $fab-md-list-button-background-color) !default;
/// @prop - Color of the button icon in a list /// @prop - Color of the button icon in a list
$fab-md-list-icon-fill-color: $fab-md-list-button-text-color !default; $fab-md-list-button-icon-fill-color: $fab-md-list-button-text-color !default;
/// @prop - Background color of the activated button in a list /// @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; $fab-md-list-button-background-color-activated: color-shade($fab-md-list-button-background-color) !default;
@ -90,7 +90,7 @@ $fab-button-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !de
} }
.fab-md-in-list .icon { .fab-md-in-list .icon {
fill: $fab-md-list-icon-fill-color; fill: $fab-md-list-button-icon-fill-color;
} }

38
packages/core/src/components/fab/fab.scss
View File

@ -6,7 +6,7 @@
/// @prop - Width and height of the FAB button /// @prop - Width and height of the FAB button
$fab-size: 56px !default; $fab-size: 56px !default;
/// @prop - Width and height of the FAB button mini /// @prop - Width and height of the mini FAB button
$fab-mini-size: 40px !default; $fab-mini-size: 40px !default;
/// @prop - Margin of the FAB Container /// @prop - Margin of the FAB Container
@ -51,12 +51,13 @@ $fab-list-button-background-color: #f4f4f4 !default;
flex: 1; flex: 1;
font-size: 2.4rem; font-size: 2.4rem;
line-height: 1.8rem;
} }
// FAB mini // FAB Mini
// -------------------------------------------------- // --------------------------------------------------
.fab[mini] { ion-fab-button[mini] .fab {
@include margin(($fab-size - $fab-mini-size) / 2); @include margin(($fab-size - $fab-mini-size) / 2);
width: $fab-mini-size; width: $fab-mini-size;
@ -65,12 +66,8 @@ $fab-list-button-background-color: #f4f4f4 !default;
line-height: $fab-mini-size; line-height: $fab-mini-size;
} }
.fab[mini] .fab-close-icon {
line-height: $fab-mini-size;
}
// FAB Container
// FAB container
// -------------------------------------------------- // --------------------------------------------------
ion-fab { ion-fab {
@ -128,7 +125,7 @@ ion-fab {
} }
// FAB list (speed dial) // FAB List (Speed Dial)
// -------------------------------------------------- // --------------------------------------------------
ion-fab-list { ion-fab-list {
@ -189,25 +186,36 @@ ion-fab-list[side=right] {
} }
// FAB animation // FAB Close Icon
// -------------------------------------------------- // --------------------------------------------------
.fab-list-active {
display: flex;
}
.fab-close-icon { .fab-close-icon {
@include position(0, 0, null, 0); @include position(0, 0, null, 0);
position: absolute; position: absolute;
height: 100%;
line-height: $fab-size;
opacity: 0; opacity: 0;
transform: scale(.4) rotateZ(-45deg); transform: scale(.4) rotateZ(-45deg);
transition: all ease-in-out 300ms; transition: all ease-in-out 300ms;
transition-property: transform, opacity; transition-property: transform, opacity;
} }
.fab-close-icon .icon-inner {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
// FAB Animation
// --------------------------------------------------
.fab-list-active {
display: flex;
}
.fab .button-inner { .fab .button-inner {
transition: all ease-in-out 300ms; transition: all ease-in-out 300ms;
transition-property: transform, opacity; transition-property: transform, opacity;

4
packages/core/src/components/fab/fab.wp.scss
View File

@ -23,7 +23,7 @@ $fab-wp-list-button-background-color: $fab-list-button-background-co
$fab-wp-list-button-text-color: color-contrast($colors-wp, $fab-wp-list-button-background-color) !default; $fab-wp-list-button-text-color: color-contrast($colors-wp, $fab-wp-list-button-background-color) !default;
/// @prop - Color of the button icon in a list /// @prop - Color of the button icon in a list
$fab-wp-list-icon-fill-color: $fab-wp-list-button-text-color !default; $fab-wp-list-button-icon-fill-color: $fab-wp-list-button-text-color !default;
/// @prop - Background color of the activated button in a list /// @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; $fab-wp-list-button-background-color-activated: color-shade($fab-wp-list-button-background-color) !default;
@ -68,7 +68,7 @@ $fab-wp-list-button-transition-delay: 10ms !default;
} }
.fab-wp-in-list .icon { .fab-wp-in-list .icon {
fill: $fab-wp-list-icon-fill-color; fill: $fab-wp-list-button-icon-fill-color;
} }

2
packages/core/src/components/fab/test/basic.html
View File

@ -10,7 +10,7 @@
<ion-app> <ion-app>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Header</ion-title> <ion-title>Floating Action Buttons</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>