8a99ef4cfd
Affichage fonctionnelle sous forme de toolbar vertical, comme dans les IDE Related work items: #7976
135 lines
No EOL
3.2 KiB
SCSS
135 lines
No EOL
3.2 KiB
SCSS
@tailwind base;
|
|
@tailwind components;
|
|
@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
|
|
h-1/2 md:h-full bottom-0 md:bottom-0
|
|
}
|
|
|
|
|
|
|
|
.sidebar-title {
|
|
@apply p-3 md:p-5 font-bold h-12 md:h-16
|
|
}
|
|
|
|
.sidebar-component {
|
|
@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 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 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 {
|
|
@apply transition-all overflow-hidden text-sm rounded-lg bg-slate-300/60 hover:bg-slate-300
|
|
}
|
|
|
|
.elements-sidebar-row {
|
|
@apply pl-6 pr-6 w-full
|
|
}
|
|
.symbols-sidebar-row {
|
|
@apply elements-sidebar-row
|
|
}
|
|
|
|
.close-button {
|
|
@apply transition-all w-full h-auto p-4 flex
|
|
}
|
|
|
|
.mainmenu-bg {
|
|
@apply bg-blue-100 h-full w-full
|
|
}
|
|
|
|
.mainmenu-btn {
|
|
@apply transition-all bg-blue-100 hover:bg-blue-200 text-blue-700 text-lg font-semibold p-8 rounded-lg
|
|
}
|
|
|
|
.normal-btn {
|
|
@apply text-sm
|
|
py-2 px-4
|
|
rounded-full border-0
|
|
font-semibold
|
|
transition-all
|
|
bg-blue-100 text-blue-700
|
|
hover:bg-blue-200
|
|
}
|
|
|
|
.floating-btn {
|
|
@apply h-full w-full text-white align-middle
|
|
items-center justify-center
|
|
}
|
|
|
|
.bar {
|
|
@apply fixed z-30 flex flex-col top-0 left-0
|
|
h-full w-16 bg-slate-100 shadow-sm
|
|
}
|
|
|
|
.bar-btn {
|
|
@apply h-16 w-full p-3 bg-slate-100 hover:bg-slate-200
|
|
transition-all text-gray-700 hover:text-gray-600
|
|
}
|
|
|
|
.heroicon {
|
|
@apply h-full w-full align-middle items-center justify-center
|
|
}
|
|
|
|
.radio-button-icon {
|
|
@apply rounded-md shadow-sm bg-white w-8 cursor-pointer inline-block
|
|
}
|
|
|
|
.sidebar-tooltip {
|
|
@apply absolute w-auto p-2 m-2 min-w-max left-14
|
|
rounded-md shadow-md
|
|
text-gray-800 bg-slate-100
|
|
dark:text-white dark:bg-gray-800
|
|
text-xs font-bold
|
|
transition-all duration-100 scale-0 origin-left
|
|
}
|
|
|
|
.contextmenu {
|
|
@apply grid grid-cols-1 gap-0
|
|
}
|
|
|
|
.contextmenu-item {
|
|
@apply px-2 py-1 hover:bg-slate-300 text-left w-full
|
|
}
|
|
|
|
.input-group {
|
|
@apply w-full
|
|
text-xs font-medium transition-all text-gray-800 mt-1 px-3 py-2
|
|
bg-white border-2 border-white rounded-lg placeholder-gray-800
|
|
focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
|
|
disabled:bg-slate-200 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none;
|
|
}
|
|
.input-group[type='color'] {
|
|
@apply py-0
|
|
}
|
|
|
|
.prop-category-body {
|
|
@apply rounded-lg bg-slate-300 p-3
|
|
}
|
|
} |