From d06563e7a26d440e884fbdeb8996d2f87c5f06aa Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 28 Jul 2017 16:30:07 -0400 Subject: [PATCH] fix(fab): position icons properly and rename sass variables --- packages/core/src/components/fab/fab.ios.scss | 4 +- packages/core/src/components/fab/fab.md.scss | 4 +- packages/core/src/components/fab/fab.scss | 38 +++++++++++-------- packages/core/src/components/fab/fab.wp.scss | 4 +- .../core/src/components/fab/test/basic.html | 2 +- 5 files changed, 30 insertions(+), 22 deletions(-) diff --git a/packages/core/src/components/fab/fab.ios.scss b/packages/core/src/components/fab/fab.ios.scss index d54d313bab..a7f0efbf0d 100755 --- a/packages/core/src/components/fab/fab.ios.scss +++ b/packages/core/src/components/fab/fab.ios.scss @@ -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; } diff --git a/packages/core/src/components/fab/fab.md.scss b/packages/core/src/components/fab/fab.md.scss index db69d587da..8c5515c1eb 100755 --- a/packages/core/src/components/fab/fab.md.scss +++ b/packages/core/src/components/fab/fab.md.scss @@ -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; } diff --git a/packages/core/src/components/fab/fab.scss b/packages/core/src/components/fab/fab.scss index 02ec0931a4..0628171742 100755 --- a/packages/core/src/components/fab/fab.scss +++ b/packages/core/src/components/fab/fab.scss @@ -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; diff --git a/packages/core/src/components/fab/fab.wp.scss b/packages/core/src/components/fab/fab.wp.scss index bb134f0123..871c3dfe68 100755 --- a/packages/core/src/components/fab/fab.wp.scss +++ b/packages/core/src/components/fab/fab.wp.scss @@ -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; } diff --git a/packages/core/src/components/fab/test/basic.html b/packages/core/src/components/fab/test/basic.html index 8ab83530af..d900e7aa69 100644 --- a/packages/core/src/components/fab/test/basic.html +++ b/packages/core/src/components/fab/test/basic.html @@ -10,7 +10,7 @@ - Header + Floating Action Buttons