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

Migrated Overlay components

pull/5507/head
Cagatay Civici 2024-03-12 15:07:51 +03:00
parent 180e41bca3
commit e9d9e14027
10 changed files with 58 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/lib/themes/primeone/base/confirmpopup/index.js
View File

@ -5,9 +5,9 @@ export default {
margin-top: 10px; margin-top: 10px;
top: 0; top: 0;
left: 0; left: 0;
background: var(--p-confirmpopup-background); background: ${dt('confirmpopup.background')};
color: var(--p-confirmpopup-text-color); color: ${dt('confirmpopup.color')};
border: 1px solid var(--p-confirmpopup-border-color); border: 1px solid ${dt('confirmpopup.border.color')};
border-radius: ${dt('rounded.base')}; border-radius: ${dt('rounded.base')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
} }
@ -81,7 +81,7 @@ export default {
margin-left: -8px; margin-left: -8px;
border-style: solid; border-style: solid;
border-color: transparent; border-color: transparent;
border-bottom-color: var(--p-confirmpopup-background); border-bottom-color: ${dt('confirmpopup.background')};
} }
.p-confirm-popup:before { .p-confirm-popup:before {
@ -89,7 +89,7 @@ export default {
margin-left: -10px; margin-left: -10px;
border-style: solid; border-style: solid;
border-color: transparent; border-color: transparent;
border-bottom-color: var(--p-confirmpopup-border-color); border-bottom-color: ${dt('confirmpopup.border.color')};
} }
.p-confirm-popup-flipped:after, .p-confirm-popup-flipped:after,
@ -100,12 +100,12 @@ export default {
.p-confirm-popup-flipped:after { .p-confirm-popup-flipped:after {
border-bottom-color: transparent; border-bottom-color: transparent;
border-top-color: var(--p-confirmpopup-background); border-top-color: ${dt('confirmpopup.background')};
} }
.p-confirm-popup-flipped:before { .p-confirm-popup-flipped:before {
border-bottom-color: transparent; border-bottom-color: transparent;
border-top-color: var(--p-confirmpopup-border-color); border-top-color: ${dt('confirmpopup.border.color')};
} }
` `
}; };

14
components/lib/themes/primeone/base/dialog/index.js
View File

