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

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

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

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

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

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

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

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

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