mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
refactor(components): update to use shadow DOM and work with css variables
- updates components to use shadow DOM or scoped if they require css variables - moves global styles to an external stylesheet that needs to be imported - adds support for additional colors and removes the Sass loops to generate colors for each component - several property renames, bug fixes, and test updates Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com> Co-authored-by: Adam Bradley <adambradley25@gmail.com> Co-authored-by: Cam Wiegert <cam@camwiegert.com>
This commit is contained in:
Brandy Carney
@ -1,82 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Toggle - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Toggle - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Toggle - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content">
|
||||
<ion-content id="content">
|
||||
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-label>Apple</ion-label>
|
||||
<ion-toggle slot="start" name="apple" checked></ion-toggle>
|
||||
</ion-item>
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-label>Apple</ion-label>
|
||||
<ion-toggle slot="start" name="apple" checked></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Banana</ion-label>
|
||||
<ion-toggle slot="start" name="banana" checked></ion-toggle>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Banana</ion-label>
|
||||
<ion-toggle slot="start" name="banana" checked></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Cherry, disabled</ion-label>
|
||||
<ion-toggle slot="start" color="danger" name="cherry" disabled></ion-toggle>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Cherry, disabled</ion-label>
|
||||
<ion-toggle slot="start" color="danger" name="cherry" disabled></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Grape, checked, disabled</ion-label>
|
||||
<ion-toggle slot="start" id="grapeChecked" name="grape" checked disabled></ion-toggle>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Grape, checked, disabled</ion-label>
|
||||
<ion-toggle slot="start" id="grapeChecked" name="grape" checked disabled></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Kiwi, (ionChange) Secondary color</ion-label>
|
||||
<ion-toggle slot="start" color="secondary" (ionChange)="kiwiChange($event)"></ion-toggle>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Kiwi, (ionChange) Secondary color</ion-label>
|
||||
<ion-toggle slot="start" color="secondary" (ionChange)="kiwiChange($event)"></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Strawberry, (ionChange) checked="true"</ion-label>
|
||||
<ion-toggle slot="start" color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-toggle>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Strawberry, (ionChange) checked="true"</ion-label>
|
||||
<ion-toggle slot="start" color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
|
||||
<ion-toggle slot="end" color="danger" checked></ion-toggle>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
|
||||
<ion-toggle slot="end" color="danger" checked></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Checkbox right side</ion-label>
|
||||
<ion-toggle slot="end" checked></ion-toggle>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Checkbox right side</ion-label>
|
||||
<ion-toggle slot="end" checked></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Button w/ right side default icon, really long text that should ellipsis</ion-label>
|
||||
<ion-icon name="information-circle" slot="end"></ion-icon>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Button w/ right side default icon, really long text that should ellipsis</ion-label>
|
||||
<ion-icon name="information-circle" slot="end"></ion-icon>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
</ion-list>
|
||||
|
||||
|
||||
<p aria-hidden="true" text-center>
|
||||
<ion-button onClick="toggleBoolean('grapeChecked', 'checked')" fill="outline" size="small">Grape Checked</ion-button>
|
||||
<ion-button onClick="toggleBoolean('grapeChecked', 'disabled')" fill="outline" size="small">Grape Disabled</ion-button>
|
||||
<ion-button onClick="printForm()" fill="outline" size="small">Print Form</ion-button>
|
||||
</p>
|
||||
<p aria-hidden="true" text-center>
|
||||
<ion-button onClick="toggleBoolean('grapeChecked', 'checked')" fill="outline" size="small">Grape Checked</ion-button>
|
||||
<ion-button onClick="toggleBoolean('grapeChecked', 'disabled')" fill="outline" size="small">Grape Disabled</ion-button>
|
||||
<ion-button onClick="printForm()" fill="outline" size="small">Print Form</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-toggle id="standAloneChecked"></ion-toggle>
|
||||
Stand-alone toggle: <span id="standAloneCheckedSpan"></span>
|
||||
</p>
|
||||
</ion-content>
|
||||
<p>
|
||||
<ion-toggle id="standAloneChecked"></ion-toggle>
|
||||
Stand-alone toggle:
|
||||
<span id="standAloneCheckedSpan"></span>
|
||||
</p>
|
||||
</ion-content>
|
||||
|
||||
<script>
|
||||
function printForm(ev) {
|
||||
@ -94,7 +98,5 @@
|
||||
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,82 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Toggle</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Toggle</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Toggle</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content">
|
||||
<ion-content id="content">
|
||||
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-label>Apple</ion-label>
|
||||
<ion-toggle slot="start" name="apple" checked></ion-toggle>
|
||||
</ion-item>
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-label>Apple</ion-label>
|
||||
<ion-toggle slot="start" name="apple" checked></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Banana</ion-label>
|
||||
<ion-toggle slot="start" name="banana" checked></ion-toggle>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Banana</ion-label>
|
||||
<ion-toggle slot="start" name="banana" checked></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Cherry, disabled</ion-label>
|
||||
<ion-toggle slot="start" color="danger" name="cherry" disabled></ion-toggle>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Cherry, disabled</ion-label>
|
||||
<ion-toggle slot="start" color="danger" name="cherry" disabled></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Grape, checked, disabled</ion-label>
|
||||
<ion-toggle slot="start" id="grapeChecked" name="grape" checked disabled></ion-toggle>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Grape, checked, disabled</ion-label>
|
||||
<ion-toggle slot="start" id="grapeChecked" name="grape" checked disabled></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Kiwi, (ionChange) Secondary color</ion-label>
|
||||
<ion-toggle slot="start" color="secondary" (ionChange)="kiwiChange($event)"></ion-toggle>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Kiwi, (ionChange) Secondary color</ion-label>
|
||||
<ion-toggle slot="start" color="secondary" (ionChange)="kiwiChange($event)"></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Strawberry, (ionChange) checked="true"</ion-label>
|
||||
<ion-toggle slot="start" color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-toggle>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Strawberry, (ionChange) checked="true"</ion-label>
|
||||
<ion-toggle slot="start" color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
|
||||
<ion-toggle slot="end" color="danger" checked></ion-toggle>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
|
||||
<ion-toggle slot="end" color="danger" checked></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Checkbox right side</ion-label>
|
||||
<ion-toggle slot="end" checked></ion-toggle>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Checkbox right side</ion-label>
|
||||
<ion-toggle slot="end" checked></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Button w/ right side default icon, really long text that should ellipsis</ion-label>
|
||||
<ion-icon name="information-circle" slot="end"></ion-icon>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Button w/ right side default icon, really long text that should ellipsis</ion-label>
|
||||
<ion-icon name="information-circle" slot="end"></ion-icon>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
</ion-list>
|
||||
|
||||
|
||||
<p aria-hidden="true" text-center>
|
||||
<ion-button onClick="toggleBoolean('grapeChecked', 'checked')" fill="outline" size="small">Grape Checked</ion-button>
|
||||
<ion-button onClick="toggleBoolean('grapeChecked', 'disabled')" fill="outline" size="small">Grape Disabled</ion-button>
|
||||
<ion-button onClick="printForm()" fill="outline" size="small">Print Form</ion-button>
|
||||
</p>
|
||||
<p aria-hidden="true" text-center>
|
||||
<ion-button onClick="toggleBoolean('grapeChecked', 'checked')" fill="outline" size="small">Grape Checked</ion-button>
|
||||
<ion-button onClick="toggleBoolean('grapeChecked', 'disabled')" fill="outline" size="small">Grape Disabled</ion-button>
|
||||
<ion-button onClick="printForm()" fill="outline" size="small">Print Form</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-toggle id="standAloneChecked"></ion-toggle>
|
||||
Stand-alone toggle: <span id="standAloneCheckedSpan"></span>
|
||||
</p>
|
||||
</ion-content>
|
||||
<p>
|
||||
<ion-toggle id="standAloneChecked"></ion-toggle>
|
||||
Stand-alone toggle:
|
||||
<span id="standAloneCheckedSpan"></span>
|
||||
</p>
|
||||
</ion-content>
|
||||
|
||||
<script>
|
||||
function printForm(ev) {
|
||||
@ -94,7 +98,5 @@
|
||||
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<title>Toggle - Standalone</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
// iOS Toggle
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios {
|
||||
:host {
|
||||
box-sizing: content-box;
|
||||
position: relative;
|
||||
|
||||
@ -12,13 +12,16 @@
|
||||
height: $toggle-ios-height;
|
||||
|
||||
contain: strict;
|
||||
|
||||
--checked-background: #{current-color(base)};
|
||||
--checked-knob: #{current-color(base)};
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Background Track: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios .toggle-icon {
|
||||
.toggle-icon {
|
||||
@include border-radius($toggle-ios-border-radius);
|
||||
|
||||
position: relative;
|
||||
@ -38,7 +41,7 @@
|
||||
// iOS Toggle Background Oval: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios .toggle-icon::before {
|
||||
.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);
|
||||
|
||||
@ -55,7 +58,7 @@
|
||||
// iOS Toggle Inner Knob: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios .toggle-inner {
|
||||
.toggle-inner {
|
||||
@include position($toggle-ios-border-width, null, null, $toggle-ios-border-width);
|
||||
@include border-radius($toggle-ios-handle-border-radius);
|
||||
|
||||
@ -77,16 +80,16 @@
|
||||
// iOS Toggle Background Track: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios.toggle-checked .toggle-icon {
|
||||
background-color: $toggle-ios-background-color-on;
|
||||
:host(.toggle-checked) .toggle-icon {
|
||||
background-color: var(--checked-knob);
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Background Oval: Activated or Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios.toggle-activated .toggle-icon::before,
|
||||
.toggle-ios.toggle-checked .toggle-icon::before {
|
||||
:host(.toggle-activated) .toggle-icon::before,
|
||||
:host(.toggle-checked) .toggle-icon::before {
|
||||
transform: scale3d(0, 0, 0);
|
||||
}
|
||||
|
||||
@ -94,7 +97,7 @@
|
||||
// iOS Toggle Inner Knob: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios.toggle-checked .toggle-inner {
|
||||
:host(.toggle-checked) .toggle-inner {
|
||||
@include transform(translate3d($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2), 0, 0));
|
||||
}
|
||||
|
||||
@ -102,7 +105,7 @@
|
||||
// iOS Toggle Background Oval: Activated and Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios.toggle-activated.toggle-checked .toggle-inner::before {
|
||||
:host(.toggle-activated.toggle-checked) .toggle-inner::before {
|
||||
transform: scale3d(0, 0, 0);
|
||||
}
|
||||
|
||||
@ -110,7 +113,7 @@
|
||||
// iOS Toggle Inner Knob: Activated and Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios.toggle-activated .toggle-inner {
|
||||
:host(.toggle-activated) .toggle-inner {
|
||||
width: $toggle-ios-handle-width + 6;
|
||||
}
|
||||
|
||||
@ -118,7 +121,7 @@
|
||||
// iOS Toggle Inner Knob: Activated and Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios.toggle-activated.toggle-checked .toggle-inner {
|
||||
:host(.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);
|
||||
@ -128,8 +131,9 @@
|
||||
// iOS Toggle: Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios.toggle-disabled,
|
||||
.item-ios.item-toggle-disabled ion-label {
|
||||
// .item-ios.item-toggle-disabled ion-label
|
||||
|
||||
:host(.toggle-disabled) {
|
||||
opacity: $toggle-ios-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
@ -139,31 +143,11 @@
|
||||
// iOS Toggle Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item-ios .toggle-ios[slot] {
|
||||
:host(.in-item[slot]) {
|
||||
@include margin($toggle-ios-media-margin);
|
||||
@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"] {
|
||||
:host(.in-item[slot="start"]) {
|
||||
@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: ion-color($colors-ios, $color-name, base, ios);
|
||||
|
||||
.toggle-ios-#{$color-name}.toggle-checked .toggle-icon {
|
||||
background-color: $color-base;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Toggle Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
@include ios-toggle-theme($color-name);
|
||||
}
|
||||
|
||||
@ -18,13 +18,13 @@ $toggle-ios-border-width: 2px !default;
|
||||
$toggle-ios-border-radius: $toggle-ios-height / 2 !default;
|
||||
|
||||
/// @prop - Background color of the unchecked toggle
|
||||
$toggle-ios-background-color-off: $item-ios-background-color !default;
|
||||
$toggle-ios-background-color-off: $item-background-color !default;
|
||||
|
||||
/// @prop - Border color of the unchecked toggle
|
||||
$toggle-ios-border-color-off: $background-ios-color-step-50 !default;
|
||||
$toggle-ios-border-color-off: $background-color-step-50 !default;
|
||||
|
||||
/// @prop - Background color of the checked toggle
|
||||
$toggle-ios-background-color-on: ion-color($colors-ios, primary, base, ios) !default;
|
||||
$toggle-ios-background-color-on: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Width of the toggle handle
|
||||
$toggle-ios-handle-width: $toggle-ios-height - ($toggle-ios-border-width * 2) !default;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
// Material Design Toggle
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-md {
|
||||
:host {
|
||||
@include padding($toggle-md-padding-top, $toggle-md-padding-end, $toggle-md-padding-bottom, $toggle-md-padding-start);
|
||||
|
||||
box-sizing: content-box;
|
||||
@ -15,13 +15,16 @@
|
||||
height: $toggle-md-track-height;
|
||||
|
||||
contain: strict;
|
||||
|
||||
--checked-background: #{current-color(base, $toggle-md-track-background-color-alpha-on)};
|
||||
--checked-knob: #{current-color(base)};
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toggle Background Track: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-md .toggle-icon {
|
||||
.toggle-icon {
|
||||
@include border-radius($toggle-md-track-height);
|
||||
|
||||
position: relative;
|
||||
@ -41,7 +44,7 @@
|
||||
// Material Design Toggle Inner Knob: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-md .toggle-inner {
|
||||
.toggle-inner {
|
||||
@include position(($toggle-md-handle-height - $toggle-md-track-height) / -2, null, null, 0);
|
||||
@include border-radius($toggle-md-handle-border-radius);
|
||||
|
||||
@ -66,75 +69,52 @@
|
||||
// Material Design Toggle Background Track: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-md.toggle-checked .toggle-icon {
|
||||
background-color: $toggle-md-track-background-color-on;
|
||||
:host(.toggle-checked) .toggle-icon {
|
||||
background-color: var(--checked-background);
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toggle Inner Knob: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-md.toggle-checked .toggle-inner {
|
||||
:host(.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;
|
||||
background-color: var(--checked-knob);
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toggle: Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-md.toggle-disabled,
|
||||
.item-md.item-toggle-disabled ion-label {
|
||||
:host(.toggle-disabled) {
|
||||
opacity: $toggle-md-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toggle-md.toggle-disabled ion-radio {
|
||||
opacity: $toggle-md-disabled-opacity;
|
||||
}
|
||||
|
||||
// TODO: move to item
|
||||
// .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[slot] {
|
||||
:host(.in-item[slot]) {
|
||||
@include margin($toggle-md-media-margin-top, $toggle-md-media-margin-end, $toggle-md-media-margin-bottom, $toggle-md-media-margin-start);
|
||||
@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);
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item-md .toggle-md[slot="start"] {
|
||||
:host(.in-item[slot="start"]) {
|
||||
@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: ion-color($colors-md, $color-name, base, md);
|
||||
$color-tint: ion-color($colors-md, $color-name, tint, md);
|
||||
|
||||
.toggle-md-#{$color-name}.toggle-checked .toggle-icon {
|
||||
background-color: $color-tint;
|
||||
}
|
||||
|
||||
.toggle-md-#{$color-name}.toggle-checked .toggle-inner {
|
||||
background-color: $color-base;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Toggle Auxiliary Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
@include toggle-theme-md($color-name);
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Color of the active toggle
|
||||
$toggle-md-active-color: ion-color($colors-md, primary, base, md) !default;
|
||||
$toggle-md-active-color: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Width of the toggle track
|
||||
$toggle-md-track-width: 36px !default;
|
||||
@ -21,7 +21,7 @@ $toggle-md-track-background-color-off: $item-md-border-color !default
|
||||
$toggle-md-track-background-color-alpha-on: .5 !default;
|
||||
|
||||
/// @prop - Background color of the checked toggle track
|
||||
$toggle-md-track-background-color-on: ion-color($colors-md, primary, base, md, $toggle-md-track-background-color-alpha-on) !default;
|
||||
$toggle-md-track-background-color-on: ion-color(primary, base, $toggle-md-track-background-color-alpha-on) !default;
|
||||
|
||||
/// @prop - Width of the toggle handle
|
||||
$toggle-md-handle-width: 20px !default;
|
||||
@ -36,7 +36,7 @@ $toggle-md-handle-border-radius: 50% !default;
|
||||
$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;
|
||||
$toggle-md-handle-background-color-off: $background-color !default;
|
||||
|
||||
/// @prop - Background color of the checked toggle handle
|
||||
$toggle-md-handle-background-color-on: $toggle-md-active-color !default;
|
||||
|
||||
@ -3,16 +3,28 @@
|
||||
// Toggle
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-toggle {
|
||||
:host {
|
||||
--ion-color-base: #{ion-color(primary, base)};
|
||||
--ion-color-base-rgb: #{ion-color(primary, base, null, true)};
|
||||
|
||||
display: inline-block;
|
||||
|
||||
contain: content;
|
||||
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
box-sizing: content-box !important;
|
||||
}
|
||||
|
||||
ion-toggle ion-gesture {
|
||||
:host(.toggle-key) input {
|
||||
border: 2px solid #5e9ed6;
|
||||
}
|
||||
|
||||
:host(:focus) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
ion-gesture {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
@ -21,51 +33,8 @@ ion-toggle ion-gesture {
|
||||
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;
|
||||
}
|
||||
|
||||
ion-toggle input {
|
||||
@include position(0, null, null, 0);
|
||||
@include margin(0);
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
input {
|
||||
@include input-cover();
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
ion-toggle :focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.toggle-key input {
|
||||
border: 2px solid #5e9ed6;
|
||||
}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { Component, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
|
||||
import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
|
||||
import { CheckboxInput, CheckedInputChangeEvent, Color, GestureDetail, Mode, StyleEvent } from '../../interface';
|
||||
import { hapticSelection } from '../../utils/haptic';
|
||||
import { deferEvent } from '../../utils/helpers';
|
||||
import { createColorClasses, hostContext } from '../../utils/theme';
|
||||
|
||||
|
||||
@Component({
|
||||
@ -10,9 +11,7 @@ import { deferEvent } from '../../utils/helpers';
|
||||
ios: 'toggle.ios.scss',
|
||||
md: 'toggle.md.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'toggle'
|
||||
}
|
||||
shadow: true
|
||||
})
|
||||
export class Toggle implements CheckboxInput {
|
||||
|
||||
@ -20,8 +19,9 @@ export class Toggle implements CheckboxInput {
|
||||
private nativeInput!: HTMLInputElement;
|
||||
private pivotX = 0;
|
||||
|
||||
@State() activated = false;
|
||||
@Element() el!: HTMLElement;
|
||||
|
||||
@State() activated = false;
|
||||
@State() keyFocus = false;
|
||||
|
||||
/**
|
||||
@ -83,15 +83,12 @@ export class Toggle implements CheckboxInput {
|
||||
checked: isChecked,
|
||||
value: this.value
|
||||
});
|
||||
this.emitStyle();
|
||||
}
|
||||
|
||||
@Watch('disabled')
|
||||
emitStyle() {
|
||||
this.ionStyle.emit({
|
||||
'toggle-disabled': this.disabled,
|
||||
'toggle-checked': this.checked,
|
||||
'toggle-activated': this.activated
|
||||
'interactive-disabled': this.disabled,
|
||||
});
|
||||
}
|
||||
|
||||
@ -160,10 +157,13 @@ export class Toggle implements CheckboxInput {
|
||||
hostData() {
|
||||
return {
|
||||
class: {
|
||||
...createColorClasses(this.color),
|
||||
'in-item': hostContext('.item', this.el),
|
||||
'toggle-activated': this.activated,
|
||||
'toggle-checked': this.checked,
|
||||
'toggle-disabled': this.disabled,
|
||||
'toggle-key': this.keyFocus
|
||||
'toggle-key': this.keyFocus,
|
||||
'interactive': true
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -185,7 +185,6 @@ export class Toggle implements CheckboxInput {
|
||||
<div class="toggle-icon">
|
||||
<div class="toggle-inner"/>
|
||||
</div>
|
||||
<div class="toggle-cover"/>
|
||||
</ion-gesture>,
|
||||
<input
|
||||
type="checkbox"
|
||||
|
||||
Reference in New Issue
Block a user