From 5284b61a135fa6cb1173a5db188d6cf899f6af97 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Wed, 15 May 2024 12:20:13 +0300 Subject: [PATCH] Fixed z-index issue --- components/lib/togglebutton/ToggleButton.d.ts | 4 ++++ components/lib/togglebutton/ToggleButton.vue | 12 +++++++----- .../lib/togglebutton/style/ToggleButtonStyle.js | 10 +++++++++- 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/components/lib/togglebutton/ToggleButton.d.ts b/components/lib/togglebutton/ToggleButton.d.ts index 6968dca31..4a5a68604 100755 --- a/components/lib/togglebutton/ToggleButton.d.ts +++ b/components/lib/togglebutton/ToggleButton.d.ts @@ -53,6 +53,10 @@ export interface ToggleButtonPassThroughOptions { * Used to pass attributes to the root's DOM element. */ root?: ToggleButtonPassThroughOptionType; + /** + * Used to pass attributes to the content's DOM element. + */ + content?: ToggleButtonPassThroughOptionType; /** * Used to pass attributes to the icon's DOM element. */ diff --git a/components/lib/togglebutton/ToggleButton.vue b/components/lib/togglebutton/ToggleButton.vue index 0d091f5fd..b14058497 100755 --- a/components/lib/togglebutton/ToggleButton.vue +++ b/components/lib/togglebutton/ToggleButton.vue @@ -1,11 +1,13 @@ diff --git a/components/lib/togglebutton/style/ToggleButtonStyle.js b/components/lib/togglebutton/style/ToggleButtonStyle.js index dd62bdeaf..76e8897bc 100644 --- a/components/lib/togglebutton/style/ToggleButtonStyle.js +++ b/components/lib/togglebutton/style/ToggleButtonStyle.js @@ -19,10 +19,17 @@ const theme = ({ dt }) => ` transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}; border-radius: ${dt('togglebutton.border.radius')}; outline-color: transparent; - gap: ${dt('togglebutton.gap')}; font-weight: ${dt('togglebutton.font.weight')}; } +.p-togglebutton-content { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + gap: ${dt('togglebutton.gap')}; +} + .p-togglebutton-label, .p-togglebutton-icon { position: relative; @@ -100,6 +107,7 @@ const classes = { 'p-invalid': props.invalid } ], + content: 'p-togglebutton-content', icon: 'p-togglebutton-icon', label: 'p-togglebutton-label' };