archive/BookStackApp_BookStack
0
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-04-21 11:40:38 +00:00
Code Issues Projects Releases Wiki Activity

Lexical: Adjusted modals and content area for mobile sizes

Browse source
This commit is contained in:
Dan Brown 2024-12-15 15:29:00 +00:00
parent 5f07f31c9f
commit 2f119d3033
No known key found for this signature in database
GPG key ID: 46D9F943C24A2EF9
1 changed files with 32 additions and 3 deletions

35
resources/sass/_editor.scss
View file

@ -48,6 +48,7 @@ body.editor-is-fullscreen {
.editor-content-wrap {
position: relative;
overflow-y: scroll;
padding-inline: vars.$s;
flex: 1;
}
@ -275,6 +276,9 @@ body.editor-is-fullscreen {
border-radius: 4px;
overflow: hidden;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
margin: vars.$xs;
max-height: 100%;
overflow-y: auto;
}
.editor-modal-header {
display: flex;
@ -490,19 +494,29 @@ body.editor-is-fullscreen {
/**
* Form elements
*/
$inputWidth: 260px;
.editor-form-field-wrapper {
margin-bottom: .5rem;
}
.editor-form-field-input {
display: block;
width: 100%;
min-width: 250px;
width: $inputWidth;
min-width: 100px;
max-width: 100%;
border: 1px solid;
@include mixins.lightDark(border-color, #DDD, #000);
padding: .5rem;
border-radius: 4px;
@include mixins.lightDark(color, #444, #BBB);
}
@include mixins.smaller-than(vars.$bp-xs) {
.editor-form-field-input {
min-width: 160px;
}
}
textarea.editor-form-field-input {
font-family: var(--font-code);
width: 350px;
@ -575,6 +589,17 @@ textarea.editor-form-field-input {
align-items: stretch;
gap: .25rem;
}
@include mixins.smaller-than(vars.$bp-m) {
.editor-form-tab-container {
flex-direction: column;
gap: .5rem;
}
.editor-form-tab-controls {
flex-direction: row;
}
}
.editor-form-tab-control {
font-weight: bold;
font-size: 14px;
@ -601,7 +626,8 @@ textarea.editor-form-field-input {
}
}
.editor-form-tab-contents {
width: 360px;
width: $inputWidth;
max-width: 100%;
}
.editor-action-input-container {
display: flex;
@ -612,6 +638,9 @@ textarea.editor-form-field-input {
.editor-button {
margin-bottom: 12px;
}
input {
width: $inputWidth - 40px;
}
}
// Editor theme styles