mediawiki-extensions-WikiEd.../modules/realtimepreview/TwoPaneLayout.less
Sam Wilson 411be83bc3 Add toggle button and two-pane layout for realtime preview
* Toolbar button to toggle a two-pane layout on and off.
* Resizable bar for the width of the two panes.
* Resizable bar for the edit box height, even when realtime preview is off.
* Only enabled when $wgWikiEditorRealtimePreview = true.
* Fires JS hooks when enabled, resized, and disabled.

Bug: T293347
Change-Id: Id09d44519249c0b7f5c33d48d524b7c92a5a9106
2022-03-13 07:28:01 +08:00

54 lines
1.3 KiB
Plaintext

@import 'mediawiki.ui/variables.less';
.ext-WikiEditor-twopanes-TwoPaneLayout {
// stylelint-disable-next-line plugin/no-unsupported-browser-features
display: flex;
.ext-WikiEditor-twopanes-pane1 {
border: 1px solid @colorGray12;
border-width: 0 1px 0 0;
// Offset by half the difference in padding and the UI affordance.
// stylelint-disable-next-line plugin/no-unsupported-browser-features
width: ~'calc( 50% - 9px )';
}
.ext-WikiEditor-twopanes-pane2 {
position: relative;
border: 1px solid @colorGray12;
border-width: 0 0 0 1px;
flex: 1 1 0;
overflow: auto;
padding: 0 6px;
}
@loadingbar-width: 20%;
// stylelint-disable-next-line selector-pseudo-element-colon-notation
.ext-WikiEditor-twopanes-pane2.ext-WikiEditor-twopanes-loading::before {
position: absolute;
top: 0;
z-index: 5;
display: block;
opacity: 1;
content: ' ';
background-color: @color-primary;
width: @loadingbar-width;
height: 4px;
// Hide the loading bar to start with; it'll be shown if the loading state persists for more than 1s.
visibility: hidden;
animation: loadingbar 1.5s 1s infinite linear alternate;
}
@keyframes loadingbar {
0% {
visibility: visible;
left: 0;
}
100% {
// stylelint-disable-next-line plugin/no-unsupported-browser-features
left: calc( 100% - @loadingbar-width );
}
}
}