Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #94 from ToBinio/better-dropdown-transition

Browse Source 
improve dropdown transitions
This commit is contained in:
Prospector 2023-10-11 14:03:59 -07:00 committed by GitHub
commit d1a0cd1173
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
lib/components/base/DropdownButton.vue
View File

@ -201,6 +201,12 @@ onBeforeUnmount(() => {
.btn {
height: 2.25rem;
transition: 0.05s;
&:not(.render-down):not(.render-up) {
transition-delay: 0.2s;
}
}
}

7
lib/components/base/DropdownSelect.vue
View File

@ -210,6 +210,12 @@ const isChildOfDropdown = (element) => {
border-radius: var(--radius-md);
box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
transition: 0.05s;
&:not(.render-down):not(.render-up) {
transition-delay: 0.2s;
}
&.disabled {
cursor: not-allowed;
filter: grayscale(50%);
@ -232,6 +238,7 @@ const isChildOfDropdown = (element) => {
.arrow {
transition: transform 0.2s ease;
&.rotate {
transform: rotate(180deg);
}

6
lib/components/search/SearchDropdown.vue
View File

@ -316,6 +316,8 @@ const isChildOfDropdown = (element) => {
box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent !important;
width: 100%;
transition: 0.05s;
&:focus {
&.down {
border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
@ -325,5 +327,9 @@ const isChildOfDropdown = (element) => {
border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}
}
&:not(:focus) {
transition-delay: 0.2s;
}
}
</style>