X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/1ee3e779e4b9b0a92f701a72f21a72c83cb1ce68..refs/pull/2023/head:/resources/sass/_forms.scss diff --git a/resources/sass/_forms.scss b/resources/sass/_forms.scss index 64308b29e..f306a717b 100644 --- a/resources/sass/_forms.scss +++ b/resources/sass/_forms.scss @@ -19,6 +19,9 @@ &.disabled, &[disabled] { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==); } + &[readonly] { + background-color: #f8f8f8; + } &:focus { border-color: var(--color-primary); outline: 1px solid var(--color-primary); @@ -62,6 +65,13 @@ width: 50%; max-width: 50%; } + &.fullscreen { + position: fixed; + top: 0; + left: 0; + height: 100%; + z-index: 2; + } } @include smaller-than($m) { @@ -71,6 +81,7 @@ #markdown-editor .markdown-editor-wrap { width: 100%; max-width: 100%; + flex-grow: 1; } #markdown-editor .editor-toolbar { padding: 0; @@ -83,25 +94,28 @@ border-bottom: 1px solid #DDD; display: block; } - .markdown-editor-wrap:not(.active) .editor-toolbar + div, .markdown-editor-wrap:not(.active) .editor-toolbar .buttons { + .markdown-editor-wrap:not(.active) .editor-toolbar + div, + .markdown-editor-wrap:not(.active) .editor-toolbar .buttons, + .markdown-editor-wrap:not(.active) .markdown-display { display: none; } #markdown-editor .markdown-editor-wrap:not(.active) { flex-grow: 0; flex: none; + min-height: 0; } } .markdown-display { - margin-left: -1px; + margin-inline-start: -1px; } .markdown-editor-display { background-color: #FFFFFF; body { background-color: #FFFFFF; - padding-left: 16px; - padding-right: 16px; + padding-inline-start: 16px; + pmargin-inline-end: 16px; } [drawio-diagram]:hover { outline: 2px solid var(--color-primary); @@ -141,12 +155,12 @@ label.radio, label.checkbox { font-weight: 400; user-select: none; input[type="radio"], input[type="checkbox"] { - margin-right: $-xs; + margin-inline-end: $-xs; } } label.inline.checkbox { - margin-right: $-m; + margin-inline-end: $-m; } label + p.small { @@ -172,6 +186,11 @@ input[type=date] { input[type=color] { height: 60px; + &.small { + height: 42px; + width: 60px; + padding: 2px; + } } .toggle-switch { @@ -269,12 +288,12 @@ input[type=color] { border: 1px solid #DDD; border-radius: 4px; .collapse-title { - margin-left: -$-m; - margin-right: -$-m; + margin-inline-start: -$-m; + margin-inline-end: -$-m; padding: $-s $-m; display: block; width: calc(100% + 32px); - text-align: left; + text-align: start; } .collapse-title, .collapse-title label { cursor: pointer; @@ -287,7 +306,7 @@ input[type=color] { .collapse-title label:before { display: inline-block; content: '▸'; - margin-right: $-m; + margin-inline-end: $-m; transition: all ease-in-out 400ms; transform: rotate(0); } @@ -354,10 +373,14 @@ div[editor-type="markdown"] .title-input.page-title input[type="text"] { position: absolute; left: 8px; top: 9px; + @include rtl { + right: 8px; + left: auto; + } } input { display: block; - padding-left: $-l + 4px; + padding-inline-start: $-l + 4px; width: 300px; max-width: 100%; }