Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-28 07:31:25 -05:00
Code Issues Activity

Merge pull request #3524 from penpot/juan-ester-ui-review

Browse source 
💄 Adds styling changes to new UI
This commit is contained in:
Alejandro 2023-08-14 08:41:58 +02:00 • committed by GitHub
commit 2e33575f01
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 64 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/resources/styles/common/refactor/design-tokens.scss
View file

@ -80,7 +80,7 @@
--layer-row-foreground-color: var(--color-foreground-secondary);
--layer-row-foreground-color-hover: var(--color-accent-primary);
--layer-row-foreground-color-selected: var(--color-accent-primary);
--layer-row-foreground-color-drag: var(--color-accent-primary);
--layer-row-foreground-color-drag: var(--color-select);
--layer-row-foreground-color-focus: var(--color-foreground-primary);
--layer-row-border-color-focus: var(--color-accent-primary);
--layer-child-row-background-color: var(--color-background-tertiary);
@ -150,7 +150,7 @@
--assets-item-name-foreground-color-hover: var(--color-foreground-primary);
--assets-item-border-color: var(--color-accent-primary);
--assets-item-background-color-drag: var(--color-accent-primary-muted);
--assets-item-border-color-drag: var(--color-accent-primary);
--assets-item-border-color-drag: var(--color-select);
--assets-component-background-color: var(--white); // We don't want this color to change with palette
--radio-btns-background-color: var(--color-background-tertiary);
@ -159,8 +159,6 @@
--radio-btn-foreground-color-selected: var(--color-accent-primary);
--radio-btn-border-color-selected: var(--color-background-quaternary);
--modal-background-color: var(--color-background-primary);
--library-name-foreground-color: var(--color-foreground-primary);
--library-content-foreground-color: var(--color-foreground-secondary);
@ -188,7 +186,7 @@
--user-count-background-color: var(--color-background-secondary);
--user-count-foreground-color: var(--color-accent-primary);
--modal-background-color: var(--color-background-quaternary);
--modal-background-color: var(--color-background-primary);
--modal-foreground-color: var(--color-foreground-primary);
--modal-foreground-color-secondary: var(--color-foreground-secondary);
}

7
frontend/resources/styles/common/refactor/mixins.scss
View file

