CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-07 07:15:43 +12:00
Code Issues Projects Releases Wiki Activity

Update new component panel styles to only use border when focused via keyboard, but background colour when hovering

Browse source
This commit is contained in:
Andrew Kingston 2022-07-27 13:03:16 +01:00
parent 8e59ffa056
commit bdb37e1641
1 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
View file

@ -237,23 +237,23 @@
margin-top: var(--spacing-xs); margin-top: var(--spacing-xs);
} }
.component { .component {
background-color: var(--spectrum-global-color-gray-200); background: var(--spectrum-global-color-gray-200);
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid var(--spectrum-global-color-gray-200); border: 1px solid var(--spectrum-global-color-gray-200);
transition: border-color 130ms ease-out; transition: background 130ms ease-out, border-color 130ms ease-out;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
padding: var(--spacing-s) var(--spacing-l); padding: var(--spacing-s) var(--spacing-l);
gap: var(--spacing-m); gap: var(--spacing-m);
overflow: hidden; overflow: hidden;
} }
.component.selected, .component.selected {
.component:hover {
border-color: var(--spectrum-global-color-blue-400); border-color: var(--spectrum-global-color-blue-400);
} }
.component:hover { .component:hover {
background: var(--spectrum-global-color-gray-300);
cursor: pointer; cursor: pointer;
} }
.component :global(.spectrum-Body) { .component :global(.spectrum-Body) {