From e7b99ef19c5de7f1b4603f60c2e25eed04ffc45c Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Wed, 2 Oct 2024 10:05:14 +0300
Subject: [PATCH] Update SpecificityDoc.vue

---
 .../theming/styled/csslayer/SpecificityDoc.vue   | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/showcase/doc/theming/styled/csslayer/SpecificityDoc.vue b/apps/showcase/doc/theming/styled/csslayer/SpecificityDoc.vue
index 16a58c474d..7a424c757a 100644
--- a/apps/showcase/doc/theming/styled/csslayer/SpecificityDoc.vue
+++ b/apps/showcase/doc/theming/styled/csslayer/SpecificityDoc.vue
@@ -12,7 +12,7 @@
             Another advantage of this approach is that it does not force you to figure out the built-in class names of the components.
         </p>
         <div class="card flex justify-center">
-            <ToggleSwitch v-model="checked" :pt="{ slider: 'my-switch-slider' }" />
+            <ToggleSwitch v-model="checked" :pt="{ slider: 'my-switch-slider', handle: 'my-switch-handle', icon: 'my-switch-icon' }" />
         </div>
         <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
         <p>Layers also make it easier to use CSS Modules, view the CSS Modules guide for examples.</p>
@@ -27,7 +27,7 @@ export default {
             code: {
                 basic: `
 <template>
-    <ToggleSwitch v-model="checked" :pt="{ slider: 'my-switch-slider' }" />
+    <ToggleSwitch v-model="checked" :pt="{ slider: 'my-switch-slider', handle: 'my-switch-handle', icon: 'my-switch-icon' }" />
 </template>
 
 <script>
@@ -41,9 +41,13 @@ const checked = ref(false);
     border-radius: 0;
 }
 
-.my-switch-slider:before {
+.my-switch-handle {
     border-radius: 0;
 }
+
+.my-switch-icon {
+    display: none !important;
+}
 </style>
 `
             }
@@ -57,7 +61,11 @@ const checked = ref(false);
     border-radius: 0;
 }
 
-.my-switch-slider:before {
+.my-switch-handle {
     border-radius: 0;
 }
+
+.my-switch-icon {
+    display: none !important;
+}
 </style>