feat: member manage section in setting dialog

This commit is contained in:
boojack
2022-05-16 22:19:39 +08:00
parent fbf4afff8e
commit c492317ffe
24 changed files with 421 additions and 344 deletions

View File

@ -3,7 +3,7 @@
.setting-dialog {
> .dialog-container {
@apply w-168 max-w-full mb-8 p-0;
@apply w-176 max-w-full mb-8 p-0;
> .dialog-content-container {
.flex(column, flex-start, flex-start);
@ -12,7 +12,7 @@
> .close-btn {
.flex(column, center, center);
@apply absolute top-4 right-4 w-6 h-6 rounded hover:bg-gray-200;
@apply absolute top-4 right-4 w-6 h-6 rounded hover:bg-gray-200 hover:shadow;
> .icon-img {
@apply w-5 h-5;
@ -20,10 +20,14 @@
}
> .section-selector-container {
@apply w-40 h-full shrink-0 rounded-l-lg p-4 bg-gray-100 flex flex-col justify-start items-start;
@apply w-40 h-full shrink-0 rounded-l-lg p-4 border-r bg-gray-100 flex flex-col justify-start items-start;
> .section-title {
@apply text-sm mt-4 first:mt-3 mb-1 font-mono text-gray-400;
}
> .section-item {
@apply text-base left-6 mt-2 mb-1 cursor-pointer hover:opacity-80;
@apply text-base left-6 mt-2 text-gray-700 cursor-pointer hover:opacity-80;
&.selected {
@apply font-bold hover:opacity-100;
@ -32,20 +36,19 @@
}
> .section-content-container {
@apply w-auto p-4 grow flex flex-col justify-start items-start;
@apply w-auto p-4 px-6 grow flex flex-col justify-start items-start h-128 overflow-y-scroll;
> .section-container {
.flex(column, flex-start, flex-start);
@apply w-full my-2;
> .title-text {
@apply text-base font-bold mb-2;
color: @text-black;
@apply text-sm mb-3 font-mono text-gray-500;
}
> .form-label {
.flex(row, flex-start, center);
@apply w-full text-sm mb-2;
@apply w-full mb-2;
> .normal-text {
@apply shrink-0 select-text;