@ -3,11 +3,11 @@ export default {
.p-dialog { .p-dialog {
max-height: 90%; max-height: 90%;
transform: scale(1); transform: scale(1);
border-radius: var(--p-rounded-xl); border-radius: ${dt('rounded.xl')};
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
background: var(--p-dialog-background); background: ${dt('dialog.background')};
border: 1px solid var(--p-dialog-border-color); border: 1px solid ${dt('dialog.border.color')};
color: var(--p-dialog-text-color); color: ${dt('dialog.color')};
} }
.p-dialog-content { .p-dialog-content {
@ -50,7 +50,7 @@ export default {
position: relative; position: relative;
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
color: var(--p-dialog-header-icon-color); color: ${dt('dialog.header.icon.color')};
border: 0 none; border: 0 none;
background: transparent; background: transparent;
border-radius: 50%; border-radius: 50%;
@ -59,8 +59,8 @@ export default {
} }
.p-dialog-header-icon:enabled:hover { .p-dialog-header-icon:enabled:hover {
background: var(--p-dialog-header-icon-background-hover); background: ${dt('dialog.header.icon.hover.background')};
color: var(--p-dialog-header-icon-color-hover); color: ${dt('dialog.header.icon.hover.color')};
} }
.p-dialog-header-icon:focus-visible { .p-dialog-header-icon:focus-visible {

20
components/lib/themes/primeone/base/overlaypanel/index.js
View File

@ -2,9 +2,9 @@ export default {
css: ({ dt }) => ` css: ({ dt }) => `
.p-overlaypanel { .p-overlaypanel {
margin-top: 10px; margin-top: 10px;
background: var(--p-overlaypanel-background); background: ${dt('overlaypanel.background')};
color: var(--p-overlaypanel-text-color); color: ${dt('overlaypanel.color')};
border: 1px solid var(--p-overlaypanel-border-color); border: 1px solid ${dt('overlaypanel.border.color')};
border-radius: ${dt('rounded.base')}; border-radius: ${dt('rounded.base')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
} }
@ -26,7 +26,7 @@ export default {
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
background: transparent; background: transparent;
color: var(--p-overlaypanel-close-icon-color); color: ${dt('overlaypanel.close.icon.color')};
border: 0 none; border: 0 none;
border-radius: 50%; border-radius: 50%;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
@ -37,8 +37,8 @@ export default {
} }
.p-overlaypanel-close:enabled:hover { .p-overlaypanel-close:enabled:hover {
background: var(--p-overlaypanel-close-icon-background-hover); background: ${dt('overlaypanel.close.icon.hover.background')};
color: var(--p-overlaypanel-close-icon-color-hover); color: ${dt('overlaypanel.close.icon.hover.color')};
} }
.p-overlaypanel-close:focus-visible { .p-overlaypanel-close:focus-visible {
@ -79,7 +79,7 @@ export default {
margin-left: -8px; margin-left: -8px;
border-style: solid; border-style: solid;
border-color: transparent; border-color: transparent;
border-bottom-color: var(--p-overlaypanel-background); border-bottom-color: ${dt('overlaypanel.background')};
} }
.p-overlaypanel:before { .p-overlaypanel:before {
@ -87,7 +87,7 @@ export default {
margin-left: -10px; margin-left: -10px;
border-style: solid; border-style: solid;
border-color: transparent; border-color: transparent;
border-bottom-color: var(--p-overlaypanel-border-color); border-bottom-color: ${dt('overlaypanel.border.color')};
} }
.p-overlaypanel-flipped:after, .p-overlaypanel-flipped:after,
@ -98,12 +98,12 @@ export default {
.p-overlaypanel.p-overlaypanel-flipped:after { .p-overlaypanel.p-overlaypanel-flipped:after {
border-bottom-color: transparent; border-bottom-color: transparent;
border-top-color: var(--p-overlaypanel-background); border-top-color: ${dt('overlaypanel.background')};
} }
.p-overlaypanel.p-overlaypanel-flipped:before { .p-overlaypanel.p-overlaypanel-flipped:before {
border-bottom-color: transparent; border-bottom-color: transparent;
border-top-color: var(--p-overlaypanel-border-color); border-top-color: ${dt('overlaypanel.border.color')};
} }
` `
}; };

12
components/lib/themes/primeone/base/sidebar/index.js
View File

@ -7,9 +7,9 @@ export default {
transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);
position: relative; position: relative;
transition: transform 0.3s; transition: transform 0.3s;
background: var(--p-sidebar-background); background: ${dt('sidebar.background')};
color: var(--p-sidebar-text-color); color: ${dt('sidebar.color')};
border: 0 solid var(--p-sidebar-border-color); border: 1px solid ${dt('sidebar.border.color')};
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
} }
@ -40,7 +40,7 @@ export default {
position: relative; position: relative;
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
color: var(--p-sidebar-header-icon-color); color: ${dt('sidebar.header.icon.color')};
border: 0 none; border: 0 none;
background: transparent; background: transparent;
border-radius: 50%; border-radius: 50%;
@ -49,8 +49,8 @@ export default {
} }
.p-sidebar-icon:enabled:hover { .p-sidebar-icon:enabled:hover {
background: var(--p-sidebar-header-icon-background-hover); background: ${dt('sidebar.header.icon.hover.background')};
color: var(--p-sidebar-header-icon-color-hover); color: ${dt('sidebar.header.icon.hover.color')};
} }
.p-sidebar-icon:focus-visible { .p-sidebar-icon:focus-visible {

12
components/lib/themes/primeone/base/tooltip/index.js
View File

@ -19,8 +19,8 @@ export default {
.p-tooltip-text { .p-tooltip-text {
white-space: pre-line; white-space: pre-line;
word-break: break-word; word-break: break-word;
background: var(--p-tooltip-background); background: ${dt('tooltip.background')};
color: var(--p-tooltip-text-color); color: ${dt('tooltip.color')};
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
border-radius: 6px; border-radius: 6px;
@ -38,20 +38,20 @@ export default {
.p-tooltip-right .p-tooltip-arrow { .p-tooltip-right .p-tooltip-arrow {
margin-top: -0.25rem; margin-top: -0.25rem;
border-width: 0.25em 0.25em 0.25em 0; border-width: 0.25em 0.25em 0.25em 0;
border-right-color: var(--p-tooltip-background); border-right-color: ${dt('tooltip.background')};
} }
.p-tooltip-left .p-tooltip-arrow { .p-tooltip-left .p-tooltip-arrow {
margin-top: -0.25rem; margin-top: -0.25rem;
border-width: 0.25em 0 0.25em 0.25rem; border-width: 0.25em 0 0.25em 0.25rem;
border-left-color: var(--p-tooltip-background); border-left-color: ${dt('tooltip.background')};
} }
.p-tooltip-top .p-tooltip-arrow { .p-tooltip-top .p-tooltip-arrow {
margin-left: -0.25rem; margin-left: -0.25rem;
border-width: 0.25em 0.25em 0; border-width: 0.25em 0.25em 0;
border-top-color: var(--p-tooltip-background); border-top-color: ${dt('tooltip.background')};
border-bottom-color: var(--p-tooltip-background); border-bottom-color: ${dt('tooltip.background')};
} }
.p-tooltip-bottom .p-tooltip-arrow { .p-tooltip-bottom .p-tooltip-arrow {

4
components/lib/themes/primeone/presets/aura/confirmpopup/index.js
View File

@ -4,14 +4,14 @@ export default {
root: { root: {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
textColor: '{surface.700}' color: '{surface.700}'
} }
}, },
dark: { dark: {
root: { root: {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.700}', borderColor: '{surface.700}',
textColor: '{surface.0}' color: '{surface.0}'
} }
} }
} }

12
components/lib/themes/primeone/presets/aura/dialog/index.js
View File

@ -4,24 +4,24 @@ export default {
root: { root: {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
textColor: '{surface.700}' color: '{surface.700}'
}, },
headerIcon: { headerIcon: {
color: '{surface.500}', color: '{surface.500}',
colorHover: '{surface.600}', hoverColor: '{surface.600}',
backgroundHover: '{surface.100}' hoverBackground: '{surface.100}'
} }
}, },
dark: { dark: {
root: { root: {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.700}', borderColor: '{surface.700}',
textColor: '{surface.0}' color: '{surface.0}'
}, },
headerIcon: { headerIcon: {
color: '{surface.400}', color: '{surface.400}',
colorHover: '{surface.300}', hoverColor: '{surface.300}',
backgroundHover: '{surface.800}' hoverBackground: '{surface.800}'
} }
} }
} }

12
components/lib/themes/primeone/presets/aura/overlaypanel/index.js
View File

@ -4,24 +4,24 @@ export default {
root: { root: {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
textColor: '{surface.700}' color: '{surface.700}'
}, },
closeIcon: { closeIcon: {
color: '{surface.500}', color: '{surface.500}',
colorHover: '{surface.600}', hoverColor: '{surface.600}',
backgroundHover: '{surface.100}' hoverBackground: '{surface.100}'
} }
}, },
dark: { dark: {
root: { root: {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.700}', borderColor: '{surface.700}',
textColor: '{surface.0}' color: '{surface.0}'
}, },
closeIcon: { closeIcon: {
color: '{surface.400}', color: '{surface.400}',
colorHover: '{surface.300}', hoverColor: '{surface.300}',
backgroundHover: '{surface.800}' hoverBackground: '{surface.800}'
} }
} }
} }

12
components/lib/themes/primeone/presets/aura/sidebar/index.js
View File

@ -4,24 +4,24 @@ export default {
root: { root: {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
textColor: '{surface.700}' color: '{surface.700}'
}, },
headerIcon: { headerIcon: {
color: '{surface.500}', color: '{surface.500}',
colorHover: '{surface.600}', hoverColor: '{surface.600}',
backgroundHover: '{surface.100}' hoverBackground: '{surface.100}'
} }
}, },
dark: { dark: {
root: { root: {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.700}', borderColor: '{surface.700}',
textColor: '{surface.0}' color: '{surface.0}'
}, },
headerIcon: { headerIcon: {
color: '{surface.400}', color: '{surface.400}',
colorHover: '{surface.300}', hoverColor: '{surface.300}',
backgroundHover: '{surface.800}' hoverBackground: '{surface.800}'
} }
} }
} }

4
components/lib/themes/primeone/presets/aura/tooltip/index.js
View File

@ -3,13 +3,13 @@ export default {
light: { light: {
root: { root: {
background: '{surface.700}', background: '{surface.700}',
textColor: '{surface.0}' color: '{surface.0}'
} }
}, },
dark: { dark: {
root: { root: {
background: '{surface.700}', background: '{surface.700}',
textColor: '{surface.0}' color: '{surface.0}'
} }
} }
} }