GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-11-10 22:57:11 -05: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

44
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; let width = 0;
</script> </script>
<div <div class="clickable" style="--width: {width}px" on:click|stopPropagation={toggle}>
class="clickable" <span
style="--width: {width}px" class:off
on:click|stopPropagation={toggle} class:on={!off}
class="plain-text-badge"
class:highlighted={!off}
bind:clientWidth={width} bind:clientWidth={width}
> />
<span class:off class:on={!off} class="plain-text-badge" class:highlighted={!off} />
</div> </div>
<style lang="scss"> <style lang="scss">
.clickable { .clickable {
right: calc(50% - var(--width) / 2); position: relative;
position: absolute; width: 100%;
text-align: center;
bottom: -16px;
z-index: 3; z-index: 3;
width: 32px;
height: 16px;
cursor: pointer; cursor: pointer;
// make whole division line clickable
&::before {
content: "";
position: absolute;
left: 0;
top: -7px;
width: 100%;
height: 14px;
}
} }
.plain-text-badge { .plain-text-badge {
left: 12px;
position: absolute; position: absolute;
opacity: 0; opacity: 0;
width: 8px; width: 8px;
height: 8px; height: 8px;
transform: rotate(-45deg); transform: rotate(-45deg);
left: calc(50% - var(--width) / 2);
transition: bottom 0.2s ease-out; transition: bottom 0.2s ease-out;
&.on { &.on {
bottom: 0px; bottom: 11px;
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: 10px; bottom: -1px;
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);
} }
&::before,
&::after {
width: 10px;
height: 10px;
}
} }
:global(.editor-field) { :global(.editor-field) {
&:hover, &: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; transition: opacity 0.2s ease-in, bottom 0.2s ease-out;
&.on, &.on,
&.off { &.off {
bottom: 5px; bottom: -5px;
} }
} }
} }