add always visible lock icon on top right to show info about e… (#1403)

* improvement(layerui.js): add lock icon on top right to show encrypted info about excalidraw

fixes https://github.com/excalidraw/excalidraw/issues/1313

* swap lock with shield

* fix dimensions

* make link open in new tab

* add newline between toolip text and link

* increase tooltip line-height

* remove unused GitHubCorner compo

* reposition; reintroduce GH icon

* make shield into link

* make tooltip not show when drawing

* Review fix

* remove link from tooltip

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Aakansha Doshi 2020-04-18 02:09:15 +05:30 committed by GitHub
parent a18342b5b5
commit ff0ecb5e33
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 82 additions and 4 deletions

View file

@ -0,0 +1,49 @@
@import "open-color/open-color";
.layer-ui__wrapper {
.encrypted-icon {
position: relative;
margin-left: 15px;
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--space-factor);
color: $oc-green-9;
svg {
width: 1.2rem;
height: 1.2rem;
}
&.tooltip .tooltip-text {
visibility: hidden;
width: 20rem;
bottom: calc(50% + 0.8rem);
left: -5px;
background-color: $oc-black;
color: $oc-white;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 10;
font-size: 13px;
line-height: 1.5;
white-space: pre-wrap;
}
// the following 3 rules ensure that the tooltip doesn't show (nor affect
// the cursor) when you drag over when you draw on canvas, but at the same
// time it still works when clicking on the link/shield
body:active &.tooltip:not(:hover) {
pointer-events: none;
}
body:not(:active) &.tooltip:hover .tooltip-text {
visibility: visible;
}
.tooltip-text:hover {
visibility: visible;
}
}
}