<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>