CalvinBackup/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-02-12 14:42:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎉 Add sidebar css variables (#7645)

Browse Source 
* 🎉 Add sidebar css variables

* 🎉 Explain more in depth the grid structure
This commit is contained in:
Eva Marco
2025-11-05 14:06:26 +01:00
committed by GitHub
parent 1cce82f958
commit bb65782d08
33 changed files with 205 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/app/main/constants.cljs
View File

@@ -15,8 +15,14 @@
(def grid-x-axis 10)
(def grid-y-axis 10)
(def sidebar-default-width 318)
(def sidebar-default-max-width 768)
;; Before changing these values also check:
;; frontend/src/app/main/ui/workspace/sidebar/common/sidebar.scss
(def right-sidebar-default-width 318)
(def right-sidebar-default-max-width 768)
(def left-sidebar-default-width 318)
(def left-sidebar-default-max-width 500)
(def page-metadata
"Default data for page metadata."

1
frontend/src/app/main/ui/ds/_sizes.scss
View File

@@ -28,7 +28,6 @@ $sz-200: px2rem(200);
$sz-224: px2rem(224);
$sz-252: px2rem(252);
$sz-284: px2rem(284);
$sz-318: px2rem(318);
$sz-352: px2rem(352);
$sz-364: px2rem(364);
$sz-384: px2rem(384);

2
frontend/src/app/main/ui/viewer/comments.scss
View File

@@ -104,7 +104,7 @@
position: absolute;
right: 0;
top: deprecated.$s-44;
width: deprecated.$s-276;
width: var(--right-sidebar-width);
height: calc(100vh - deprecated.$s-48);
z-index: deprecated.$z-index-10;
background-color: var(--panel-background-color);

7
frontend/src/app/main/ui/viewer/inspect.cljs
View File

@@ -9,6 +9,7 @@
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.constants :refer [right-sidebar-default-width right-sidebar-default-max-width]]
[app.main.data.viewer :as dv]
[app.main.store :as st]
[app.main.ui.hooks.resize :refer [use-resize-hook]]
@@ -70,7 +71,7 @@
{:keys [on-pointer-down on-lost-pointer-capture on-pointer-move]
set-right-size :set-size
right-size :size}
(use-resize-hook :code 276 276 768 :x true :right)
(use-resize-hook :code right-sidebar-default-width right-sidebar-default-width right-sidebar-default-max-width :x true :right)
handle-change-section
(mf/use-callback
@@ -81,7 +82,7 @@
(mf/use-callback
(mf/deps right-size)
(fn []
(set-right-size (if (> right-size 276) 276 768))))]
(set-right-size (if (> right-size right-sidebar-default-width) right-sidebar-default-width right-sidebar-default-max-width))))]
(mf/use-effect on-mount)
@@ -106,7 +107,7 @@
:not-expand (not can-be-expanded?)
:expanded can-be-expanded?)
:style #js {"--width" (when can-be-expanded? (dm/str right-size "px"))}}
:style #js {"--right-sidebar-width" (when can-be-expanded? (dm/str right-size "px"))}}
(when can-be-expanded?
[:div {:class (stl/css :resize-area)
:on-pointer-down on-pointer-down

9
frontend/src/app/main/ui/viewer/inspect.scss
View File

@@ -6,9 +6,6 @@
@use "refactor/common-refactor.scss" as deprecated;
$width-settings-bar: deprecated.$s-276;
$width-settings-bar-max: deprecated.$s-500;
.inspect-svg-wrapper {
@include deprecated.flexCenter;
position: relative;
@@ -32,18 +29,18 @@ $width-settings-bar-max: deprecated.$s-500;
.sidebar-container {
position: relative;
align-self: flex-start;
width: $width-settings-bar;
width: var(--right-sidebar-width);
background-color: var(--panel-background-color);
border-top: deprecated.$s-1 solid var(--search-bar-input-border-color);
}
.not-expand {
max-width: $width-settings-bar;
max-width: var(--right-sidebar-width);
}
.expanded {
width: var(--width, $width-settings-bar);
width: var(--right-sidebar-width, var(--right-sidebar-width));
}
.resize-area {

2
frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs
View File

@@ -156,7 +156,7 @@
(let [{:keys [modal title]} (get dwta/token-properties :color)
window-size (dom/get-window-size)
left-sidebar (dom/get-element "left-sidebar-aside")
x-size (dom/get-data left-sidebar "size")
x-size (dom/get-data left-sidebar "left-sidebar-width")
modal-height 392
x (- (int x-size) 30)
y (- (/ (:height window-size) 2) (/ modal-height 2))]

4
frontend/src/app/main/ui/workspace/main_menu.scss
View File

@@ -9,7 +9,7 @@
.menu {
@extend .menu-dropdown;
top: deprecated.$s-48;
left: calc(var(--width, deprecated.$s-256) - deprecated.$s-16);
left: calc(var(--right-sidebar-width, deprecated.$s-256) - deprecated.$s-16);
width: deprecated.$s-192;
margin: 0;
}
@@ -61,7 +61,7 @@
.sub-menu {
@extend .menu-dropdown;
left: calc(var(--width, deprecated.$s-256) + deprecated.$s-180);
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%;

5
frontend/src/app/main/ui/workspace/palette.cljs
View File

@@ -10,6 +10,7 @@
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.uuid :as uuid]
[app.main.constants :refer [left-sidebar-default-width]]
[app.main.data.event :as ev]
[app.main.data.workspace :as dw]
[app.main.data.workspace.colors :as mdc]
@@ -37,10 +38,10 @@
(defn calculate-palette-padding [rulers?]
(let [left-sidebar (dom/get-element "left-sidebar-aside")
left-sidebar-size (-> (dom/get-data left-sidebar "size")
left-sidebar-size (-> (dom/get-data left-sidebar "left-sidebar-width")
(d/parse-integer))
rulers-width (if rulers? 22 0)
min-left-sidebar-width 318
min-left-sidebar-width left-sidebar-default-width
left-padding 4
calculate-padding-left (+ rulers-width (or left-sidebar-size min-left-sidebar-width) left-padding 1)]

24
frontend/src/app/main/ui/workspace/sidebar.cljs
View File

@@ -9,7 +9,7 @@
(:require
[app.common.data.macros :as dm]
[app.common.types.tokens-lib :as ctob]
[app.main.constants :refer [sidebar-default-width sidebar-default-max-width]]
[app.main.constants :refer [right-sidebar-default-width right-sidebar-default-max-width left-sidebar-default-max-width left-sidebar-default-width]]
[app.main.data.common :as dcm]
[app.main.data.event :as ev]
[app.main.data.style-dictionary :as sd]
@@ -119,7 +119,7 @@
on-pointer-move :on-pointer-move
parent-ref :parent-ref
width :size}
(use-resize-hook :left-sidebar 318 318 500 :x false :left)
(use-resize-hook :left-sidebar left-sidebar-default-width left-sidebar-default-width left-sidebar-default-max-width :x false :left)
on-tab-change
(mf/use-fn
@@ -161,9 +161,9 @@
[:aside {:ref parent-ref
:id "left-sidebar-aside"
:data-testid "left-sidebar"
:data-size (str width)
:data-left-sidebar-width (str width)
:class aside-class
:style {:--width (dm/str width "px")}}
:style {:--left-sidebar-width (dm/str width "px")}}
[:> left-header*
{:file file
@@ -284,7 +284,7 @@
on-pointer-move :on-pointer-move
set-width :set-size
width :size}
(use-resize-hook :code sidebar-default-width sidebar-default-width sidebar-default-max-width :x true :right)
(use-resize-hook :code right-sidebar-default-width right-sidebar-default-width right-sidebar-default-max-width :x true :right)
on-change-section
(mf/use-fn #(reset! current-section* %))
@@ -293,9 +293,9 @@
(mf/use-fn
(mf/deps width set-width)
(fn []
(set-width (if (> width sidebar-default-width)
sidebar-default-width
sidebar-default-max-width))))
(set-width (if (> width right-sidebar-default-width)
right-sidebar-default-width
right-sidebar-default-max-width))))
active-tokens-by-type
(mf/with-memo [active-tokens]
@@ -306,14 +306,14 @@
[:aside
{:class (stl/css-case :right-settings-bar true
:not-expand (not can-be-expanded?)
:expanded (> width sidebar-default-width))
:expanded (> width right-sidebar-default-width))
:id "right-sidebar-aside"
:data-testid "right-sidebar"
:data-size (str width)
:style {:--width (if can-be-expanded?
(dm/str width "px")
(dm/str sidebar-default-width "px"))}}
:style {:--right-sidebar-width (if can-be-expanded?
(dm/str width "px")
(dm/str right-sidebar-default-width "px"))}}
(when can-be-expanded?
[:div {:class (stl/css :resize-area)

15
frontend/src/app/main/ui/workspace/sidebar.scss
View File

@@ -7,9 +7,6 @@
@use "ds/_sizes.scss" as *;
@use "refactor/common-refactor.scss" as deprecated;
$width-settings-bar: $sz-318;
$width-settings-bar-max: $sz-500;
.left-settings-bar {
display: grid;
grid-template-areas:
@@ -19,9 +16,9 @@ $width-settings-bar-max: $sz-500;
grid-template-columns: 1fr 0;
position: relative;
grid-area: left-sidebar;
min-width: $width-settings-bar;
max-width: $width-settings-bar-max;
width: var(--width, $width-settings-bar);
min-width: var(--left-sidebar-width);
max-width: var(--left-sidebar-width-max);
width: var(--right-sidebar-width);
background-color: var(--panel-background-color);
height: 100vh;
max-height: 100vh;
@@ -65,14 +62,14 @@ $width-settings-bar-max: $sz-500;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
height: 100vh;
width: $width-settings-bar;
width: var(--right-sidebar-width);
background-color: var(--panel-background-color);
z-index: deprecated.$z-index-1;
&.not-expand {
max-width: $width-settings-bar;
max-width: var(--right-sidebar-width);
}
&.expanded {
width: var(--width, $width-settings-bar);
width: var(--right-sidebar-width, var(--right-sidebar-width));
}
.settings-bar-inside {

101
frontend/src/app/main/ui/workspace/sidebar/common/sidebar.scss Normal file
View File

@@ -0,0 +1,101 @@
// 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 "ds/_sizes.scss" as *;
@use "ds/spacing.scss" as *;
@use "ds/_utils.scss" as *;
// ============================================================
// SIDEBAR & GRID CONFIGURATION
// ============================================================
//
// - We need to mantain these values in sync with the constants defined in
// frontend/src/app/main/constants.cljs
//
// ============================================================
// DIMENSIONS
// ============================================================
//
// Left sidebar
$left-sidebar-width: px2rem(318);
$left-sidebar-width-max: $sz-500;
// Right sidebar
$right-sidebar-width: px2rem(318);
$right-sidebar-width-max: px2rem(768);
// ============================================================
// GRID SYSTEM (used inside right sidebar)
// ============================================================
//
// We use a 8-column grid with fixed column width and spacing.
// Useful for consistent layout alignment across components.
//
$column-width: $sz-32; // width of each grid column
$column-gap: var(--sp-xs); // spacing between columns
$column-number: 8; // total number of columns
// |___|-|___|-|___|-|___|-|___|-|___|-|___|-|___|
// -> 8 columns (32px each) + 7 gaps (4px each) = 284px
// Derived widths
$options-width: calc(#{$column-width} * #{$column-number} + #{$column-gap} * calc(#{$column-number} - 1));
$seven-column-width: calc(
#{$column-width} * calc(#{$column-number} - 1) + #{$column-gap} * calc(#{$column-number} - 2)
);
// ------------------------------------------------------------
// Grid mixin — applies the standard structure to any container
// ------------------------------------------------------------
@mixin option-grid-structure {
display: grid;
grid-template-columns: repeat(#{$column-number}, #{$column-width});
column-gap: #{$column-gap};
}
// ============================================================
// LAYOUT LOGIC — CALCULATED ELEMENTS
// ============================================================
//
// This section defines special cases where elements don’t
// perfectly fit the standard grid rhythm.
//
// Example: Two input blocks + one button inside an 8-column grid.
//
// Visual explanation:
// |----|_____________________________________________|-----|---|
// -> 284px options-width + 2*12px paddings + 10px scrollbar gutter
//
// |___|-|___|-|___|-|___|-|___|-|___|-|___|-|___|
// -> 8 columns (32px each) + 7 gaps (4px each) = 284px
//
// But one block (grid-exception-input) doesn’t fit perfectly:
// |__________________|-|__________________|-|___|
//
// We calculate the width of that grid-exception-input as:
//
// - 3.5 columns of base grid width
// - + 3 inter-column gaps
// - − half a gap (because it’s visually shared with the next block)
$grid-exception-input-width: calc(#{$sz-32} * 3.5 + 3 * var(--sp-xs) - (var(--sp-xs) / 2));
// ============================================================
// CSS VARIABLES (exposed for runtime use)
// ============================================================
//
// Make sidebar and layout values accessible to JS/CSS consumers.
:root {
--left-sidebar-width: #{$left-sidebar-width};
--left-sidebar-width-max: #{$left-sidebar-width-max};
--right-sidebar-width: #{$right-sidebar-width};
--right-sidebar-width-max: #{$right-sidebar-width-max};
--7-columns-dropdown-width: #{$seven-column-width};
--options-width: #{$options-width};
--grid-exception-input-width: #{$grid-exception-input-width};
}

4
frontend/src/app/main/ui/workspace/sidebar/layers.scss
View File

@@ -207,13 +207,13 @@
display: flex;
flex-direction: column;
height: calc(100vh - var(--calculated-height));
width: calc(var(--width) + var(--depth) * var(--layer-indentation-size));
width: calc(var(--left-sidebar-width) + var(--depth) * var(--layer-indentation-size));
overflow-x: auto;
overflow-y: overlay;
scrollbar-gutter: stable;
.element-list {
width: var(--width);
width: var(--left-sidebar-width);
display: grid;
}
}

5
frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.scss
View File

@@ -5,12 +5,11 @@
// Copyright (c) KALEIDOS INC
@use "ds/_sizes.scss" as *;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
@use "refactor/common-refactor.scss" as deprecated;
.presets {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
@include sidebar.option-grid-structure;
grid-column: 1 / -1;
}

5
frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss
View File

@@ -5,11 +5,10 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
.align-options {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
column-gap: var(--sp-xs);
@include sidebar.option-grid-structure;
height: deprecated.$s-32;
}
.align-group-horizontal,

9
frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
View File

@@ -5,11 +5,10 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
.element-set {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
column-gap: var(--sp-xs);
@include sidebar.option-grid-structure;
}
.element-title {
@@ -27,9 +26,7 @@
}
.first-row {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
@include sidebar.option-grid-structure;
.blur-info {
grid-column: span 6;

5
frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss
View File

@@ -5,11 +5,10 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
.boolean-options {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
column-gap: var(--sp-xs);
@include sidebar.option-grid-structure;
height: var(--sp-xxxl);
}

5
frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss
View File

@@ -5,11 +5,10 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
.element-set {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
column-gap: var(--sp-xs);
@include sidebar.option-grid-structure;
}
.element-title {

10
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
View File

@@ -9,7 +9,7 @@
@use "ds/_utils.scss" as *;
@use "ds/spacing.scss" as *;
@use "ds/typography.scss" as t;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
@use "refactor/common-refactor.scss" as deprecated;
.annotation {
@@ -446,9 +446,7 @@
}
.component-section {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
column-gap: var(--sp-xs);
@include sidebar.option-grid-structure;
}
.component-title {
@@ -651,9 +649,7 @@
}
.variant-property-container {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
@include sidebar.option-grid-structure;
}
.variant-property-name-wrapper {

9
frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss
View File

@@ -5,11 +5,10 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
.element-set {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
column-gap: var(--sp-xs);
@include sidebar.option-grid-structure;
}
.element-title {
@@ -22,9 +21,7 @@
}
.element-set-content {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
@include sidebar.option-grid-structure;
}
.multiple-exports {

5
frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss
View File

@@ -8,11 +8,10 @@
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as t;
@use "refactor/common-refactor.scss" as deprecated;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
.fill-section {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
column-gap: var(--sp-xs);
@include sidebar.option-grid-structure;
}
.fill-title {

9
frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
View File

@@ -5,11 +5,10 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
.element-set {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
column-gap: var(--sp-xs);
@include sidebar.option-grid-structure;
}
.element-title {
@@ -28,9 +27,7 @@
}
.grid-title {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: deprecated.$s-4;
@include sidebar.option-grid-structure;
}
.option-row {

5
frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss
View File

@@ -5,6 +5,7 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
.grid-cell-menu-container {
@include deprecated.flexColumn;
@@ -13,9 +14,7 @@
}
.grid-cell-menu {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
column-gap: var(--sp-xs);
@include sidebar.option-grid-structure;
}
.grid-cell-menu-title {

5
frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss
View File

@@ -5,11 +5,10 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
.element-set-content {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
@include sidebar.option-grid-structure;
height: deprecated.$s-32;
margin-bottom: deprecated.$s-8;
.select {

56
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
View File

@@ -12,11 +12,10 @@
@use "ds/spacing.scss" as *;
@use "ds/mixins.scss" as *;
@use "refactor/common-refactor.scss" as deprecated;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
.element-set {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
column-gap: var(--sp-xs);
@include sidebar.option-grid-structure;
}
.element-title {
@@ -42,9 +41,7 @@
}
.flex-layout-menu {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
@include sidebar.option-grid-structure;
margin-block-end: var(--sp-s);
}
@@ -93,26 +90,10 @@
}
.forth-row {
/*
This element do not match the 8 column grid of sidebar
|___|-|___|-|___|-|___|-|___|-|___|-|___|-|___| -> 8 column grid, (--sp-xxxl) width each
|__________________|-|__________________|-|___| -> 2 inputs blocks + 1 button.
We need to calculate the total width of each input block:
- 3.5 columns of the the base grid (--sp-xxxl)
- plus 3 inter-column gaps (3 * --sp-xs)
- minus half a gap (--sp-xs / 2) because the last spacing is shared
with the next block, keeping the overall visual rhythm consistent.
*/
--input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - (var(--sp-xs) / 2));
display: grid;
grid-template-columns:
var(--input-width) /* first input block */
var(--input-width) /* second input block */
var(--grid-exception-input-width) /* first input block */
var(--grid-exception-input-width) /* second input block */
var(--sp-xxxl); /* action button */
gap: var(--sp-xs);
grid-column: 1 / -1;
@@ -184,9 +165,7 @@
}
.grid-layout-menu {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
@include sidebar.option-grid-structure;
}
.edit-grid-wrapper,
@@ -439,26 +418,10 @@
.gap-row,
.padding-row {
/*
This element do not match the 8 column grid of sidebar
|___|-|___|-|___|-|___|-|___|-|___|-|___|-|___| -> 8 column grid, (--sp-xxxl) width each
|__________________|-|__________________|-|___| -> 2 inputs blocks + 1 button.
We need to calculate the total width of each input block:
- 3.5 columns of the the base grid (--sp-xxxl)
- plus 3 inter-column gaps (3 * --sp-xs)
- minus half a gap (--sp-xs / 2) because the last spacing is shared
with the next block, keeping the overall visual rhythm consistent.
*/
--input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - (var(--sp-xs) / 2));
display: grid;
grid-template-columns:
var(--input-width) /* first input block */
var(--input-width) /* second input block */
var(--grid-exception-input-width) /* first input block */
var(--grid-exception-input-width) /* second input block */
var(--sp-xxxl); /* action button */
gap: var(--sp-xs);
}
@@ -470,7 +433,6 @@
align-items: center;
}
// TODO: Add a proper variable to this sizing
.numeric-input-measures {
--dropdown-width: 247px;
--dropdown-width: var(--7-columns-dropdown-width);
}

45
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss
View File

@@ -5,6 +5,7 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
.element-set {
margin: 0;
@@ -19,9 +20,7 @@
}
.flex-element-menu {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
@include sidebar.option-grid-structure;
}
.behaviour-menu {
@@ -62,26 +61,10 @@
}
.margin-row {
/*
This element do not match the 8 column grid of sidebar
|___|-|___|-|___|-|___|-|___|-|___|-|___|-|___| -> 8 column grid, (--sp-xxxl) width each
|__________________|-|__________________|-|___| -> 2 inputs blocks + 1 button.
We need to calculate the total width of each input block:
- 3.5 columns of the the base grid (--sp-xxxl)
- plus 3 inter-column gaps (3 * --sp-xs)
- minus half a gap (--sp-xs / 2) because the last spacing is shared
with the next block, keeping the overall visual rhythm consistent.
*/
--input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - (var(--sp-xs) / 2));
display: grid;
grid-template-columns:
var(--input-width) /* first input block */
var(--input-width) /* second input block */
var(--grid-exception-input-width) /* first input block */
var(--grid-exception-input-width) /* second input block */
var(--sp-xxxl); /* action button */
gap: var(--sp-xs);
}
@@ -150,26 +133,10 @@
}
.advanced-options {
/*
This element do not match the 8 column grid of sidebar
|___|-|___|-|___|-|___|-|___|-|___|-|___|-|___| -> 8 column grid, (--sp-xxxl) width each
|__________________|-|__________________|-|___| -> 2 inputs blocks + 1 button.
We need to calculate the total width of each input block:
- 3.5 columns of the the base grid (--sp-xxxl)
- plus 3 inter-column gaps (3 * --sp-xs)
- minus half a gap (--sp-xs / 2) because the last spacing is shared
with the next block, keeping the overall visual rhythm consistent.
*/
--input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - (var(--sp-xs) / 2));
display: grid;
grid-template-columns:
var(--input-width) /* first input block */
var(--input-width) /* second input block */
var(--grid-exception-input-width) /* first input block */
var(--grid-exception-input-width) /* second input block */
var(--sp-xxxl); /* action button */
gap: var(--sp-xs);
}

27
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
View File

@@ -5,37 +5,20 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
.element-set {
/*
This element do not match the 8 column grid of sidebar
|___|-|___|-|___|-|___|-|___|-|___|-|___|-|___| -> 8 column grid, (--sp-xxxl) width each
|__________________|-|__________________|-|___| -> 2 inputs blocks + 1 button.
We need to calculate the total width of each input block:
- 3.5 columns of the the base grid (--sp-xxxl)
- plus 3 inter-column gaps (3 * --sp-xs)
- minus half a gap (--sp-xs / 2) because the last spacing is shared
with the next block, keeping the overall visual rhythm consistent.
*/
--input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - (var(--sp-xs) / 2));
display: grid;
grid-template-columns:
var(--input-width) /* first input block */
var(--input-width) /* second input block */
var(--grid-exception-input-width) /* first input block */
var(--grid-exception-input-width) /* second input block */
var(--sp-xxxl); /* action button */
gap: var(--sp-xs);
margin-bottom: var(--sp-s);
}
.presets {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
@include sidebar.option-grid-structure;
grid-column: 1 / -1;
}
@@ -207,5 +190,5 @@
// TODO: Add a proper variable to this sizing
.numeric-input-measures {
--dropdown-width: 247px;
--dropdown-width: var(--7-columns-dropdown-width);
}

5
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss
View File

@@ -7,11 +7,10 @@
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as t;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
.shadow-section {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
column-gap: var(--sp-xs);
@include sidebar.option-grid-structure;
}
.shadow-title {

5
frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss
View File

@@ -7,11 +7,10 @@
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as t;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
.stroke-section {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
column-gap: var(--sp-xs);
@include sidebar.option-grid-structure;
}
.stroke-title {

5
frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss
View File

@@ -5,11 +5,10 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
.element-set {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
column-gap: var(--sp-xs);
@include sidebar.option-grid-structure;
}
.element-title {

10
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
View File

@@ -6,8 +6,6 @@
@use "refactor/common-refactor.scss" as deprecated;
$width-settings-bar: deprecated.$s-276;
.typography-entry {
display: flex;
flex-direction: row;
@@ -204,12 +202,12 @@ $width-settings-bar: deprecated.$s-276;
display: grid;
grid-template-columns: 50% 50%;
height: deprecated.$s-32;
--calcualted-width: calc(var(--width) - deprecated.$s-48);
--calculated-width: calc(var(--right-sidebar-width) - deprecated.$s-48);
padding-left: deprecated.$s-2;
.info-label {
@include deprecated.bodySmallTypography;
@include deprecated.textEllipsis;
width: calc(var(--calcualted-width) / 2);
width: calc(var(--calculated-width) / 2);
padding-top: deprecated.$s-8;
color: var(--assets-item-name-foreground-color);
}
@@ -217,7 +215,7 @@ $width-settings-bar: deprecated.$s-276;
@include deprecated.bodySmallTypography;
@include deprecated.textEllipsis;
padding-top: deprecated.$s-8;
width: calc(var(--calcualted-width) / 2);
width: calc(var(--calculated-width) / 2);
color: var(--assets-item-name-foreground-color-hover);
}
}
@@ -250,7 +248,7 @@ $width-settings-bar: deprecated.$s-276;
.text-options {
@include deprecated.flexColumn;
max-width: calc(var(--width, $width-settings-bar) - deprecated.$s-16);
max-width: var(--options-width);
&:not(.text-options-full-size) {
position: relative;

9
frontend/src/app/main/ui/workspace/sidebar/options/rows/shadow_row.scss
View File

@@ -9,6 +9,7 @@
@use "ds/_borders.scss" as *;
@use "ds/_utils.scss" as *;
@use "refactor/common-refactor.scss" as deprecated;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
.shadow-element {
display: flex;
@@ -30,9 +31,7 @@
}
.shadow-basic {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
@include sidebar.option-grid-structure;
}
.shadow-basic-info {
@@ -67,9 +66,7 @@
}
.shadow-advanced {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
@include sidebar.option-grid-structure;
}
.shadow-advanced-row {

5
frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss
View File

@@ -6,6 +6,7 @@
@use "ds/typography.scss" as t;
@use "refactor/common-refactor.scss" as deprecated;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
.stroke-data {
display: flex;
@@ -30,10 +31,8 @@
}
.stroke-options {
display: grid;
@include sidebar.option-grid-structure;
align-items: center;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
}
.stroke-width-input {

2
frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
View File

@@ -38,7 +38,7 @@
display: flex;
flex-direction: column;
height: calc(-38px + var(--height, deprecated.$s-200));
width: var(--width);
width: var(--left-sidebar-width);
overflow-x: hidden;
overflow-y: overlay;
scrollbar-gutter: stable;