MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

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) {