Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merged PR 203: Improve responsive design and refactor layout

Browse source
This commit is contained in:
Eric Nguyen 2022-10-03 12:05:16 +00:00
parent 50626218ba
commit 0d05f0959c
27 changed files with 968 additions and 485 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/index.scss
View file

@ -3,22 +3,45 @@
@tailwind utilities;
@layer components {
#root, .Editor, .App {
@apply overflow-hidden
}
.left-sidebar {
@apply fixed shadow-lg z-20
w-[calc(100%_-_4rem)] md:w-64
h-1/4 md:h-full bottom-1/2 md:bottom-0
}
.left-sidebar-single {
@apply fixed shadow-lg z-20
w-[calc(100%_-_4rem)] md:w-64
h-1/3 md:h-full bottom-0
}
.right-sidebar {
@apply fixed shadow-lg z-20
w-[calc(100%_-_4rem)] md:w-64
h-1/2 md:h-full bottom-0 md:bottom-0
}
.sidebar-title {
@apply p-6 font-bold
@apply p-3 md:p-5 font-bold h-12 md:h-16
}
.sidebar-component {
@apply transition-all px-2 py-6 text-sm rounded-lg
@apply transition-all px-2 h-12 flex items-center align-middle
text-sm rounded-lg
bg-slate-300/80 hover:bg-blue-500 hover:text-slate-50
disabled:bg-slate-400 disabled:text-slate-500
}
.sidebar-component-left {
@apply transition-all px-2 py-6 text-sm rounded-l-lg bg-slate-300/80 group-hover:bg-blue-500 group-hover:text-slate-50
@apply transition-all px-2 h-12 align-middle flex items-center text-sm rounded-l-lg bg-slate-300/80 group-hover:bg-blue-500 group-hover:text-slate-50
}
.sidebar-component-right {
@apply transition-all px-2 py-6 text-sm rounded-r-lg bg-slate-400/80 group-hover:bg-blue-600 group-hover:text-slate-50
@apply transition-all px-2 h-12 align-middle flex items-center text-sm rounded-r-lg bg-slate-400/80 group-hover:bg-blue-600 group-hover:text-slate-50
}
.sidebar-component-card {
@ -60,8 +83,8 @@
}
.bar {
@apply fixed z-20 flex flex-col top-0 left-0
h-full w-16 bg-slate-100
@apply fixed z-30 flex flex-col top-0 left-0
h-full w-16 bg-slate-100 shadow-sm
}
.bar-btn {