Eva Marco bb65782d08
🎉 Add sidebar css variables (#7645)
* 🎉 Add sidebar css variables

* 🎉 Explain more in depth the grid structure
2025-11-05 14:06:26 +01:00

129 lines
2.4 KiB
SCSS

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
.menu {
@extend .menu-dropdown;
top: deprecated.$s-48;
left: calc(var(--right-sidebar-width, deprecated.$s-256) - deprecated.$s-16);
width: deprecated.$s-192;
margin: 0;
}
.menu-item {
@extend .menu-item-base;
cursor: pointer;
.open-arrow {
@include deprecated.flexCenter;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
&:hover {
color: var(--menu-foreground-color-hover);
.open-arrow {
svg {
stroke: var(--menu-foreground-color-hover);
}
}
.shortcut-key {
color: var(--menu-shortcut-foreground-color-hover);
}
}
}
.separator {
border-top: deprecated.$s-1 solid var(--color-background-quaternary);
height: deprecated.$s-4;
left: calc(-1 * deprecated.$s-4);
margin-top: deprecated.$s-8;
position: relative;
width: calc(100% + deprecated.$s-8);
}
.shortcut {
@extend .shortcut-base;
}
.shortcut-key {
@extend .shortcut-key-base;
}
.sub-menu {
@extend .menu-dropdown;
left: calc(var(--right-sidebar-width, deprecated.$s-256) + deprecated.$s-180);
width: deprecated.$s-192;
min-width: calc(deprecated.$s-272 - deprecated.$s-2);
width: 110%;
.submenu-item {
@extend .menu-item-base;
&:hover {
color: var(--menu-foreground-color-hover);
.shortcut-key {
color: var(--menu-shortcut-foreground-color-hover);
}
}
}
.menu-disabled {
color: var(--color-foreground-secondary);
&:hover {
cursor: default;
color: var(--color-foreground-secondary);
background-color: var(--menu-background-color);
}
}
&.file {
top: deprecated.$s-48;
}
&.edit {
top: deprecated.$s-76;
}
&.view {
top: deprecated.$s-116;
}
&.preferences {
top: deprecated.$s-148;
}
&.plugins {
top: deprecated.$s-180;
max-height: calc(100vh - deprecated.$s-180);
overflow-x: hidden;
overflow-y: auto;
}
&.help-info {
top: deprecated.$s-232;
}
&.help-info-old {
top: deprecated.$s-192;
}
}
.item-icon {
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}