github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-11 22:49:30 +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
Show Stats 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); 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 { .mixed-bar {
@include bodySmallTypography; @include bodySmallTypography;
display: flex; display: flex;

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

@ -4,54 +4,71 @@
// //
// Copyright (c) KALEIDOS INC // 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,
.active-users-opened { .active-users-opened {
@include deprecated.buttonStyle; background: none;
cursor: pointer;
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
margin: 0; margin: 0;
padding: 0 deprecated.$s-4; padding: 0 var(--sp-xs);
border-radius: deprecated.$br-8; border: none;
border-radius: $br-8;
}
.active-users-list { .active-users-list {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: flex-end; justify-content: flex-end;
margin: 0; margin: 0;
gap: var(--user-list-gap, 0);
}
.users-num { %user-icon {
@extend .user-icon; @include t.use-typography("body-small");
background-color: var(--user-count-background-color); display: grid;
color: var(--user-count-foreground-color); place-content: center;
z-index: deprecated.$z-index-3; height: $sz-24;
border: deprecated.$s-2 solid var(--user-count-foreground-color); width: $sz-24;
} border-radius: $br-circle;
margin-inline-start: calc(-1 * var(--sp-xs));
.session-icon { img {
@extend .user-icon; 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 { .active-users-opened {
position: absolute; position: absolute;
right: calc(-1 * deprecated.$s-2); right: calc(-1 * var(--sp-xxs));
top: calc(-1 * deprecated.$s-2); top: calc(-1 * var(--sp-xxs));
padding: deprecated.$s-8; padding: var(--sp-s);
margin: calc(-1 * deprecated.$s-2) calc(-1 * deprecated.$s-4) 0 0; margin: calc(-1 * var(--sp-xxs)) calc(-1 * var(--sp-xs)) 0 0;
background-color: var(--menu-background-color); 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 { --user-list-gap: var(--sp-xs);
gap: deprecated.$s-4; --user-list-inline-margin: 0;
}
.users-num,
.session-icon {
margin-left: 0;
}
}
}