Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-04 13:29:14 -05:00
Code Issues Activity

🐛 Fix scrollbar on comments section

Browse source
This commit is contained in:
Eva 2024-01-22 10:34:39 +01:00
parent 844634e8c8
commit dfbc449045
1 changed files with 136 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
frontend/src/app/main/ui/workspace/comments.scss
View file

@ -9,6 +9,10 @@
.comments-section { .comments-section {
position: relative; position: relative;
background-color: var(--panel-background-color); background-color: var(--panel-background-color);
display: grid;
grid-template-rows: $s-40 $s-48 1fr;
}
.comments-section-title { .comments-section-title {
@include flexCenter; @include flexCenter;
@include tabTitleTipography; @include tabTitleTipography;
@ -25,6 +29,7 @@
flex-grow: 1; flex-grow: 1;
color: var(--title-foreground-color-hover); color: var(--title-foreground-color-hover);
} }
}
.close-button { .close-button {
@extend .button-tertiary; @extend .button-tertiary;
@ -36,7 +41,7 @@
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }
} }
}
.mode-dropdown-wrapper { .mode-dropdown-wrapper {
@include buttonStyle; @include buttonStyle;
@extend .asset-element; @extend .asset-element;
@ -49,12 +54,15 @@
margin: $s-16 auto 0 auto; margin: $s-16 auto 0 auto;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
}
.mode-label { .mode-label {
padding-right: 8px; padding-right: 8px;
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
} }
.icon { .icon {
@include flexCenter; @include flexCenter;
padding-right: 8px; padding-right: 8px;
@ -66,12 +74,14 @@
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }
} }
}
.comment-mode-dropdown { .comment-mode-dropdown {
@extend .dropdown-wrapper; @extend .dropdown-wrapper;
top: $s-80; top: $s-80;
left: $s-12; left: $s-12;
width: $s-256; width: $s-256;
}
.dropdown-item { .dropdown-item {
@extend .dropdown-element-base; @extend .dropdown-element-base;
justify-content: space-between; justify-content: space-between;
@ -101,21 +111,29 @@
} }
} }
} }
.separator { .separator {
height: $s-12; height: $s-12;
} }
}
.comments-section-content { .comments-section-content {
height: 100%;
overflow-y: auto;
}
.thread-groups { .thread-groups {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $s-24; gap: $s-24;
} }
.thread-group-placeholder { .thread-group-placeholder {
@include flexColumn; @include flexColumn;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
margin-top: $s-36; margin-top: $s-36;
}
.placeholder-icon { .placeholder-icon {
@include flexCenter; @include flexCenter;
height: $s-48; height: $s-48;
@ -129,12 +147,10 @@
stroke: var(--empty-message-foreground-color); stroke: var(--empty-message-foreground-color);
} }
} }
.placeholder-label { .placeholder-label {
@include titleTipography; @include titleTipography;
text-align: center; text-align: center;
width: $s-184; width: $s-184;
color: var(--empty-message-foreground-color); color: var(--empty-message-foreground-color);
} }
}
}
}