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;
top: 0;
left: 0;
background: var(--p-confirmpopup-background);
color: var(--p-confirmpopup-text-color);
border: 1px solid var(--p-confirmpopup-border-color);
background: ${dt('confirmpopup.background')};
color: ${dt('confirmpopup.color')};
border: 1px solid ${dt('confirmpopup.border.color')};
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);
}
@ -81,7 +81,7 @@ export default {
margin-left: -8px;
border-style: solid;
border-color: transparent;
border-bottom-color: var(--p-confirmpopup-background);
border-bottom-color: ${dt('confirmpopup.background')};
}
.p-confirm-popup:before {
@ -89,7 +89,7 @@ export default {
margin-left: -10px;
border-style: solid;
border-color: transparent;
border-bottom-color: var(--p-confirmpopup-border-color);
border-bottom-color: ${dt('confirmpopup.border.color')};
}
.p-confirm-popup-flipped:after,
@ -100,12 +100,12 @@ export default {
.p-confirm-popup-flipped:after {
border-bottom-color: transparent;
border-top-color: var(--p-confirmpopup-background);
border-top-color: ${dt('confirmpopup.background')};
}
.p-confirm-popup-flipped:before {
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 {
max-height: 90%;
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);
background: var(--p-dialog-background);
border: 1px solid var(--p-dialog-border-color);
color: var(--p-dialog-text-color);
background: ${dt('dialog.background')};
border: 1px solid ${dt('dialog.border.color')};
color: ${dt('dialog.color')};
}
.p-dialog-content {
@ -50,7 +50,7 @@ export default {
position: relative;
width: 1.75rem;
height: 1.75rem;
color: var(--p-dialog-header-icon-color);
color: ${dt('dialog.header.icon.color')};
border: 0 none;
background: transparent;
border-radius: 50%;
@ -59,8 +59,8 @@ export default {
}
.p-dialog-header-icon:enabled:hover {
background: var(--p-dialog-header-icon-background-hover);
color: var(--p-dialog-header-icon-color-hover);
background: ${dt('dialog.header.icon.hover.background')};
color: ${dt('dialog.header.icon.hover.color')};
}
.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 }) => `
.p-overlaypanel {
margin-top: 10px;
background: var(--p-overlaypanel-background);
color: var(--p-overlaypanel-text-color);
border: 1px solid var(--p-overlaypanel-border-color);
background: ${dt('overlaypanel.background')};
color: ${dt('overlaypanel.color')};
border: 1px solid ${dt('overlaypanel.border.color')};
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);
}
@ -26,7 +26,7 @@ export default {
width: 1.75rem;
height: 1.75rem;
background: transparent;
color: var(--p-overlaypanel-close-icon-color);
color: ${dt('overlaypanel.close.icon.color')};
border: 0 none;
border-radius: 50%;
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 {
background: var(--p-overlaypanel-close-icon-background-hover);
color: var(--p-overlaypanel-close-icon-color-hover);
background: ${dt('overlaypanel.close.icon.hover.background')};
color: ${dt('overlaypanel.close.icon.hover.color')};
}
.p-overlaypanel-close:focus-visible {
@ -79,7 +79,7 @@ export default {
margin-left: -8px;
border-style: solid;
border-color: transparent;
border-bottom-color: var(--p-overlaypanel-background);
border-bottom-color: ${dt('overlaypanel.background')};
}
.p-overlaypanel:before {
@ -87,7 +87,7 @@ export default {
margin-left: -10px;
border-style: solid;
border-color: transparent;
border-bottom-color: var(--p-overlaypanel-border-color);
border-bottom-color: ${dt('overlaypanel.border.color')};
}
.p-overlaypanel-flipped:after,
@ -98,12 +98,12 @@ export default {
.p-overlaypanel.p-overlaypanel-flipped:after {
border-bottom-color: transparent;
border-top-color: var(--p-overlaypanel-background);
border-top-color: ${dt('overlaypanel.background')};
}
.p-overlaypanel.p-overlaypanel-flipped:before {
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);
position: relative;
transition: transform 0.3s;
background: var(--p-sidebar-background);
color: var(--p-sidebar-text-color);
border: 0 solid var(--p-sidebar-border-color);
background: ${dt('sidebar.background')};
color: ${dt('sidebar.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);
}
@ -40,7 +40,7 @@ export default {
position: relative;
width: 1.75rem;
height: 1.75rem;
color: var(--p-sidebar-header-icon-color);
color: ${dt('sidebar.header.icon.color')};
border: 0 none;
background: transparent;
border-radius: 50%;
@ -49,8 +49,8 @@ export default {
}
.p-sidebar-icon:enabled:hover {
background: var(--p-sidebar-header-icon-background-hover);
color: var(--p-sidebar-header-icon-color-hover);
background: ${dt('sidebar.header.icon.hover.background')};
color: ${dt('sidebar.header.icon.hover.color')};
}
.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 {
white-space: pre-line;
word-break: break-word;
background: var(--p-tooltip-background);
color: var(--p-tooltip-text-color);
background: ${dt('tooltip.background')};
color: ${dt('tooltip.color')};
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);
border-radius: 6px;
@ -38,20 +38,20 @@ export default {
.p-tooltip-right .p-tooltip-arrow {
margin-top: -0.25rem;
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 {
margin-top: -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 {
margin-left: -0.25rem;
border-width: 0.25em 0.25em 0;
border-top-color: var(--p-tooltip-background);
border-bottom-color: var(--p-tooltip-background);
border-top-color: ${dt('tooltip.background')};
border-bottom-color: ${dt('tooltip.background')};
}
.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: {
background: '{surface.0}',
borderColor: '{surface.200}',
textColor: '{surface.700}'
color: '{surface.700}'
}
},
dark: {
root: {
background: '{surface.900}',
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: {
background: '{surface.0}',
borderColor: '{surface.200}',
textColor: '{surface.700}'
color: '{surface.700}'
},
headerIcon: {
color: '{surface.500}',
colorHover: '{surface.600}',
backgroundHover: '{surface.100}'
hoverColor: '{surface.600}',
hoverBackground: '{surface.100}'
}
},
dark: {
root: {
background: '{surface.900}',
borderColor: '{surface.700}',
textColor: '{surface.0}'
color: '{surface.0}'
},
headerIcon: {
color: '{surface.400}',
colorHover: '{surface.300}',
backgroundHover: '{surface.800}'
hoverColor: '{surface.300}',
hoverBackground: '{surface.800}'
}
}
}

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

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

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

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

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

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