GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-11-10 14:47:12 -05:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Show toggle only on hover

Browse source 
for mobile I'd like to implement a swipe mechanism.
This commit is contained in:
Matthias Metelka 2022-08-03 22:16:09 +02:00
parent cf90c71e59
commit eba053a20b
1 changed files with 15 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
ts/editor/PlainTextBadge.svelte
View file

@ -50,42 +50,43 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
top: -7px; top: -8px;
width: 100%; width: 100%;
height: 14px; height: 16px;
} }
} }
.plain-text-badge { .plain-text-badge {
position: absolute;
opacity: 0;
width: 8px;
height: 8px;
transform: rotate(-45deg);
left: calc(50% - var(--width) / 2); left: calc(50% - var(--width) / 2);
transition: bottom 0.2s ease-out; position: absolute;
opacity: 0;
bottom: -4px;
width: 4px;
height: 4px;
transform: rotate(-45deg);
transition: width 0.2s ease-in-out, height 0.2s ease-in-out,
opacity 0.2s ease-in, background-color 0s 0.2s;
&.on { &.on {
bottom: -10px;
background: var(--code-bg); background: var(--code-bg);
border-right: 1px solid var(--border); border-right: 1px solid var(--border);
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
} }
&.off { &.off {
bottom: 0px;
background: var(--frame-bg); background: var(--frame-bg);
border-left: 1px solid var(--border); border-left: 1px solid var(--border);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
} }
} }
:global(.editor-field) { :global(.editor-field) {
&:hover, &:hover {
&:focus-within {
& .plain-text-badge { & .plain-text-badge {
opacity: 1; opacity: 1;
transition: opacity 0.2s ease-in, bottom 0.2s ease-out;
&.on, &.on,
&.off { &.off {
bottom: -5px; width: 8px;
height: 8px;
} }
} }
} }