fix: mobile editor float style (#247)

This commit is contained in:
boojack 2022-09-27 22:58:03 +08:00 committed by GitHub
parent 52c8ac2ad3
commit 06f5a5788e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -3,6 +3,26 @@
.memo-editor-container {
@apply transition-all relative w-full flex flex-col justify-start items-start bg-white p-4 rounded-lg border-2 border-gray-200;
&.float {
@media (max-width: 640px) {
@apply fixed w-full bottom-2 left-0 border-none rounded-none sm:relative sm:bottom-0 sm:w-full;
background-color: #f6f5f4;
> .memo-editor {
@apply p-4 rounded-lg border-2 flex flex-col flex-grow justify-start items-start relative w-full h-full bg-white;
.tag-action > .tag-list {
@apply bottom-7;
top: unset;
}
}
& .emoji-picker-react {
@apply bottom-16 sm:bottom-auto;
}
}
}
&.fullscreen {
@apply fixed w-full h-full top-0 left-0 z-1000 border-none rounded-none sm:p-8;
background-color: #f6f5f4;
@ -25,15 +45,6 @@
border-color: @text-blue;
}
&.float {
width: calc(100% - 2rem);
@apply fixed bottom-4 sm:relative sm:bottom-0 sm:w-full;
& .emoji-picker-react {
@apply bottom-16 sm:bottom-auto;
}
}
> .tip-container {
@apply mb-1 w-full flex flex-row justify-start items-center text-xs leading-6;
@ -74,7 +85,7 @@
.emoji-picker-react {
@apply absolute;
li.emoji::before {
@apply hidden;
}