smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: render library into Sidebar on mobile (#5774)

Browse source
This commit is contained in:
David Luzar 2022-10-18 06:59:14 +02:00 • committed by GitHub
parent e9067de173
commit 941b2d7042
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 692 additions and 668 deletions
Download patch file Download diff file Expand all files Collapse all files

102
src/components/LibraryMenu.scss
View file

@ -1,10 +1,16 @@
@import "open-color/open-color";
.excalidraw {
.layer-ui__library-sidebar {
display: flex;
flex-direction: column;
}
.layer-ui__library {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex: 1 1 auto;
.layer-ui__library-header {
display: flex;
@ -23,16 +29,100 @@
}
.layer-ui__sidebar {
.layer-ui__library {
padding: 0;
height: 100%;
}
.library-menu-items-container {
height: 100%;
width: 100%;
}
}
.library-actions {
width: 100%;
display: flex;
margin-right: auto;
align-items: center;
button .library-actions-counter {
position: absolute;
right: 2px;
bottom: 2px;
border-radius: 50%;
width: 1em;
height: 1em;
padding: 1px;
font-size: 0.7rem;
background: #fff;
}
&--remove {
background-color: $oc-red-7;
&:hover {
background-color: $oc-red-8;
}
&:active {
background-color: $oc-red-9;
}
svg {
color: $oc-white;
}
.library-actions-counter {
color: $oc-red-7;
}
}
&--export {
background-color: $oc-lime-5;
&:hover {
background-color: $oc-lime-7;
}
&:active {
background-color: $oc-lime-8;
}
svg {
color: $oc-white;
}
.library-actions-counter {
color: $oc-lime-5;
}
}
&--publish {
background-color: $oc-cyan-6;
&:hover {
background-color: $oc-cyan-7;
}
&:active {
background-color: $oc-cyan-9;
}
svg {
color: $oc-white;
}
label {
margin-left: -0.2em;
margin-right: 1.1em;
color: $oc-white;
font-size: 0.86em;
}
.library-actions-counter {
color: $oc-cyan-6;
}
}
&--load {
background-color: $oc-blue-6;
&:hover {
background-color: $oc-blue-7;
}
&:active {
background-color: $oc-blue-9;
}
svg {
color: $oc-white;
}
}
}
.layer-ui__library-message {
padding: 2em 4em;
min-width: 200px;