3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-03 12:18:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Update comment UI with new design

Browse source
This commit is contained in:
Eva 2023-10-13 15:00:50 +02:00
parent 25c60f3e0f
commit f4323fd1ac
12 changed files with 999 additions and 255 deletions
Download patch file Download diff file Expand all files Collapse all files

75
frontend/resources/styles/common/refactor/basic-rules.scss
View file

@ -75,6 +75,12 @@
stroke: var(--button-primary-foreground-color-active);
}
}
&:global(.disabled) {
background-color: var(--button-background-color-disabled);
border: $s-1 solid var(--button-border-color-disabled);
color: var(--button-foreground-color-disabled);
cursor: unset;
}
}
.button-secondary {
@ -118,6 +124,12 @@
stroke: var(--button-secondary-foreground-color-active);
}
}
&:global(.disabled) {
background-color: var(--button-background-color-disabled);
border: $s-1 solid var(--button-border-color-disabled);
color: var(--button-foreground-color-disabled);
cursor: unset;
}
}
.button-tertiary {
@ -161,6 +173,12 @@
stroke: var(--button-tertiary-foreground-color-active);
}
}
&:global(.disabled) {
background-color: var(--button-background-color-disabled);
border: $s-1 solid var(--button-border-color-disabled);
color: var(--button-foreground-color-disabled);
cursor: unset;
}
}
.button-radio {
@ -375,6 +393,26 @@
}
}
.checkbox-icon {
@include flexCenter;
width: $s-16;
height: $s-16;
min-width: $s-16;
min-height: $s-16;
border-radius: $br-6;
background-color: var(--input-background-color);
svg {
display: none;
}
&:global(.checked) {
background-color: var(--input-border-color-active);
svg {
@extend .button-icon-small;
stroke: var(--input-details-color);
}
}
}
.input-checkbox {
display: flex;
align-items: center;
@ -385,20 +423,7 @@
gap: $s-6;
cursor: pointer;
span {
@include flexCenter;
width: $s-16;
height: $s-16;
min-width: $s-16;
min-height: $s-16;
border-radius: $br-6;
background-color: var(--input-background-color);
&:global(.checked) {
background-color: var(--input-border-color-active);
svg {
@extend .button-icon-small;
stroke: var(--input-details-color);
}
}
@extend .checkbox-icon;
}
input {
margin: 0;
@ -505,6 +530,28 @@
grid-template-columns: $s-92 1fr;
}
.comment-bubbles {
@include titleTipography;
@include flexCenter;
height: $s-32;
width: $s-32;
border-radius: $br-circle;
background-color: var(--comment-bullet-background-color-rest);
border: $s-1 solid var(--comment-bullet-border-color-rest);
color: var(--comment-bullet-foreground-color-rest);
}
.resolved-comment-bubble {
background-color: var(--comment-bullet-background-color-resolved);
border: $s-1 solid var(--comment-bullet-border-color-resolved);
color: var(--comment-bullet-foreground-color-resolved);
}
.unread-comment-bubble {
background-color: var(--comment-bullet-background-color-unread);
border: $s-1 solid var(--comment-bullet-border-color-unread);
color: var(--comment-bullet-foreground-color-unread);
}
// SELECTS AND DROPDOWNS
.menu-dropdown {
@include menuShadow;