1
0
Fork 0
mirror of synced 2024-07-04 14:01:27 +12:00

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

View file

@ -237,23 +237,23 @@
margin-top: var(--spacing-xs);
}
.component {
background-color: var(--spectrum-global-color-gray-200);
background: var(--spectrum-global-color-gray-200);
border-radius: 4px;
display: flex;
align-items: center;
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;
justify-content: flex-start;
padding: var(--spacing-s) var(--spacing-l);
gap: var(--spacing-m);
overflow: hidden;
}
.component.selected,
.component:hover {
.component.selected {
border-color: var(--spectrum-global-color-blue-400);
}
.component:hover {
background: var(--spectrum-global-color-gray-300);
cursor: pointer;
}
.component :global(.spectrum-Body) {