From 7df08a2330e54af17ad8069d1780cfad821e03e9 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 6 Sep 2024 10:35:56 -0400
Subject: [PATCH] refactor(checkbox): add justify & align fix for ionic theme

---
 .../components/checkbox/checkbox.ionic.scss   | 17 ++++++++++++
 core/src/components/toggle/toggle.native.scss | 26 -------------------
 2 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/core/src/components/checkbox/checkbox.ionic.scss b/core/src/components/checkbox/checkbox.ionic.scss
index 1918417a53..fd587c5e27 100644
--- a/core/src/components/checkbox/checkbox.ionic.scss
+++ b/core/src/components/checkbox/checkbox.ionic.scss
@@ -161,6 +161,9 @@ input {
   opacity: 0;
 }
 
+// TODO move all justify and alignment styles to the common file
+// when it is created
+
 // Justify Content
 // ---------------------------------------------
 
@@ -187,6 +190,20 @@ input {
   align-items: center;
 }
 
+// Justify Content & Align Items
+// ---------------------------------------------
+
+// The checkbox should be displayed as block when either justify
+// or alignment is set; otherwise, these properties will have no
+// visible effect.
+:host(.checkbox-justify-space-between),
+:host(.checkbox-justify-start),
+:host(.checkbox-justify-end),
+:host(.checkbox-alignment-start),
+:host(.checkbox-alignment-center) {
+  display: block;
+}
+
 // Label Placement - Start
 // ----------------------------------------------------------------
 
diff --git a/core/src/components/toggle/toggle.native.scss b/core/src/components/toggle/toggle.native.scss
index d28059e8de..d57ec52529 100644
--- a/core/src/components/toggle/toggle.native.scss
+++ b/core/src/components/toggle/toggle.native.scss
@@ -28,32 +28,6 @@
   overflow: hidden;
 }
 
-// Toggle Justify
-// --------------------------------------------------
-
-:host(.toggle-justify-space-between) .toggle-wrapper {
-  justify-content: space-between;
-}
-
-:host(.toggle-justify-start) .toggle-wrapper {
-  justify-content: start;
-}
-
-:host(.toggle-justify-end) .toggle-wrapper {
-  justify-content: end;
-}
-
-// Toggle Align
-// --------------------------------------------------
-
-:host(.toggle-alignment-start) .toggle-wrapper {
-  align-items: start;
-}
-
-:host(.toggle-alignment-center) .toggle-wrapper {
-  align-items: center;
-}
-
 // Input Label Placement - Fixed
 // ----------------------------------------------------------------