Update device preview picker to be quiet
This commit is contained in:
parent
77f9b11e88
commit
1b34bc8e81
|
@ -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>
|
||||
|
|
|
@ -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")}
|
||||
|
|
Loading…
Reference in New Issue