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

Migrated Media components

pull/5507/head
Cagatay Civici 2024-03-12 14:27:32 +03:00
parent 475604491f
commit 66dbc53907
6 changed files with 62 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,7 +38,7 @@ export default {
position: relative; position: relative;
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
color: var(--p-carousel-navigator-color); color: ${dt('carousel.navigator.color')};
border: 0 none; border: 0 none;
background: transparent; background: transparent;
border-radius: 50%; border-radius: 50%;
@ -49,8 +49,8 @@ export default {
.p-carousel-prev:enabled:hover, .p-carousel-prev:enabled:hover,
.p-carousel-next:enabled:hover { .p-carousel-next:enabled:hover {
color: var(--p-carousel-navigator-color-hover); color: ${dt('carousel.navigator.hover.color')};
background: var(--p-carousel-navigator-background-hover); background: ${dt('carousel.navigator.hover.background')};
} }
.p-carousel-prev:focus-visible, .p-carousel-prev:focus-visible,
@ -72,7 +72,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--p-carousel-indicator-background); background: ${dt('carousel.indicator.background')};
width: 2rem; width: 2rem;
height: 0.5rem; height: 0.5rem;
border: 0 none; border: 0 none;
@ -87,11 +87,11 @@ export default {
} }
.p-carousel-indicator button:hover { .p-carousel-indicator button:hover {
background: var(--p-carousel-indicator-background-hover); background: ${dt('carousel.indicator.hover.background')};
} }
.p-carousel-indicator.p-highlight button { .p-carousel-indicator.p-highlight button {
background: var(--p-carousel-indicator-background-active); background: ${dt('carousel.indicator.active.background')};
} }
.p-carousel-vertical .p-carousel-container { .p-carousel-vertical .p-carousel-container {

37
components/lib/themes/primeone/base/galleria/index.js
View File

@ -26,7 +26,7 @@ export default {
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
background: transparent; background: transparent;
color: var(--p-galleria-navigator-color); color: ${dt('galleria.navigator.color')};
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
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')};
@ -35,7 +35,7 @@ export default {
} }
.p-galleria-item-nav:not(.p-disabled):hover { .p-galleria-item-nav:not(.p-disabled):hover {
background: var(--p-galleria-navigator-background-hover); background: ${dt('galleria.navigator.hover.background')};
} }
.p-galleria-item-prev-icon, .p-galleria-item-prev-icon,
@ -81,8 +81,8 @@ export default {
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
background: var(--p-galleria-caption-background); background: ${dt('galleria.caption.background')};
color: var(--p-galleria-caption-text-color); color: ${dt('galleria.caption.color')};
padding: 1rem; padding: 1rem;
} }
@ -104,7 +104,7 @@ export default {
position: relative; position: relative;
margin: 0.5rem; margin: 0.5rem;
background: transparent; background: transparent;
color: var(--p-galleria-thumbnail-navigator-color); color: ${dt('galleria.thumbnail.navigator.color')};
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
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')};
@ -114,8 +114,8 @@ export default {
.p-galleria-thumbnail-prev:hover, .p-galleria-thumbnail-prev:hover,
.p-galleria-thumbnail-next:hover { .p-galleria-thumbnail-next:hover {
background: var(--p-galleria-thumbnail-navigator-background-hover); background: ${dt('galleria.thumbnail.navigator.hover.background')};
color: var(--p-galleria-thumbnail-navigator-color-hover); color: ${dt('galleria.thumbnail.navigator.hover.color')};
} }
.p-galleria-thumbnail-prev:focus-visible, .p-galleria-thumbnail-prev:focus-visible,
@ -134,7 +134,7 @@ export default {
.p-galleria-thumbnail-container { .p-galleria-thumbnail-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background: var(--p-galleria-thumbnail-container-background); background: ${dt('galleria.thumbnail.container.background')};
padding: 1rem 0.25rem; padding: 1rem 0.25rem;
} }
@ -217,7 +217,7 @@ export default {
.p-galleria-indicator > button { .p-galleria-indicator > button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
background-color: var(--p-galleria-indicator-background); background: ${dt('galleria.indicator.background')};
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
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')};
@ -226,7 +226,7 @@ export default {
} }
.p-galleria-indicator > button:hover { .p-galleria-indicator > button:hover {
background: var(--p-galleria-indicator-background-hover); background: ${dt('galleria.indicator.hover.background')};
} }
.p-galleria-indicator > button:focus-visible { .p-galleria-indicator > button:focus-visible {
@ -235,7 +235,7 @@ export default {
} }
.p-galleria-indicator.p-highlight > button { .p-galleria-indicator.p-highlight > button {
background-color: var(--p-galleria-indicator-background-active); background-color: ${dt('galleria.indicator.active.background')};
} }
.p-galleria-indicators-left .p-galleria-item-wrapper, .p-galleria-indicators-left .p-galleria-item-wrapper,
@ -263,15 +263,15 @@ export default {
position: absolute; position: absolute;
display: flex; display: flex;
z-index: 1; z-index: 1;
background: var(--p-galleria-inset-indicators-background); background: ${dt('galleria.inset.indicators.background')};
} }
.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator > button { .p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator > button {
background: var(--p-galleria-inset-indicator-background); background: ${dt('galleria.inset.indicator.background')};
} }
.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight > button { .p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight > button {
background-color: var(--p-galleria-inset-indicator-background-active); background: ${dt('galleria.inset.indicator.active.background')};
} }
.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {
@ -302,7 +302,6 @@ export default {
align-items: flex-start; align-items: flex-start;
} }
.p-galleria-mask { .p-galleria-mask {
position: fixed; position: fixed;
top: 0; top: 0;
@ -312,7 +311,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
--p-mask-background: var(--p-galleria-mask-background); --p-mask-background: ${dt('galleria.mask.background')};
} }
.p-galleria-close { .p-galleria-close {
@ -325,7 +324,7 @@ export default {
overflow: hidden; overflow: hidden;
margin: 0.5rem; margin: 0.5rem;
background: transparent; background: transparent;
color: var(--p-galleria-close-color); color: ${dt('galleria.close.color')};
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
border-radius: 50%; border-radius: 50%;
@ -340,8 +339,8 @@ export default {
} }
.p-galleria-close:hover { .p-galleria-close:hover {
background: var(--p-galleria-close-background-hover); background: ${dt('galleria.close.hover.background')};
color: var(--p-galleria-close-color-hover); color: ${dt('galleria.close.hover.color')};
} }
.p-galleria-close:focus-visible { .p-galleria-close:focus-visible {

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

@ -4,7 +4,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
--p-mask-background: var(--p-image-mask-background); --p-mask-background: ${dt('image.mask.background')};
} }
.p-image-preview-container { .p-image-preview-container {
@ -28,14 +28,14 @@ export default {
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
color: var(--p-image-preview-indicator-text-color); color: ${dt('image.preview.indicator.color')};
transition: background-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')};
} }
.p-image-preview-container:hover > .p-image-preview-indicator { .p-image-preview-container:hover > .p-image-preview-indicator {
opacity: 1; opacity: 1;
cursor: pointer; cursor: pointer;
background: var(--p-image-preview-indicator-background); background: ${dt('image.preview.indicator.background')};
} }
.p-image-preview-icon { .p-image-preview-icon {
@ -57,7 +57,7 @@ export default {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: var(--p-image-action-color); color: ${dt('image.action.color')};
background: transparent; background: transparent;
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
@ -67,8 +67,8 @@ export default {
} }
.p-image-action:hover { .p-image-action:hover {
color: var(--p-image-action-color-hover); color: ${dt('image.action.hover.color')};
background: var(--p-image-action-background-hover); background: ${dt('image.action.hover.background')};
} }
.p-image-action:focus-visible { .p-image-action:focus-visible {

16
components/lib/themes/primeone/presets/aura/carousel/index.js
View File

@ -3,25 +3,25 @@ export default {
light: { light: {
navigator: { navigator: {
color: '{surface.500}', color: '{surface.500}',
colorHover: '{surface.600}', hoverColor: '{surface.600}',
backgroundHover: '{surface.100}' hoverBackground: '{surface.100}'
}, },
indicator: { indicator: {
background: '{surface.200}', background: '{surface.200}',
backgroundHover: '{surface.300}', hoverBackground: '{surface.300}',
backgroundActive: '{primary.color}' activeBackground: '{primary.color}'
} }
}, },
dark: { dark: {
navigator: { navigator: {
color: '{surface.400}', color: '{surface.400}',
colorHover: '{surface.300}', hoverColor: '{surface.300}',
backgroundHover: '{surface.800}' hoverBackground: '{surface.800}'
}, },
indicator: { indicator: {
background: '{surface.700}', background: '{surface.700}',
backgroundHover: '{surface.600}', hoverBackground: '{surface.600}',
backgroundActive: '{primary.color}' activeBackground: '{primary.color}'
} }
} }
} }

38
components/lib/themes/primeone/presets/aura/galleria/index.js
View File

@ -2,80 +2,78 @@ export default {
colorScheme: { colorScheme: {
light: { light: {
navigator: { navigator: {
backgroundHover: 'rgba(255, 255, 255, 0.1)', hoverBackground: 'rgba(255, 255, 255, 0.1)',
color: '{surface.100}' color: '{surface.100}'
}, },
thumbnailNavigator: { thumbnailNavigator: {
backgroundHover: '{surface.200}', hoverBackground: '{surface.200}',
color: '{surface.600}', color: '{surface.600}',
colorHover: '{surface.700}' hoverColor: '{surface.700}'
}, },
thumbnailContainer: { thumbnailContainer: {
background: '{surface.50}' background: '{surface.50}'
}, },
caption: { caption: {
background: 'rgba(0, 0, 0, 0.5)', background: 'rgba(0, 0, 0, 0.5)',
textColor: '{surface.100}' color: '{surface.100}'
}, },
indicator: { indicator: {
background: '{surface.200}', background: '{surface.200}',
backgroundHover: '{surface.300}', hoverBackground: '{surface.300}',
backgroundActive: '{primary.color}' activeBackground: '{primary.color}'
}, },
insetIndicators: { insetIndicators: {
background: 'rgba(0, 0, 0, 0.5)' background: 'rgba(0, 0, 0, 0.5)'
}, },
insetIndicator: { insetIndicator: {
background: 'rgba(255, 255, 255, 0.4)', background: 'rgba(255, 255, 255, 0.4)',
backgroundHover: 'rgba(255, 255, 255, 0.4)', hoverBackground: 'rgba(255, 255, 255, 0.4)'
backgroundActive: '{primary.color}'
}, },
mask: { mask: {
background: 'rgba(0,0,0,0.9)' background: 'rgba(0,0,0,0.9)'
}, },
close: { close: {
backgroundHover: 'rgba(255,255,255,0.1)', hoverBackground: 'rgba(255,255,255,0.1)',
color: '{surface.50}', color: '{surface.50}',
colorHover: '{surface.0}' hoverColor: '{surface.0}'
} }
}, },
dark: { dark: {
navigator: { navigator: {
backgroundHover: 'rgba(255, 255, 255, 0.1)', hoverBackground: 'rgba(255, 255, 255, 0.1)',
color: '{surface.400}' color: '{surface.400}'
}, },
thumbnailNavigator: { thumbnailNavigator: {
backgroundHover: '{surface.800}', hoverBackground: '{surface.800}',
color: '{surface.400}', color: '{surface.400}',
colorHover: '{surface.300}' hoverColor: '{surface.300}'
}, },
thumbnailContainer: { thumbnailContainer: {
background: '{surface.950}' background: '{surface.950}'
}, },
caption: { caption: {
background: 'rgba(0, 0, 0, 0.5)', background: 'rgba(0, 0, 0, 0.5)',
textColor: '{surface.100}' color: '{surface.100}'
}, },
indicator: { indicator: {
background: '{surface.200}', background: '{surface.200}',
backgroundHover: '{surface.300}', hoverBackground: '{surface.300}',
backgroundActive: '{primary.color}' activeBackground: '{primary.color}'
}, },
insetIndicators: { insetIndicators: {
background: 'rgba(0, 0, 0, 0.5)' background: 'rgba(0, 0, 0, 0.5)'
}, },
insetIndicator: { insetIndicator: {
background: 'rgba(255, 255, 255, 0.4)', background: 'rgba(255, 255, 255, 0.4)',
backgroundHover: 'rgba(255, 255, 255, 0.4)', hoverBackground: 'rgba(255, 255, 255, 0.4)'
backgroundActive: '{primary.color}'
}, },
mask: { mask: {
background: 'rgba(0,0,0,0.9)' background: 'rgba(0,0,0,0.9)'
}, },
close: { close: {
backgroundHover: 'rgba(255,255,255,0.1)', hoverBackground: 'rgba(255,255,255,0.1)',
color: '{surface.50}', color: '{surface.50}',
colorHover: '{surface.0}' hoverColor: '{surface.0}'
} }
} }
} }

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

@ -3,29 +3,29 @@ export default {
light: { light: {
previewIndicator: { previewIndicator: {
background: '{maskBackground}', background: '{maskBackground}',
textColor: '{surface.200}' color: '{surface.200}'
}, },
mask: { mask: {
background: 'rgba(0,0,0,0.9)' background: 'rgba(0,0,0,0.9)'
}, },
action: { action: {
backgroundHover: 'rgba(255,255,255,0.1)', hoverBackground: 'rgba(255,255,255,0.1)',
color: '{surface.50}', color: '{surface.50}',
colorHover: '{surface.0}' hoverColor: '{surface.0}'
} }
}, },
dark: { dark: {
previewIndicator: { previewIndicator: {
background: '{maskBackground}', background: '{maskBackground}',
textColor: '{surface.200}' color: '{surface.200}'
}, },
mask: { mask: {
background: 'rgba(0,0,0,0.9)' background: 'rgba(0,0,0,0.9)'
}, },
action: { action: {
backgroundHover: 'rgba(255,255,255,0.1)', hoverBackground: 'rgba(255,255,255,0.1)',
color: '{surface.50}', color: '{surface.50}',
colorHover: '{surface.0}' hoverColor: '{surface.0}'
} }
} }
} }