fix: grid style

This commit is contained in:
email 2022-04-15 00:34:37 +08:00
parent fc12e0e3fb
commit 225c4a8dfb
7 changed files with 14 additions and 11 deletions

View File

@ -5,7 +5,8 @@
@apply relative w-full h-full bg-white grow;
> .common-editor-inputer {
@apply w-full h-full pt-1 pb-3 grow;
@apply w-full h-full mt-1 mb-4 grow;
.pretty-scroll-bar(2px, 0);
font-size: 15px;
line-height: 24px;
resize: none;

View File

@ -5,6 +5,6 @@
}
#page-wrapper {
.flex(row, flex-start, flex-start);
@apply w-full h-full m-auto;
@apply w-full h-full m-auto grid;
grid-template-columns: 256px 1fr;
}

View File

@ -5,7 +5,7 @@
@apply w-full whitespace-pre-wrap break-words;
> p {
@apply inline-block w-full h-auto mb-1 text-base leading-6 whitespace-pre-wrap;
@apply inline-block w-full h-auto mb-1 text-base leading-6 whitespace-pre-wrap break-words;
}
.tag-span {

View File

@ -2,7 +2,7 @@
.filter-query-container {
.flex(row, flex-start, flex-start);
@apply w-full flex-wrap p-3 pb-1 text-sm leading-7;
@apply w-full flex-wrap p-2 pb-1 text-sm leading-7;
> .tip-text {
@apply mr-2;

View File

@ -2,8 +2,8 @@
.memo-list-container {
.flex(column, flex-start, flex-start);
flex-grow: 1;
width: 100%;
max-width: 100%;
overflow-y: scroll;
.hide-scroll-bar();

View File

@ -3,7 +3,7 @@
.memo-wrapper {
.flex(column, flex-start, flex-start);
@apply w-full p-4 px-6 mt-4 first:mt-2 bg-white rounded-lg border border-transparent hover:border-gray-200;
@apply w-full max-w-full p-4 px-6 mt-4 first:mt-2 bg-white rounded-lg border border-transparent hover:border-gray-200;
&.deleted-memo {
@apply border-gray-200;

View File

@ -2,14 +2,16 @@
@import "./memos-header.less";
.memos-wrapper {
.flex(row, flex-start, flex-start);
@apply w-auto h-full grow;
@apply w-full h-full overflow-x-hidden grid;
grid-template-columns: 384px 1fr;
> .memo-editor-wrapper {
@apply w-96 h-full shrink-0 py-16 px-8 bg-white;
@apply w-full h-full py-16 px-8 bg-white;
}
> .memo-list-wrapper {
@apply w-auto h-full grow px-16 flex flex-col justify-start items-start;
@apply w-full h-full overflow-y-auto px-16 grid;
grid-auto-rows: min-content;
grid-auto-flow: dense;
}
}