javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(ripple): css variable color

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-03-24 03:57:18 +01:00
parent 08f5976a57
commit 77fc792644
12 changed files with 11 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
core/scripts/theme-builder/src/theme-variables.ts
View File

@@ -242,6 +242,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [
{
property: '--ion-overlay-background-color'
},
{
property: '--ion-ripple-background-color'
},
{
property: '--ion-background-color',
quickPick: {

7
core/src/components/ripple-effect/ripple-effect.ios.scss
View File

@@ -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;
}

6
core/src/components/ripple-effect/ripple-effect.ios.vars.scss
View File

@@ -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;

7
core/src/components/ripple-effect/ripple-effect.md.scss
View File

@@ -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;
}

6
core/src/components/ripple-effect/ripple-effect.md.vars.scss
View File

@@ -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;

4
core/src/components/ripple-effect/ripple-effect.scss
View File

@@ -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;

8
core/src/components/ripple-effect/ripple-effect.tsx
View File

@@ -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 {

1
core/src/themes/css/default.css
View File

@@ -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;

2
core/src/themes/ionic.theme.default.ios.scss
View File

@@ -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;

2
core/src/themes/ionic.theme.default.md.scss
View File

@@ -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;

1
core/src/themes/ionic.theme.default.scss
View File

@@ -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
// --------------------------------------------------

1
core/stencil.config.js
View File

@@ -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'] },