components/calendar/dialog/page.module.scss
@use 'styles/typography';
@use 'styles/common';
.wrapper {
flex-direction: column;
position: relative;
display: flex;
height: 100%;
max-height: calc(100vh - 48px);
.nav {
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--accents-2);
padding: 12px 14px;
.btn {
padding: 9px;
width: 36px;
height: 36px;
svg {
display: block;
height: 18px;
width: 18px;
}
}
}
}
.form {
overflow: auto;
height: 100%;
.divider {
@include common.divider;
}
.inputs {
margin: 24px auto;
padding: 0 24px;
display: flex;
flex-direction: column;
.field {
@include common.field;
}
.btn {
margin: 8px 0 0;
width: 100%;
}
.error {
@include common.error;
}
}
}
.actions {
border-top: 1px solid var(--accents-2);
overflow: auto;
text-align: right;
flex: none;
.chips {
padding: 12px 0;
flex-wrap: nowrap;
display: inline-flex;
:global(.mdc-chip:first-child) {
margin-left: 12px;
}
:global(.mdc-chip:last-child) {
margin-right: 12px;
}
}
}
.content {
padding: 0 24px;
overflow: auto;
height: 100%;
width: 400px;
}
@mixin header() {
font-size: 12px;
font-weight: 500;
line-height: 14px;
height: 14px;
text-transform: uppercase;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: var(--accents-5);
}
@mixin content() {
font-size: 14px;
font-weight: 500;
line-height: 24px;
color: var(--on-background);
}
.person {
display: flex;
align-items: center;
text-decoration: none;
margin: 12px 0;
&:first-child {
margin-top: 24px;
}
.avatar {
flex: none;
width: 48px;
height: 48px;
margin-right: 12px;
}
.label {
flex: 1 1 auto;
width: 0px;
.name {
@include content;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
height: 24px;
}
.roles {
@include header;
}
}
}
dl.info {
flex: 1 1 auto;
margin: 24px 0;
dt {
@include header;
margin: 16px 0 0;
}
dd {
@include content;
margin: 0;
}
a {
color: var(--on-background);
text-decoration: none;
overflow-wrap: break-word;
word-break: break-all;
hyphens: none;
font-weight: 500;
display: block;
&:hover {
text-decoration: underline;
}
}
}