159 lines
2.8 KiB
SCSS
159 lines
2.8 KiB
SCSS
|
@use '../../partials/text';
|
||
|
|
@use '../../partials/dir';
|
||
|
|
@use '../../partials/flex';
|
||
|
|
|
||
|
|
.space-manage {
|
||
|
|
& .pw__content-wrapper {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
& .pw__content-container {
|
||
|
|
padding-top: 0;
|
||
|
|
padding-bottom: 73px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.space-manage__content {
|
||
|
|
margin-bottom: var(--sp-extra-loose);
|
||
|
|
|
||
|
|
& > .text {
|
||
|
|
margin-top: var(--sp-extra-tight);
|
||
|
|
padding: var(--sp-extra-tight) var(--sp-normal);
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
&-items {
|
||
|
|
@include dir.side(padding, var(--sp-extra-tight), 0);
|
||
|
|
& > .text:first-child {
|
||
|
|
padding: var(--sp-extra-tight);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& > button {
|
||
|
|
margin: var(--sp-normal);
|
||
|
|
}
|
||
|
|
|
||
|
|
&-loading {
|
||
|
|
padding: var(--sp-loose);
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
& .text {
|
||
|
|
margin: 0 var(--sp-normal);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.space-manage-breadcrumb {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
height: 100%;
|
||
|
|
margin: 0 var(--sp-extra-tight);
|
||
|
|
|
||
|
|
&__wrapper {
|
||
|
|
height: var(--header-height);
|
||
|
|
position: sticky;
|
||
|
|
top: 0;
|
||
|
|
z-index: 99;
|
||
|
|
background-color: var(--bg-surface);
|
||
|
|
}
|
||
|
|
& > * {
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
& > .btn-surface {
|
||
|
|
min-width: 0;
|
||
|
|
padding: var(--sp-extra-tight) 10px;
|
||
|
|
white-space: nowrap;
|
||
|
|
box-shadow: none;
|
||
|
|
& p {
|
||
|
|
@extend .cp-txt__ellipsis;
|
||
|
|
max-width: 200px;
|
||
|
|
}
|
||
|
|
&:last-child {
|
||
|
|
box-shadow: var(--bs-surface-border) !important;
|
||
|
|
background-color: var(--bg-surface);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.space-manage-item {
|
||
|
|
margin: var(--sp-ultra-tight) 0;
|
||
|
|
padding: 0 var(--sp-extra-tight);
|
||
|
|
border-radius: var(--bo-radius);
|
||
|
|
|
||
|
|
& > div {
|
||
|
|
min-height: 40px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
&--space {
|
||
|
|
@extend .space-manage-item;
|
||
|
|
& .space-manage-item__btn {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: var(--bg-surface-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
& .checkbox {
|
||
|
|
@include dir.side(margin, 0, var(--sp-tight));
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
&__btn {
|
||
|
|
@extend .cp-fx__item-one;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
& .avatar__border--active {
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
& .text {
|
||
|
|
@extend .cp-txt__ellipsis;
|
||
|
|
min-width: 0;
|
||
|
|
margin: 0 var(--sp-extra-tight);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& .ic-btn {
|
||
|
|
padding: 7px;
|
||
|
|
@include dir.side(margin, 0, var(--sp-extra-tight));
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
& .btn-surface,
|
||
|
|
& .btn-primary {
|
||
|
|
padding: var(--sp-ultra-tight) var(--sp-extra-tight);
|
||
|
|
min-width: 60px;
|
||
|
|
}
|
||
|
|
|
||
|
|
& > .text {
|
||
|
|
padding: 32px;
|
||
|
|
padding-top: 0;
|
||
|
|
padding-bottom: var(--sp-normal);
|
||
|
|
white-space: pre-wrap;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.space-manage__footer {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
padding: var(--sp-normal);
|
||
|
|
background-color: var(--bg-surface);
|
||
|
|
border-top: 1px solid var(--bg-surface-border);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
& > .text {
|
||
|
|
@extend .cp-fx__item-one;
|
||
|
|
padding: 0 var(--sp-tight);
|
||
|
|
}
|
||
|
|
|
||
|
|
& > button {
|
||
|
|
@include dir.side(margin, var(--sp-normal), 0);
|
||
|
|
}
|
||
|
|
}
|