style: updated dropdown look
added better dropshadow increased item size
mellbacon committed
Jun 15, 2023 at 11:38 UTC
aaa7b304e7d8e29761a3ceb6871e94fc7b6233ee
2 files changed
+8
-4
src/lib/utility/Dropdown.svelte
+5
-4
@@ -30,7 +30,7 @@
30
}}></svelte:window>
31
32
<!-- svelte-ignore a11y-click-events-have-key-events -->
33
-<div bind:this={button} class="dropdown-button" on:click={() => {open = !open}}>
33
+<div bind:this={button} class="dropdown-button" class:open on:click={() => {open = !open}}>
34
{#if menu.icon}
35
<svelte:component this={menu.icon}></svelte:component>
36
{:else}
@@ -67,6 +67,7 @@
67
min-width: 2.2rem;
68
padding: 0 5px;
69
position: relative;
70
+ cursor: pointer;
71
:global(svg) {
72
width: 18px;
73
height: 18px;
@@ -80,8 +81,7 @@
81
min-width: 11.5rem;
82
width: max-content;
83
align-items: center;
83
- padding: 3px 0;
84
- box-shadow: rgb(0 0 0 / 10%) 0px 0px 4px 2px;
84
+ box-shadow: 0 2px 6px rgba(0, 0, 0, .8);
85
border-radius: 3px;
86
z-index: 9999;
87
}
@@ -90,9 +90,10 @@
90
align-items: center;
91
justify-content: space-between;
92
height: 17px;
93
- padding: 5px 0;
93
+ padding: 7px 0;
94
width: 100%;
95
font-size: 0.875rem;
96
+ cursor: pointer;
97
}
98
.item-name, .shortcut {
99
padding: 0 10px;
src/theme.scss
+3
@@ -77,6 +77,9 @@ html {
77
&:hover {
78
background-color: var(--header-buttonHoverBackground);
79
}
80
+ &.open {
81
+ background-color: var(--header-buttonHoverBackground);
82
+ }
83
}
84
.dropdown-list {
85
background-color: var(--window-dropdownBackground);