diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Chrome-linux.png index caf063924a..b16cb47531 100644 Binary files a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Chrome-linux.png index 9a27ffa051..02ed8737c1 100644 Binary files a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Firefox-linux.png index 09b1476551..d73d9978d8 100644 Binary files a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png index af82c38ccb..40f1a9dbfd 100644 Binary files a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Chrome-linux.png index 148d59497b..c3d4136b8e 100644 Binary files a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Chrome-linux.png index 73bd17c7de..1327b54841 100644 Binary files a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Firefox-linux.png index d3c1f28317..56268ecc9d 100644 Binary files a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png index 4b2dd4f8a4..7c64d702ca 100644 Binary files a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Chrome-linux.png index 9040f90f8e..2ca9afb64f 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Chrome-linux.png index 4757876ff4..31fa98c0e4 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Firefox-linux.png index 01e8fbccfe..be7d881cfc 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Safari-linux.png index 67324f8218..41a665fcc8 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Chrome-linux.png index 3c53e88021..d5e6ea87df 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Chrome-linux.png index a740b7b15c..366f07b7ca 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Firefox-linux.png index 265595aabf..ecb7dd85c0 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Safari-linux.png index 4e5f992799..b8b8867d54 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Chrome-linux.png index 2b18f2d529..293c628b8c 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Chrome-linux.png index 7509abbe31..50a4ad99a5 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Firefox-linux.png index ba1a4f0c59..828cd6342b 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png index 9a8c30bcca..9e3297934b 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Chrome-linux.png index 8790a73192..401384a091 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png index 74888ca33b..915b73f4c5 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Firefox-linux.png index 4aa787b72b..35d6f569d2 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Safari-linux.png index 01197b150e..280173c598 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png index fb7da8921b..9941737e79 100644 Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png index 1b001d0b93..d206290c18 100644 Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Firefox-linux.png index 56cf99d251..b39941027b 100644 Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Safari-linux.png index 4015c70615..b08d919979 100644 Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png index 211126cbb5..92217c6706 100644 Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png index 5ceff35afa..f1c73f512f 100644 Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png index 175e334bf5..e114634741 100644 Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Safari-linux.png index 4037daed0d..c13a144bd5 100644 Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/toggle.ios.scss b/core/src/components/toggle/toggle.ios.scss index d442fcb6eb..e44916498c 100644 --- a/core/src/components/toggle/toggle.ios.scss +++ b/core/src/components/toggle/toggle.ios.scss @@ -69,23 +69,23 @@ } .toggle-switch-icon { - @include ltr() { - /* stylelint-disable-next-line property-disallowed-list */ - right: 6px; - } - - @include rtl() { - /* stylelint-disable property-disallowed-list */ - right: initial; - left: 6px; - /* stylelint-enable property-disallowed-list */ - } - position: absolute; color: var(--ion-color-dark); } +:host(.toggle-ltr) .toggle-switch-icon { + /* stylelint-disable-next-line property-disallowed-list */ + right: 6px; +} + +:host(.toggle-rtl) .toggle-switch-icon { + /* stylelint-disable property-disallowed-list */ + right: initial; + left: 6px; + /* stylelint-enable property-disallowed-list */ +} + :host(.toggle-checked) .toggle-switch-icon.toggle-switch-icon-checked { // The color contrast of iOS default on/off labels fails to meet WCAG 2.0. // We use Ionic's color contrast variables to meet the WCAG 2.0 standard (AAA). @@ -97,18 +97,6 @@ } .toggle-switch-icon-checked { - @include ltr() { - /* stylelint-disable property-disallowed-list */ - right: initial; - left: 4px; - /* stylelint-enable property-disallowed-list */ - } - - @include rtl() { - /* stylelint-disable-next-line property-disallowed-list */ - right: 4px; - } - position: absolute; width: 15px; @@ -117,6 +105,18 @@ transform: translateY(-50%) rotate(90deg); } +:host(.toggle-ltr) .toggle-switch-icon-checked { + /* stylelint-disable property-disallowed-list */ + right: initial; + left: 4px; + /* stylelint-enable property-disallowed-list */ +} + +:host(.toggle-rtl) .toggle-switch-icon-checked { + /* stylelint-disable-next-line property-disallowed-list */ + right: 4px; +} + // iOS Toggle Background Oval: Activated or Checked // ---------------------------------------------------------- @@ -144,16 +144,15 @@ // when pressing down on the toggle and it IS checked // the knob is wider so move it left by 6px in the transform -:host(.toggle-activated.toggle-checked) .toggle-icon-wrapper { - @include ltr() { - // transform by 100% - handle width - 6px (width addition on activated) - transform: translate3d(calc(100% - var(--handle-width) - 6px), 0, 0); - } - @include rtl() { - // transform by -100% + handle width + 6px (width addition on activated) - transform: translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0); - } +:host(.toggle-ltr.toggle-activated.toggle-checked) .toggle-icon-wrapper { + // transform by 100% - handle width - 6px (width addition on activated) + transform: translate3d(calc(100% - var(--handle-width) - 6px), 0, 0); +} + +:host(.toggle-rtl.toggle-activated.toggle-checked) .toggle-icon-wrapper { + // transform by -100% + handle width + 6px (width addition on activated) + transform: translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0); } // iOS Toggle: Disabled diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss index 3d1e8fad07..eb6021b003 100644 --- a/core/src/components/toggle/toggle.scss +++ b/core/src/components/toggle/toggle.scss @@ -107,7 +107,6 @@ input { // -------------------------------------------------- .toggle-inner { - @include position(null, null, null, var(--handle-spacing)); @include border-radius(var(--handle-border-radius)); position: absolute; @@ -126,31 +125,44 @@ input { contain: strict; } +/** + * We do not use the @ltr and @rtl mixins + * here because ion-toggle uses the Shadow DOM + * and WebKit does not support :host-context. + */ +:host(.toggle-ltr) .toggle-inner { + // stylelint-disable-next-line property-disallowed-list + left: var(--handle-spacing); +} + +:host(.toggle-rtl) .toggle-inner { + // stylelint-disable-next-line property-disallowed-list + right: var(--handle-spacing); +} + // Toggle Inner Knob: Checked // ---------------------------------------------------------- -:host(.toggle-checked) .toggle-icon-wrapper { - @include ltr() { - // transform by 100% - handle width - transform: translate3d(calc(100% - var(--handle-width)), 0, 0); - } +:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper { + // transform by 100% - handle width + transform: translate3d(calc(100% - var(--handle-width)), 0, 0) +} - @include rtl() { - // transform by -100% + handle width - transform: translate3d(calc(-100% + var(--handle-width)), 0, 0); - } +:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper { + // transform by -100% + handle width + transform: translate3d(calc(-100% + var(--handle-width)), 0, 0); } :host(.toggle-checked) .toggle-inner { - @include ltr() { - // transform by handle spacing amount - transform: translate3d(calc(var(--handle-spacing) * -2), 0, 0); - } - - @include rtl() { - // transform by handle spacing amount - transform: translate3d(calc(var(--handle-spacing) * 2), 0, 0); - } - background: var(--handle-background-checked); } + +:host(.toggle-ltr.toggle-checked) .toggle-inner { + // transform by handle spacing amount + transform: translate3d(calc(var(--handle-spacing) * -2), 0, 0); +} + +:host(.toggle-rtl.toggle-checked) .toggle-inner { + // transform by handle spacing amount + transform: translate3d(calc(var(--handle-spacing) * 2), 0, 0); +} diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx index d7e941d0a1..ea52a4f493 100644 --- a/core/src/components/toggle/toggle.tsx +++ b/core/src/components/toggle/toggle.tsx @@ -210,6 +210,7 @@ export class Toggle implements ComponentInterface { const mode = getIonMode(this); const { label, labelId, labelText } = getAriaLabel(el, inputId); const value = this.getValue(); + const rtl = isRTL(el) ? 'rtl' : 'ltr'; renderHiddenInput(true, el, name, checked ? value : '', disabled); @@ -227,6 +228,7 @@ export class Toggle implements ComponentInterface { 'toggle-checked': checked, 'toggle-disabled': disabled, interactive: true, + [`toggle-${rtl}`]: true, })} >