Files
tuliprox/frontend/scss/app/components/_sidebar.scss
T

89 lines
1.5 KiB
SCSS

@use "../../size" as size;
.tp__app-sidebar.expanded {
min-width: var(--sidebar-width-expaned);
max-width: var(--sidebar-width-expaned);
width: var(--sidebar-width-expaned);
.tp__app-sidebar__content {
padding: var(--padding-larger) var(--padding-large);
}
.tp__app-header__logo {
.svg-icon,
img {
width: 36px;
height: 36px;
}
}
}
.tp__app-sidebar.collapsed {
min-width: var(--sidebar-width-collapsed);
max-width: var(--sidebar-width-collapsed);
width: var(--sidebar-width-collapsed);
.tp__app-sidebar__content {
padding: var(--padding-mini) var(--padding-micro);
}
.tp__app-sidebar__header {
justify-content: center;
padding: 0;
}
.tp__app-header__logo {
.svg-icon,
img {
width: 1.5rem;
height: 1.5rem;
}
}
.svg-icon {
width: 1.5rem;
height: 1.5rem;
}
}
.tp__app-sidebar {
display: flex;
flex-flow: column;
gap: var(--gap-default);
.tp__menu-item {
.icon-Live {
transform: translateY(-2px);
}
}
.tp__menu-item.active,
.tp__icon-button.active {
background-color: var(--menu-item-hover-background-color);
color: var(--menu-item-hover-color)
}
&__content {
display: flex;
flex-flow: column;
gap: var(--gap-default);
&-space {
height: var(--gap-default);
}
.tp__collapse-panel {
margin-top: var(--gap-large);
}
}
}
@media (max-width: size.$mobile-breakpoint) {
.tp__app-sidebar-menu {
&--source_editor {
display: none;
}
}
}