3493 lines
156 KiB
Vue
3493 lines
156 KiB
Vue
<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>
|