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')}; height: ${dt('imagecompare.handle.size')};
width: ${dt('imagecompare.handle.size')}; width: ${dt('imagecompare.handle.size')};
background: ${dt('imagecompare.handle.background')}; 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')}; border-radius: ${dt('imagecompare.handle.border.radius')};
background-size: contain; background-size: contain;
cursor: ew-resize; cursor: ew-resize;
transition: all ${dt('transition.duration')}; transition: all ${dt('imagecompare.handle.transition.duration')};
} }
.p-imagecompare-slider::-moz-range-thumb { .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: ${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')}; 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 = { const classes = {

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

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

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

@ -1,13 +1,13 @@
export default { export default {
handle: { handle: {
size: '30px', size: '15px',
hoverSize: '30px',
background: 'rgba(255,255,255,0.3)', background: 'rgba(255,255,255,0.3)',
border: { hoverBackground: 'rgba(255,255,255,0.3)',
width: '3px', borderColor: 'rgba(255,255,255,0.3)',
style: 'solid', hoverBorderColor: 'rgba(255,255,255,0.3)',
color: 'rgba(255,255,255,0.3)', borderWidth: '3px',
radius: '50%' borderRadius: '50%',
},
transitionDuration: '{transition.duration}', transitionDuration: '{transition.duration}',
focusRing: { focusRing: {
width: '{focus.ring.width}', 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 accordion from '@primevue/themes/lara/accordion';
import autocomplete from '@primevue/themes/lara/autocomplete'; import autocomplete from '@primevue/themes/lara/autocomplete';
import avatar from '@primevue/themes/lara/avatar'; 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 iconfield from '@primevue/themes/lara/iconfield';
import iftalabel from '@primevue/themes/lara/iftalabel'; import iftalabel from '@primevue/themes/lara/iftalabel';
import image from '@primevue/themes/lara/image'; import image from '@primevue/themes/lara/image';
import imagecompare from '@primevue/themes/lara/imagecompare';
import inlinemessage from '@primevue/themes/lara/inlinemessage'; import inlinemessage from '@primevue/themes/lara/inlinemessage';
import inplace from '@primevue/themes/lara/inplace'; import inplace from '@primevue/themes/lara/inplace';
import inputchips from '@primevue/themes/lara/inputchips'; import inputchips from '@primevue/themes/lara/inputchips';

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

@ -1,13 +1,13 @@
export default { export default {
handle: { handle: {
size: '30px', size: '20px',
background: 'rgba(255,255,255,0.3)', hoverSize: '40px',
border: { background: 'rgba(255,255,255,0.4)',
width: '3px', hoverBackground: 'rgba(255,255,255,0.6)',
style: 'solid', borderColor: 'unset',
color: 'rgba(255,255,255,0.3)', hoverBorderColor: 'unset',
radius: '50%' borderWidth: '0',
}, borderRadius: '50%',
transitionDuration: '{transition.duration}', transitionDuration: '{transition.duration}',
focusRing: { focusRing: {
width: '{focus.ring.width}', 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 accordion from '@primevue/themes/material/accordion';
import autocomplete from '@primevue/themes/material/autocomplete'; import autocomplete from '@primevue/themes/material/autocomplete';
import avatar from '@primevue/themes/material/avatar'; 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 iconfield from '@primevue/themes/material/iconfield';
import iftalabel from '@primevue/themes/material/iftalabel'; import iftalabel from '@primevue/themes/material/iftalabel';
import image from '@primevue/themes/material/image'; import image from '@primevue/themes/material/image';
import imagecompare from '@primevue/themes/material/imagecompare';
import inlinemessage from '@primevue/themes/material/inlinemessage'; import inlinemessage from '@primevue/themes/material/inlinemessage';
import inplace from '@primevue/themes/material/inplace'; import inplace from '@primevue/themes/material/inplace';
import inputchips from '@primevue/themes/material/inputchips'; import inputchips from '@primevue/themes/material/inputchips';

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

@ -1,14 +1,14 @@
export default { export default {
handle: { handle: {
size: '30px', size: '15px',
hoverSize: '30px',
background: 'rgba(255,255,255,0.3)', background: 'rgba(255,255,255,0.3)',
border: { hoverBackground: 'rgba(255,255,255,0.3)',
width: '3px', borderColor: 'rgba(255,255,255,0.3)',
style: 'solid', hoverBorderColor: 'rgba(255,255,255,0.3)',
color: 'rgba(255,255,255,0.3)', borderWidth: '3px',
radius: '50%' borderRadius: '{content.border.radius}',
}, transitionDuration: '0.2s',
transitionDuration: '{transition.duration}',
focusRing: { focusRing: {
width: '{focus.ring.width}', width: '{focus.ring.width}',
style: '{focus.ring.style}', 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 accordion from '@primevue/themes/nora/accordion';
import autocomplete from '@primevue/themes/nora/autocomplete'; import autocomplete from '@primevue/themes/nora/autocomplete';
import avatar from '@primevue/themes/nora/avatar'; 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 iconfield from '@primevue/themes/nora/iconfield';
import iftalabel from '@primevue/themes/nora/iftalabel'; import iftalabel from '@primevue/themes/nora/iftalabel';
import image from '@primevue/themes/nora/image'; import image from '@primevue/themes/nora/image';
import imagecompare from '@primevue/themes/nora/imagecompare';
import inlinemessage from '@primevue/themes/nora/inlinemessage'; import inlinemessage from '@primevue/themes/nora/inlinemessage';
import inplace from '@primevue/themes/nora/inplace'; import inplace from '@primevue/themes/nora/inplace';
import inputchips from '@primevue/themes/nora/inputchips'; import inputchips from '@primevue/themes/nora/inputchips';