ConceptProd/ConceptPortal-public
1
0
Fork 0
mirror of https://github.com/IRBorisov/ConceptPortal.git synced 2025-06-26 13:00:39 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

F: Add selection animation for graphs
Some checks are pending
Frontend CI / build (22.x) (push) Waiting to run
Details

Browse Source
This commit is contained in:
Ivan 2024-12-16 11:54:27 +03:00
parent 609752a9d6
commit b7aa8fe56a
2 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
rsconcept/frontend/src/styling/constants.css
View File

@ -19,6 +19,7 @@
--duration-move: 500ms;
--duration-modal: 300ms;
--duration-fade: 300ms;
--duration-select: 100ms;
/* Light Theme */
--cl-bg-120: hsl(000, 000%, 100%);

23
rsconcept/frontend/src/styling/overrides.css
View File

@ -115,14 +115,26 @@
border-radius: 5px;
padding: 2px;
width: 150px;
height: 40px;
height: fit-content;
outline-offset: -2px;
outline-style: solid;
outline-color: transparent;
transition-property: outline-offset;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: var(--duration-select);
&.selected {
outline-offset: 4px;
outline-color: var(--cl-teal-bg-100);
border-color: var(--cd-bg-40);
}
.dark & {
&.selected {
outline-offset: 4px;
border-color: var(--cd-teal-bg-100);
border-color: var(--cl-bg-40);
}
}
@ -137,18 +149,25 @@
width: 40px;
height: 40px;
outline-offset: 4px;
outline-offset: -2px;
outline-style: solid;
outline-color: transparent;
transition-property: outline-offset;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: var(--duration-select);
&.selected {
outline-offset: 4px;
outline-color: var(--cl-teal-bg-100);
border-color: transparent;
}
.dark & {
&.selected {
outline-offset: 4px;
border-color: var(--cd-teal-bg-100);
border-color: transparent;
}
}
}