Chellaris/chellaris-sign-up-site
Chellaris/chellaris-sign-up-site
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity

Bring Dropdown Styling inline with navbar styling

Browse source
This commit is contained in:
Neshura 2023-08-14 19:54:34 +02:00
parent b719e3f039
commit c11279d68e
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
2 changed files with 34 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/lib/components/DropDown.svelte
View file

@ -44,7 +44,26 @@
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 {
@ -52,6 +71,13 @@
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;

7
src/lib/components/DropDownElement.svelte
View file

@ -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;
}
</style>