Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2025-06-11 12:53:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Increase hit target for dropdown

Browse source 
Add CartRecord type
Remove OOP style Promises from Contact
Add contact reason dropdown
The usual SCSS changes and adjustments
This commit is contained in:
Michał Gdula 2024-05-16 13:32:11 +01:00
parent 865654de87
commit c908a544aa
7 changed files with 125 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

35
front/src/components/DropDown.svelte
View file

@ -6,12 +6,10 @@
</script>
<div class="dropdown" class:open={open}>
<div class="dropdown-header">
<p>{name}</p>
<button on:click={() => { open = !open }}>
<CaretDown />
</button>
</div>
<button class="dropdown-header" on:click={() => { open = !open }}>
<span class="dropdown-text">{name}</span>
<span class="dropdown-button"><CaretDown /></span>
</button>
<div class="dropdown-content">
<slot></slot>
</div>
@ -28,6 +26,8 @@
.dropdown-header {
padding: $spacing-normal;
width: 100%;
position: relative;
display: flex;
@ -35,12 +35,15 @@
justify-content: space-between;
align-items: center;
p {
border: 0 solid transparent;
background-color: transparent;
.dropdown-text {
font-size: $font-size-h6;
font-weight: $font-weight-bold;
}
button {
.dropdown-button {
padding: 0;
height: 100%;
@ -62,9 +65,13 @@
color: $color-on-light;
transition: transform 0.1s ease-in-out;
}
&:hover {
&:hover, &:focus-visible {
.dropdown-button {
color: $color-primary;
outline: 0 solid transparent;
transform: rotate(-15deg);
}
}
}
@ -76,11 +83,15 @@
&.open {
.dropdown-header {
//padding: $spacing-normal $spacing-normal $spacing-small;
button {
.dropdown-button {
transform: rotate(-180deg);
}
&:hover, &:focus-visible {
.dropdown-button {
transform: rotate(calc(-180deg + 15deg));
}
}
}
.dropdown-content {
display: block;