mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 16:16:41 +08:00
chore(): prep move from ionic to core for use of vanilla
This commit is contained in:
Josh Thomas
253
packages/core/src/components/toggle/toggle.ios.scss
Normal file
253
packages/core/src/components/toggle/toggle.ios.scss
Normal file
@ -0,0 +1,253 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
@import "./toggle";
|
||||
|
||||
|
||||
// iOS Toggle
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Width of the toggle
|
||||
$toggle-ios-width: 51px !default;
|
||||
|
||||
/// @prop - Height of the toggle
|
||||
$toggle-ios-height: 32px !default;
|
||||
|
||||
/// @prop - Border width of the toggle
|
||||
$toggle-ios-border-width: 2px !default;
|
||||
|
||||
/// @prop - Border radius of the toggle
|
||||
$toggle-ios-border-radius: $toggle-ios-height / 2 !default;
|
||||
|
||||
/// @prop - Background color of the unchecked toggle
|
||||
$toggle-ios-background-color-off: $list-ios-background-color !default;
|
||||
|
||||
/// @prop - Border color of the unchecked toggle
|
||||
$toggle-ios-border-color-off: grayscale(lighten($list-ios-border-color, 11%)) !default;
|
||||
|
||||
/// @prop - Background color of the checked toggle
|
||||
$toggle-ios-background-color-on: color($colors-ios, primary) !default;
|
||||
|
||||
/// @prop - Width of the toggle handle
|
||||
$toggle-ios-handle-width: $toggle-ios-height - ($toggle-ios-border-width * 2) !default;
|
||||
|
||||
/// @prop - Height of the toggle handle
|
||||
$toggle-ios-handle-height: $toggle-ios-handle-width !default;
|
||||
|
||||
/// @prop - Border radius of the toggle handle
|
||||
$toggle-ios-handle-border-radius: $toggle-ios-handle-height / 2 !default;
|
||||
|
||||
/// @prop - Box shadow of the toggle handle
|
||||
$toggle-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1) !default;
|
||||
|
||||
/// @prop - Background color of the toggle handle
|
||||
$toggle-ios-handle-background-color: $toggle-ios-background-color-off !default;
|
||||
|
||||
/// @prop - Margin of the toggle handle
|
||||
$toggle-ios-media-margin: 0 !default;
|
||||
|
||||
/// @prop - Transition duration of the toggle icon
|
||||
$toggle-ios-transition-duration: 300ms !default;
|
||||
|
||||
/// @prop - Opacity of the disabled toggle
|
||||
$toggle-ios-disabled-opacity: .3 !default;
|
||||
|
||||
// deprecated
|
||||
$toggle-ios-item-left-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the toggle positioned on the start in an item
|
||||
$toggle-ios-item-start-padding-top: 6px !default;
|
||||
|
||||
/// @prop - Padding end of the toggle positioned on the start in an item
|
||||
$toggle-ios-item-start-padding-end: 16px !default;
|
||||
|
||||
/// @prop - Padding bottom of the toggle positioned on the start in an item
|
||||
$toggle-ios-item-start-padding-bottom: 5px !default;
|
||||
|
||||
/// @prop - Padding start of the toggle positioned on the start in an item
|
||||
$toggle-ios-item-start-padding-start: 0 !default;
|
||||
|
||||
// deprecated
|
||||
$toggle-ios-item-right-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the toggle positioned on the end in an item
|
||||
$toggle-ios-item-end-padding-top: 6px !default;
|
||||
|
||||
/// @prop - Padding end of the toggle positioned on the end in an item
|
||||
$toggle-ios-item-end-padding-end: ($item-ios-padding-end / 2) !default;
|
||||
|
||||
/// @prop - Padding bottom of the toggle positioned on the end in an item
|
||||
$toggle-ios-item-end-padding-bottom: 5px !default;
|
||||
|
||||
/// @prop - Padding start of the toggle positioned on the end in an item
|
||||
$toggle-ios-item-end-padding-start: $item-ios-padding-start !default;
|
||||
|
||||
// iOS Toggle
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios {
|
||||
position: relative;
|
||||
|
||||
width: $toggle-ios-width;
|
||||
height: $toggle-ios-height;
|
||||
|
||||
box-sizing: content-box;
|
||||
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Background Track: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios .toggle-icon {
|
||||
@include border-radius($toggle-ios-border-radius);
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: $toggle-ios-border-color-off;
|
||||
transition: background-color $toggle-ios-transition-duration;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Background Oval: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios .toggle-icon::before {
|
||||
@include position($toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width);
|
||||
@include border-radius($toggle-ios-border-radius);
|
||||
|
||||
position: absolute;
|
||||
|
||||
background-color: $toggle-ios-background-color-off;
|
||||
|
||||
content: "";
|
||||
transform: scale3d(1, 1, 1);
|
||||
transition: transform $toggle-ios-transition-duration;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Inner Knob: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios .toggle-inner {
|
||||
@include position($toggle-ios-border-width, null, null, $toggle-ios-border-width);
|
||||
@include border-radius($toggle-ios-handle-border-radius);
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: $toggle-ios-handle-width;
|
||||
height: $toggle-ios-handle-height;
|
||||
|
||||
background-color: $toggle-ios-handle-background-color;
|
||||
box-shadow: $toggle-ios-handle-box-shadow;
|
||||
|
||||
transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms;
|
||||
|
||||
will-change: transform;
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Background Track: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios.toggle-checked .toggle-icon {
|
||||
background-color: $toggle-ios-background-color-on;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Background Oval: Activated or Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios.toggle-activated .toggle-icon::before,
|
||||
.toggle-ios.toggle-checked .toggle-icon::before {
|
||||
transform: scale3d(0, 0, 0);
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Inner Knob: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios.toggle-checked .toggle-inner {
|
||||
@include transform(translate3d($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2), 0, 0));
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Background Oval: Activated and Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios.toggle-activated.toggle-checked .toggle-inner::before {
|
||||
transform: scale3d(0, 0, 0);
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Inner Knob: Activated and Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios.toggle-activated .toggle-inner {
|
||||
width: $toggle-ios-handle-width + 6;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Inner Knob: Activated and Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios.toggle-activated.toggle-checked .toggle-inner {
|
||||
// when pressing down on the toggle and IS checked
|
||||
// make the knob wider and move it left a bit
|
||||
@include position-horizontal($toggle-ios-border-width - 6, null);
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle: Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios.toggle-disabled,
|
||||
.item-ios.item-toggle-disabled ion-label {
|
||||
opacity: $toggle-ios-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item-ios .toggle-ios {
|
||||
@include margin($toggle-ios-media-margin);
|
||||
|
||||
@include deprecated-variable(padding, $toggle-ios-item-right-padding) {
|
||||
@include padding($toggle-ios-item-end-padding-top, $toggle-ios-item-end-padding-end, $toggle-ios-item-end-padding-bottom, $toggle-ios-item-end-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
.item-ios .toggle-ios[slot="start"] {
|
||||
@include deprecated-variable(padding, $toggle-ios-item-left-padding) {
|
||||
@include padding($toggle-ios-item-start-padding-top, $toggle-ios-item-start-padding-end, $toggle-ios-item-start-padding-bottom, $toggle-ios-item-start-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin ios-toggle-theme($color-name, $color-base) {
|
||||
|
||||
.toggle-ios-#{$color-name}.toggle-checked .toggle-icon {
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Toggle Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
||||
@include ios-toggle-theme($color-name, $color-base);
|
||||
}
|
||||
251
packages/core/src/components/toggle/toggle.md.scss
Normal file
251
packages/core/src/components/toggle/toggle.md.scss
Normal file
@ -0,0 +1,251 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
@import "./toggle";
|
||||
|
||||
|
||||
// Material Design Toggle
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Color of the active toggle
|
||||
$toggle-md-active-color: color($colors-md, primary) !default;
|
||||
|
||||
/// @prop - Width of the toggle track
|
||||
$toggle-md-track-width: 36px !default;
|
||||
|
||||
/// @prop - Height of the toggle track
|
||||
$toggle-md-track-height: 14px !default;
|
||||
|
||||
/// @prop - Background color of the toggle track
|
||||
$toggle-md-track-background-color-off: $list-md-border-color !default;
|
||||
|
||||
/// @prop - Background color of the checked toggle track
|
||||
$toggle-md-track-background-color-on: lighten($toggle-md-active-color, 25%) !default;
|
||||
|
||||
/// @prop - Width of the toggle handle
|
||||
$toggle-md-handle-width: 20px !default;
|
||||
|
||||
/// @prop - Height of the toggle handle
|
||||
$toggle-md-handle-height: 20px !default;
|
||||
|
||||
/// @prop - Border radius of the toggle handle
|
||||
$toggle-md-handle-border-radius: 50% !default;
|
||||
|
||||
/// @prop - Box shadow of the toggle handle
|
||||
$toggle-md-handle-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
|
||||
|
||||
/// @prop - Background color of the toggle handle
|
||||
$toggle-md-handle-background-color-off: $background-md-color !default;
|
||||
|
||||
/// @prop - Background color of the checked toggle handle
|
||||
$toggle-md-handle-background-color-on: $toggle-md-active-color !default;
|
||||
|
||||
// deprecated
|
||||
$toggle-md-media-margin: null !default;
|
||||
|
||||
/// @prop - Margin top of the toggle
|
||||
$toggle-md-media-margin-top: 0 !default;
|
||||
|
||||
/// @prop - Margin end of the toggle
|
||||
$toggle-md-media-margin-end: $toggle-md-media-margin-top !default;
|
||||
|
||||
/// @prop - Margin bottom of the toggle
|
||||
$toggle-md-media-margin-bottom: $toggle-md-media-margin-top !default;
|
||||
|
||||
/// @prop - Margin start of the toggle
|
||||
$toggle-md-media-margin-start: $toggle-md-media-margin-end !default;
|
||||
|
||||
/// @prop - Transition duration of the toggle icon
|
||||
$toggle-md-transition-duration: 300ms !default;
|
||||
|
||||
/// @prop - Opacity of the disabled toggle
|
||||
$toggle-md-disabled-opacity: .3 !default;
|
||||
|
||||
// deprecated
|
||||
$toggle-md-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of standalone toggle
|
||||
$toggle-md-padding-top: 12px !default;
|
||||
|
||||
/// @prop - Padding end of standalone toggle
|
||||
$toggle-md-padding-end: $toggle-md-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of standalone toggle
|
||||
$toggle-md-padding-bottom: $toggle-md-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of standalone toggle
|
||||
$toggle-md-padding-start: $toggle-md-padding-end !default;
|
||||
|
||||
// deprecated
|
||||
$toggle-md-item-left-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the toggle positioned on the start in an item
|
||||
$toggle-md-item-start-padding-top: 12px !default;
|
||||
|
||||
/// @prop - Padding end of the toggle positioned on the start in an item
|
||||
$toggle-md-item-start-padding-end: 18px !default;
|
||||
|
||||
/// @prop - Padding bottom of the toggle positioned on the start in an item
|
||||
$toggle-md-item-start-padding-bottom: 12px !default;
|
||||
|
||||
/// @prop - Padding start the toggle positioned on the start in an item
|
||||
$toggle-md-item-start-padding-start: 2px !default;
|
||||
|
||||
// deprecated
|
||||
$toggle-md-item-right-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the toggle positioned on the end in an item
|
||||
$toggle-md-item-end-padding-top: 12px !default;
|
||||
|
||||
/// @prop - Padding end of the toggle positioned on the end in an item
|
||||
$toggle-md-item-end-padding-end: ($item-md-padding-end / 2) !default;
|
||||
|
||||
/// @prop - Padding bottom of the toggle positioned on the end in an item
|
||||
$toggle-md-item-end-padding-bottom: 12px !default;
|
||||
|
||||
/// @prop - Padding start of the toggle positioned on the end in an item
|
||||
$toggle-md-item-end-padding-start: $item-md-padding-start !default;
|
||||
|
||||
// Material Design Toggle
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-md {
|
||||
position: relative;
|
||||
|
||||
width: $toggle-md-track-width;
|
||||
height: $toggle-md-track-height;
|
||||
|
||||
box-sizing: content-box;
|
||||
|
||||
contain: strict;
|
||||
|
||||
@include deprecated-variable(padding, $toggle-md-padding) {
|
||||
@include padding($toggle-md-padding-top, $toggle-md-padding-end, $toggle-md-padding-bottom, $toggle-md-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toggle Background Track: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-md .toggle-icon {
|
||||
@include border-radius($toggle-md-track-height);
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: $toggle-md-track-background-color-off;
|
||||
|
||||
transition: background-color $toggle-md-transition-duration;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toggle Inner Knob: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-md .toggle-inner {
|
||||
@include position(($toggle-md-handle-height - $toggle-md-track-height) / -2, null, null, 0);
|
||||
@include border-radius($toggle-md-handle-border-radius);
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: $toggle-md-handle-width;
|
||||
height: $toggle-md-handle-height;
|
||||
|
||||
background-color: $toggle-md-handle-background-color-off;
|
||||
|
||||
box-shadow: $toggle-md-handle-box-shadow;
|
||||
|
||||
transition-duration: $toggle-md-transition-duration;
|
||||
transition-property: transform, background-color;
|
||||
|
||||
will-change: transform, background-color;
|
||||
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toggle Background Track: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-md.toggle-checked .toggle-icon {
|
||||
background-color: $toggle-md-track-background-color-on;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toggle Inner Knob: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-md.toggle-checked .toggle-inner {
|
||||
@include transform(translate3d($toggle-md-track-width - $toggle-md-handle-width, 0, 0));
|
||||
|
||||
background-color: $toggle-md-handle-background-color-on;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toggle: Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-md.toggle-disabled,
|
||||
.item-md.item-toggle-disabled ion-label {
|
||||
opacity: $toggle-md-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toggle-md.toggle-disabled ion-radio {
|
||||
opacity: $toggle-md-disabled-opacity;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toggle Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item-md .toggle-md {
|
||||
cursor: pointer;
|
||||
|
||||
@include deprecated-variable(margin, $toggle-md-media-margin) {
|
||||
@include margin($toggle-md-media-margin-top, $toggle-md-media-margin-end, $toggle-md-media-margin-bottom, $toggle-md-media-margin-start);
|
||||
}
|
||||
|
||||
@include deprecated-variable(padding, $toggle-md-item-right-padding) {
|
||||
@include padding($toggle-md-item-end-padding-top, $toggle-md-item-end-padding-end, $toggle-md-item-end-padding-bottom, $toggle-md-item-end-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
.item-md .toggle-md[slot="start"] {
|
||||
@include deprecated-variable(padding, $toggle-md-item-left-padding) {
|
||||
@include padding($toggle-md-item-start-padding-top, $toggle-md-item-start-padding-end, $toggle-md-item-start-padding-bottom, $toggle-md-item-start-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
.item-md.item-toggle ion-label {
|
||||
@include margin-horizontal(0, null);
|
||||
}
|
||||
|
||||
|
||||
// Material Design Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin toggle-theme-md($color-name, $color-base) {
|
||||
|
||||
.toggle-md-#{$color-name}.toggle-checked .toggle-icon {
|
||||
background-color: lighten($color-base, 25%);
|
||||
}
|
||||
|
||||
.toggle-md-#{$color-name}.toggle-checked .toggle-inner {
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Toggle Auxiliary Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
@include toggle-theme-md($color-name, $color-base);
|
||||
}
|
||||
43
packages/core/src/components/toggle/toggle.scss
Normal file
43
packages/core/src/components/toggle/toggle.scss
Normal file
@ -0,0 +1,43 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
|
||||
// Toggle
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-toggle {
|
||||
display: inline-block;
|
||||
|
||||
contain: content;
|
||||
}
|
||||
|
||||
ion-toggle ion-gesture {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
visibility: inherit;
|
||||
}
|
||||
|
||||
.toggle-cover {
|
||||
@include position-horizontal(0, null);
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 0;
|
||||
outline: none;
|
||||
|
||||
font-family: inherit;
|
||||
font-style: inherit;
|
||||
font-variant: inherit;
|
||||
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
181
packages/core/src/components/toggle/toggle.tsx
Normal file
181
packages/core/src/components/toggle/toggle.tsx
Normal file
@ -0,0 +1,181 @@
|
||||
import { Component, h, Listen, Prop, Watch, VNodeData, Ionic } from '@stencil/core';
|
||||
import { BooleanInputComponent, GestureDetail } from '../../utils/interfaces';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-toggle',
|
||||
styleUrls: {
|
||||
ios: 'toggle.ios.scss',
|
||||
md: 'toggle.md.scss',
|
||||
wp: 'toggle.wp.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'toggle'
|
||||
}
|
||||
})
|
||||
export class Toggle implements BooleanInputComponent {
|
||||
activated: boolean = false;
|
||||
hasFocus: boolean = false;
|
||||
id: string;
|
||||
labelId: string;
|
||||
startX: number;
|
||||
styleTmr: any;
|
||||
|
||||
@Prop() color: string;
|
||||
@Prop() mode: string;
|
||||
|
||||
@Prop({ twoWay: true }) checked: boolean = false;
|
||||
@Prop({ twoWay: true }) disabled: boolean = false;
|
||||
@Prop({ twoWay: true }) value: string;
|
||||
|
||||
|
||||
ionViewWillLoad() {
|
||||
this.emitStyle();
|
||||
}
|
||||
|
||||
@Watch('checked')
|
||||
changed(val: boolean) {
|
||||
Ionic.emit(this, 'ionChange', { detail: { checked: val } });
|
||||
this.emitStyle();
|
||||
}
|
||||
|
||||
@Watch('disabled')
|
||||
disableChanged() {
|
||||
this.emitStyle();
|
||||
}
|
||||
|
||||
private emitStyle() {
|
||||
clearTimeout(this.styleTmr);
|
||||
|
||||
this.styleTmr = setTimeout(() => {
|
||||
Ionic.emit(this, 'ionStyle', {
|
||||
detail: {
|
||||
'toggle-disabled': this.disabled,
|
||||
'toggle-checked': this.checked,
|
||||
'toggle-activated': this.activated,
|
||||
'toggle-focus': this.hasFocus
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private canStart() {
|
||||
return !this.disabled;
|
||||
}
|
||||
|
||||
|
||||
private onDragStart(detail: GestureDetail) {
|
||||
this.startX = detail.startX;
|
||||
this.fireFocus();
|
||||
}
|
||||
|
||||
|
||||
private onDragMove(detail: GestureDetail) {
|
||||
if (this.checked) {
|
||||
if (detail.currentX + 15 < this.startX) {
|
||||
this.checked = false;
|
||||
this.activated = true;
|
||||
this.startX = detail.currentX;
|
||||
}
|
||||
|
||||
} else if (detail.currentX - 15 > this.startX) {
|
||||
this.checked = true;
|
||||
this.activated = (detail.currentX < this.startX + 5);
|
||||
this.startX = detail.currentX;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private onDragEnd(detail: GestureDetail) {
|
||||
if (this.checked) {
|
||||
if (detail.startX + 4 > detail.currentX) {
|
||||
this.checked = false;
|
||||
}
|
||||
|
||||
} else if (detail.startX - 4 < detail.currentX) {
|
||||
this.checked = true;
|
||||
}
|
||||
|
||||
this.activated = false;
|
||||
this.fireBlur();
|
||||
this.startX = null;
|
||||
}
|
||||
|
||||
|
||||
@Listen('keydown.space')
|
||||
onSpace(ev: KeyboardEvent) {
|
||||
this.toggle();
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
}
|
||||
|
||||
toggle() {
|
||||
if (!this.disabled) {
|
||||
this.checked = !this.checked;
|
||||
this.fireFocus();
|
||||
}
|
||||
return this.checked;
|
||||
}
|
||||
|
||||
|
||||
fireFocus() {
|
||||
if (!this.hasFocus) {
|
||||
this.hasFocus = true;
|
||||
Ionic.emit(this, 'ionFocus');
|
||||
this.emitStyle();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
fireBlur() {
|
||||
if (this.hasFocus) {
|
||||
this.hasFocus = false;
|
||||
Ionic.emit(this, 'ionBlur');
|
||||
this.emitStyle();
|
||||
}
|
||||
}
|
||||
|
||||
hostData(): VNodeData {
|
||||
return {
|
||||
class: {
|
||||
'toggle-activated': this.activated,
|
||||
'toggle-checked': this.checked,
|
||||
'toggle-disabled': this.disabled
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ion-gesture props={{
|
||||
'canStart': this.canStart.bind(this),
|
||||
'onStart': this.onDragStart.bind(this),
|
||||
'onMove': this.onDragMove.bind(this),
|
||||
'onEnd': this.onDragEnd.bind(this),
|
||||
'onPress': this.toggle.bind(this),
|
||||
'gestureName': 'toggle',
|
||||
'gesturePriority': 30,
|
||||
'type': 'pan,press',
|
||||
'direction': 'x',
|
||||
'threshold': 20,
|
||||
'attachTo': 'parent'
|
||||
}}>
|
||||
<div class='toggle-icon'>
|
||||
<div class='toggle-inner'></div>
|
||||
</div>
|
||||
<div
|
||||
class='toggle-cover'
|
||||
attrs={{
|
||||
'id': this.id,
|
||||
'aria-checked': this.checked ? 'true' : false,
|
||||
'aria-disabled': this.disabled ? 'true' : false,
|
||||
'aria-labelledby': this.labelId,
|
||||
'role': 'checkbox',
|
||||
'tabindex': 0
|
||||
}}
|
||||
>
|
||||
</div>
|
||||
</ion-gesture>
|
||||
);
|
||||
}
|
||||
}
|
||||
233
packages/core/src/components/toggle/toggle.wp.scss
Normal file
233
packages/core/src/components/toggle/toggle.wp.scss
Normal file
@ -0,0 +1,233 @@
|
||||
@import "../../themes/ionic.globals.wp";
|
||||
@import "./toggle";
|
||||
|
||||
|
||||
// Windows Toggle
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Color of the toggle
|
||||
$toggle-wp-inactive-color: #323232 !default;
|
||||
|
||||
/// @prop - Color of the checked toggle
|
||||
$toggle-wp-active-color: color($colors-wp, primary) !default;
|
||||
|
||||
/// @prop - Width of the toggle track
|
||||
$toggle-wp-track-width: 40px !default;
|
||||
|
||||
/// @prop - Height of the toggle track
|
||||
$toggle-wp-track-height: 18px !default;
|
||||
|
||||
/// @prop - Background color of the toggle track
|
||||
$toggle-wp-track-background-color-off: transparent !default;
|
||||
|
||||
/// @prop - Background color of the checked toggle track
|
||||
$toggle-wp-track-background-color-on: $toggle-wp-active-color !default;
|
||||
|
||||
/// @prop - Border width of the toggle track
|
||||
$toggle-wp-track-border-width: 2px !default;
|
||||
|
||||
/// @prop - Border color of the toggle track
|
||||
$toggle-wp-track-border-color-off: $toggle-wp-inactive-color !default;
|
||||
|
||||
/// @prop - Border color of the checked toggle track
|
||||
$toggle-wp-track-border-color-on: $toggle-wp-active-color !default;
|
||||
|
||||
/// @prop - Width of the toggle handle
|
||||
$toggle-wp-handle-width: 10px !default;
|
||||
|
||||
/// @prop - Height of the toggle handle
|
||||
$toggle-wp-handle-height: 10px !default;
|
||||
|
||||
/// @prop - Top of the toggle handle
|
||||
$toggle-wp-handle-top: 2px !default;
|
||||
|
||||
/// @prop - Left of the toggle handle
|
||||
$toggle-wp-handle-left: 2px !default;
|
||||
|
||||
/// @prop - Border radius of the toggle handle
|
||||
$toggle-wp-handle-border-radius: 50% !default;
|
||||
|
||||
/// @prop - Background color of the toggle handle
|
||||
$toggle-wp-handle-background-color-off: $toggle-wp-inactive-color !default;
|
||||
|
||||
/// @prop - Background color of the checked toggle handle
|
||||
$toggle-wp-handle-background-color-on: color-contrast($colors-wp, $toggle-wp-active-color) !default;
|
||||
|
||||
/// @prop - Margin of the toggle
|
||||
$toggle-wp-media-margin: 0 !default;
|
||||
|
||||
/// @prop - Transition duration of the toggle icon
|
||||
$toggle-wp-transition-duration: 300ms !default;
|
||||
|
||||
/// @prop - Opacity of the disabled toggle
|
||||
$toggle-wp-disabled-opacity: .3 !default;
|
||||
|
||||
// deprecated
|
||||
$toggle-wp-item-left-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the toggle positioned on the start in an item
|
||||
$toggle-wp-item-start-padding-top: 12px !default;
|
||||
|
||||
/// @prop - Padding end of the toggle positioned on the start in an item
|
||||
$toggle-wp-item-start-padding-end: 18px !default;
|
||||
|
||||
/// @prop - Padding bottom of the toggle positioned on the start in an item
|
||||
$toggle-wp-item-start-padding-bottom: 12px !default;
|
||||
|
||||
/// @prop - Padding start the toggle positioned on the start in an item
|
||||
$toggle-wp-item-start-padding-start: 2px !default;
|
||||
|
||||
// deprecated
|
||||
$toggle-wp-item-right-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the toggle positioned on the end in an item
|
||||
$toggle-wp-item-end-padding-top: 12px !default;
|
||||
|
||||
/// @prop - Padding end of the toggle positioned on the end in an item
|
||||
$toggle-wp-item-end-padding-end: ($item-wp-padding-end / 2) !default;
|
||||
|
||||
/// @prop - Padding bottom of the toggle positioned on the end in an item
|
||||
$toggle-wp-item-end-padding-bottom: 12px !default;
|
||||
|
||||
/// @prop - Padding start of the toggle positioned on the end in an item
|
||||
$toggle-wp-item-end-padding-start: $item-wp-padding-start !default;
|
||||
|
||||
// Windows Toggle
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-wp {
|
||||
position: relative;
|
||||
|
||||
width: $toggle-wp-track-width;
|
||||
height: $toggle-wp-track-height;
|
||||
|
||||
box-sizing: content-box;
|
||||
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
|
||||
// Windows Toggle Background Track: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-wp .toggle-icon {
|
||||
@include border-radius($toggle-wp-track-height);
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: $toggle-wp-track-border-width solid $toggle-wp-track-border-color-off;
|
||||
background-color: $toggle-wp-track-background-color-off;
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
|
||||
// Windows Toggle Inner Knob: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-wp .toggle-inner {
|
||||
@include position($toggle-wp-handle-top, null, null, $toggle-wp-handle-left);
|
||||
@include border-radius($toggle-wp-handle-border-radius);
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: $toggle-wp-handle-width;
|
||||
height: $toggle-wp-handle-height;
|
||||
|
||||
background-color: $toggle-wp-handle-background-color-off;
|
||||
|
||||
transition-duration: $toggle-wp-transition-duration;
|
||||
transition-property: transform, background-color;
|
||||
|
||||
will-change: transform, background-color;
|
||||
}
|
||||
|
||||
|
||||
// Windows Toggle Background Track: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-wp.toggle-checked .toggle-icon {
|
||||
border-color: $toggle-wp-track-background-color-on;
|
||||
background-color: $toggle-wp-track-background-color-on;
|
||||
}
|
||||
|
||||
|
||||
// Windows Toggle Inner Knob: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-wp.toggle-checked .toggle-inner {
|
||||
@include transform(translate3d($toggle-wp-track-width - $toggle-wp-handle-width - ($toggle-wp-track-border-width * 2) - ($toggle-wp-handle-left * 2), 0, 0));
|
||||
|
||||
background-color: $toggle-wp-handle-background-color-on;
|
||||
}
|
||||
|
||||
|
||||
// Windows Toggle: Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-wp.toggle-disabled,
|
||||
.item-wp.item-toggle-disabled ion-label {
|
||||
opacity: $toggle-wp-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toggle-wp.toggle-disabled ion-radio {
|
||||
opacity: $toggle-wp-disabled-opacity;
|
||||
}
|
||||
|
||||
|
||||
// Windows Toggle Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item-wp .toggle-wp {
|
||||
@include margin($toggle-wp-media-margin);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
@include deprecated-variable(padding, $toggle-wp-item-right-padding) {
|
||||
@include padding($toggle-wp-item-end-padding-top, $toggle-wp-item-end-padding-end, $toggle-wp-item-end-padding-bottom, $toggle-wp-item-end-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
.item-wp .toggle-wp[slot="start"] {
|
||||
@include deprecated-variable(padding, $toggle-wp-item-left-padding) {
|
||||
@include padding($toggle-wp-item-start-padding-top, $toggle-wp-item-start-padding-end, $toggle-wp-item-start-padding-bottom, $toggle-wp-item-start-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
.item-wp.item-toggle ion-label {
|
||||
@include margin-horizontal(0, null);
|
||||
}
|
||||
|
||||
|
||||
// Windows Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin toggle-theme-wp($color-name, $color-base, $color-contrast) {
|
||||
|
||||
.toggle-wp-#{$color-name}.toggle-checked .toggle-icon {
|
||||
border-color: $color-base;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
.toggle-wp-#{$color-name}.toggle-checked .toggle-inner {
|
||||
background-color: $color-contrast;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate Windows Toggle Auxiliary Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
|
||||
|
||||
@include toggle-theme-wp($color-name, $color-base, $color-contrast);
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user