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

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

@ -9,7 +9,11 @@
.comments-section {
position: relative;
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 tabTitleTipography;
display: flex;
@ -25,8 +29,9 @@
flex-grow: 1;
color: var(--title-foreground-color-hover);
}
}
.close-button {
.close-button {
@extend .button-tertiary;
height: $s-28;
width: $s-28;
@ -35,9 +40,9 @@
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
}
.mode-dropdown-wrapper {
}
.mode-dropdown-wrapper {
@include buttonStyle;
@extend .asset-element;
background-color: var(--color-background-tertiary);
@ -49,13 +54,16 @@
margin: $s-16 auto 0 auto;
cursor: pointer;
position: relative;
.mode-label {
}
.mode-label {
padding-right: 8px;
flex-grow: 1;
display: flex;
justify-content: flex-start;
}
.icon {
}
.icon {
@include flexCenter;
padding-right: 8px;
height: $s-24;
@ -65,14 +73,16 @@
transform: rotate(90deg);
stroke: var(--icon-foreground);
}
}
}
.comment-mode-dropdown {
}
.comment-mode-dropdown {
@extend .dropdown-wrapper;
top: $s-80;
left: $s-12;
width: $s-256;
.dropdown-item {
}
.dropdown-item {
@extend .dropdown-element-base;
justify-content: space-between;
.icon {
@ -100,23 +110,31 @@
stroke: var(--icon-foreground-hover);
}
}
}
.separator {
}
.separator {
height: $s-12;
}
}
.comments-section-content {
.thread-groups {
}
.comments-section-content {
height: 100%;
overflow-y: auto;
}
.thread-groups {
display: flex;
flex-direction: column;
gap: $s-24;
}
.thread-group-placeholder {
}
.thread-group-placeholder {
@include flexColumn;
align-items: center;
justify-content: flex-start;
margin-top: $s-36;
.placeholder-icon {
}
.placeholder-icon {
@include flexCenter;
height: $s-48;
width: $s-48;
@ -128,13 +146,11 @@
width: $s-28;
stroke: var(--empty-message-foreground-color);
}
}
.placeholder-label {
}
.placeholder-label {
@include titleTipography;
text-align: center;
width: $s-184;
color: var(--empty-message-foreground-color);
}
}
}
}