diff --git a/src/lib/components/Slider.svelte b/src/lib/components/Slider.svelte index cb3f7d3..86fa8cf 100644 --- a/src/lib/components/Slider.svelte +++ b/src/lib/components/Slider.svelte @@ -25,6 +25,6 @@ diff --git a/src/lib/editor/PositionScalePanel.svelte b/src/lib/editor/PositionScalePanel.svelte index e1a2272..fe7464d 100644 --- a/src/lib/editor/PositionScalePanel.svelte +++ b/src/lib/editor/PositionScalePanel.svelte @@ -117,15 +117,17 @@ const setfixedMargin = (v: boolean) => mockupStore.setFixedMargin(v); const positionBalls = [ - { style: 'left:25px; top:25px' }, - { style: 'right:25px; top:25px' }, - { style: 'left:25px; bottom:25px' }, - { style: 'right:25px; bottom:25px' }, - { style: 'left:50%; top:25px; transform:translateX(-50%)' }, - { style: 'left:50%; bottom:25px; transform:translateX(-50%)' }, - { style: 'left:25px; top:50%; transform:translateY(-50%)' }, - { style: 'right:25px; top:50%; transform:translateY(-50%)' }, - { style: 'left:50%; top:50%; transform:translate(-50%,-50%)' } + { style: 'left:25px; top:25px' }, // top-left + { style: 'left:50%; top:25px; transform:translateX(-50%)' }, // top-center + { style: 'right:25px; top:25px' }, // top-right + + { style: 'left:25px; top:50%; transform:translateY(-50%)' }, // middle-left + { style: 'left:50%; top:50%; transform:translate(-50%,-50%)' }, // center + { style: 'right:25px; top:50%; transform:translateY(-50%)' }, // middle-right + + { style: 'left:25px; bottom:25px' }, // bottom-left + { style: 'left:50%; bottom:25px; transform:translateX(-50%)' }, // bottom-center + { style: 'right:25px; bottom:25px' } // bottom-right ]; @@ -218,7 +220,7 @@ () => scale, (value) => { scale = value; - mockupStore.updateDevicePosition({ scale: v }); + mockupStore.updateDevicePosition({ scale: value }); } } /> diff --git a/src/lib/styles/global.css b/src/lib/styles/global.css index 1d516d6..ff2254c 100644 --- a/src/lib/styles/global.css +++ b/src/lib/styles/global.css @@ -46,3 +46,8 @@ body { @apply underline hover:no-underline; } } + +* :focus-visible { + outline: 2px solid var(--text); + outline-offset: 2px; +}