From 11e8c7d0ab9c37dae60f7a64e33fb3da17e356ff Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 27 Jul 2017 14:59:54 -0400 Subject: [PATCH] fix(fab): fix the icon colors and fixed styles --- packages/core/src/components/fab/fab.ios.scss | 16 ++++++++--- packages/core/src/components/fab/fab.md.scss | 27 ++++++++++++++++++- packages/core/src/components/fab/fab.wp.scss | 22 +++++++++++++++ packages/core/src/components/fixed/fixed.tsx | 8 +++++- 4 files changed, 68 insertions(+), 5 deletions(-) diff --git a/packages/core/src/components/fab/fab.ios.scss b/packages/core/src/components/fab/fab.ios.scss index 2834b526db..d54d313bab 100755 --- a/packages/core/src/components/fab/fab.ios.scss +++ b/packages/core/src/components/fab/fab.ios.scss @@ -11,7 +11,7 @@ $fab-ios-background-color: color($colors-ios, primary) !d $fab-ios-text-color: color-contrast($colors-ios, $fab-ios-background-color) !default; /// @prop - Color of the button icon -$fab-ios-icon-color: color-contrast($colors-ios, $fab-ios-background-color) !default; +$fab-ios-icon-fill-color: $fab-ios-text-color !default; /// @prop - Background color of the activated button $fab-ios-background-color-activated: color-shade($fab-ios-background-color) !default; @@ -22,6 +22,9 @@ $fab-ios-list-button-background-color: $fab-list-button-background-co /// @prop - Text color of the button in a list $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; + /// @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; @@ -44,6 +47,13 @@ $fab-ios-list-button-transition-delay: 10ms !default; background-color: $fab-ios-background-color-activated; } +.fab-ios .icon { + fill: $fab-ios-icon-fill-color; +} + +// FAB buttons in a list +// -------------------------------------------------- + .fab-ios-in-list { color: $fab-ios-list-button-text-color; background-color: $fab-ios-list-button-background-color; @@ -56,8 +66,8 @@ $fab-ios-list-button-transition-delay: 10ms !default; background-color: $fab-ios-list-button-background-color-activated; } -.fab-ios .icon { - fill: $fab-ios-icon-color; +.fab-ios-in-list .icon { + fill: $fab-ios-list-icon-fill-color; } diff --git a/packages/core/src/components/fab/fab.md.scss b/packages/core/src/components/fab/fab.md.scss index 580312a489..db69d587da 100755 --- a/packages/core/src/components/fab/fab.md.scss +++ b/packages/core/src/components/fab/fab.md.scss @@ -16,6 +16,9 @@ $fab-md-background-color: color($colors-md, primary) !de /// @prop - Text color of the button $fab-md-text-color: color-contrast($colors-md, $fab-md-background-color) !default; +/// @prop - Color of the button icon +$fab-md-icon-fill-color: $fab-md-text-color !default; + /// @prop - Background color of the activated button $fab-md-background-color-activated: color-shade($fab-md-background-color) !default; @@ -25,6 +28,9 @@ $fab-md-list-button-background-color: $fab-list-button-background-co /// @prop - Text color of the button in a list $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; + /// @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; @@ -37,9 +43,11 @@ $fab-md-list-button-transition-timing-function: ease !default; /// @prop - Transition delay of the transform and opacity of the button in a list $fab-md-list-button-transition-delay: 10ms !default; +/// @prop - Transition duration of the box-shadow and background-color of the button $fab-button-md-transition-duration: 300ms !default; -$fab-button-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !default; +/// @prop - Speed curve of the transition of the box-shadow and background-color of the button +$fab-button-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !default; .fab-md { @@ -58,6 +66,14 @@ $fab-button-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !defau box-shadow: $fab-md-box-shadow-activated; } +.fab-md .icon { + fill: $fab-md-icon-fill-color; +} + + +// FAB buttons in a list +// -------------------------------------------------- + .fab-md-in-list { color: $fab-md-list-button-text-color; background-color: $fab-md-list-button-background-color; @@ -73,6 +89,11 @@ $fab-button-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !defau background-color: $fab-md-list-button-background-color-activated; } +.fab-md-in-list .icon { + fill: $fab-md-list-icon-fill-color; +} + + // Material Design FAB Ripple // -------------------------------------------------- @@ -95,6 +116,10 @@ $fab-button-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !defau background-color: $bg-color; } + .fab-md-#{$color-name} .icon { + fill: $fg-color; + } + .fab-md-#{$color-name}.activated { background-color: $bg-color-activated; } diff --git a/packages/core/src/components/fab/fab.wp.scss b/packages/core/src/components/fab/fab.wp.scss index fee699b283..bb134f0123 100755 --- a/packages/core/src/components/fab/fab.wp.scss +++ b/packages/core/src/components/fab/fab.wp.scss @@ -10,6 +10,9 @@ $fab-wp-background-color: color($colors-wp, primary) !de /// @prop - Text color of the button $fab-wp-text-color: color-contrast($colors-wp, $fab-wp-background-color) !default; +/// @prop - Color of the button icon +$fab-wp-icon-fill-color: $fab-wp-text-color !default; + /// @prop - Background color of the activated button $fab-wp-background-color-activated: color-shade($fab-wp-background-color) !default; @@ -19,6 +22,9 @@ $fab-wp-list-button-background-color: $fab-list-button-background-co /// @prop - Text color of the button in a list $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; + /// @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; @@ -41,6 +47,14 @@ $fab-wp-list-button-transition-delay: 10ms !default; background-color: $fab-wp-background-color-activated; } +.fab-wp .icon { + fill: $fab-wp-icon-fill-color; +} + + +// FAB buttons in a list +// -------------------------------------------------- + .fab-wp-in-list { color: $fab-wp-list-button-text-color; background-color: $fab-wp-list-button-background-color; @@ -53,6 +67,10 @@ $fab-wp-list-button-transition-delay: 10ms !default; background-color: $fab-wp-list-button-background-color-activated; } +.fab-wp-in-list .icon { + fill: $fab-wp-list-icon-fill-color; +} + // Generate WP FAB colors // -------------------------------------------------- @@ -68,6 +86,10 @@ $fab-wp-list-button-transition-delay: 10ms !default; background-color: $bg-color; } + .fab-wp-#{$color-name} .icon { + fill: $fg-color; + } + .fab-wp-#{$color-name}.activated { background-color: $bg-color-activated; } diff --git a/packages/core/src/components/fixed/fixed.tsx b/packages/core/src/components/fixed/fixed.tsx index 8475752803..64eb0b9989 100644 --- a/packages/core/src/components/fixed/fixed.tsx +++ b/packages/core/src/components/fixed/fixed.tsx @@ -4,7 +4,13 @@ import { getParentElement, getToolbarHeight } from '../../utils/helpers'; @Component({ tag: 'ion-fixed', - styleUrl: 'fixed.scss' + styleUrl: 'fixed.scss', + // TODO REMOVE when https://github.com/ionic-team/stencil/issues/52 is done + styleUrls: { + ios: 'fixed.scss', + md: 'fixed.scss', + wp: 'fixed.scss' + } }) export class Fixed { @Element() private el: HTMLElement;