mirror of
https://github.com/penpot/penpot.git
synced 2025-01-26 00:19:07 -05:00
🐛 Fix scrollbar on comments section
This commit is contained in:
Eva
parent
844634e8c8
commit
dfbc449045
1 changed files with 136 additions and 120 deletions
|
|
@ -9,132 +9,148 @@
|
|||
.comments-section {
|
||||
position: relative;
|
||||
background-color: var(--panel-background-color);
|
||||
.comments-section-title {
|
||||
@include flexCenter;
|
||||
@include tabTitleTipography;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
min-height: $s-32;
|
||||
margin: $s-8 $s-8 0 $s-8;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--panel-title-background-color);
|
||||
span {
|
||||
@include flexCenter;
|
||||
flex-grow: 1;
|
||||
color: var(--title-foreground-color-hover);
|
||||
}
|
||||
display: grid;
|
||||
grid-template-rows: $s-40 $s-48 1fr;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
@extend .button-tertiary;
|
||||
height: $s-28;
|
||||
width: $s-28;
|
||||
border-radius: $br-6;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
.comments-section-title {
|
||||
@include flexCenter;
|
||||
@include tabTitleTipography;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
min-height: $s-32;
|
||||
margin: $s-8 $s-8 0 $s-8;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--panel-title-background-color);
|
||||
span {
|
||||
@include flexCenter;
|
||||
flex-grow: 1;
|
||||
color: var(--title-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.close-button {
|
||||
@extend .button-tertiary;
|
||||
height: $s-28;
|
||||
width: $s-28;
|
||||
border-radius: $br-6;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.mode-dropdown-wrapper {
|
||||
@include buttonStyle;
|
||||
@extend .asset-element;
|
||||
background-color: var(--color-background-tertiary);
|
||||
display: flex;
|
||||
width: $s-256;
|
||||
height: $s-32;
|
||||
padding: $s-8;
|
||||
border-radius: $br-8;
|
||||
margin: $s-16 auto 0 auto;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mode-label {
|
||||
padding-right: 8px;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include flexCenter;
|
||||
padding-right: 8px;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
transform: rotate(90deg);
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.comment-mode-dropdown {
|
||||
@extend .dropdown-wrapper;
|
||||
top: $s-80;
|
||||
left: $s-12;
|
||||
width: $s-256;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
@extend .dropdown-element-base;
|
||||
justify-content: space-between;
|
||||
.icon {
|
||||
@include flexCenter;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: transparent;
|
||||
}
|
||||
}
|
||||
.mode-dropdown-wrapper {
|
||||
@include buttonStyle;
|
||||
@extend .asset-element;
|
||||
background-color: var(--color-background-tertiary);
|
||||
display: flex;
|
||||
width: $s-256;
|
||||
height: $s-32;
|
||||
padding: $s-8;
|
||||
border-radius: $br-8;
|
||||
margin: $s-16 auto 0 auto;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
.mode-label {
|
||||
padding-right: 8px;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.icon {
|
||||
@include flexCenter;
|
||||
padding-right: 8px;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
transform: rotate(90deg);
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
.label {
|
||||
@include titleTipography;
|
||||
}
|
||||
&:hover {
|
||||
.icon svg {
|
||||
stroke: transparent;
|
||||
}
|
||||
}
|
||||
.comment-mode-dropdown {
|
||||
@extend .dropdown-wrapper;
|
||||
top: $s-80;
|
||||
left: $s-12;
|
||||
width: $s-256;
|
||||
.dropdown-item {
|
||||
@extend .dropdown-element-base;
|
||||
justify-content: space-between;
|
||||
.icon {
|
||||
@include flexCenter;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: transparent;
|
||||
}
|
||||
}
|
||||
.label {
|
||||
@include titleTipography;
|
||||
}
|
||||
&:hover {
|
||||
.icon svg {
|
||||
stroke: transparent;
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
.label {
|
||||
color: var(--menu-foreground-color);
|
||||
}
|
||||
.icon svg {
|
||||
stroke: var(--icon-foreground-hover);
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
.label {
|
||||
color: var(--menu-foreground-color);
|
||||
}
|
||||
.separator {
|
||||
height: $s-12;
|
||||
}
|
||||
}
|
||||
.comments-section-content {
|
||||
.thread-groups {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-24;
|
||||
}
|
||||
.thread-group-placeholder {
|
||||
@include flexColumn;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-top: $s-36;
|
||||
.placeholder-icon {
|
||||
@include flexCenter;
|
||||
height: $s-48;
|
||||
width: $s-48;
|
||||
border-radius: $br-circle;
|
||||
background-color: var(--empty-message-background-color);
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
height: $s-28;
|
||||
width: $s-28;
|
||||
stroke: var(--empty-message-foreground-color);
|
||||
}
|
||||
}
|
||||
.placeholder-label {
|
||||
@include titleTipography;
|
||||
text-align: center;
|
||||
width: $s-184;
|
||||
color: var(--empty-message-foreground-color);
|
||||
}
|
||||
.icon svg {
|
||||
stroke: var(--icon-foreground-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
height: $s-12;
|
||||
}
|
||||
|
||||
.comments-section-content {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.thread-groups {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-24;
|
||||
}
|
||||
|
||||
.thread-group-placeholder {
|
||||
@include flexColumn;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-top: $s-36;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
@include flexCenter;
|
||||
height: $s-48;
|
||||
width: $s-48;
|
||||
border-radius: $br-circle;
|
||||
background-color: var(--empty-message-background-color);
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
height: $s-28;
|
||||
width: $s-28;
|
||||
stroke: var(--empty-message-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder-label {
|
||||
@include titleTipography;
|
||||
text-align: center;
|
||||
width: $s-184;
|
||||
color: var(--empty-message-foreground-color);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue