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

Final touches on ImageCompare

pull/6537/head
Cagatay Civici 2024-10-04 18:50:47 +03:00
parent 6bb2d74392
commit d3ab5c1121
8 changed files with 55 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/primevue/src/imagecompare/style/ImageCompareStyle.js
View File

@ -33,11 +33,11 @@ const theme = ({ dt }) => `
height: ${dt('imagecompare.handle.size')};
width: ${dt('imagecompare.handle.size')};
background: ${dt('imagecompare.handle.background')};
border: ${dt('imagecompare.handle.border.width')} ${dt('imagecompare.handle.border.style')} ${dt('imagecompare.handle.border.color')};
border: ${dt('imagecompare.handle.border.width')} solid ${dt('imagecompare.handle.border.color')};
border-radius: ${dt('imagecompare.handle.border.radius')};
background-size: contain;
cursor: ew-resize;
transition: all ${dt('transition.duration')};
transition: all ${dt('imagecompare.handle.transition.duration')};
}
.p-imagecompare-slider::-moz-range-thumb {
@ -55,6 +55,26 @@ const theme = ({ dt }) => `
outline: ${dt('imagecompare.handle.focus.ring.width')} ${dt('imagecompare.handle.focus.ring.style')} ${dt('imagecompare.handle.focus.ring.color')};
outline-offset: ${dt('imagecompare.handle.focus.ring.offset')};
}
.p-imagecompare-slider:focus-visible::-moz-range-thumb {
box-shadow: ${dt('imagecompare.handle.focus.ring.shadow')};
outline: ${dt('imagecompare.handle.focus.ring.width')} ${dt('imagecompare.handle.focus.ring.style')} ${dt('imagecompare.handle.focus.ring.color')};
outline-offset: ${dt('imagecompare.handle.focus.ring.offset')};
}
.p-imagecompare-slider:hover::-webkit-slider-thumb {
background: ${dt('imagecompare.handle.hover.background')};
border-color: ${dt('imagecompare.handle.hover.border.color')};
height: ${dt('imagecompare.handle.hover.size')};
width: ${dt('imagecompare.handle.hover.size')};
}
.p-imagecompare-slider:hover::-moz-range-thumb {
background: ${dt('imagecompare.handle.hover.background')};
border-color: ${dt('imagecompare.handle.hover.border.color')};
height: ${dt('imagecompare.handle.hover.size')};
width: ${dt('imagecompare.handle.hover.size')};
}
`;
const classes = {

14
packages/themes/src/presets/aura/imagecompare/index.js
View File

@ -1,13 +1,13 @@
export default {
handle: {
size: '30px',
size: '15px',
hoverSize: '30px',
background: 'rgba(255,255,255,0.3)',
border: {
width: '3px',
style: 'solid',
color: 'rgba(255,255,255,0.3)',
radius: '50%'
},
hoverBackground: 'rgba(255,255,255,0.3)',
borderColor: 'unset',
hoverBorderColor: 'unset',
borderWidth: '0',
borderRadius: '50%',
transitionDuration: '{transition.duration}',
focusRing: {
width: '{focus.ring.width}',

14
packages/themes/src/presets/lara/imagecompare/index.js
View File

@ -1,13 +1,13 @@
export default {
handle: {
size: '30px',
size: '15px',
hoverSize: '30px',
background: 'rgba(255,255,255,0.3)',
border: {
width: '3px',
style: 'solid',
color: 'rgba(255,255,255,0.3)',
radius: '50%'
},
hoverBackground: 'rgba(255,255,255,0.3)',
borderColor: 'rgba(255,255,255,0.3)',
hoverBorderColor: 'rgba(255,255,255,0.3)',
borderWidth: '3px',
borderRadius: '50%',
transitionDuration: '{transition.duration}',
focusRing: {
width: '{focus.ring.width}',

2
packages/themes/src/presets/lara/index.js
View File

@ -1,4 +1,3 @@
import imagecompare from '@primevue/themes/aura/imagecompare';
import accordion from '@primevue/themes/lara/accordion';
import autocomplete from '@primevue/themes/lara/autocomplete';
import avatar from '@primevue/themes/lara/avatar';
@ -31,6 +30,7 @@ import galleria from '@primevue/themes/lara/galleria';
import iconfield from '@primevue/themes/lara/iconfield';
import iftalabel from '@primevue/themes/lara/iftalabel';
import image from '@primevue/themes/lara/image';
import imagecompare from '@primevue/themes/lara/imagecompare';
import inlinemessage from '@primevue/themes/lara/inlinemessage';
import inplace from '@primevue/themes/lara/inplace';
import inputchips from '@primevue/themes/lara/inputchips';

16
packages/themes/src/presets/material/imagecompare/index.js
View File

@ -1,13 +1,13 @@
export default {
handle: {
size: '30px',
background: 'rgba(255,255,255,0.3)',
border: {
width: '3px',
style: 'solid',
color: 'rgba(255,255,255,0.3)',
radius: '50%'
},
size: '20px',
hoverSize: '40px',
background: 'rgba(255,255,255,0.4)',
hoverBackground: 'rgba(255,255,255,0.6)',
borderColor: 'unset',
hoverBorderColor: 'unset',
borderWidth: '0',
borderRadius: '50%',
transitionDuration: '{transition.duration}',
focusRing: {
width: '{focus.ring.width}',

2
packages/themes/src/presets/material/index.js
View File

@ -1,4 +1,3 @@
import imagecompare from '@primevue/themes/aura/imagecompare';
import accordion from '@primevue/themes/material/accordion';
import autocomplete from '@primevue/themes/material/autocomplete';
import avatar from '@primevue/themes/material/avatar';
@ -31,6 +30,7 @@ import galleria from '@primevue/themes/material/galleria';
import iconfield from '@primevue/themes/material/iconfield';
import iftalabel from '@primevue/themes/material/iftalabel';
import image from '@primevue/themes/material/image';
import imagecompare from '@primevue/themes/material/imagecompare';
import inlinemessage from '@primevue/themes/material/inlinemessage';
import inplace from '@primevue/themes/material/inplace';
import inputchips from '@primevue/themes/material/inputchips';

16
packages/themes/src/presets/nora/imagecompare/index.js
View File

@ -1,14 +1,14 @@
export default {
handle: {
size: '30px',
size: '15px',
hoverSize: '30px',
background: 'rgba(255,255,255,0.3)',
border: {
width: '3px',
style: 'solid',
color: 'rgba(255,255,255,0.3)',
radius: '50%'
},
transitionDuration: '{transition.duration}',
hoverBackground: 'rgba(255,255,255,0.3)',
borderColor: 'rgba(255,255,255,0.3)',
hoverBorderColor: 'rgba(255,255,255,0.3)',
borderWidth: '3px',
borderRadius: '{content.border.radius}',
transitionDuration: '0.2s',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',

2
packages/themes/src/presets/nora/index.js
View File

@ -1,4 +1,3 @@
import imagecompare from '@primevue/themes/aura/imagecompare';
import accordion from '@primevue/themes/nora/accordion';
import autocomplete from '@primevue/themes/nora/autocomplete';
import avatar from '@primevue/themes/nora/avatar';
@ -31,6 +30,7 @@ import galleria from '@primevue/themes/nora/galleria';
import iconfield from '@primevue/themes/nora/iconfield';
import iftalabel from '@primevue/themes/nora/iftalabel';
import image from '@primevue/themes/nora/image';
import imagecompare from '@primevue/themes/nora/imagecompare';
import inlinemessage from '@primevue/themes/nora/inlinemessage';
import inplace from '@primevue/themes/nora/inplace';
import inputchips from '@primevue/themes/nora/inputchips';