From 77fc7926449c7c1e49af55cdd3343ed8a320529b Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Sat, 24 Mar 2018 03:57:18 +0100 Subject: [PATCH] feat(ripple): css variable color --- core/scripts/theme-builder/src/theme-variables.ts | 3 +++ core/src/components/ripple-effect/ripple-effect.ios.scss | 7 ------- .../components/ripple-effect/ripple-effect.ios.vars.scss | 6 ------ core/src/components/ripple-effect/ripple-effect.md.scss | 7 ------- .../components/ripple-effect/ripple-effect.md.vars.scss | 6 ------ core/src/components/ripple-effect/ripple-effect.scss | 4 +++- core/src/components/ripple-effect/ripple-effect.tsx | 8 +------- core/src/themes/css/default.css | 1 + core/src/themes/ionic.theme.default.ios.scss | 2 +- core/src/themes/ionic.theme.default.md.scss | 2 +- core/src/themes/ionic.theme.default.scss | 1 + core/stencil.config.js | 1 - 12 files changed, 11 insertions(+), 37 deletions(-) delete mode 100644 core/src/components/ripple-effect/ripple-effect.ios.scss delete mode 100644 core/src/components/ripple-effect/ripple-effect.ios.vars.scss delete mode 100644 core/src/components/ripple-effect/ripple-effect.md.scss delete mode 100644 core/src/components/ripple-effect/ripple-effect.md.vars.scss diff --git a/core/scripts/theme-builder/src/theme-variables.ts b/core/scripts/theme-builder/src/theme-variables.ts index df8b5b4b01b..6d0417c239f 100644 --- a/core/scripts/theme-builder/src/theme-variables.ts +++ b/core/scripts/theme-builder/src/theme-variables.ts @@ -242,6 +242,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [ { property: '--ion-overlay-background-color' }, + { + property: '--ion-ripple-background-color' + }, { property: '--ion-background-color', quickPick: { diff --git a/core/src/components/ripple-effect/ripple-effect.ios.scss b/core/src/components/ripple-effect/ripple-effect.ios.scss deleted file mode 100644 index 2ea7f845b54..00000000000 --- a/core/src/components/ripple-effect/ripple-effect.ios.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "./ripple-effect"; -@import "./ripple-effect.ios.vars"; - -// iOS Ripple Effect -.ripple-iod .ripple-effect { - background-color: $ripple-ios-background-color; -} diff --git a/core/src/components/ripple-effect/ripple-effect.ios.vars.scss b/core/src/components/ripple-effect/ripple-effect.ios.vars.scss deleted file mode 100644 index 34da65d47cb..00000000000 --- a/core/src/components/ripple-effect/ripple-effect.ios.vars.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "../../themes/ionic.globals.ios"; - -// iOS Ripple Effect - -/// @prop - Background color of the ripple -$ripple-ios-background-color: $text-ios-color; diff --git a/core/src/components/ripple-effect/ripple-effect.md.scss b/core/src/components/ripple-effect/ripple-effect.md.scss deleted file mode 100644 index 448afd1a4d6..00000000000 --- a/core/src/components/ripple-effect/ripple-effect.md.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "./ripple-effect"; -@import "./ripple-effect.md.vars"; - -// Material Design Ripple Effect -.ripple-md .ripple-effect { - background-color: $ripple-md-background-color; -} diff --git a/core/src/components/ripple-effect/ripple-effect.md.vars.scss b/core/src/components/ripple-effect/ripple-effect.md.vars.scss deleted file mode 100644 index 19e96ebc938..00000000000 --- a/core/src/components/ripple-effect/ripple-effect.md.vars.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "../../themes/ionic.globals.md"; - -// Material Design Ripple Effect - -/// @prop - Background color of the ripple -$ripple-md-background-color: $text-md-color; diff --git a/core/src/components/ripple-effect/ripple-effect.scss b/core/src/components/ripple-effect/ripple-effect.scss index 3fb88a4f68d..20fc29fbf38 100644 --- a/core/src/components/ripple-effect/ripple-effect.scss +++ b/core/src/components/ripple-effect/ripple-effect.scss @@ -1,4 +1,6 @@ @import "../../themes/ionic.globals"; +@import "../../themes/ionic.theme.default"; + // Material Design Ripple Effect // -------------------------------------------------- @@ -17,10 +19,10 @@ ion-ripple-effect { @include border-radius(50%); position: absolute; + background-color: $ripple-background-color; opacity: 0; will-change: transform, opacity; - pointer-events: none; animation-name: rippleAnimation; animation-duration: 200ms; diff --git a/core/src/components/ripple-effect/ripple-effect.tsx b/core/src/components/ripple-effect/ripple-effect.tsx index 3ec29e4ec57..3c44422f2f9 100644 --- a/core/src/components/ripple-effect/ripple-effect.tsx +++ b/core/src/components/ripple-effect/ripple-effect.tsx @@ -4,13 +4,7 @@ import { DomController } from '../../global/dom-controller'; @Component({ tag: 'ion-ripple-effect', - styleUrls: { - ios: 'ripple-effect.ios.scss', - md: 'ripple-effect.md.scss' - }, - host: { - theme: 'ripple' - } + styleUrl: 'ripple-effect.scss', }) export class RippleEffect { diff --git a/core/src/themes/css/default.css b/core/src/themes/css/default.css index fed50be282d..31ad3e5323b 100644 --- a/core/src/themes/css/default.css +++ b/core/src/themes/css/default.css @@ -69,6 +69,7 @@ --ion-color-dark-tint: #383838; --ion-backdrop-color: #000000; --ion-overlay-background-color: #fafafa; + --ion-ripple-background-color: #000000; --ion-background-color: #ffffff; --ion-background-color-rgb: 255,255,255; --ion-background-color-step-50: #f2f2f2; diff --git a/core/src/themes/ionic.theme.default.ios.scss b/core/src/themes/ionic.theme.default.ios.scss index 080772eb4db..044b214550c 100644 --- a/core/src/themes/ionic.theme.default.ios.scss +++ b/core/src/themes/ionic.theme.default.ios.scss @@ -22,7 +22,7 @@ $alpha-ios-border-high: css-var($alpha-border-high, alpha- $alpha-ios-disabled: css-var($alpha-disabled, alpha-ios-disabled) !default; $alpha-ios-focused: css-var($alpha-focused, alpha-ios-focused) !default; $alpha-ios-hover: css-var($alpha-hover, alpha-ios-hover) !default; -$alpha-ios-lowest: css-var($alpha-lowest, alpha-ios-lowest) !default +$alpha-ios-lowest: css-var($alpha-lowest, alpha-ios-lowest) !default; $alpha-ios-low: css-var($alpha-low, alpha-ios-low) !default; $alpha-ios-medium: css-var($alpha-medium, alpha-ios-medium) !default; $alpha-ios-high: css-var($alpha-high, alpha-ios-high) !default; diff --git a/core/src/themes/ionic.theme.default.md.scss b/core/src/themes/ionic.theme.default.md.scss index 8f3dfcabfa2..a62840bb4d1 100644 --- a/core/src/themes/ionic.theme.default.md.scss +++ b/core/src/themes/ionic.theme.default.md.scss @@ -22,7 +22,7 @@ $alpha-md-border-high: css-var($alpha-border-high, alpha-md-bor $alpha-md-disabled: css-var($alpha-disabled, alpha-md-disabled) !default; $alpha-md-focused: css-var(.1, alpha-md-focused) !default; $alpha-md-hover: css-var($alpha-hover, alpha-md-hover) !default; -$alpha-md-lowest: css-var($alpha-lowest, alpha-md-lowest) !default +$alpha-md-lowest: css-var($alpha-lowest, alpha-md-lowest) !default; $alpha-md-low: css-var($alpha-low, alpha-md-low) !default; $alpha-md-medium: css-var($alpha-medium, alpha-md-medium) !default; $alpha-md-high: css-var($alpha-high, alpha-md-high) !default; diff --git a/core/src/themes/ionic.theme.default.scss b/core/src/themes/ionic.theme.default.scss index 1676e8e8778..84dab1ba70f 100644 --- a/core/src/themes/ionic.theme.default.scss +++ b/core/src/themes/ionic.theme.default.scss @@ -167,6 +167,7 @@ $backdrop-color: css-var(#000, backdrop-color) !default; $border-color: css-var(#b2b2b2, border-color) !default; $box-shadow-color: css-var(#000, box-shadow-color) !default; $overlay-background-color: css-var(#fafafa, overlay-background-color) !default; +$ripple-background-color: css-var(#000, ripple-background-color) !default; // Default Tabs & Tab bar // -------------------------------------------------- diff --git a/core/stencil.config.js b/core/stencil.config.js index f37b4f4fdfc..bc8c4ac7071 100644 --- a/core/stencil.config.js +++ b/core/stencil.config.js @@ -21,7 +21,6 @@ exports.config = { { components: ['ion-loading', 'ion-loading-controller'] }, { components: ['ion-menu', 'ion-menu-controller', 'ion-menu-toggle', 'ion-menu-button'] }, { components: ['ion-modal', 'ion-modal-controller'] }, - { components: ['ion-nav', 'ion-back-button'] }, { components: ['ion-popover', 'ion-popover-controller'] }, { components: ['ion-radio', 'ion-radio-group'] }, { components: ['ion-reorder', 'ion-reorder-group'] },