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;
/// @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
$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 {
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;
/// @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
$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 {
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
$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;
/// @prop - Margin of the FAB Container
@ -51,12 +51,13 @@ $fab-list-button-background-color: #f4f4f4 !default;
flex: 1;
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);
width: $fab-mini-size;
@ -65,12 +66,8 @@ $fab-list-button-background-color: #f4f4f4 !default;
line-height: $fab-mini-size;
}
.fab[mini] .fab-close-icon {
line-height: $fab-mini-size;
}
// FAB container
// FAB Container
// --------------------------------------------------
ion-fab {
@ -128,7 +125,7 @@ ion-fab {
}
// FAB list (speed dial)
// FAB List (Speed Dial)
// --------------------------------------------------
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 {
@include position(0, 0, null, 0);
position: absolute;
height: 100%;
line-height: $fab-size;
opacity: 0;
transform: scale(.4) rotateZ(-45deg);
transition: all ease-in-out 300ms;
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 {
transition: all ease-in-out 300ms;
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;
/// @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
$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 {
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-header>
<ion-toolbar>
<ion-title>Header</ion-title>
<ion-title>Floating Action Buttons</ion-title>
</ion-toolbar>
</ion-header>