@ -36,6 +36,13 @@
line-height: 1.2;
}
@mixin titleBigTipography {
font-family: "worksans", sans-serif;
font-size: $fs-14;
font-weight: $fw400;
line-height: 1.2;
}
@mixin textEllipsis {
max-width: 99%;
overflow: hidden;

1
frontend/resources/styles/common/refactor/spacing.scss
View file

@ -41,6 +41,7 @@ $s-148: calc(var(--s-4) * 37);
$s-152: calc(var(--s-4) * 38);
$s-160: calc(var(--s-4) * 40);
$s-168: calc(var(--s-4) * 42);
$s-180: calc(var(--s-4) * 45);
$s-184: calc(var(--s-4) * 46);
$s-192: calc(var(--s-4) * 48);
$s-196: calc(var(--s-4) * 49);

5
frontend/src/app/main/ui/components/tab_container.scss
View file

@ -26,7 +26,6 @@
flex-direction: row;
gap: $s-2;
height: $s-32;
padding: $s-2 $s-2 $s-2 $s-2;
border-radius: $br-8;
background: var(--color-background-secondary);
cursor: pointer;
@ -40,7 +39,7 @@
.tab-container-tab-title {
@include flexCenter;
@include tabTitleTipography;
height: $s-28;
height: 100%;
width: 100%;
padding: 0 $s-8;
margin: 0;
@ -65,7 +64,7 @@
height: 100%;
width: $s-24;
min-width: $s-24;
padding: 0 $s-6 0 0;
padding: 0 $s-6;
border-radius: $br-5;
svg {
@include flexCenter;

7
frontend/src/app/main/ui/components/title_bar.scss
View file

@ -13,6 +13,7 @@
height: $s-32;
width: 100%;
min-height: $s-32;
margin: $s-4 0;
background-color: var(--title-background-color);
.title,
.title-only {
@ -26,7 +27,7 @@
color: var(--title-foreground-color);
}
.title-only {
margin-left: $s-8;
// margin-left: $s-8;
}
.toggle-btn {
@ -34,16 +35,14 @@
display: flex;
align-items: center;
flex-grow: 1;
gap: $s-4;
padding: 0;
color: var(--title-foreground-color);
stroke: var(--title-foreground-color);
.collased-icon {
@include flexCenter;
height: $s-24;
width: $s-24;
border-radius: $br-8;
padding: 0 $s-4 0 $s-8;
padding-left: $s-8;
svg {
@extend .button-icon-small;
transform: rotate(90deg);

12
frontend/src/app/main/ui/workspace/left_header.scss
View file

@ -10,7 +10,6 @@
display: flex;
align-items: center;
height: $s-48;
max-width: var(--width, $s-256);
padding: $s-8 $s-8 $s-4 $s-8;
.main-icon {
@include flexCenter;
@ -33,11 +32,12 @@
height: $s-16;
width: 100%;
padding-bottom: $s-2;
margin-top: -2px;
color: var(--title-foreground-color);
cursor: pointer;
}
.file-name {
@include titleTipography;
@include titleBigTipography;
text-transform: none;
color: var(--title-foreground-color-hover);
}
@ -47,9 +47,9 @@
width: 100%;
margin: 0;
border: 0;
border-radius: $br-8;
border-radius: $br-4;
background-color: var(--input-background-color);
font-size: $fs-12;
font-size: $fs-14;
color: var(--input-foreground-color);
z-index: 20;
white-space: break-spaces;
@ -82,7 +82,7 @@
@extend .menu-dropdown;
position: absolute;
top: $s-48;
left: calc(var(--width, $s-256) - $s-32);
left: calc(var(--width, $s-256) - $s-16);
margin: 0;
.menu-item {
@ -122,7 +122,7 @@
.sub-menu {
@extend .menu-dropdown;
position: absolute;
left: calc(var(--width, $s-256) + $s-168);
left: calc(var(--width, $s-256) + $s-180);
width: 270px;
.shortcut {
@extend .shortcut;

2
frontend/src/app/main/ui/workspace/left_toolbar.css.json
View file

@ -1 +1 @@
{"button-primary":"workspace_left_toolbar_button-primary_cOfI2","main-toolbar":"workspace_left_toolbar_main-toolbar_QN5ne","main-toolbar-options":"workspace_left_toolbar_main-toolbar-options_xqFsj","button-secondary":"workspace_left_toolbar_button-secondary_yztFQ","button-tertiary":"workspace_left_toolbar_button-tertiary_ATxjs","button-tag":"workspace_left_toolbar_button-tag_uOY3P","button-icon":"workspace_left_toolbar_button-icon_QXZDp","button-icon-small":"workspace_left_toolbar_button-icon-small_p617J","asset-element":"workspace_left_toolbar_asset-element_vwVhJ","new-scrollbar":"workspace_left_toolbar_new-scrollbar_CDU0n","menu-dropdown":"workspace_left_toolbar_menu-dropdown_ui5fQ","menu-item":"workspace_left_toolbar_menu-item_chrVQ","shortcut":"workspace_left_toolbar_shortcut_9jPGH","shortcut-key":"workspace_left_toolbar_shortcut-key_MUfgG","user-icon":"workspace_left_toolbar_user-icon_C8ZY7","toolbar-handler":"workspace_left_toolbar_toolbar-handler_VfijE","toolbar-handler-btn":"workspace_left_toolbar_toolbar-handler-btn_vV1IT","hidden-toolbar":"workspace_left_toolbar_hidden-toolbar_w7tu-","main-toolbar-panels":"workspace_left_toolbar_main-toolbar-panels_zT3qk","spin-animation":"workspace_left_toolbar_spin-animation_8Q3nv"}
{"button-primary":"workspace_left_toolbar_button-primary_cOfI2","button-secondary":"workspace_left_toolbar_button-secondary_yztFQ","button-tertiary":"workspace_left_toolbar_button-tertiary_ATxjs","main-toolbar":"workspace_left_toolbar_main-toolbar_QN5ne","main-toolbar-options":"workspace_left_toolbar_main-toolbar-options_xqFsj","button-tag":"workspace_left_toolbar_button-tag_uOY3P","button-icon":"workspace_left_toolbar_button-icon_QXZDp","button-icon-small":"workspace_left_toolbar_button-icon-small_p617J","asset-element":"workspace_left_toolbar_asset-element_vwVhJ","new-scrollbar":"workspace_left_toolbar_new-scrollbar_CDU0n","menu-dropdown":"workspace_left_toolbar_menu-dropdown_ui5fQ","menu-item":"workspace_left_toolbar_menu-item_chrVQ","shortcut":"workspace_left_toolbar_shortcut_9jPGH","shortcut-key":"workspace_left_toolbar_shortcut-key_MUfgG","user-icon":"workspace_left_toolbar_user-icon_C8ZY7","toolbar-handler":"workspace_left_toolbar_toolbar-handler_VfijE","toolbar-handler-btn":"workspace_left_toolbar_toolbar-handler-btn_vV1IT","hidden-toolbar":"workspace_left_toolbar_hidden-toolbar_w7tu-","main-toolbar-panels":"workspace_left_toolbar_main-toolbar-panels_zT3qk","spin-animation":"workspace_left_toolbar_spin-animation_8Q3nv"}

7
frontend/src/app/main/ui/workspace/left_toolbar.scss
View file

@ -18,7 +18,7 @@
border-radius: $s-8;
z-index: $z-index-2;
background-color: var(--color-background-primary);
transition: top 1s, height 1s, opacity 1s;
transition: top 0.3s, height 0.3s, opacity 0.3s;
.main-toolbar-options {
position: relative;
@ -26,18 +26,19 @@
align-items: center;
margin: 0;
opacity: $op-10;
transition: opacity 1s ease;
transition: opacity 0.3s ease;
li {
position: relative;
button {
@extend .button-primary;
@extend .button-tertiary;
height: $s-36;
width: $s-36;
flex-shrink: 0;
background-color: transparent;
border-radius: $s-8;
border: none;
margin: 0 $s-2;
svg {
@extend .button-icon;

10
frontend/src/app/main/ui/workspace/libraries.scss
View file

@ -5,6 +5,7 @@
// Copyright (c) KALEIDOS INC
@import "refactor/common-refactor.scss";
.modal-overlay {
@include flexCenter;
position: fixed;
@ -15,6 +16,7 @@
z-index: $z-index-modal;
background-color: var(--overlay-color);
pointer-events: none; // This is to allow outside click that closes modal.
.modal-dialog {
position: relative;
height: $s-520;
@ -50,11 +52,13 @@
.updates-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: $s-24;
gap: $s-32;
padding-top: $s-24;
height: 100%;
max-height: $s-400;
.section {
display: flex;
flex-direction: column;
height: calc(100% - $s-12);
:global(.title-spacing-lib) {
margin: 0 0 $s-24 calc(-1 * $s-8);
@ -63,8 +67,8 @@
.section-list-shared {
height: 100%;
max-height: $s-320;
margin-top: $s-12;
overflow: auto;
scrollbar-gutter: stable;
.section-list-item {
display: grid;
grid-template-columns: 1fr auto;
@ -128,7 +132,7 @@
margin-bottom: $s-12;
}
.libraries-search {
margin-bottom: $s-12;
margin: $s-12 0;
.search-icon {
@include flexCenter;
padding: 0 0 0 $s-8;

2
frontend/src/app/main/ui/workspace/palette.scss
View file

@ -30,7 +30,7 @@
padding: $s-0 $s-0 $s-8 $s-8;
border-radius: $br-8;
background-color: var(--palette-background-color);
transition: right 1s, opacity 1s, width 1s;
transition: right 0.3s, opacity 0.2s, width 0.3s;
&.wide {
width: 100%;
}

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

@ -43,7 +43,7 @@ $width-settings-bar-max: $s-500;
}
}
:global(.tab-spacing) {
margin: $s-4 $s-4 0 $s-4;
margin: $s-4 $s-8 0 $s-8;
}
.right-settings-bar {
grid-area: right-sidebar;

5
frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
View file

@ -26,7 +26,7 @@
display: flex;
align-items: center;
height: $s-32;
padding: $s-8 $s-12 $s-8 $s-8;
padding: $s-8;
margin-bottom: $s-4;
border-radius: $br-8;
background-color: var(--assets-item-background-color);
@ -34,7 +34,8 @@
.bullet-block {
@include flexCenter;
height: 100%;
width: $s-32;
justify-content: flex-start;
margin-right: $s-4;
}
.name-block {
@include titleTipography;

3
frontend/src/app/main/ui/workspace/sidebar/assets/common.scss
View file

@ -15,7 +15,7 @@
width: 100%;
.section-icon {
@include flexCenter;
padding-right: $s-8;
padding-right: $s-2;
svg {
@include flexCenter;
height: $s-16;
@ -27,6 +27,7 @@
.section-name {
display: flex;
align-items: center;
margin: 0 $s-2;
}
.num-assets {
@include flexCenter;

7
frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
View file

@ -10,7 +10,7 @@
.drop-space {
height: $s-12;
border-radius: $br-8;
background-color: var(--assets-item-background-color);
background-color: var(--color-foreground-secondary);
}
.asset-grid {
display: grid;
@ -24,7 +24,7 @@
padding: $s-8;
border: $s-2 solid transparent;
border-radius: $br-8;
background-color: var(--assets-item-background-color);
background-color: var(--color-foreground-secondary);
overflow: hidden;
cursor: pointer;
img {
@ -126,11 +126,12 @@
svg,
img {
@include flexCenter;
flex-shrink: 0;
padding: $s-2;
height: $s-32;
width: $s-32;
border-radius: $br-6;
background-color: var(--assets-item-background-color);
background-color: var(--color-foreground-secondary);
}
.item-name {

3
frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
View file

@ -58,8 +58,7 @@
:collapsed? (not open?)
:on-collapsed toggle-open
:title (if local?
(mf/html [:div {:class (dom/classnames (css :special-title) true)} (tr "workspace.assets.local-library")
[:span {:class (dom/classnames (css :special-subtitle) true)} file-name]])
(mf/html [:div {:class (dom/classnames (css :special-title) true)} (tr "workspace.assets.local-library")])
(mf/html [:div {:class (dom/classnames (css :special-title) true)} file-name]))}
(when-not local?

2
frontend/src/app/main/ui/workspace/sidebar/assets/file_library.css.json
View file

@ -1 +1 @@
{"button-primary":"assets_file_library_button-primary_o8czr","button-secondary":"assets_file_library_button-secondary_BCBmw","button-tertiary":"assets_file_library_button-tertiary_JiCQn","library-title":"assets_file_library_library-title_FvGs6","file-link":"assets_file_library_file-link_CtN0K","button-tag":"assets_file_library_button-tag_cyg7Q","button-icon":"assets_file_library_button-icon_R-4R0","asset-title":"assets_file_library_asset-title_ozD8M","no-found-icon":"assets_file_library_no-found-icon_yu1td","button-icon-small":"assets_file_library_button-icon-small_9UOdy","asset-element":"assets_file_library_asset-element_6ian7","new-scrollbar":"assets_file_library_new-scrollbar_3zGUU","menu-dropdown":"assets_file_library_menu-dropdown_KXeib","menu-item":"assets_file_library_menu-item_Uk5ZK","shortcut":"assets_file_library_shortcut_v-Rto","shortcut-key":"assets_file_library_shortcut-key_bqNTU","user-icon":"assets_file_library_user-icon_xeQ8S","tool-window":"assets_file_library_tool-window_fzArb","file-name":"assets_file_library_file-name_Pc8ng","special-title":"assets_file_library_special-title_-Pqzq","special-subtitle":"assets_file_library_special-subtitle_9xOl9","library-content":"assets_file_library_library-content_Yto-8","no-found-text":"assets_file_library_no-found-text_RDTeV","spin-animation":"assets_file_library_spin-animation_z-s4F"}
{"button-primary":"assets_file_library_button-primary_o8czr","button-secondary":"assets_file_library_button-secondary_BCBmw","button-tertiary":"assets_file_library_button-tertiary_JiCQn","library-title":"assets_file_library_library-title_FvGs6","file-link":"assets_file_library_file-link_CtN0K","button-tag":"assets_file_library_button-tag_cyg7Q","button-icon":"assets_file_library_button-icon_R-4R0","asset-title":"assets_file_library_asset-title_ozD8M","no-found-icon":"assets_file_library_no-found-icon_yu1td","button-icon-small":"assets_file_library_button-icon-small_9UOdy","asset-element":"assets_file_library_asset-element_6ian7","new-scrollbar":"assets_file_library_new-scrollbar_3zGUU","menu-dropdown":"assets_file_library_menu-dropdown_KXeib","menu-item":"assets_file_library_menu-item_Uk5ZK","shortcut":"assets_file_library_shortcut_v-Rto","shortcut-key":"assets_file_library_shortcut-key_bqNTU","user-icon":"assets_file_library_user-icon_xeQ8S","tool-window":"assets_file_library_tool-window_fzArb","file-name":"assets_file_library_file-name_Pc8ng","special-title":"assets_file_library_special-title_-Pqzq","library-content":"assets_file_library_library-content_Yto-8","no-found-text":"assets_file_library_no-found-text_RDTeV","spin-animation":"assets_file_library_spin-animation_z-s4F"}

9
frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss
View file

@ -20,14 +20,11 @@
.special-title {
@include textEllipsis;
width: calc(var(--width, 256px) - $s-80);
color: var(--title-foreground-color-hover);
margin-left: $s-2;
text-align: left;
}
.special-subtitle {
padding-left: $s-4;
color: var(--title-foreground-color);
text-transform: initial;
}
.file-link {
@extend .button-tertiary;
height: $s-32;

4
frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss
View file

@ -10,7 +10,7 @@
.drop-space {
height: $s-12;
border-radius: $br-8;
background-color: var(--assets-item-background-color);
background-color: var(--color-foreground-secondary);
}
.asset-grid {
display: grid;
@ -24,7 +24,7 @@
border: $s-2 solid transparent;
border-radius: $br-8;
aspect-ratio: 1/1;
background-color: var(--assets-item-background-color);
background-color: var(--color-foreground-secondary);
overflow: hidden;
cursor: pointer;
img {

1
frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
View file

@ -19,6 +19,7 @@
height: $s-32;
width: calc(100% - (var(--depth) * var(--layer-indentation-size)));
padding-right: $s-12;
cursor: pointer;
&.filtered {
width: calc(100% - $s-12);

3
frontend/src/app/main/ui/workspace/sidebar/layers.scss
View file

@ -21,6 +21,7 @@
margin-top: $s-2;
margin-bottom: $s-4;
padding-right: $s-8;
margin-left: $s-8;
.page-name {
@include tabTitleTipography;
padding: 0 $s-12;
@ -238,7 +239,7 @@
width: 100%;
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
// scrollbar-gutter: stable;
overflow-y: overlay;
.element-list {
width: 100%;

1
frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
View file

@ -105,7 +105,6 @@
height: 90%;
padding: $s-12;
margin-bottom: $s-12;
scrollbar-gutter: stable;
overflow-y: overlay;
font-size: $fs-12;
color: var(--title-foreground-color);

2
frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json
View file

@ -1 +1 @@
{"button-primary":"sidebar_sitemap_button-primary_Z-bKW","button-secondary":"sidebar_sitemap_button-secondary_a56LZ","button-tertiary":"sidebar_sitemap_button-tertiary_E2hzd","sitemap":"sidebar_sitemap_sitemap_kvKKx","add-page":"sidebar_sitemap_add-page_r8Ibb","button-tag":"sidebar_sitemap_button-tag_u1NAz","button-icon":"sidebar_sitemap_button-icon_MkibT","button-icon-small":"sidebar_sitemap_button-icon-small_Mhipv","tool-window-content":"sidebar_sitemap_tool-window-content_G-Nut","pages-list":"sidebar_sitemap_pages-list_cb1Mx","page-element":"sidebar_sitemap_page-element_iR9wf","element-list-body":"sidebar_sitemap_element-list-body_OIVac","page-actions":"sidebar_sitemap_page-actions_QTuKw","page-icon":"sidebar_sitemap_page-icon_ujSjM","asset-element":"sidebar_sitemap_asset-element_I1-m4","new-scrollbar":"sidebar_sitemap_new-scrollbar_Pb1-Y","menu-dropdown":"sidebar_sitemap_menu-dropdown_jAZ-g","menu-item":"sidebar_sitemap_menu-item_cQrV2","shortcut":"sidebar_sitemap_shortcut_Oywax","shortcut-key":"sidebar_sitemap_shortcut-key_IIYlf","user-icon":"sidebar_sitemap_user-icon_l-DH7","view-only-mode":"sidebar_sitemap_view-only-mode_JrsYg","resize-area":"sidebar_sitemap_resize-area_JgdjZ","dnd-over-top":"sidebar_sitemap_dnd-over-top_kGfcb","dnd-over-bot":"sidebar_sitemap_dnd-over-bot_352W2","dnd-over":"sidebar_sitemap_dnd-over_Sf5e2","page-name":"sidebar_sitemap_page-name_601Ii","element-name":"sidebar_sitemap_element-name_iMex0","on-drag":"sidebar_sitemap_on-drag_v3GM8","selected":"sidebar_sitemap_selected_mCOlT","hidden":"sidebar_sitemap_hidden_viFSn","spin-animation":"sidebar_sitemap_spin-animation_SVOeo"}
{"button-primary":"sidebar_sitemap_button-primary_Z-bKW","button-secondary":"sidebar_sitemap_button-secondary_a56LZ","button-tertiary":"sidebar_sitemap_button-tertiary_E2hzd","sitemap":"sidebar_sitemap_sitemap_kvKKx","add-page":"sidebar_sitemap_add-page_r8Ibb","button-tag":"sidebar_sitemap_button-tag_u1NAz","button-icon":"sidebar_sitemap_button-icon_MkibT","button-icon-small":"sidebar_sitemap_button-icon-small_Mhipv","tool-window-content":"sidebar_sitemap_tool-window-content_G-Nut","pages-list":"sidebar_sitemap_pages-list_cb1Mx","page-element":"sidebar_sitemap_page-element_iR9wf","element-list-body":"sidebar_sitemap_element-list-body_OIVac","page-actions":"sidebar_sitemap_page-actions_QTuKw","page-icon":"sidebar_sitemap_page-icon_ujSjM","asset-element":"sidebar_sitemap_asset-element_I1-m4","new-scrollbar":"sidebar_sitemap_new-scrollbar_Pb1-Y","menu-dropdown":"sidebar_sitemap_menu-dropdown_jAZ-g","menu-item":"sidebar_sitemap_menu-item_cQrV2","shortcut":"sidebar_sitemap_shortcut_Oywax","shortcut-key":"sidebar_sitemap_shortcut-key_IIYlf","user-icon":"sidebar_sitemap_user-icon_l-DH7","title-bar":"sidebar_sitemap_title-bar_tIJtT","title":"sidebar_sitemap_title_HmFc4","view-only-mode":"sidebar_sitemap_view-only-mode_JrsYg","resize-area":"sidebar_sitemap_resize-area_JgdjZ","dnd-over-top":"sidebar_sitemap_dnd-over-top_kGfcb","dnd-over-bot":"sidebar_sitemap_dnd-over-bot_352W2","dnd-over":"sidebar_sitemap_dnd-over_Sf5e2","page-name":"sidebar_sitemap_page-name_601Ii","element-name":"sidebar_sitemap_element-name_iMex0","on-drag":"sidebar_sitemap_on-drag_v3GM8","selected":"sidebar_sitemap_selected_mCOlT","hidden":"sidebar_sitemap_hidden_viFSn","spin-animation":"sidebar_sitemap_spin-animation_SVOeo"}

9
frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
View file

@ -14,10 +14,17 @@
width: 100%;
height: var(--height, 200px);
.title-bar {
.title {
margin-left: $s-2;
}
}
.add-page {
@extend .button-tertiary;
height: $s-32;
width: calc($s-24 + $s-4);
margin-right: $s-8;
padding: 0;
border-radius: $br-8;
svg {
@ -52,7 +59,7 @@
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
// scrollbar-gutter: stable;
overflow-y: overlay;
height: 100%;
width: 100%;