Update device preview picker to be quiet

This commit is contained in:
Andrew Kingston 2022-07-26 11:37:27 +01:00
parent 160d770655
commit 05c63265e7
2 changed files with 11 additions and 1 deletions

View File

@ -84,6 +84,7 @@
}
:global([dir="ltr"] .spectrum-ActionButton .spectrum-Icon) {
margin-left: 0;
transition: color ease-out 130ms;
}
.is-selected:not(.spectrum-ActionButton--emphasized) {
background: var(--spectrum-global-color-gray-300);
@ -92,4 +93,10 @@
padding: 0;
min-width: 0;
}
.spectrum-ActionButton--quiet {
padding: 0 8px;
}
.is-selected:not(.emphasized) .spectrum-Icon {
color: var(--spectrum-global-color-gray-900);
}
</style>

View File

@ -3,18 +3,21 @@
import { store } from "builderStore"
</script>
<ActionGroup compact>
<ActionGroup compact quiet>
<ActionButton
quiet
icon="DeviceDesktop"
selected={$store.previewDevice === "desktop"}
on:click={() => store.actions.preview.setDevice("desktop")}
/>
<ActionButton
quiet
icon="DeviceTablet"
selected={$store.previewDevice === "tablet"}
on:click={() => store.actions.preview.setDevice("tablet")}
/>
<ActionButton
quiet
icon="DevicePhone"
selected={$store.previewDevice === "mobile"}
on:click={() => store.actions.preview.setDevice("mobile")}