diff --git a/src/lib/components/DropDown.svelte b/src/lib/components/DropDown.svelte index 8fe6c35..58a2b71 100644 --- a/src/lib/components/DropDown.svelte +++ b/src/lib/components/DropDown.svelte @@ -44,14 +44,40 @@ background-color: var(--background); color: var(--color-text); border: none; - height: var(--height-m); + height: 100%; + font-weight: 700; + font-size: 0.8rem; + letter-spacing: 0.1em; + text-decoration: none; + text-transform: uppercase; + padding: 0 0.5rem; + transition: color 0.2s linear; } + .dropdown-button::before { + --size: 6px; + content: ''; + width: 0; + height: 0; + position: absolute; + bottom: 4px; + left: calc(50% - var(--size)); + border: var(--size) solid transparent; + border-top: var(--size) solid var(--color-text); + } + .dropdown-button:hover { cursor: pointer; color: var(--color-active-1); } + .dropdown-button:hover::before { + --size: 8px; + bottom: 0; + border-top: var(--size) solid var(--color-active-1); + transition: --size 0.2s linear; + } + .dropdown-container { list-style-type: none; width: max-content; diff --git a/src/lib/components/DropDownElement.svelte b/src/lib/components/DropDownElement.svelte index 51f145e..a3fe101 100644 --- a/src/lib/components/DropDownElement.svelte +++ b/src/lib/components/DropDownElement.svelte @@ -15,5 +15,12 @@ margin: 10% auto; margin-left: 0; background: #3f3f3f; + height: 100%; + font-weight: 700; + font-size: 0.8rem; + letter-spacing: 0.1em; + text-decoration: none; + text-transform: uppercase; + transition: color 0.2s linear; } \ No newline at end of file