Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-09 16:48:16 -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

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

@ -9,7 +9,11 @@
.comments-section { .comments-section {
position: relative; position: relative;
background-color: var(--panel-background-color); background-color: var(--panel-background-color);
.comments-section-title { display: grid;
grid-template-rows: $s-40 $s-48 1fr;
}
.comments-section-title {
@include flexCenter; @include flexCenter;
@include tabTitleTipography; @include tabTitleTipography;
display: flex; display: flex;
@ -25,8 +29,9 @@
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;
height: $s-28; height: $s-28;
width: $s-28; width: $s-28;
@ -35,9 +40,9 @@
@extend .button-icon; @extend .button-icon;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }
} }
}
.mode-dropdown-wrapper { .mode-dropdown-wrapper {
@include buttonStyle; @include buttonStyle;
@extend .asset-element; @extend .asset-element;
background-color: var(--color-background-tertiary); background-color: var(--color-background-tertiary);
@ -49,13 +54,16 @@
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;
height: $s-24; height: $s-24;
@ -65,14 +73,16 @@
transform: rotate(90deg); transform: rotate(90deg);
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;
.icon { .icon {
@ -100,23 +110,31 @@
stroke: var(--icon-foreground-hover); stroke: var(--icon-foreground-hover);
} }
} }
} }
.separator {
.separator {
height: $s-12; height: $s-12;
} }
}
.comments-section-content { .comments-section-content {
.thread-groups { height: 100%;
overflow-y: auto;
}
.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;
width: $s-48; width: $s-48;
@ -128,13 +146,11 @@
width: $s-28; width: $s-28;
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);
}
}
}
} }