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

Improve touchtarget for DropDown

Browse source 
Improve FourOhFour page
This commit is contained in:
Michał Gdula 2024-04-25 19:48:12 +01:00
parent e8493d53f8
commit 4433d7cc19
6 changed files with 162 additions and 166 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -12,24 +12,24 @@
<CaretDown />
</button>
</div>
{#if open }
<div class="dropdown-content">
<slot></slot>
</div>
{/if}
<div class="dropdown-content">
<slot></slot>
</div>
</div>
<style lang="scss">
@import "%/styles/vars";
.dropdown {
//padding: $spacing-normal;
border-bottom: 1px solid transparent;
//background-color: $color-light;
color: $color-on-light;
.dropdown-header {
padding: $spacing-normal;
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
@ -41,8 +41,14 @@
}
button {
height: 25px;
width: 30px;
padding: 0;
height: 100%;
width: 60px;
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
@ -64,14 +70,13 @@
}
.dropdown-content {
//padding-top: $spacing-small;
padding: 0 $spacing-normal $spacing-normal;
display: none;
}
&.open {
.dropdown-header {
padding-bottom: $spacing-small;
//border-bottom: 1px solid rgba($color-dark, 0.1);
//padding: $spacing-normal $spacing-normal $spacing-small;
button {
transform: rotate(-180deg);