vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Implemented panel

pull/5507/head
Cagatay Civici 2024-02-07 17:17:00 +03:00
parent 65255a2c9d
commit dcd3120be6
5 changed files with 61 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
components/lib/theme/aura/global.js
View File

@ -216,5 +216,34 @@ export default {
background-color: transparent; background-color: transparent;
} }
} }
.p-ripple {
overflow: hidden;
position: relative;
}
.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;
}
.p-ripple-disabled .p-ink {
display: none;
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
}
}
` `
}; };

3
components/lib/theme/aura/index.js
View File

@ -150,6 +150,9 @@ export default {
textColor: 'var(--p-dark-highlight-text-color, var(--p-highlight-text-color))' textColor: 'var(--p-dark-highlight-text-color, var(--p-highlight-text-color))'
}, },
anchorGutter: '2px', anchorGutter: '2px',
hover: {
bg: 'var(--p-dark-hover-bg, var(--p-hover-bg))'
},
mask: { mask: {
bg: 'rgba(0,0,0,0.4)' bg: 'rgba(0,0,0,0.4)'
} }

31
components/lib/theme/aura/panel/index.d.ts vendored
View File

@ -1,31 +0,0 @@
interface PanelThemeVariables {
panelHeaderBorder?: string | undefined;
panelHeaderPadding?: string | undefined;
panelHeaderBg?: string | undefined;
panelHeaderTextColor?: string | undefined;
panelHeaderFontWeight?: string | undefined;
panelHeaderIconWidth?: string | undefined;
panelHeaderIconHeight?: string | undefined;
panelHeaderIconColor?: string | undefined;
panelHeaderIconBorder?: string | undefined;
panelHeaderIconBg?: string | undefined;
panelHeaderIconBorderRadius?: string | undefined;
panelHeaderIconTransition?: string | undefined;
panelHeaderIconHoverColor?: string | undefined;
panelHeaderIconHoverBorderColor?: string | undefined;
panelHeaderIconHoverBg?: string | undefined;
panelHeaderIconFocusOutline?: string | undefined;
panelHeaderIconFocusOutlineOffset?: string | undefined;
panelHeaderIconFocusShadow?: string | undefined;
panelToggleableHeaderPadding?: string | undefined;
panelContentPadding?: string | undefined;
panelContentBorder?: string | undefined;
panelContentBg?: string | undefined;
panelContentTextColor?: string | undefined;
panelContentBorderTop?: string | undefined;
panelFooterPadding?: string | undefined;
panelFooterBorder?: string | undefined;
panelFooterBg?: string | undefined;
panelFooterTextColor?: string | undefined;
panelFooterBorderTop?: string | undefined;
}

80
components/lib/theme/aura/panel/index.js
View File

@ -1,84 +1,60 @@
export default { export default {
css: ` css: `
.p-panel {
border: 1px solid var(--p-dark-surface-700, var(--p-surface-200));
border-radius: 6px;
background-color: var(--p-dark-surface-900, var(--p-surface-0));
color: var(--p-text-color);
}
.p-panel-header { .p-panel-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1.125rem;
} }
.p-panel-toggleable .p-panel-header {
padding: 0.75rem 1.125rem;
}
.p-panel-title { .p-panel-title {
line-height: 1; line-height: 1;
font-weight: 600;
} }
.p-panel-header-icon { .p-panel-header-icon {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-panel .p-panel-header {
padding: 1.125rem;
color: var(--p-dark-surface-0, var(--p-surface-700));
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
.p-panel .p-panel-header .p-panel-title {
font-weight: 600;
}
.p-panel .p-panel-header .p-panel-header-icon {
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
color: #a1a1aa; position: relative;
color: var(--p-text-secondary-color);
border: 0 none; border: 0 none;
background: transparent; background: transparent;
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, transition: background-color 0.2s, color 0.2s, outline-color 0.2s;
box-shadow 0.2s, outline-color 0.2s;
outline-color: transparent; outline-color: transparent;
} }
.p-panel .p-panel-header .p-panel-header-icon:enabled:hover {
color: var(--p-dark-surface-0, var(--p-surface-700)); .p-panel-header-icon:enabled:hover {
border-color: transparent; color: var(--p-text-color);
background: rgba(255, 255, 255, 0.03); background: var(--p-hover-bg);
} }
.p-panel .p-panel-header .p-panel-header-icon:focus-visible {
outline: 1px solid var(--p-focus-ring-color); .p-panel-header-icon:focus-visible {
outline-offset: 2px; outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
box-shadow: none; outline-offset: var(--p-focus-ring-offset);
}
.p-panel.p-panel-toggleable .p-panel-header {
padding: 0.75rem 1.125rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {
padding: 0 1.125rem 1.125rem 1.125rem; padding: 0 1.125rem 1.125rem 1.125rem;
color: var(--p-dark-surface-0, var(--p-surface-700));
border-top: 0 none;
}
.p-panel .p-panel-content:last-child {
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
} }
.p-panel .p-panel-footer { .p-panel .p-panel-footer {
padding: 0 1.125rem 1.125rem 1.125rem; padding: 0 1.125rem 1.125rem 1.125rem;
color: var(--p-dark-surface-0, var(--p-surface-700));
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
border-top: 0 none;
}
.p-panel {
border: 1px solid var(--p-dark-surface-700, var(--p-surface-200));
border-radius: 6px;
background-color: var(--p-dark-surface-900, var(--p-surface-0));
}
.p-panel .p-panel-header,
.p-panel .p-panel-content,
.p-panel .p-panel-footer {
background: transparent;
border: 0 none;
}
.p-panel:has(.p-panel-footer) .p-panel-content {
padding-bottom: 0.875rem;
} }
` `
}; };

2
layouts/AppConfigurator.vue
View File

@ -118,7 +118,7 @@ export default {
colors.forEach((color, index) => { colors.forEach((color, index) => {
document.documentElement.style.setProperty(`--p-${type}-${shades[index]}`, color); document.documentElement.style.setProperty(`--p-${type}-${shades[index]}`, color);
document.documentElement.style.setProperty(`--p-dark-${type}-${shades[index]}`, color); //document.documentElement.style.setProperty(`--p-dark-${type}-${shades[index]}`, color);
}); });
}, },
onRippleChange(value) { onRippleChange(value) {