aronmal/leaky-ships
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Finished targetPreview

Browse source 
Reverted back to react logic instead of scss logic and improved performance by partially showing the preview icon instead of letting it follow the mouse directly.
This commit is contained in:
aronmal 2022-08-14 02:37:58 +02:00
parent 13393431a9
commit 37e4daac3e
Signed by: aronmal
GPG key ID: 816B7707426FC612
4 changed files with 149 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

35
frontend/src/styles/mixins/effects.scss
View file

@ -15,4 +15,39 @@
To {
opacity: 1;
}
}
@mixin gradient-edge {
&.left-top-corner {
-webkit-mask-image: -webkit-gradient(linear, right bottom,
left top, color-stop(0, rgba(0,0,0,1)), color-stop(0.5, rgba(0,0,0,0)));
}
&.right-top-corner {
-webkit-mask-image: -webkit-gradient(linear, left bottom,
right top, color-stop(0, rgba(0,0,0,1)), color-stop(0.5, rgba(0,0,0,0)));
}
&.left-bottom-corner {
-webkit-mask-image: -webkit-gradient(linear, right top,
left bottom, color-stop(0, rgba(0,0,0,1)), color-stop(0.5, rgba(0,0,0,0)));
}
&.right-bottom-corner {
-webkit-mask-image: -webkit-gradient(linear, left top,
right bottom, color-stop(0, rgba(0,0,0,1)), color-stop(0.5, rgba(0,0,0,0)));
}
&.left {
-webkit-mask-image: -webkit-gradient(linear, right top,
left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
&.right {
-webkit-mask-image: -webkit-gradient(linear, left top,
right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
&.top {
-webkit-mask-image: -webkit-gradient(linear, left bottom,
left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
&.bottom {
-webkit-mask-image: -webkit-gradient(linear, left top,
left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
}