4f0a2a9593
* move the existing example to with-script-in-browser * Add example with next js app router * disable ssr for excalidraw client comp * typo * update output dir * don't include nextjs example in tsconfig * remove meta.json * lint * remove example.ts * port * move the examples outside packages and use the deps as workspaces in examples * update gitignore * fix example * update path of build dir * fix * fix scripts * try local path * fix * update commands * fix * fix * fix script * skip ts * disable ts * add vercel.json * install * update tsconfig * fix lint * remove console.log * lets see if this works * revert * remove ts nocheck * add types and some utils in nextjs example * fix types * updatw example and remove nextjs dynamic syntax so we don't import excal twice * move both examples to workspaces and create generic example to be used by browser and next js both * copy the static assets to nextjs * fix ts config * render custom menu items * fix custom footer * fix types in browser example * use regular imports for importing excal and import it using dynamic next js in app router instead * Add example for pages router * fix css discrepancies * fix css * configure output dir * fix * fix css * rename to with-nextjs * move components to examples/excalidraw/components
93 lines
1.5 KiB
SCSS
93 lines
1.5 KiB
SCSS
.App {
|
|
font-family: sans-serif;
|
|
text-align: center;
|
|
|
|
.comment-avatar {
|
|
background: #faa2c1;
|
|
border-radius: 66px 67px 67px 0px;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
padding: 4px;
|
|
margin: 4px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.app-title {
|
|
margin-block-start: 0.83em;
|
|
margin-block-end: 0.83em;
|
|
}
|
|
}
|
|
|
|
.button-wrapper {
|
|
input[type="checkbox"] {
|
|
margin: 5px;
|
|
}
|
|
button {
|
|
z-index: 1;
|
|
height: 40px;
|
|
max-width: 200px;
|
|
margin: 10px;
|
|
padding: 5px;
|
|
}
|
|
}
|
|
|
|
.excalidraw .App-menu_top .buttonList {
|
|
display: flex;
|
|
}
|
|
|
|
.excalidraw-wrapper {
|
|
height: 800px;
|
|
margin: 50px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
:root[dir="ltr"]
|
|
.excalidraw
|
|
.layer-ui__wrapper
|
|
.zen-mode-transition.App-menu_bottom--transition-left {
|
|
transform: none;
|
|
}
|
|
|
|
.excalidraw .panelColumn {
|
|
text-align: left;
|
|
}
|
|
|
|
.export-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 50px;
|
|
|
|
&__checkbox {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.excalidraw {
|
|
--color-primary: #faa2c1;
|
|
--color-primary-darker: #f783ac;
|
|
--color-primary-darkest: #e64980;
|
|
--color-primary-light: #fcc2d7;
|
|
|
|
button.custom-element {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
|
|
.custom-footer,
|
|
.custom-element {
|
|
padding: 0.1rem;
|
|
margin: 0 8px;
|
|
}
|
|
.layer-ui__wrapper__footer.App-menu_bottom {
|
|
align-items: stretch;
|
|
}
|
|
// till its merged in OSS
|
|
.App-toolbar-container .mobile-misc-tools-container {
|
|
position: absolute;
|
|
}
|
|
}
|