CalvinBackup/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-02-12 22:53:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Make the CSS of presence widgets to adhere to our guidelines

Browse Source
This commit is contained in:
Belén Albeza
2026-01-21 16:07:48 +01:00
parent 560a0d09d5
commit eaf64b6e16
2 changed files with 50 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/resources/styles/common/refactor/basic-rules.scss
View File

@@ -700,19 +700,6 @@
background-color: var(--menu-shortcut-background-color);
}
.user-icon {
@include flexCenter;
@include bodySmallTypography;
height: $s-24;
width: $s-24;
border-radius: $br-circle;
margin-left: calc(-1 * $s-4);
img {
border-radius: $br-circle;
border: $s-2 solid var(--user-count-foreground-color);
}
}
.mixed-bar {
@include bodySmallTypography;
display: flex;

83
frontend/src/app/main/ui/workspace/presence.scss
View File

@@ -4,54 +4,71 @@
//
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/typography.scss" as t;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
.active-users,
.active-users-opened {
@include deprecated.buttonStyle;
background: none;
cursor: pointer;
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
align-items: center;
margin: 0;
padding: 0 deprecated.$s-4;
border-radius: deprecated.$br-8;
padding: 0 var(--sp-xs);
border: none;
border-radius: $br-8;
}
.active-users-list {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
margin: 0;
.active-users-list {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
margin: 0;
gap: var(--user-list-gap, 0);
}
.users-num {
@extend .user-icon;
background-color: var(--user-count-background-color);
color: var(--user-count-foreground-color);
z-index: deprecated.$z-index-3;
border: deprecated.$s-2 solid var(--user-count-foreground-color);
}
%user-icon {
@include t.use-typography("body-small");
display: grid;
place-content: center;
height: $sz-24;
width: $sz-24;
border-radius: $br-circle;
margin-inline-start: calc(-1 * var(--sp-xs));
.session-icon {
@extend .user-icon;
}
img {
border-radius: $br-circle;
border: $b-2 solid var(--user-count-foreground-color);
}
}
.users-num {
@extend %user-icon;
background-color: var(--user-count-background-color);
color: var(--user-count-foreground-color);
z-index: 3; // FIXME: this is hardcoded because of the way its component uses z-index from cljs
border: $b-2 solid var(--user-count-foreground-color);
margin-inline-start: var(--user-list-inline-margin, calc(-1 * var(--sp-xs)));
}
.session-icon {
@extend %user-icon;
margin-inline-start: var(--user-list-inline-margin, calc(-1 * var(--sp-xs)));
}
.active-users-opened {
position: absolute;
right: calc(-1 * deprecated.$s-2);
top: calc(-1 * deprecated.$s-2);
padding: deprecated.$s-8;
margin: calc(-1 * deprecated.$s-2) calc(-1 * deprecated.$s-4) 0 0;
right: calc(-1 * var(--sp-xxs));
top: calc(-1 * var(--sp-xxs));
padding: var(--sp-s);
margin: calc(-1 * var(--sp-xxs)) calc(-1 * var(--sp-xs)) 0 0;
background-color: var(--menu-background-color);
z-index: deprecated.$z-index-4;
z-index: 4; // FIXME: this is hardcoded because of the way its component uses z-index from cljs
.active-users-list {
gap: deprecated.$s-4;
.users-num,
.session-icon {
margin-left: 0;
}
}
}
--user-list-gap: var(--sp-xs);
--user-list-inline-margin: 0;
}