mirror of
https://github.com/penpot/penpot.git
synced 2026-06-01 13:10:21 +00:00
843 lines
16 KiB
SCSS
843 lines
16 KiB
SCSS
// This Source Code Form is subject to the terms of the Mozilla Public
|
|
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
//
|
|
// Copyright (c) KALEIDOS INC
|
|
|
|
@use "refactor/common-refactor.scss" as deprecated;
|
|
@use "common/refactor/common-dashboard";
|
|
@use "ds/_utils.scss" as *;
|
|
@use "ds/typography.scss" as t;
|
|
@use "ds/_sizes.scss" as *;
|
|
@use "ds/_borders.scss" as *;
|
|
@use "ds/mixins.scss" as *;
|
|
|
|
// Dashboard team settings
|
|
.dashboard-team-settings {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
border-top: $b-1 solid var(--color-background-quaternary);
|
|
overflow-y: auto;
|
|
padding-inline-start: var(--sp-xl);
|
|
padding-block-start: var(--sp-xl);
|
|
}
|
|
|
|
.settings-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--sp-xxl);
|
|
}
|
|
|
|
.block {
|
|
display: grid;
|
|
grid-auto-rows: min-content;
|
|
gap: var(--sp-s);
|
|
max-width: $sz-1000;
|
|
width: 100%;
|
|
}
|
|
|
|
.info-block {
|
|
margin-block-start: var(--sp-l);
|
|
}
|
|
|
|
.block-label {
|
|
@include t.use-typography("headline-small");
|
|
color: var(--color-foreground-secondary);
|
|
}
|
|
|
|
.block-text {
|
|
color: var(--color-foreground-primary);
|
|
}
|
|
|
|
.block-content {
|
|
display: grid;
|
|
grid-template-columns: var(--sp-xxxl) 1fr;
|
|
align-items: center;
|
|
gap: var(--sp-m);
|
|
}
|
|
|
|
.owner-icon {
|
|
width: $sz-32;
|
|
height: $sz-32;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.user-icon,
|
|
.document-icon,
|
|
.group-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: $sz-16;
|
|
width: $sz-16;
|
|
color: transparent;
|
|
fill: none;
|
|
stroke-width: $b-1;
|
|
margin: 0 auto;
|
|
stroke: var(--color-foreground-secondary);
|
|
}
|
|
|
|
.team-icon {
|
|
--update-button-opacity: 0;
|
|
position: relative;
|
|
height: $sz-120;
|
|
width: $sz-120;
|
|
padding: var(--sp-l);
|
|
margin-block-end: var(--sp-xxxl);
|
|
|
|
&:hover {
|
|
--update-button-opacity: 1;
|
|
}
|
|
}
|
|
|
|
.team-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border-radius: 50%;
|
|
width: $sz-120;
|
|
height: $sz-120;
|
|
}
|
|
|
|
.update-overlay {
|
|
opacity: var(--update-button-opacity);
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: var(--z-index-set);
|
|
border-radius: $br-circle;
|
|
background-color: var(--color-accent-primary);
|
|
}
|
|
|
|
.image-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: $sz-16;
|
|
width: $sz-16;
|
|
color: transparent;
|
|
fill: none;
|
|
stroke-width: $b-1;
|
|
min-width: $sz-24;
|
|
min-height: $sz-24;
|
|
stroke: var(--color-foreground-primary);
|
|
}
|
|
|
|
// TEAM MEMBERS PAGE
|
|
.dashboard-team-members {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-inline-start: var(--sp-xl);
|
|
padding-block-start: var(--sp-xl);
|
|
border-top: $b-1 solid var(--color-background-quaternary);
|
|
overflow-y: auto;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
.dashboard-team-members.dashboard-top-cta {
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.team-members {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
height: fit-content;
|
|
max-width: $sz-1000;
|
|
width: 100%;
|
|
}
|
|
|
|
.table-header {
|
|
@include t.use-typography("headline-small");
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-columns: 43% 1fr px2rem(108) var(--sp-m);
|
|
height: $sz-40;
|
|
width: 100%;
|
|
max-width: $sz-1000;
|
|
padding: 0 var(--sp-l);
|
|
user-select: none;
|
|
color: var(--color-foreground-secondary);
|
|
}
|
|
|
|
.table-rows {
|
|
display: grid;
|
|
grid-auto-rows: px2rem(64);
|
|
gap: var(--sp-l);
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: $sz-1000;
|
|
margin-top: var(--sp-l);
|
|
color: var(--color-foreground-secondary);
|
|
}
|
|
|
|
.table-row {
|
|
display: grid;
|
|
grid-template-columns: 43% 1fr auto;
|
|
align-items: center;
|
|
height: px2rem(64);
|
|
width: 100%;
|
|
padding: 0 var(--sp-l);
|
|
border-radius: $br-8;
|
|
background-color: var(--color-background-tertiary);
|
|
color: var(--color-foreground-primary);
|
|
}
|
|
|
|
.title-field-name {
|
|
width: 43%;
|
|
min-width: px2rem(300);
|
|
}
|
|
|
|
.title-field-role {
|
|
position: relative;
|
|
cursor: default;
|
|
}
|
|
|
|
.title-field-role,
|
|
.title-field-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp-s);
|
|
}
|
|
|
|
.field-name {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: var(--sp-l);
|
|
width: 43%;
|
|
min-width: px2rem(300);
|
|
}
|
|
|
|
.field-roles {
|
|
position: relative;
|
|
cursor: default;
|
|
}
|
|
|
|
.field-actions {
|
|
position: relative;
|
|
}
|
|
|
|
// MEMBER INFO
|
|
.member-image {
|
|
height: $sz-32;
|
|
width: $sz-32;
|
|
border-radius: $br-circle;
|
|
}
|
|
|
|
.member-info {
|
|
display: grid;
|
|
grid-template-rows: 1fr 1fr;
|
|
width: 100%;
|
|
}
|
|
|
|
.member-name,
|
|
.member-email {
|
|
@include textEllipsis;
|
|
@include t.use-typography("body-large");
|
|
}
|
|
|
|
.member-email {
|
|
@include t.use-typography("body-small");
|
|
color: var(--color-foreground-secondary);
|
|
}
|
|
|
|
.you {
|
|
color: var(--color-foreground-secondary);
|
|
margin-left: px2rem(6);
|
|
}
|
|
|
|
// ROL INFO
|
|
.rol-selector {
|
|
@include t.use-typography("body-medium");
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
align-items: center;
|
|
height: $sz-32;
|
|
min-width: $sz-160;
|
|
width: fit-content;
|
|
padding: var(--sp-xs) var(--sp-s);
|
|
border-radius: $br-8;
|
|
border-color: var(--color-background-quaternary);
|
|
background-color: var(--color-background-quaternary);
|
|
}
|
|
|
|
.has-priv {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.rol-label {
|
|
user-select: none;
|
|
}
|
|
|
|
.roles-dropdown {
|
|
box-shadow: var(--el-shadow-dark);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--sp-xs);
|
|
position: absolute;
|
|
padding: var(--sp-xs);
|
|
border-radius: $br-8;
|
|
z-index: var(--z-index-dropdown);
|
|
color: var(--color-foreground-primary);
|
|
background-color: var(--color-background-tertiary);
|
|
border: $b-2 solid var(--color-background-quaternary);
|
|
margin: 0;
|
|
bottom: calc(-1 * px2rem(76));
|
|
width: fit-content;
|
|
min-width: $sz-160;
|
|
}
|
|
|
|
.rol-dropdown-item {
|
|
@include t.use-typography("body-small");
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: $sz-28;
|
|
width: 100%;
|
|
padding: px2rem(6);
|
|
border-radius: $br-8;
|
|
cursor: pointer;
|
|
&:hover {
|
|
background-color: var(--color-background-quaternary);
|
|
}
|
|
}
|
|
|
|
// MEMBER ACTIONS
|
|
.menu-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: $sz-16;
|
|
width: $sz-16;
|
|
color: transparent;
|
|
fill: none;
|
|
stroke-width: $b-1;
|
|
stroke: var(--color-foreground-primary);
|
|
}
|
|
|
|
.menu-btn {
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.input-checkbox {
|
|
// TODO: remove this extended class.
|
|
@extend .input-checkbox;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.actions-dropdown {
|
|
box-shadow: var(--el-shadow-dark);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--sp-xs);
|
|
position: absolute;
|
|
padding: var(--sp-xs);
|
|
border-radius: $br-8;
|
|
z-index: var(--z-index-dropdown);
|
|
color: var(--color-foreground-primary);
|
|
background-color: var(--color-background-tertiary);
|
|
border: $b-2 solid var(--color-background-quaternary);
|
|
margin: 0;
|
|
bottom: calc(-1 * var(--sp-xxxl));
|
|
right: 0;
|
|
left: unset;
|
|
width: fit-content;
|
|
min-width: $sz-160;
|
|
}
|
|
|
|
.action-dropdown-item {
|
|
@include t.use-typography("body-small");
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: $sz-28;
|
|
width: 100%;
|
|
padding: px2rem(6);
|
|
border-radius: $br-8;
|
|
cursor: pointer;
|
|
&:hover {
|
|
background-color: var(--color-background-quaternary);
|
|
}
|
|
}
|
|
|
|
// TEAM INVITATION PAGE
|
|
.dashboard-team-invitations {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-inline-start: var(--sp-xl);
|
|
padding-block-start: var(--sp-xl);
|
|
border-top: $b-1 solid var(--color-background-quaternary);
|
|
overflow-y: auto;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
.invitations {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
height: fit-content;
|
|
max-width: $sz-1000;
|
|
width: 100%;
|
|
}
|
|
|
|
.invitations-actions {
|
|
@include t.use-typography("body-medium");
|
|
display: flex;
|
|
justify-content: end;
|
|
align-items: center;
|
|
gap: var(--sp-l);
|
|
color: var(--title-foreground-color);
|
|
height: $sz-40;
|
|
margin-block-end: px2rem(36);
|
|
}
|
|
|
|
.error-notification {
|
|
margin-block-end: var(--sp-xxl);
|
|
}
|
|
|
|
.table-row-invitations {
|
|
grid-template-columns: 43% 1fr $sz-88 var(--sp-xxl);
|
|
align-items: center;
|
|
}
|
|
|
|
.empty-invitations {
|
|
display: grid;
|
|
place-items: center;
|
|
align-content: center;
|
|
height: px2rem(156);
|
|
max-width: $sz-1000;
|
|
width: 100%;
|
|
margin-top: var(--sp-l);
|
|
border: $b-1 solid var(--color-background-quaternary);
|
|
border-radius: $br-8;
|
|
color: var(--color-foreground-secondary);
|
|
}
|
|
|
|
.btn-empty-invitations {
|
|
// TODO: Remove this extend add DS component
|
|
@extend .button-primary;
|
|
margin-block-start: var(--sp-l);
|
|
padding-inline: var(--sp-m);
|
|
}
|
|
|
|
.title-field-status {
|
|
position: relative;
|
|
cursor: default;
|
|
}
|
|
|
|
.sort-inactive {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.sort-active {
|
|
opacity: 1;
|
|
}
|
|
|
|
.field-email {
|
|
@include textEllipsis;
|
|
@include t.use-typography("body-large");
|
|
display: flex;
|
|
gap: var(--sp-l);
|
|
align-items: center;
|
|
}
|
|
|
|
.invitations-dropdown {
|
|
bottom: calc(-1 * px2rem(112));
|
|
right: calc(-1 * var(--sp-xl));
|
|
}
|
|
|
|
// WEBHOOKS SECTION
|
|
.dashboard-team-webhooks {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
justify-items: center;
|
|
gap: var(--sp-xxl);
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-inline-start: var(--sp-xl);
|
|
padding-block-start: var(--sp-xl);
|
|
border-top: $b-1 solid var(--color-background-quaternary);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.webhooks-hero-container {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
margin: px2rem(80) auto var(--sp-xl) auto;
|
|
gap: var(--sp-xxl);
|
|
}
|
|
|
|
.webhooks-empty {
|
|
display: grid;
|
|
place-items: center;
|
|
align-content: center;
|
|
height: px2rem(156);
|
|
max-width: $sz-1000;
|
|
width: 100%;
|
|
padding: var(--sp-xxxl);
|
|
border: $b-1 solid var(--color-background-quaternary);
|
|
border-radius: $br-8;
|
|
color: var(--color-foreground-secondary);
|
|
}
|
|
|
|
.webhooks-hero {
|
|
@include t.use-typography("body-medium");
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
gap: var(--sp-xxxl);
|
|
margin-top: var(--sp-xxxl);
|
|
margin: 0;
|
|
padding: var(--sp-xxxl);
|
|
padding: 0;
|
|
width: px2rem(468);
|
|
}
|
|
|
|
.hero-title {
|
|
@include t.use-typography("title-large");
|
|
color: var(--color-foreground-primary);
|
|
}
|
|
|
|
.hero-desc {
|
|
@include t.use-typography("body-large");
|
|
color: var(--color-foreground-secondary);
|
|
margin-bottom: 0;
|
|
max-width: $sz-512;
|
|
}
|
|
|
|
.hero-btn {
|
|
//TODO: Remove this extended class using a DS component
|
|
@extend .button-primary;
|
|
height: $sz-32;
|
|
max-width: $sz-512;
|
|
}
|
|
|
|
.webhook-table {
|
|
height: fit-content;
|
|
}
|
|
|
|
.webhook-row {
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-columns: auto 1fr auto auto;
|
|
gap: var(--sp-l);
|
|
}
|
|
|
|
.actions {
|
|
position: relative;
|
|
}
|
|
|
|
.menu-disabled {
|
|
color: var(--color-foreground-secondary);
|
|
width: $sz-28;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.webhook-actions-dropdown {
|
|
box-shadow: var(--el-shadow-dark);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--sp-xs);
|
|
position: absolute;
|
|
padding: var(--sp-xs);
|
|
border-radius: $br-8;
|
|
z-index: var(--z-index-dropdown);
|
|
color: var(--color-foreground-primary);
|
|
background-color: var(--color-background-tertiary);
|
|
border: $b-2 solid var(--color-background-quaternary);
|
|
margin: 0;
|
|
right: calc(-1 * var(--sp-l));
|
|
bottom: calc(-1 * $sz-40);
|
|
width: fit-content;
|
|
min-width: $sz-160;
|
|
}
|
|
|
|
.webhook-dropdown-item {
|
|
@include t.use-typography("body-small");
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: $sz-28;
|
|
width: 100%;
|
|
padding: px2rem(6);
|
|
border-radius: $br-8;
|
|
cursor: pointer;
|
|
&:hover {
|
|
background-color: var(--color-background-quaternary);
|
|
}
|
|
}
|
|
|
|
.success-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: $sz-16;
|
|
width: $sz-16;
|
|
color: transparent;
|
|
fill: none;
|
|
stroke-width: $b-1;
|
|
stroke: var(--color-accent-success);
|
|
}
|
|
|
|
.warning-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: $sz-16;
|
|
width: $sz-16;
|
|
color: transparent;
|
|
fill: none;
|
|
stroke-width: $b-1;
|
|
stroke: var(--color-accent-warning);
|
|
}
|
|
|
|
// INVITE MEMBERS MODAL
|
|
.modal-team-container {
|
|
position: relative;
|
|
padding: var(--sp-xxxl);
|
|
border-radius: $br-8;
|
|
background-color: var(--color-background-primary);
|
|
border: $b-2 solid var(--color-background-quaternary);
|
|
min-width: $sz-364;
|
|
min-height: $sz-192;
|
|
max-width: $sz-512;
|
|
max-height: $sz-512;
|
|
box-shadow: var(--el-shadow-dark);
|
|
position: fixed;
|
|
top: px2rem(72);
|
|
right: var(--sp-m);
|
|
left: unset;
|
|
width: $sz-400;
|
|
padding: var(--sp-xxxl);
|
|
background-color: var(--color-background-primary);
|
|
z-index: var(--z-index-set);
|
|
|
|
&.hero {
|
|
top: px2rem(216);
|
|
right: var(--sp-xxxl);
|
|
}
|
|
}
|
|
|
|
.modal-team-container-workspace {
|
|
top: $sz-40;
|
|
z-index: var(--z-index-set);
|
|
}
|
|
|
|
.modal-title {
|
|
@include t.use-typography("headline-medium");
|
|
height: $sz-32;
|
|
color: var(--color-foreground-primary);
|
|
}
|
|
|
|
.role-select {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--sp-xs);
|
|
row-gap: var(--sp-s);
|
|
}
|
|
|
|
.arrow-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: $sz-16;
|
|
width: $sz-16;
|
|
color: transparent;
|
|
fill: none;
|
|
stroke-width: $b-1;
|
|
stroke: var(--color-foreground-secondary);
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.invite-team-member-text {
|
|
@include t.use-typography("body-large");
|
|
margin: 0 0 var(--sp-l) 0;
|
|
color: var(--color-foreground-primary);
|
|
}
|
|
|
|
.role-title {
|
|
@include t.use-typography("body-large");
|
|
margin: 0;
|
|
color: var(--color-foreground-primary);
|
|
}
|
|
|
|
.invitation-row {
|
|
margin-top: var(--sp-s);
|
|
margin-bottom: var(--sp-xxl);
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.accept-btn {
|
|
// TODO: remove this extend class creating a modal component
|
|
@extend .modal-accept-btn;
|
|
}
|
|
|
|
// WEBHOOKS MODAL
|
|
|
|
.modal-overlay {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: var(--z-index-set);
|
|
background-color: var(--overlay-color);
|
|
}
|
|
|
|
.modal-container {
|
|
position: relative;
|
|
padding: var(--sp-xxxl);
|
|
border-radius: $br-8;
|
|
background-color: var(--color-background-primary);
|
|
border: $b-2 solid var(--color-background-quaternary);
|
|
min-width: $sz-364;
|
|
min-height: $sz-192;
|
|
max-width: $sz-512;
|
|
max-height: $sz-512;
|
|
}
|
|
|
|
.modal-header {
|
|
margin-bottom: var(--sp-xxl);
|
|
}
|
|
|
|
.modal-title {
|
|
@include t.use-typography("title-small");
|
|
color: var(--color-foreground-primary);
|
|
}
|
|
|
|
.modal-close-btn {
|
|
// TODO remove extended class creating a modal component
|
|
@extend .modal-close-btn-base;
|
|
}
|
|
|
|
.modal-content {
|
|
@include t.use-typography("body-small");
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--sp-xxl);
|
|
margin-bottom: var(--sp-xxl);
|
|
}
|
|
|
|
.fields-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--sp-xs);
|
|
}
|
|
|
|
.select-title {
|
|
@include t.use-typography("body-small");
|
|
color: var(--color-foreground-primary);
|
|
}
|
|
|
|
.custom-input-checkbox {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.hint {
|
|
color: var(--color-foreground-secondary);
|
|
}
|
|
|
|
// TODO: Remove this extended classes creating a modal component
|
|
.action-buttons {
|
|
@extend .modal-action-btns;
|
|
|
|
button {
|
|
@extend .modal-accept-btn;
|
|
}
|
|
|
|
.cancel-button {
|
|
@extend .modal-cancel-btn;
|
|
}
|
|
}
|
|
|
|
// TODO: Remove this extended class using input component
|
|
.email-input {
|
|
@include t.use-typography("body-small");
|
|
@extend .input-base;
|
|
height: auto;
|
|
}
|
|
// FIXME: This does not conform to our CSS Guidelines. Need to unnest and to use
|
|
// custom properties to handle state changes.
|
|
.input-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
@include t.use-typography("body-large");
|
|
|
|
label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: px2rem(6);
|
|
cursor: pointer;
|
|
color: var(--color-foreground-primary);
|
|
|
|
&:focus,
|
|
&:focus-within {
|
|
span {
|
|
border-color: var(--color-accent-primary);
|
|
}
|
|
}
|
|
&:hover {
|
|
span {
|
|
border-color: var(--color-accent-primary-muted);
|
|
}
|
|
}
|
|
}
|
|
|
|
span {
|
|
@extend .checkbox-icon;
|
|
@include t.use-typography("body-small");
|
|
color: var(--color-foreground-secondary);
|
|
}
|
|
input {
|
|
margin: 0;
|
|
@include t.use-typography("body-small");
|
|
color: var(--color-foreground-secondary);
|
|
}
|
|
}
|
|
|
|
// INVITATION MODAL
|
|
|
|
.modal-invitation-container {
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.modal-invitation-content {
|
|
overflow: auto;
|
|
}
|
|
|
|
.invitation-list p {
|
|
margin: 0;
|
|
}
|
|
|
|
.modal-invitation-action-buttons {
|
|
margin-block-start: var(--sp-xxxl);
|
|
gap: var(--sp-s);
|
|
}
|