GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-24 08:46:37 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Make whole separator line clickable

Browse source
This commit is contained in:
Matthias Metelka 2022-08-03 20:03:10 +02:00
parent 1280372129
commit 2a94acd9e8
1 changed files with 23 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
ts/editor/PlainTextBadge.svelte
View file

@ -26,53 +26,53 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let width = 0;
</script>
<div
class="clickable"
style="--width: {width}px"
on:click|stopPropagation={toggle}
bind:clientWidth={width}
>
<span class:off class:on={!off} class="plain-text-badge" class:highlighted={!off} />
<div class="clickable" style="--width: {width}px" on:click|stopPropagation={toggle}>
<span
class:off
class:on={!off}
class="plain-text-badge"
class:highlighted={!off}
bind:clientWidth={width}
/>
</div>
<style lang="scss">
.clickable {
right: calc(50% - var(--width) / 2);
position: absolute;
text-align: center;
bottom: -16px;
position: relative;
width: 100%;
z-index: 3;
width: 32px;
height: 16px;
cursor: pointer;
// make whole division line clickable
&::before {
content: "";
position: absolute;
left: 0;
top: -7px;
width: 100%;
height: 14px;
}
}
.plain-text-badge {
left: 12px;
position: absolute;
opacity: 0;
width: 8px;
height: 8px;
transform: rotate(-45deg);
left: calc(50% - var(--width) / 2);
transition: bottom 0.2s ease-out;
&.on {
bottom: 0px;
bottom: 11px;
background: var(--code-bg);
border-right: 1px solid var(--border);
border-top: 1px solid var(--border);
}
&.off {
bottom: 10px;
bottom: -1px;
background: var(--frame-bg);
border-left: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
&::before,
&::after {
width: 10px;
height: 10px;
}
}
:global(.editor-field) {
&:hover,
@ -82,7 +82,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
transition: opacity 0.2s ease-in, bottom 0.2s ease-out;
&.on,
&.off {
bottom: 5px;
bottom: -5px;
}
}
}