From cc392c38adbd21a015d17f9cebc149f4063bab4b Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 6 Aug 2023 18:12:36 +0300
Subject: [PATCH] Add CustomCSS doc

---
 doc/passthrough/CustomCSSDoc.vue | 56 ++++++++++++++++++++++++++++++++
 pages/passthrough/index.vue      |  6 ++++
 2 files changed, 62 insertions(+)
 create mode 100644 doc/passthrough/CustomCSSDoc.vue

diff --git a/doc/passthrough/CustomCSSDoc.vue b/doc/passthrough/CustomCSSDoc.vue
new file mode 100644
index 000000000..5fac9c473
--- /dev/null
+++ b/doc/passthrough/CustomCSSDoc.vue
@@ -0,0 +1,56 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            The <i>global</i> property has a <i>css</i> option to define custom css that belongs to a global <i>pt</i> configuration. Common use case of this feature is defining global styles and animations related to the pass through props
+            configuration.
+        </p>
+    </DocSectionText>
+
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, { 
+    pt: {
+        global: {
+            css: \`
+                button {
+                    padding: 2rem;
+                }
+
+                .p-ink {
+                    display: block;
+                    position: absolute;
+                    background: rgba(255, 255, 255, 0.5);
+                    border-radius: 100%;
+                    transform: scale(0);
+                    pointer-events: none;
+                }
+
+                .p-ink-active {
+                    animation: ripple 0.4s linear;
+                }
+
+                @keyframes ripple {
+                    100% {
+                        opacity: 0;
+                        transform: scale(2.5);
+                    }
+                }
+            \`
+        }
+    } 
+});`
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/passthrough/index.vue b/pages/passthrough/index.vue
index e97d04fce..44d65fe13 100644
--- a/pages/passthrough/index.vue
+++ b/pages/passthrough/index.vue
@@ -17,6 +17,7 @@
 
 <script>
 import BasicDoc from '@/doc/passthrough/BasicDoc';
+import CustomCSSDoc from '@/doc/passthrough/CustomCSSDoc';
 import GlobalDoc from '@/doc/passthrough/GlobalDoc';
 import LifecycleDoc from '@/doc/passthrough/LifecycleDoc';
 
@@ -38,6 +39,11 @@ export default {
                     id: 'global',
                     label: 'Global',
                     component: GlobalDoc
+                },
+                {
+                    id: 'customcss',
+                    label: 'Custom CSS',
+                    component: CustomCSSDoc
                 }
             ]
         };