allow to customize toggle z-index

cappuc · cappuc · commit e2d3fc202134 · 2025-05-21T14:52:46.000+02:00
diff --git a/README.md b/README.md
@@ -202,6 +202,10 @@ If you need a more advanced customization, you can edit the toggle position with
 }
 ```
 
+#### Toggle z-index
+
+You can change the toggle z-index by changing the `--cs--toggle-z-index` CSS variable. The default value is `9999`.
+
 #### Views
 
 If you want to customize the views, you can publish them with `php artisan vendor:publish --tag="cookie-solution-views"` and style them however you like.
diff --git a/resources/dist/laravel-cookie-solution.js b/resources/dist/laravel-cookie-solution.js
diff --git a/resources/dist/manifest.json b/resources/dist/manifest.json
@@ -1,3 +1,3 @@
 {
-  "laravel-cookie-solution.js": "laravel-cookie-solution.js?id=4f4d82f7"
+  "laravel-cookie-solution.js": "laravel-cookie-solution.js?id=d6850d9d"
 }
diff --git a/resources/js/components/toggle.ts b/resources/js/components/toggle.ts
@@ -27,7 +27,7 @@ export class CookieSolutionToggle extends LitElement {
             <div
                 part="toggle-root"
                 class="${clsx(
-                    'fixed bottom-toggle-bottom z-max print:hidden',
+                    'fixed bottom-toggle-bottom z-toggle print:hidden',
                     this.position === 'left' ? 'left-toggle-x' : 'right-toggle-x',
                 )}"
             >
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -14,6 +14,7 @@ module.exports = {
                 'toggle-x': 'var(--cs--toggle-position-x, 1rem)',
             },
             zIndex: {
+                toggle: 'var(--cs--toggle-z-index, 9999)',
                 max: '999999',
             },
             typography: ({ theme }) => ({

Original file line number	Diff line number	Diff line change
`@@ -202,6 +202,10 @@ If you need a more advanced customization, you can edit the toggle position with`
`202`	`202`	`}`
`203`	`203`	```
`204`	`204`
	`205`	`+#### Toggle z-index`
	`206`	`+`
	`207`	+You can change the toggle z-index by changing the `--cs--toggle-z-index` CSS variable. The default value is `9999`.
	`208`	`+`
`205`	`209`	`#### Views`
`206`	`210`
`207`	`211`	If you want to customize the views, you can publish them with `php artisan vendor:publish --tag="cookie-solution-views"` and style them however you like.
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`{`
`2`		`- "laravel-cookie-solution.js": "laravel-cookie-solution.js?id=4f4d82f7"`
	`2`	`+ "laravel-cookie-solution.js": "laravel-cookie-solution.js?id=d6850d9d"`
`3`	`3`	`}`
Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ export class CookieSolutionToggle extends LitElement {`
`27`	`27`	`<div`
`28`	`28`	`part="toggle-root"`
`29`	`29`	`class="${clsx(`
`30`		`- 'fixed bottom-toggle-bottom z-max print:hidden',`
	`30`	`+ 'fixed bottom-toggle-bottom z-toggle print:hidden',`
`31`	`31`	`this.position === 'left' ? 'left-toggle-x' : 'right-toggle-x',`
`32`	`32`	`)}"`
`33`	`33`	`>`