muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 19:16:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

tooltip animations

Browse source
This commit is contained in:
muerwre 2019-02-19 11:05:15 +07:00
parent 9321f41cd5
commit c3f22473c9
2 changed files with 7 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/styles/colors.less
View file

@ -27,4 +27,4 @@
@mobile_breakpoint: 768px; @mobile_breakpoint: 768px;
@micro_breakpoint: 390px; @micro_breakpoint: 390px;
@tooltip_backgroud: #123740; @tooltip_background: #123740;

10
src/styles/panel.less
View file

@ -147,13 +147,13 @@
position: absolute; position: absolute;
bottom: 58px; bottom: 58px;
left: 50%; left: 50%;
background: @tooltip_backgroud; background: @tooltip_background;
padding: 10px; padding: 10px;
transform: translateX(-50%); transform: translate(-50%, -10px);
border-radius: @panel_radius; border-radius: @panel_radius;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: opacity 250ms; transition: all 250ms;
font-size: 13px; font-size: 13px;
color: white; color: white;
@ -162,7 +162,7 @@
width: 10px; width: 10px;
height: 10px; height: 10px;
position: absolute; position: absolute;
background: @tooltip_backgroud; background: @tooltip_background;
bottom: 0; bottom: 0;
transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg);
left: 50%; left: 50%;
@ -171,6 +171,7 @@
&.top { &.top {
bottom: auto; bottom: auto;
top: 43px; top: 43px;
transform: translate(-50%, 10px);
&::after { &::after {
bottom: auto; bottom: auto;
@ -185,6 +186,7 @@
&:hover .panel-tooltip { &:hover .panel-tooltip {
opacity: 1; opacity: 1;
transform: translate(-50%, 0);
} }
} }