Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-27 21:58:51 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🖌️ feat: add animation styles for popovers and tooltips (#8831)

Browse source 
* feat: Update client version to 0.2.2 and add animation styles for popovers and tooltips

* refactor: Remove focus outline styles from Dropdown component

* feat: Update client version to 0.2.3 and add Select component export

---------

Co-authored-by: Danny Avila <danny@librechat.ai>
This commit is contained in:
Marco Beretta 2025-08-04 20:44:00 +02:00 • committed by GitHub
parent 33834cd484
commit dfdafdbd09
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 133 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

78
packages/client/src/components/Dropdown.css Normal file
View file

@ -0,0 +1,78 @@
.popover-ui {
display: flex;
max-height: min(var(--popover-available-height, 1700px), 1700px);
flex-direction: column;
overflow: auto;
overscroll-behavior: contain;
border-radius: 1rem;
border-width: 1px;
border-style: solid;
border-color: var(--border-light);
background-color: var(--surface-primary);
padding: 0.5rem;
color: var(--text-primary);
box-shadow:
0 10px 15px -3px rgb(0 0 0 / 0.1),
0 4px 6px -4px rgb(0 0 0 / 0.1);
transform-origin: top;
opacity: 0;
transition-property: opacity, scale, translate;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
scale: 0.95;
translate: 0 -0.5rem;
margin-top: 4px;
margin-right: -2px;
}
.popover-animate {
opacity: 0;
transform: scale(0.95) translateY(-0.5rem);
transition:
opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.popover-animate[data-enter] {
opacity: 1;
transform: scale(1) translateY(0);
}
.popover-ui:focus-visible,
.popover-ui[data-focus-visible] {
outline: var(--bg-surface-hover);
outline-offset: -1px;
}
.popover-ui:where(.dark, .dark *) {
background-color: var(--surface-secondary);
color: var(--text-secondary);
box-shadow:
0 10px 15px -3px rgb(0 0 0 / 0.25),
0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.select-item {
display: flex;
cursor: pointer;
scroll-margin: 0.5rem;
align-items: center;
gap: 0.5rem;
border-radius: 0.5rem;
padding: 0.5rem;
outline: none !important;
}
.select-item[aria-disabled='true'] {
opacity: 0.5;
}
.select-item[data-active-item] {
background-color: var(--surface-hover);
color: var(--text-primary);
}
.popover-ui[data-enter] {
opacity: 1;
scale: 1;
translate: 0;
}