795 lines
30 KiB
Vue
795 lines
30 KiB
Vue
|
<template>
|
||
|
|
<div class="notion-plus-container">
|
||
|
|
<div class="div-1">
|
||
|
|
<div role="dialog" class="div-2">
|
||
|
|
<div class="div-3">
|
||
|
|
<div class="notion-scroller vertical">
|
||
|
|
<div id="" tabindex="0" role="menu" aria-activedescendant="">
|
||
|
|
<div class="div-4">
|
||
|
|
<div class="div-5">
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
align-self: center;
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
Basic blocks
|
||
|
|
</div>
|
||
|
|
<div style="margin-left: auto">
|
||
|
|
<img
|
||
|
|
role="progressbar"
|
||
|
|
class="loading-spinner"
|
||
|
|
alt="Loading..."
|
||
|
|
aria-busy="true"
|
||
|
|
aria-live="polite"
|
||
|
|
src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Asketch%3D%22http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%2Fns%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20data-ember-extension%3D%221%22%3E%3Cdefs%3E%3ClinearGradient%20x1%3D%2228.1542969%25%22%20y1%3D%2263.7402344%25%22%20x2%3D%2274.6289062%25%22%20y2%3D%2217.7832031%25%22%20id%3D%22linearGradient-1%22%3E%3Cstop%20stop-color%3D%22rgba(164%2C%20164%2C%20164%2C%201)%22%20offset%3D%220%25%22%2F%3E%3Cstop%20stop-color%3D%22rgba(164%2C%20164%2C%20164%2C%200)%22%20stop-opacity%3D%220%22%20offset%3D%22100%25%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20%3E%3Cg%20transform%3D%22translate(-236.000000%2C%20-286.000000)%22%3E%3Cg%20transform%3D%22translate(238.000000%2C%20286.000000)%22%3E%3Ccircle%20id%3D%22Oval-2%22%20stroke%3D%22url(%23linearGradient-1)%22%20stroke-width%3D%224%22%20cx%3D%2210%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M10%2C2%20C4.4771525%2C2%200%2C6.4771525%200%2C12%22%20id%3D%22Oval-2%22%20stroke%3D%22rgba(164%2C%20164%2C%20164%2C%201)%22%20stroke-width%3D%224%22%2F%3E%3Crect%20id%3D%22Rectangle-1%22%20fill%3D%22rgba(164%2C%20164%2C%20164%2C%201)%22%20x%3D%228%22%20y%3D%220%22%20width%3D%224%22%20height%3D%224%22%20rx%3D%228%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
|
||
|
|
style="visibility: hidden; filter: invert(0)"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="menuitem" tabindex="-1" id=":r56:">
|
||
|
|
<div class="menuitem-div-1">
|
||
|
|
<div class="menuitem-div-2">
|
||
|
|
<div class="menuitem-div-3">
|
||
|
|
<img
|
||
|
|
src="assets/common/img/notion/blocks/text/en.png"
|
||
|
|
referrerpolicy="same-origin"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
margin-left: 6px;
|
||
|
|
margin-right: 12px;
|
||
|
|
min-width: 0px;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div style="display: flex; align-items: center">
|
||
|
|
<span style="margin-right: 6px">Text</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
color: rgb(120, 119, 116);
|
||
|
|
margin-top: 2px;
|
||
|
|
font-size: 12px;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
Just start writing with plain text.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="menuitem" tabindex="-1" id=":r57:">
|
||
|
|
<div class="menuitem-div-1">
|
||
|
|
<div class="menuitem-div-2">
|
||
|
|
<div class="menuitem-div-3">
|
||
|
|
<img
|
||
|
|
src="assets/common/img/notion/blocks/page.png"
|
||
|
|
referrerpolicy="same-origin"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
margin-left: 6px;
|
||
|
|
margin-right: 12px;
|
||
|
|
min-width: 0px;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div style="display: flex; align-items: center">
|
||
|
|
<span style="margin-right: 6px">Page</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
color: rgb(120, 119, 116);
|
||
|
|
margin-top: 2px;
|
||
|
|
font-size: 12px;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
Embed a sub-page inside this page.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="menuitem" tabindex="-1" id=":r58:">
|
||
|
|
<div class="menuitem-div-1">
|
||
|
|
<div class="menuitem-div-2">
|
||
|
|
<div class="menuitem-div-3">
|
||
|
|
<img
|
||
|
|
src="assets/common/img/notion/blocks/to-do.png"
|
||
|
|
referrerpolicy="same-origin"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
margin-left: 6px;
|
||
|
|
margin-right: 12px;
|
||
|
|
min-width: 0px;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div style="display: flex; align-items: center">
|
||
|
|
<span style="margin-right: 6px">To-do list</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
color: rgb(120, 119, 116);
|
||
|
|
margin-top: 2px;
|
||
|
|
font-size: 12px;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
Track tasks with a to-do list.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="menuitem" tabindex="-1" id=":r59:">
|
||
|
|
<div class="menuitem-div-1">
|
||
|
|
<div class="menuitem-div-2">
|
||
|
|
<div class="menuitem-div-3">
|
||
|
|
<img
|
||
|
|
src="assets/common/img/notion/blocks/header.png"
|
||
|
|
referrerpolicy="same-origin"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
margin-left: 6px;
|
||
|
|
margin-right: 12px;
|
||
|
|
min-width: 0px;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div style="display: flex; align-items: center">
|
||
|
|
<span style="margin-right: 6px">Heading 1</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
color: rgb(120, 119, 116);
|
||
|
|
margin-top: 2px;
|
||
|
|
font-size: 12px;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
Big section heading.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="menuitem" tabindex="-1" id=":r5a:">
|
||
|
|
<div class="menuitem-div-1">
|
||
|
|
<div class="menuitem-div-2">
|
||
|
|
<div class="menuitem-div-3">
|
||
|
|
<img
|
||
|
|
src="assets/common/img/notion/blocks/subheader.png"
|
||
|
|
referrerpolicy="same-origin"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
margin-left: 6px;
|
||
|
|
margin-right: 12px;
|
||
|
|
min-width: 0px;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div style="display: flex; align-items: center">
|
||
|
|
<span style="margin-right: 6px">Heading 2</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
color: rgb(120, 119, 116);
|
||
|
|
margin-top: 2px;
|
||
|
|
font-size: 12px;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
Medium section heading.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="menuitem" tabindex="-1" id=":r5b:">
|
||
|
|
<div class="menuitem-div-1">
|
||
|
|
<div class="menuitem-div-2">
|
||
|
|
<div class="menuitem-div-3">
|
||
|
|
<img
|
||
|
|
src="assets/common/img/notion/blocks/subsubheader.png"
|
||
|
|
referrerpolicy="same-origin"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
margin-left: 6px;
|
||
|
|
margin-right: 12px;
|
||
|
|
min-width: 0px;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div style="display: flex; align-items: center">
|
||
|
|
<span style="margin-right: 6px">Heading 3</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
color: rgb(120, 119, 116);
|
||
|
|
margin-top: 2px;
|
||
|
|
font-size: 12px;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
Small section heading.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="menuitem" tabindex="-1" id=":r5c:">
|
||
|
|
<div class="menuitem-div-1">
|
||
|
|
<div class="menuitem-div-2">
|
||
|
|
<div class="menuitem-div-3">
|
||
|
|
<img
|
||
|
|
src="assets/common/img/notion/blocks/simple-table.png"
|
||
|
|
referrerpolicy="same-origin"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
margin-left: 6px;
|
||
|
|
margin-right: 12px;
|
||
|
|
min-width: 0px;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div style="display: flex; align-items: center">
|
||
|
|
<span style="margin-right: 6px">Table</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
color: rgb(120, 119, 116);
|
||
|
|
margin-top: 2px;
|
||
|
|
font-size: 12px;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
Add simple tabular content to your page.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="menuitem" tabindex="-1" id=":r5d:">
|
||
|
|
<div class="menuitem-div-1">
|
||
|
|
<div class="menuitem-div-2">
|
||
|
|
<div class="menuitem-div-3">
|
||
|
|
<img
|
||
|
|
src="assets/common/img/notion/blocks/bulleted-list.png"
|
||
|
|
referrerpolicy="same-origin"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
margin-left: 6px;
|
||
|
|
margin-right: 12px;
|
||
|
|
min-width: 0px;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div style="display: flex; align-items: center">
|
||
|
|
<span style="margin-right: 6px">Bulleted list</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
color: rgb(120, 119, 116);
|
||
|
|
margin-top: 2px;
|
||
|
|
font-size: 12px;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
Create a simple bulleted list.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="menuitem" tabindex="-1" id=":r5e:">
|
||
|
|
<div class="menuitem-div-1">
|
||
|
|
<div class="menuitem-div-2">
|
||
|
|
<div class="menuitem-div-3">
|
||
|
|
<img
|
||
|
|
src="assets/common/img/notion/blocks/numbered-list.png"
|
||
|
|
referrerpolicy="same-origin"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
margin-left: 6px;
|
||
|
|
margin-right: 12px;
|
||
|
|
min-width: 0px;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div style="display: flex; align-items: center">
|
||
|
|
<span style="margin-right: 6px">Numbered list</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
color: rgb(120, 119, 116);
|
||
|
|
margin-top: 2px;
|
||
|
|
font-size: 12px;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
Create a list with numbering.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="menuitem" tabindex="-1" id=":r5f:">
|
||
|
|
<div class="menuitem-div-1">
|
||
|
|
<div class="menuitem-div-2">
|
||
|
|
<div class="menuitem-div-3">
|
||
|
|
<img
|
||
|
|
src="assets/common/img/notion/blocks/toggle.png"
|
||
|
|
referrerpolicy="same-origin"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
margin-left: 6px;
|
||
|
|
margin-right: 12px;
|
||
|
|
min-width: 0px;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div style="display: flex; align-items: center">
|
||
|
|
<span style="margin-right: 6px">Toggle list</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
color: rgb(120, 119, 116);
|
||
|
|
margin-top: 2px;
|
||
|
|
font-size: 12px;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
Toggles can hide and show content inside.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="menuitem" tabindex="-1" id=":r5g:">
|
||
|
|
<div class="menuitem-div-1">
|
||
|
|
<div class="menuitem-div-2">
|
||
|
|
<div class="menuitem-div-3">
|
||
|
|
<img
|
||
|
|
src="assets/common/img/notion/blocks/quote/en.png"
|
||
|
|
referrerpolicy="same-origin"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
margin-left: 6px;
|
||
|
|
margin-right: 12px;
|
||
|
|
min-width: 0px;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div style="display: flex; align-items: center">
|
||
|
|
<span style="margin-right: 6px">Quote</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
color: rgb(120, 119, 116);
|
||
|
|
margin-top: 2px;
|
||
|
|
font-size: 12px;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
Capture a quote.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="menuitem" tabindex="-1" id=":r5h:">
|
||
|
|
<div class="menuitem-div-1">
|
||
|
|
<div class="menuitem-div-2">
|
||
|
|
<div class="menuitem-div-3">
|
||
|
|
<img
|
||
|
|
src="assets/common/img/notion/blocks/divider.png"
|
||
|
|
referrerpolicy="same-origin"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
margin-left: 6px;
|
||
|
|
margin-right: 12px;
|
||
|
|
min-width: 0px;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div style="display: flex; align-items: center">
|
||
|
|
<span style="margin-right: 6px">Divider</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
color: rgb(120, 119, 116);
|
||
|
|
margin-top: 2px;
|
||
|
|
font-size: 12px;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
Visually divide blocks.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="menuitem" tabindex="-1" id=":r5i:">
|
||
|
|
<div class="menuitem-div-1">
|
||
|
|
<div class="menuitem-div-2">
|
||
|
|
<div class="menuitem-div-3">
|
||
|
|
<img
|
||
|
|
src="assets/common/img/notion/blocks/link.png"
|
||
|
|
referrerpolicy="same-origin"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
margin-left: 6px;
|
||
|
|
margin-right: 12px;
|
||
|
|
min-width: 0px;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div style="display: flex; align-items: center">
|
||
|
|
<span style="margin-right: 6px">Link to page</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
color: rgb(120, 119, 116);
|
||
|
|
margin-top: 2px;
|
||
|
|
font-size: 12px;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
Link to an existing page.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="menuitem" tabindex="-1" id=":r5j:">
|
||
|
|
<div class="menuitem-div-1">
|
||
|
|
<div class="menuitem-div-2">
|
||
|
|
<div class="menuitem-div-3">
|
||
|
|
<img
|
||
|
|
src="assets/common/img/notion/blocks/callout.png"
|
||
|
|
referrerpolicy="same-origin"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
margin-left: 6px;
|
||
|
|
margin-right: 12px;
|
||
|
|
min-width: 0px;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div style="display: flex; align-items: center">
|
||
|
|
<span style="margin-right: 6px">Callout</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
color: rgb(120, 119, 116);
|
||
|
|
margin-top: 2px;
|
||
|
|
font-size: 12px;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
Make writing stand out.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div></div>
|
||
|
|
</div>
|
||
|
|
<footer style="flex-shrink: 0"></footer>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.notion-plus-container {
|
||
|
|
// display: none;
|
||
|
|
// position: absolute;
|
||
|
|
// top: 0;
|
||
|
|
// right:0;
|
||
|
|
// pointer-events: auto;
|
||
|
|
|
||
|
|
.div-1 {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
position: relative;
|
||
|
|
flex-direction: column-reverse;
|
||
|
|
transform-origin: 0% top;
|
||
|
|
left: 0px;
|
||
|
|
top: 4px;
|
||
|
|
opacity: 1;
|
||
|
|
transition-property: opacity, transform;
|
||
|
|
transition-duration: 270ms;
|
||
|
|
transition-timing-function: ease;
|
||
|
|
|
||
|
|
.div-2 {
|
||
|
|
border-radius: 6px;
|
||
|
|
background: white;
|
||
|
|
backdrop-filter: none;
|
||
|
|
position: relative;
|
||
|
|
max-width: calc(100vw - 24px);
|
||
|
|
box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
|
||
|
|
rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
.div-3 {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
width: 324px;
|
||
|
|
min-width: 180px;
|
||
|
|
max-width: calc(100vw - 24px);
|
||
|
|
height: 100%;
|
||
|
|
max-height: 40vh;
|
||
|
|
|
||
|
|
.notion-scroller {
|
||
|
|
z-index: 1;
|
||
|
|
flex-grow: 1;
|
||
|
|
min-height: 0px;
|
||
|
|
transform: translateZ(0px);
|
||
|
|
overflow: hidden auto;
|
||
|
|
margin-right: 0px;
|
||
|
|
margin-bottom: 0px;
|
||
|
|
|
||
|
|
.div-4 {
|
||
|
|
padding-top: 6px;
|
||
|
|
padding-bottom: 6px;
|
||
|
|
|
||
|
|
.div-5 {
|
||
|
|
display: flex;
|
||
|
|
padding-left: 14px;
|
||
|
|
padding-right: 14px;
|
||
|
|
margin-top: 6px;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
color: rgba(55, 53, 47, 0.65);
|
||
|
|
fill: rgba(55, 53, 47, 0.45);
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: 500;
|
||
|
|
line-height: 120%;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menuitem {
|
||
|
|
user-select: none;
|
||
|
|
transition: background 20ms ease-in 0s;
|
||
|
|
cursor: pointer;
|
||
|
|
width: calc(100% - 8px);
|
||
|
|
margin-left: 4px;
|
||
|
|
margin-right: 4px;
|
||
|
|
border-radius: 4px;
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
background: rgba(55, 53, 47, 0.08);
|
||
|
|
}
|
||
|
|
|
||
|
|
.menuitem-div-1 {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
line-height: 120%;
|
||
|
|
width: 100%;
|
||
|
|
user-select: none;
|
||
|
|
min-height: 45px;
|
||
|
|
font-size: 14px;
|
||
|
|
padding-top: 4px;
|
||
|
|
padding-bottom: 4px;
|
||
|
|
|
||
|
|
.menuitem-div-2 {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-left: 10px;
|
||
|
|
margin-right: 4px;
|
||
|
|
margin-top: 1px;
|
||
|
|
align-self: flex-start;
|
||
|
|
|
||
|
|
.menuitem-div-3 {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.menuitem-img ,img{
|
||
|
|
display: block;
|
||
|
|
object-fit: cover;
|
||
|
|
border-radius: 4px;
|
||
|
|
background: white;
|
||
|
|
width: 46px;
|
||
|
|
height: 46px;
|
||
|
|
flex-grow: 0;
|
||
|
|
flex-shrink: 0;
|
||
|
|
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px;
|
||
|
|
filter: invert(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|