base_ui/components/other/_NotionSixDotComponent.vue

3493 lines
156 KiB
Vue
Raw Normal View History

2025-02-01 09:34:55 +00:00
<template>
<div class="notion-six-dot-container">
<div class="notion-six-dot">
<div role="dialog" class="div-1">
<div class="div-2">
<div style="flex-shrink: 0">
<div style="padding-top: 6px; padding-bottom: 6px; margin-top: 8px">
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
margin-left: 12px;
margin-right: 12px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div style="display: flex">
<div
class="notion-focusable-within"
style="
display: flex;
align-items: center;
width: 100%;
font-size: 14px;
line-height: 20px;
padding: 3px 6px;
position: relative;
border-radius: 4px;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px inset;
background: rgba(242, 241, 238, 0.6);
cursor: text;
height: 28px;
"
>
<input
placeholder="Search actions…"
type="text"
style="
font-size: inherit;
line-height: inherit;
border: none;
background: none;
width: 100%;
display: block;
resize: none;
padding: 0px;
"
aria-activedescendant=":r3o:"
aria-controls=":r3f:"
aria-expanded="true"
aria-autocomplete="list"
role="combobox"
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="notion-scroller parent"
style="
z-index: 1;
flex-grow: 1;
min-height: 0px;
transform: translateZ(0px);
margin-right: 0px;
margin-bottom: 0px;
"
>
<div id=":r3f:" class="listbox">
<div style="padding-top: 6px; padding-bottom: 6px">
<div
class="option-item"
tabindex="-1"
id=":r3g:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
margin-left: 4px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="sparkles"
style="
width: 16px;
height: 16px;
display: block;
fill: rgba(55, 53, 47, 0.85);
flex-shrink: 0;
"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.2757 4.82358C7.57934 4.71847 7.57934 4.53161 7.2757 4.41483L5.62905 3.78419C5.33709 3.67908 4.99842 3.3404 4.88164 3.03676L4.25101 1.39009C4.1459 1.08644 3.95905 1.08644 3.84226 1.39009L3.21163 3.03676C3.10653 3.32872 2.76786 3.6674 2.46422 3.78419L0.817572 4.41483C0.513934 4.51994 0.513934 4.70679 0.817572 4.82358L2.46422 5.45422C2.75618 5.55933 3.09485 5.898 3.21163 6.20165L3.84226 7.84832C3.94737 8.15196 4.13422 8.15196 4.25101 7.84832L4.88164 6.20165C4.98674 5.90968 5.32541 5.571 5.62905 5.45422L7.2757 4.82358ZM15.2991 10.5929C16.2334 10.3593 16.2334 9.9739 15.2991 9.74032L13.2321 9.22647C12.2978 8.9929 11.3402 8.03526 11.1066 7.10097L10.5928 5.03387C10.3592 4.09959 9.97382 4.09959 9.74025 5.03387L9.2264 7.10097C8.99283 8.03526 8.03521 8.9929 7.10094 9.22647L5.03387 9.74032C4.09961 9.9739 4.09961 10.3593 5.03387 10.5929L7.10094 11.1067C8.03521 11.3403 8.99283 12.2979 9.2264 13.2322L9.74025 15.2993C9.97382 16.2336 10.3592 16.2336 10.5928 15.2993L11.1066 13.2322C11.3402 12.2979 12.2978 11.3403 13.2321 11.1067L15.2991 10.5929Z"
></path>
</svg>
</div>
</div>
<div
style="
margin-right: 6px;
margin-left: 6px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Ask AI
</div>
</div>
<div
style="
margin-right: auto;
margin-left: 12px;
min-width: 0px;
flex-shrink: 0;
"
>
<span
style="
color: rgba(55, 53, 47, 0.5);
font-size: 12px;
white-space: nowrap;
"
>Ctrl+J</span
>
</div>
</div>
</div>
<div
class="option-item"
tabindex="-1"
id=":r3h:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
margin-left: 4px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="trash"
style="
width: 16px;
height: 16px;
display: block;
fill: rgba(55, 53, 47, 0.85);
flex-shrink: 0;
"
>
<path
d="M4.8623 15.4287H11.1445C12.1904 15.4287 12.8672 14.793 12.915 13.7402L13.3799 3.88965H14.1318C14.4736 3.88965 14.7402 3.62988 14.7402 3.28809C14.7402 2.95312 14.4736 2.69336 14.1318 2.69336H11.0898V1.66797C11.0898 0.62207 10.4268 0 9.29199 0H6.69434C5.56641 0 4.89648 0.62207 4.89648 1.66797V2.69336H1.86133C1.5332 2.69336 1.25977 2.95312 1.25977 3.28809C1.25977 3.62988 1.5332 3.88965 1.86133 3.88965H2.62012L3.08496 13.7471C3.13281 14.7998 3.80273 15.4287 4.8623 15.4287ZM6.1543 1.72949C6.1543 1.37402 6.40039 1.14844 6.7832 1.14844H9.20312C9.58594 1.14844 9.83203 1.37402 9.83203 1.72949V2.69336H6.1543V1.72949ZM4.99219 14.2188C4.61621 14.2188 4.34277 13.9453 4.32227 13.542L3.86426 3.88965H12.1152L11.6709 13.542C11.6572 13.9453 11.3838 14.2188 10.9941 14.2188H4.99219ZM5.9834 13.1182C6.27051 13.1182 6.45508 12.9336 6.44824 12.667L6.24316 5.50293C6.23633 5.22949 6.04492 5.05176 5.77148 5.05176C5.48438 5.05176 5.2998 5.23633 5.30664 5.50293L5.51172 12.667C5.51855 12.9404 5.70996 13.1182 5.9834 13.1182ZM8 13.1182C8.28711 13.1182 8.47852 12.9336 8.47852 12.667V5.50293C8.47852 5.23633 8.28711 5.05176 8 5.05176C7.71289 5.05176 7.52148 5.23633 7.52148 5.50293V12.667C7.52148 12.9336 7.71289 13.1182 8 13.1182ZM10.0166 13.1182C10.29 13.1182 10.4746 12.9404 10.4814 12.667L10.6934 5.50293C10.7002 5.23633 10.5088 5.05176 10.2285 5.05176C9.95508 5.05176 9.76367 5.22949 9.75684 5.50293L9.54492 12.667C9.53809 12.9336 9.72949 13.1182 10.0166 13.1182Z"
></path>
</svg>
</div>
</div>
<div
style="
margin-right: 6px;
margin-left: 6px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Delete
</div>
</div>
<div
style="
margin-right: auto;
margin-left: 12px;
min-width: 0px;
flex-shrink: 0;
"
>
<span
style="
color: rgba(55, 53, 47, 0.5);
font-size: 12px;
white-space: nowrap;
"
>Del</span
>
</div>
</div>
</div>
<div
class="option-item"
tabindex="-1"
id=":r3i:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
margin-left: 4px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="duplicate"
style="
width: 16px;
height: 16px;
display: block;
fill: rgba(55, 53, 47, 0.85);
flex-shrink: 0;
"
>
<path
d="M2.83887 12.1523H4.00098V13.1846C4.00098 14.6406 4.75977 15.3994 6.24316 15.3994H13.1611C14.6377 15.3994 15.4033 14.6406 15.4033 13.1846V6.21191C15.4033 4.75586 14.6377 3.99707 13.1611 3.99707H11.999V2.96484C11.999 1.50879 11.2334 0.75 9.75684 0.75H2.83887C1.3623 0.75 0.59668 1.50195 0.59668 2.96484V9.93066C0.59668 11.3936 1.3623 12.1523 2.83887 12.1523ZM2.9209 10.8125C2.28516 10.8125 1.93652 10.4844 1.93652 9.82129V3.08105C1.93652 2.41797 2.28516 2.08301 2.9209 2.08301H9.68164C10.3105 2.08301 10.666 2.41797 10.666 3.08105V3.99707H6.24316C4.75977 3.99707 4.00098 4.75586 4.00098 6.21191V10.8125H2.9209ZM6.31836 14.0596C5.68262 14.0596 5.34082 13.7314 5.34082 13.0684V6.32812C5.34082 5.66504 5.68262 5.33691 6.31836 5.33691H13.0791C13.708 5.33691 14.0635 5.66504 14.0635 6.32812V13.0684C14.0635 13.7314 13.708 14.0596 13.0791 14.0596H6.31836Z"
></path>
</svg>
</div>
</div>
<div
style="
margin-right: 6px;
margin-left: 6px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Duplicate
</div>
</div>
<div
style="
margin-right: auto;
margin-left: 12px;
min-width: 0px;
flex-shrink: 0;
"
>
<span
style="
color: rgba(55, 53, 47, 0.5);
font-size: 12px;
white-space: nowrap;
"
>Ctrl+D</span
>
</div>
</div>
</div>
<!-- @mouseenter.self="showSubmenu($event)" -->
<div
class="option-item"
tabindex="-1"
id=":r3j:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
margin-left: 4px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="loop"
style="
width: 16px;
height: 16px;
display: block;
fill: rgba(55, 53, 47, 0.85);
flex-shrink: 0;
"
>
<path
d="M5.80371 3.12305C5.81006 3.50391 6.05762 3.74512 6.47656 3.74512H11.3643C11.9546 3.74512 12.2783 4.0498 12.2783 4.66553V11.2925L11.377 10.3149L10.8628 9.80078C10.5962 9.54688 10.2344 9.52783 9.96777 9.78809C9.71387 10.0483 9.72021 10.4229 9.98047 10.6831L12.145 12.8413C12.6211 13.311 13.167 13.311 13.6431 12.8413L15.8076 10.6831C16.0679 10.4229 16.0742 10.0483 15.8203 9.78809C15.5537 9.52783 15.1919 9.54688 14.9253 9.80078L14.4111 10.3149L13.5161 11.2861V4.56396C13.5161 3.20557 12.8052 2.50098 11.4341 2.50098H6.47656C6.05762 2.50098 5.79736 2.74219 5.80371 3.12305ZM0.186035 7.05859C0.446289 7.3252 0.808105 7.30615 1.07471 7.0459L1.59521 6.53809L2.48389 5.56689V12.2891C2.48389 13.6475 3.19482 14.3521 4.56592 14.3521H9.52344C9.94238 14.3521 10.2026 14.1108 10.1963 13.73C10.1899 13.3428 9.94238 13.1079 9.52344 13.1079H4.64209C4.05176 13.1079 3.72803 12.7969 3.72803 12.1812V5.5542L4.62305 6.53809L5.14355 7.0459C5.40381 7.30615 5.77197 7.3252 6.03223 7.05859C6.29248 6.79834 6.28613 6.43018 6.01953 6.16992L3.85498 4.01172C3.37891 3.53564 2.83936 3.53564 2.36328 4.01172L0.19873 6.16992C-0.0678711 6.43018 -0.0742188 6.79834 0.186035 7.05859Z"
></path>
</svg>
</div>
</div>
<div
style="
margin-right: 6px;
margin-left: 12px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Turn into
</div>
</div>
<div
style="
width: 12px;
fill: rgba(55, 53, 47, 0.35);
margin-left: 10px;
flex-shrink: 0;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="chevronRight"
style="
width: 100%;
height: 100%;
display: block;
fill: rgba(55, 53, 47, 0.45);
flex-shrink: 0;
transform: rotate(90deg);
"
>
<path
d="M12.375 8.06445C12.375 7.83203 12.2861 7.63379 12.1084 7.45605L6.77637 2.24023C6.62598 2.08984 6.44141 2.01465 6.22266 2.01465C5.77832 2.01465 5.42285 2.35645 5.42285 2.80078C5.42285 3.01953 5.51172 3.21777 5.66211 3.375L10.4746 8.06445L5.66211 12.7539C5.51855 12.9043 5.42285 13.1025 5.42285 13.3213C5.42285 13.7725 5.77832 14.1143 6.22266 14.1143C6.44141 14.1143 6.62598 14.0391 6.77637 13.8887L12.1084 8.67285C12.293 8.49512 12.375 8.29688 12.375 8.06445Z"
></path>
</svg>
</div>
</div>
<!-- sub menu items. -->
<div class="notion-scroller child" style="">
<div
id=":rk2:"
tabindex="0"
role="menu"
aria-activedescendant=":rkc:"
>
<div style="padding-top: 6px; padding-bottom: 6px">
<div
role="menuitem"
tabindex="-1"
id=":rk3:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div style="width: 100%; height: 100%">
<img
src="/images/blocks/text/en-US.png"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
background: white;
width: 22px;
height: 22px;
flex-grow: 0;
flex-shrink: 0;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px
0px 1px;
"
/>
</div>
</div>
<div
style="
margin-left: 6px;
margin-right: 6px;
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>
<div
style="
margin-left: auto;
margin-right: 12px;
min-width: 0px;
flex-shrink: 0;
"
>
<div style="width: 14px; padding: 1px">
<svg
role="graphics-symbol"
viewBox="0 0 14 14"
class="check"
style="
width: 100%;
height: 100%;
display: block;
fill: inherit;
flex-shrink: 0;
"
>
<polygon
points="5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
></polygon>
</svg>
</div>
</div>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rk4:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div style="width: 100%; height: 100%">
<img
src="/images/blocks/header.57a7576a.png"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
background: white;
width: 22px;
height: 22px;
flex-grow: 0;
flex-shrink: 0;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px
0px 1px;
"
/>
</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>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rk5:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div style="width: 100%; height: 100%">
<img
src="/images/blocks/subheader.9aab4769.png"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
background: white;
width: 22px;
height: 22px;
flex-grow: 0;
flex-shrink: 0;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px
0px 1px;
"
/>
</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>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rk6:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div style="width: 100%; height: 100%">
<img
src="/images/blocks/subsubheader.d0ed0bb3.png"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
background: white;
width: 22px;
height: 22px;
flex-grow: 0;
flex-shrink: 0;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px
0px 1px;
"
/>
</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>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rk7:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div style="width: 100%; height: 100%">
<img
src="/images/blocks/page.83b0bf31.png"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
background: white;
width: 22px;
height: 22px;
flex-grow: 0;
flex-shrink: 0;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px
0px 1px;
"
/>
</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>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rk8:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div style="width: 100%; height: 100%">
<img
src="/images/blocks/to-do.f8d20542.png"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
background: white;
width: 22px;
height: 22px;
flex-grow: 0;
flex-shrink: 0;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px
0px 1px;
"
/>
</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>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rk9:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div style="width: 100%; height: 100%">
<img
src="/images/blocks/bulleted-list.0e87e917.png"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
background: white;
width: 22px;
height: 22px;
flex-grow: 0;
flex-shrink: 0;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px
0px 1px;
"
/>
</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>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rka:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div style="width: 100%; height: 100%">
<img
src="/images/blocks/numbered-list.0406affe.png"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
background: white;
width: 22px;
height: 22px;
flex-grow: 0;
flex-shrink: 0;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px
0px 1px;
"
/>
</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>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rkb:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div style="width: 100%; height: 100%">
<img
src="/images/blocks/toggle.5e462b2a.png"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
background: white;
width: 22px;
height: 22px;
flex-grow: 0;
flex-shrink: 0;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px
0px 1px;
"
/>
</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>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rkc:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
background: rgba(55, 53, 47, 0.08);
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div style="width: 100%; height: 100%">
<img
src="/images/blocks/code.a8b201f4.png"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
background: white;
width: 22px;
height: 22px;
flex-grow: 0;
flex-shrink: 0;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px
0px 1px;
"
/>
</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">Code</span>
</div>
</div>
</div>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rkd:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div style="width: 100%; height: 100%">
<img
src="/images/blocks/quote/en-US.png"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
background: white;
width: 22px;
height: 22px;
flex-grow: 0;
flex-shrink: 0;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px
0px 1px;
"
/>
</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>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rke:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div style="width: 100%; height: 100%">
<img
src="/images/blocks/callout.7b4c39c4.png"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
background: white;
width: 22px;
height: 22px;
flex-grow: 0;
flex-shrink: 0;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px
0px 1px;
"
/>
</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>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rkf:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div style="width: 100%; height: 100%">
<img
src="/images/blocks/tex.b0aa14b2.png"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
background: white;
width: 22px;
height: 22px;
flex-grow: 0;
flex-shrink: 0;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px
0px 1px;
"
/>
</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"
>Block equation</span
>
</div>
</div>
</div>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rkg:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div style="width: 100%; height: 100%">
<img
src="/images/blocks/transclusion.caa87a01.png"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
background: white;
width: 22px;
height: 22px;
flex-grow: 0;
flex-shrink: 0;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px
0px 1px;
"
/>
</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"
>Synced block</span
>
</div>
</div>
</div>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rkh:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div style="width: 100%; height: 100%">
<img
src="/images/blocks/toggle_heading_1.3d7aefe1.png"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
background: white;
width: 22px;
height: 22px;
flex-grow: 0;
flex-shrink: 0;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px
0px 1px;
"
/>
</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 heading 1</span
>
</div>
</div>
</div>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rki:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div style="width: 100%; height: 100%">
<img
src="/images/blocks/toggle_heading_2.aba07398.png"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
background: white;
width: 22px;
height: 22px;
flex-grow: 0;
flex-shrink: 0;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px
0px 1px;
"
/>
</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 heading 2</span
>
</div>
</div>
</div>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rkj:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div style="width: 100%; height: 100%">
<img
src="/images/blocks/toggle_heading_3.3879a8be.png"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
background: white;
width: 22px;
height: 22px;
flex-grow: 0;
flex-shrink: 0;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px
0px 1px;
"
/>
</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 heading 3</span
>
</div>
</div>
</div>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rkk:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div style="width: 100%; height: 100%">
<img
src="/images/blocks/columnList.63d7ab92.png"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
background: white;
width: 22px;
height: 22px;
flex-grow: 0;
flex-shrink: 0;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px
0px 1px;
"
/>
</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"
>2 columns</span
>
</div>
</div>
</div>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rkl:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div style="width: 100%; height: 100%">
<img
src="/images/blocks/columnList.63d7ab92.png"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
background: white;
width: 22px;
height: 22px;
flex-grow: 0;
flex-shrink: 0;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px
0px 1px;
"
/>
</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"
>3 columns</span
>
</div>
</div>
</div>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rkm:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div style="width: 100%; height: 100%">
<img
src="/images/blocks/columnList.63d7ab92.png"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
background: white;
width: 22px;
height: 22px;
flex-grow: 0;
flex-shrink: 0;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px
0px 1px;
"
/>
</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"
>4 columns</span
>
</div>
</div>
</div>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rkn:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div style="width: 100%; height: 100%">
<img
src="/images/blocks/columnList.63d7ab92.png"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
background: white;
width: 22px;
height: 22px;
flex-grow: 0;
flex-shrink: 0;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px
0px 1px;
"
/>
</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"
>5 columns</span
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="option-item"
tabindex="-1"
id=":r3k:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
margin-left: 4px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="pageEmpty"
style="
width: 16px;
height: 16px;
display: block;
fill: rgba(55, 53, 47, 0.85);
flex-shrink: 0;
"
>
<path
d="M4.35645 15.4678H11.6367C13.0996 15.4678 13.8584 14.6953 13.8584 13.2256V7.02539C13.8584 6.0752 13.7354 5.6377 13.1406 5.03613L9.55176 1.38574C8.97754 0.804688 8.50586 0.667969 7.65137 0.667969H4.35645C2.89355 0.667969 2.13477 1.44043 2.13477 2.91016V13.2256C2.13477 14.7021 2.89355 15.4678 4.35645 15.4678ZM4.46582 14.1279C3.80273 14.1279 3.47461 13.7793 3.47461 13.1436V2.99219C3.47461 2.36328 3.80273 2.00781 4.46582 2.00781H7.37793V5.75391C7.37793 6.73145 7.86328 7.20312 8.83398 7.20312H12.5186V13.1436C12.5186 13.7793 12.1836 14.1279 11.5205 14.1279H4.46582ZM8.95703 6.02734C8.67676 6.02734 8.56055 5.9043 8.56055 5.62402V2.19238L12.334 6.02734H8.95703Z"
></path>
</svg>
</div>
</div>
<div
style="
margin-right: 6px;
margin-left: 12px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Turn into page in
</div>
</div>
<div
style="
width: 12px;
fill: rgba(55, 53, 47, 0.35);
margin-left: 10px;
flex-shrink: 0;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="chevronRight"
style="
width: 100%;
height: 100%;
display: block;
fill: rgba(55, 53, 47, 0.45);
flex-shrink: 0;
transform: rotate(90deg);
"
>
<path
d="M12.375 8.06445C12.375 7.83203 12.2861 7.63379 12.1084 7.45605L6.77637 2.24023C6.62598 2.08984 6.44141 2.01465 6.22266 2.01465C5.77832 2.01465 5.42285 2.35645 5.42285 2.80078C5.42285 3.01953 5.51172 3.21777 5.66211 3.375L10.4746 8.06445L5.66211 12.7539C5.51855 12.9043 5.42285 13.1025 5.42285 13.3213C5.42285 13.7725 5.77832 14.1143 6.22266 14.1143C6.44141 14.1143 6.62598 14.0391 6.77637 13.8887L12.1084 8.67285C12.293 8.49512 12.375 8.29688 12.375 8.06445Z"
></path>
</svg>
</div>
</div>
<div
style="
display: flex;
flex-direction: column;
width: 400px;
min-width: 180px;
max-width: calc(100vw - 24px);
height: 100%;
max-height: 70vh;
"
>
<div
class="notion-scroller child"
>
<div style="flex-shrink: 0">
<div
style="
padding-top: 6px;
padding-bottom: 6px;
margin-top: 8px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
margin-bottom: -2px;
"
>
<div
style="
margin-left: 12px;
margin-right: 12px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div style="display: flex">
<div
class="notion-focusable-within"
style="
display: flex;
align-items: center;
width: 100%;
font-size: 14px;
line-height: 20px;
padding: 3px 6px;
position: relative;
border-radius: 4px;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px
1px inset;
background: rgba(242, 241, 238, 0.6);
cursor: text;
height: 28px;
"
>
<div style="margin-right: 6px">
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="search"
style="
width: 14px;
height: 14px;
display: block;
fill: rgba(55, 53, 47, 0.45);
flex-shrink: 0;
flex-grow: 0;
"
>
<path
d="M.281 6.438c0-.875.164-1.696.492-2.461a6.484 6.484 0 011.375-2.032A6.237 6.237 0 016.64.078 6.2 6.2 0 019.11.57c.77.328 1.447.787 2.03 1.375a6.374 6.374 0 011.368 2.032c.333.765.5 1.586.5 2.46 0 .688-.107 1.342-.32 1.961a6.28 6.28 0 01-.868 1.696l3.563 3.578c.11.104.19.226.242.367.057.14.086.29.086.445 0 .22-.05.417-.149.594a1.122 1.122 0 01-1 .57c-.156 0-.307-.028-.453-.086a1.058 1.058 0 01-.382-.25l-3.586-3.585c-.5.333-1.047.596-1.641.789a6.089 6.089 0 01-1.86.28 6.237 6.237 0 01-2.468-.491 6.4 6.4 0 01-2.024-1.367A6.509 6.509 0 01.773 8.913a6.256 6.256 0 01-.492-2.476zm1.664 0c0 .65.12 1.26.36 1.828a4.775 4.775 0 001.015 1.5c.433.427.933.763 1.5 1.007a4.548 4.548 0 001.82.368c.652 0 1.261-.123 1.829-.368a4.747 4.747 0 002.508-2.507 4.567 4.567 0 00.367-1.829c0-.645-.123-1.252-.367-1.82a4.776 4.776 0 00-1.016-1.5A4.578 4.578 0 008.469 2.11a4.567 4.567 0 00-1.828-.367c-.646 0-1.253.123-1.82.367a4.667 4.667 0 00-1.5 1.008c-.433.432-.772.932-1.016 1.5a4.633 4.633 0 00-.36 1.82z"
></path>
</svg>
</div>
<input
placeholder="Search page to add in…"
type="text"
style="
font-size: inherit;
line-height: inherit;
border: none;
background: none;
width: 100%;
display: block;
resize: none;
padding: 0px;
"
/>
<div style="margin-left: 4px"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
style="
height: 374px;
max-height: 70vh;
padding-bottom: 12px;
"
>
<div style="width: 100%">
<div
style="
display: flex;
flex-direction: column;
height: 100%;
"
>
<div
style="
color: rgba(55, 53, 47, 0.65);
font-size: 12px;
font-weight: 500;
padding: 12px 14px 4px;
"
>
<div
style="
font-size: 12px;
line-height: 16px;
color: rgba(55, 53, 47, 0.65);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Suggested
</div>
</div>
<div>
<div
role="button"
tabindex="0"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
"
>
<div
style="
display: flex;
flex-direction: row;
font-size: 14px;
height: 28px;
padding-left: 14px;
color: rgb(55, 53, 47);
align-items: center;
"
>
<div
role="button"
tabindex="0"
aria-expanded="false"
aria-label="Open"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 4px;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 12 12"
class="chevronDownRoundedThick"
style="
width: 12px;
height: 12px;
display: block;
fill: rgba(55, 53, 47, 0.45);
flex-shrink: 0;
transition: transform 200ms ease-out 0s;
transform: rotateZ(-90deg);
opacity: 1;
"
>
<path
d="M6.02734 8.80274C6.27148 8.80274 6.47168 8.71484 6.66211 8.51465L10.2803 4.82324C10.4268 4.67676 10.5 4.49609 10.5 4.28125C10.5 3.85156 10.1484 3.5 9.72363 3.5C9.50879 3.5 9.30859 3.58789 9.15234 3.74902L6.03223 6.9668L2.90722 3.74902C2.74609 3.58789 2.55078 3.5 2.33105 3.5C1.90137 3.5 1.55469 3.85156 1.55469 4.28125C1.55469 4.49609 1.62793 4.67676 1.77441 4.82324L5.39258 8.51465C5.58789 8.71973 5.78808 8.80274 6.02734 8.80274Z"
></path>
</svg>
</div>
<div style="margin-left: 3px">
<div
style="
background: white;
border-radius: 100%;
box-shadow: none;
outline: rgba(227, 226, 224, 0.5) solid
1px;
outline-offset: -1px;
"
>
<div
style="
box-sizing: content-box;
border-radius: 100%;
line-height: 16px;
width: 16px;
height: 16px;
overflow: hidden;
text-align: center;
font-size: 11px;
background: white;
user-select: none;
color: rgb(145, 145, 142);
opacity: 1;
"
>
<div>M</div>
</div>
</div>
</div>
<div
style="
display: flex;
align-items: center;
margin-left: 7px;
"
>
Private pages
<div style="margin-left: 2px">
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="locked"
style="
width: 14px;
height: 14px;
display: block;
fill: rgba(55, 53, 47, 0.45);
flex-shrink: 0;
margin-left: 4px;
"
>
<path
d="M4.79395 14.7227H11.1992C12.252 14.7227 12.7783 14.1963 12.7783 13.0479V8.20801C12.7783 7.19629 12.3682 6.66992 11.541 6.56055V4.96094C11.541 2.36328 9.81152 1.1123 7.99316 1.1123C6.18164 1.1123 4.45215 2.36328 4.45215 4.96094V6.56055C3.625 6.66992 3.21484 7.19629 3.21484 8.20801V13.0479C3.21484 14.1963 3.73438 14.7227 4.79395 14.7227ZM5.75098 4.83105C5.75098 3.22461 6.76953 2.35645 7.99316 2.35645C9.2168 2.35645 10.2422 3.22461 10.2422 4.83105V6.54004H5.75098V4.83105ZM4.99219 13.5059C4.69141 13.5059 4.54102 13.3623 4.54102 13V8.25586C4.54102 7.89355 4.69141 7.76367 4.99219 7.76367H11.0078C11.3086 7.76367 11.4521 7.89355 11.4521 8.25586V13C11.4521 13.3623 11.3086 13.5059 11.0078 13.5059H4.99219Z"
></path>
</svg>
</div>
</div>
</div>
</div>
<div
role="button"
tabindex="0"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
"
>
<div
style="
display: flex;
flex-direction: row;
font-size: 14px;
height: 28px;
padding-left: 14px;
color: rgb(55, 53, 47);
align-items: center;
"
>
<div
role="button"
tabindex="0"
aria-expanded="false"
aria-label="Open"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 4px;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 12 12"
class="chevronDownRoundedThick"
style="
width: 12px;
height: 12px;
display: block;
fill: rgba(55, 53, 47, 0.45);
flex-shrink: 0;
transition: transform 200ms ease-out 0s;
transform: rotateZ(-90deg);
opacity: 1;
"
>
<path
d="M6.02734 8.80274C6.27148 8.80274 6.47168 8.71484 6.66211 8.51465L10.2803 4.82324C10.4268 4.67676 10.5 4.49609 10.5 4.28125C10.5 3.85156 10.1484 3.5 9.72363 3.5C9.50879 3.5 9.30859 3.58789 9.15234 3.74902L6.03223 6.9668L2.90722 3.74902C2.74609 3.58789 2.55078 3.5 2.33105 3.5C1.90137 3.5 1.55469 3.85156 1.55469 4.28125C1.55469 4.49609 1.62793 4.67676 1.77441 4.82324L5.39258 8.51465C5.58789 8.71973 5.78808 8.80274 6.02734 8.80274Z"
></path>
</svg>
</div>
<div
style="
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
flex-grow: 0;
width: 22px;
height: 18px;
margin-right: 4px;
position: relative;
"
>
<div
class="notion-record-icon notranslate"
style="
display: flex;
align-items: center;
justify-content: center;
height: 18px;
width: 18px;
border-radius: 0.25em;
flex-shrink: 0;
"
>
<div>
<div style="width: 100%; height: 100%">
<img
src="/images/app-packages/docs-icon.svg"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
width: 15.984px;
height: 15.984px;
transition: opacity 100ms ease-out
0s;
"
/>
</div>
</div>
</div>
</div>
<div style="max-width: 80%">
<div
class="notranslate"
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Docs
</div>
</div>
</div>
</div>
<div
role="button"
tabindex="0"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
"
>
<div
style="
display: flex;
flex-direction: row;
font-size: 14px;
height: 28px;
padding-left: 14px;
color: rgb(55, 53, 47);
align-items: center;
"
>
<div
role="button"
tabindex="0"
aria-expanded="false"
aria-label="Open"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 4px;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 12 12"
class="chevronDownRoundedThick"
style="
width: 12px;
height: 12px;
display: block;
fill: rgba(55, 53, 47, 0.45);
flex-shrink: 0;
transition: transform 200ms ease-out 0s;
transform: rotateZ(-90deg);
opacity: 1;
"
>
<path
d="M6.02734 8.80274C6.27148 8.80274 6.47168 8.71484 6.66211 8.51465L10.2803 4.82324C10.4268 4.67676 10.5 4.49609 10.5 4.28125C10.5 3.85156 10.1484 3.5 9.72363 3.5C9.50879 3.5 9.30859 3.58789 9.15234 3.74902L6.03223 6.9668L2.90722 3.74902C2.74609 3.58789 2.55078 3.5 2.33105 3.5C1.90137 3.5 1.55469 3.85156 1.55469 4.28125C1.55469 4.49609 1.62793 4.67676 1.77441 4.82324L5.39258 8.51465C5.58789 8.71973 5.78808 8.80274 6.02734 8.80274Z"
></path>
</svg>
</div>
<div
style="
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
flex-grow: 0;
width: 22px;
height: 18px;
margin-right: 4px;
position: relative;
"
>
<div
class="notion-record-icon notranslate"
style="
display: flex;
align-items: center;
justify-content: center;
height: 18px;
width: 18px;
border-radius: 0.25em;
flex-shrink: 0;
"
>
<div>
<div style="width: 100%; height: 100%">
<img
src="/images/app-packages/meetings-icon.svg"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
width: 15.984px;
height: 15.984px;
transition: opacity 100ms ease-out
0s;
"
/>
</div>
</div>
</div>
</div>
<div style="max-width: 80%">
<div
class="notranslate"
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Meetings
</div>
</div>
</div>
</div>
</div>
<div
style="
color: rgba(55, 53, 47, 0.65);
font-size: 12px;
font-weight: 500;
padding: 12px 14px 4px;
"
>
<div
style="
font-size: 12px;
line-height: 16px;
color: rgba(55, 53, 47, 0.65);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Teamspaces
</div>
</div>
<div>
<div
role="button"
tabindex="0"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
"
>
<div
style="
display: flex;
flex-direction: row;
font-size: 14px;
height: 28px;
padding-left: 14px;
color: rgb(55, 53, 47);
align-items: center;
"
>
<div
role="button"
tabindex="0"
aria-expanded="false"
aria-label="Open"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 4px;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 12 12"
class="chevronDownRoundedThick"
style="
width: 12px;
height: 12px;
display: block;
fill: rgba(55, 53, 47, 0.45);
flex-shrink: 0;
transition: transform 200ms ease-out 0s;
transform: rotateZ(-90deg);
opacity: 1;
"
>
<path
d="M6.02734 8.80274C6.27148 8.80274 6.47168 8.71484 6.66211 8.51465L10.2803 4.82324C10.4268 4.67676 10.5 4.49609 10.5 4.28125C10.5 3.85156 10.1484 3.5 9.72363 3.5C9.50879 3.5 9.30859 3.58789 9.15234 3.74902L6.03223 6.9668L2.90722 3.74902C2.74609 3.58789 2.55078 3.5 2.33105 3.5C1.90137 3.5 1.55469 3.85156 1.55469 4.28125C1.55469 4.49609 1.62793 4.67676 1.77441 4.82324L5.39258 8.51465C5.58789 8.71973 5.78808 8.80274 6.02734 8.80274Z"
></path>
</svg>
</div>
<div
style="
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
flex-grow: 0;
width: 22px;
height: 18px;
margin-right: 4px;
position: relative;
"
>
<div
class="notion-record-icon notranslate"
style="
display: flex;
align-items: center;
justify-content: center;
height: 18px;
width: 18px;
border-radius: 0.25em;
flex-shrink: 0;
background: rgb(250, 222, 201);
"
>
<div>
<div style="width: 100%; height: 100%">
<img
src="/icons/home_orange.svg?mode=light"
referrerpolicy="same-origin"
style="
display: block;
object-fit: cover;
border-radius: 4px;
width: 14.04px;
height: 14.04px;
transition: opacity 100ms ease-out
0s;
"
/>
</div>
</div>
</div>
</div>
<div style="max-width: 80%">
<div
class="notranslate"
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
General
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer style="flex-shrink: 0"></footer>
</div>
</div>
</div>
<div
style="
padding-top: 6px;
padding-bottom: 6px;
box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px;
margin-top: 1px;
"
>
<div
class="option-item"
tabindex="-1"
id=":r3l:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
margin-left: 4px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="link"
style="
width: 16px;
height: 16px;
display: block;
fill: rgba(55, 53, 47, 0.85);
flex-shrink: 0;
"
>
<path
d="M7.69922 10.8945L8.73828 9.84863C7.91797 9.77344 7.34375 9.51367 6.91992 9.08984C5.76465 7.93457 5.76465 6.29395 6.91309 5.14551L9.18262 2.87598C10.3379 1.7207 11.9717 1.7207 13.127 2.87598C14.2891 4.04492 14.2822 5.67188 13.1338 6.82031L11.958 7.99609C12.1768 8.49512 12.2451 9.10352 12.1289 9.62988L14.0908 7.6748C15.7725 6 15.7793 3.62109 14.084 1.92578C12.3887 0.223633 10.0098 0.237305 8.33496 1.91211L5.95605 4.29785C4.28125 5.97266 4.26758 8.35156 5.96289 10.0469C6.36621 10.4434 6.90625 10.7441 7.69922 10.8945ZM8.30078 5.13184L7.26855 6.17773C8.08203 6.25293 8.66309 6.51953 9.08008 6.93652C10.2422 8.09863 10.2422 9.73242 9.08691 10.8809L6.81738 13.1504C5.66211 14.3057 4.03516 14.3057 2.87305 13.1504C1.71094 11.9883 1.71777 10.3545 2.87305 9.20605L4.04199 8.03027C3.83008 7.53125 3.75488 6.92969 3.87109 6.39648L1.91602 8.35156C0.234375 10.0264 0.227539 12.4121 1.92285 14.1074C3.61816 15.8027 5.99707 15.7891 7.67188 14.1143L10.0439 11.7354C11.7256 10.0537 11.7324 7.6748 10.0371 5.98633C9.64062 5.58301 9.10059 5.28223 8.30078 5.13184Z"
></path>
</svg>
</div>
</div>
<div
style="
margin-right: 6px;
margin-left: 6px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Copy link to block
</div>
</div>
<div
style="
margin-right: auto;
margin-left: 12px;
min-width: 0px;
flex-shrink: 0;
"
>
<span
style="
color: rgba(55, 53, 47, 0.5);
font-size: 12px;
white-space: nowrap;
"
>Alt+Shift+L</span
>
</div>
</div>
</div>
</div>
<div
style="
padding-top: 6px;
padding-bottom: 6px;
box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px;
margin-top: 1px;
"
>
<div
class="option-item"
tabindex="-1"
id=":r3m:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
margin-left: 4px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="moveTo"
style="
width: 16px;
height: 16px;
display: block;
fill: rgba(55, 53, 47, 0.85);
flex-shrink: 0;
"
>
<path
d="M2.34668 13.5469C2.78418 13.5469 3.07812 13.2393 3.07812 12.8018C3.07812 12.542 3.05762 12.2754 3.05762 11.8994C3.05762 9.60254 3.86426 8.67285 6.14062 8.67285H10.5771L12.2109 8.57031L10.1738 10.4297L8.64941 11.9678C8.5127 12.1045 8.43066 12.2891 8.43066 12.501C8.43066 12.9111 8.73828 13.2188 9.16895 13.2188C9.35352 13.2188 9.53809 13.1436 9.70215 12.9863L14.207 8.48145C14.3711 8.33105 14.4531 8.12598 14.4531 7.9209C14.4531 7.71582 14.3711 7.51758 14.207 7.36035L9.71582 2.86914C9.53809 2.70508 9.35352 2.62305 9.16895 2.62305C8.73828 2.62305 8.43066 2.93066 8.43066 3.34082C8.43066 3.55273 8.5127 3.7373 8.64941 3.87402L10.1738 5.41895L12.2041 7.27148L10.5771 7.17578H6.04492C2.87988 7.17578 1.54688 8.63184 1.54688 11.8516C1.54688 12.2549 1.56055 12.6035 1.61523 12.877C1.67676 13.2051 1.88184 13.5469 2.34668 13.5469Z"
></path>
</svg>
</div>
</div>
<div
style="
margin-right: 6px;
margin-left: 6px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Move to
</div>
</div>
<div
style="
margin-right: auto;
margin-left: 12px;
min-width: 0px;
flex-shrink: 0;
"
>
<span
style="
color: rgba(55, 53, 47, 0.5);
font-size: 12px;
white-space: nowrap;
"
>Ctrl+Shift+P</span
>
</div>
</div>
</div>
</div>
<div
style="
padding-top: 6px;
padding-bottom: 6px;
box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px;
margin-top: 1px;
"
>
<div
class="option-item"
tabindex="-1"
id=":r3n:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
margin-left: 4px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="speechBubbleThin"
style="
width: 16px;
height: 16px;
display: block;
fill: rgba(55, 53, 47, 0.85);
flex-shrink: 0;
"
>
<path
d="M4.73926 15.6797C5.12207 15.6797 5.40918 15.4951 5.87402 15.085L8.21875 13.0068H12.3545C14.4121 13.0068 15.5674 11.8311 15.5674 9.80078V4.49609C15.5674 2.46582 14.4121 1.29004 12.3545 1.29004H3.63867C1.58105 1.29004 0.425781 2.46582 0.425781 4.49609V9.80078C0.425781 11.8311 1.6084 13.0068 3.59082 13.0068H3.87109V14.6953C3.87109 15.3037 4.19238 15.6797 4.73926 15.6797ZM5.07422 14.1758V12.2275C5.07422 11.8242 4.90332 11.667 4.51367 11.667H3.67285C2.38086 11.667 1.76562 11.0176 1.76562 9.75977V4.53711C1.76562 3.2793 2.38086 2.62988 3.67285 2.62988H12.3135C13.6055 2.62988 14.2275 3.2793 14.2275 4.53711V9.75977C14.2275 11.0176 13.6055 11.667 12.3135 11.667H8.14355C7.7334 11.667 7.52832 11.7354 7.24121 12.0361L5.07422 14.1758ZM4.51367 5.35059H11.4043C11.6367 5.35059 11.8281 5.15918 11.8281 4.91992C11.8281 4.69434 11.6367 4.50293 11.4043 4.50293H4.51367C4.28125 4.50293 4.09668 4.69434 4.09668 4.91992C4.09668 5.15918 4.28125 5.35059 4.51367 5.35059ZM4.51367 7.53125H11.4043C11.6367 7.53125 11.8281 7.33301 11.8281 7.10059C11.8281 6.86816 11.6367 6.67676 11.4043 6.67676H4.51367C4.28125 6.67676 4.09668 6.86816 4.09668 7.10059C4.09668 7.33301 4.28125 7.53125 4.51367 7.53125ZM4.51367 9.70508H9.00488C9.2373 9.70508 9.42188 9.51367 9.42188 9.28125C9.42188 9.04199 9.2373 8.85742 9.00488 8.85742H4.51367C4.28125 8.85742 4.09668 9.04199 4.09668 9.28125C4.09668 9.51367 4.28125 9.70508 4.51367 9.70508Z"
></path>
</svg>
</div>
</div>
<div
style="
margin-right: 6px;
margin-left: 6px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Comment
</div>
</div>
<div
style="
margin-right: auto;
margin-left: 12px;
min-width: 0px;
flex-shrink: 0;
"
>
<span
style="
color: rgba(55, 53, 47, 0.5);
font-size: 12px;
white-space: nowrap;
"
>Ctrl+Shift+M</span
>
</div>
</div>
</div>
</div>
<div
style="
padding-top: 6px;
padding-bottom: 6px;
box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px;
margin-top: 1px;
"
>
<div
class="option-item"
tabindex="-1"
id=":r3o:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
background: rgba(55, 53, 47, 0.08);
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
margin-left: 4px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 30 30"
class="blockColor"
style="
width: 16px;
height: 16px;
display: block;
fill: rgba(55, 53, 47, 0.85);
flex-shrink: 0;
"
>
<path
d="M25,5c0-2.2-1.8-4-4-4H6C3.8,1,2,2.8,2,5H1v2h1c0,2.2,1.8,4,4,4h15c2.2,0,4-1.8,4-4h2v6H14v4h-2v9c0,1.657,1.344,3,3,3 s3-1.343,3-3v-9h-2v-2h13V5H25z M23,7c0,1.103-0.896,2-2,2H6C4.896,9,4,8.103,4,7V5c0-1.103,0.896-2,2-2h15c1.104,0,2,0.897,2,2V7z M16,26c0,0.552-0.449,1-1,1s-1-0.448-1-1v-7h2V26z"
></path>
</svg>
</div>
</div>
<div
style="
margin-right: 6px;
margin-left: 12px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Color
</div>
</div>
<div
style="
width: 12px;
fill: rgba(55, 53, 47, 0.35);
margin-left: 10px;
flex-shrink: 0;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="chevronRight"
style="
width: 100%;
height: 100%;
display: block;
fill: rgba(55, 53, 47, 0.45);
flex-shrink: 0;
transform: rotate(90deg);
"
>
<path
d="M12.375 8.06445C12.375 7.83203 12.2861 7.63379 12.1084 7.45605L6.77637 2.24023C6.62598 2.08984 6.44141 2.01465 6.22266 2.01465C5.77832 2.01465 5.42285 2.35645 5.42285 2.80078C5.42285 3.01953 5.51172 3.21777 5.66211 3.375L10.4746 8.06445L5.66211 12.7539C5.51855 12.9043 5.42285 13.1025 5.42285 13.3213C5.42285 13.7725 5.77832 14.1143 6.22266 14.1143C6.44141 14.1143 6.62598 14.0391 6.77637 13.8887L12.1084 8.67285C12.293 8.49512 12.375 8.29688 12.375 8.06445Z"
></path>
</svg>
</div>
</div>
</div>
</div>
</div>
<!-- <div
style="
padding-top: 8px;
padding-bottom: 8px;
box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px;
margin-top: 1px;
"
> -->
<!-- <div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
margin-left: 12px;
margin-right: 12px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div>
<div>
<div
style="
font-size: 12px;
line-height: 16px;
color: rgba(55, 53, 47, 0.5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 4px;
"
>
Text
</div>
<div
style="
font-size: 12px;
line-height: 16px;
color: rgba(55, 53, 47, 0.5);
margin-bottom: 4px;
"
>
Last edited by mustafa rezae
</div>
<div
style="
font-size: 12px;
line-height: 16px;
color: rgba(55, 53, 47, 0.5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Today at 9:05 AM
</div>
</div>
</div>
</div>
</div> -->
<!-- </div> -->
</div>
<!-- <footer style="flex-shrink: 0"></footer> -->
</div>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
showSubmenu(evt) {
try {
const child = evt.target.querySelector(".notion-scroller");
// const child = evt.target.children.find(
// (i) => i.className == "notion-scroller"
// );
// child.classList.addClass("fix-submenu");
child.style.left = "-" + evt.layerY + "px";
child.style.top = evt.layerX + "px";
child.style.display = "block";
} catch (err) {}
},
},
};
</script>
<style scoped lang="scss">
.notion-six-dot-container {
position: relative;
.notion-six-dot {
display: flex;
align-items: center;
position: relative;
// flex-direction: row;
// transform-origin: right 50%;
// right: 5px;
// top: 0px;
// opacity: 1;
transition-property: opacity, transform;
transition-duration: 270ms;
transition-timing-function: ease;
.div-1 {
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;
width: 265px;
.div-2 {
display: flex;
flex-direction: column;
width: 265px;
min-width: 180px;
max-width: calc(100vw - 24px);
height: 100%;
max-height: 70vh;
}
.notion-scroller.parent {
z-index: 1;
flex-grow: 1;
min-height: 0px;
// transform: translateZ(0px);
// overflow-y: auto;
// margin-right: 0px;
// margin-bottom: 0px;
.listbox {
.option-item {
position: relative;
border-radius: 4px;
&:hover {
background: rgba(55, 53, 47, 0.08);
& > div > div > svg {
transform: rotate(180deg)!important;
}
.notion-scroller {
&.child {
visibility: visible;
width: 100%;
transition: all 20ms ease-in 0s;
}
}
}
.notion-scroller {
&.child {
position: absolute;
top: 0;
right: 100%;
background-color: #fafafa;
transition: all 20ms ease-in 0s;
width: 0;
visibility: hidden;
}
}
}
}
}
}
}
}
</style>