mediawiki-extensions-WikiEd.../modules/realtimepreview/ResizingDragBar.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

41 lines
887 B
Plaintext

@import 'mediawiki.ui/variables.less';
// The dimensions of the UI affordance (the little line in the draggable area).
@affordance-width: 4px;
@affordance-length: 110px;
.ext-WikiEditor-ResizingDragBar {
background-color: @colorGray14;
display: flex;
align-items: center;
justify-content: center;
}
.ext-WikiEditor-ResizingDragBar-ns {
cursor: ns-resize;
}
.ext-WikiEditor-ResizingDragBar-ew {
cursor: ew-resize;
}
.ext-WikiEditor-ResizingDragBar span {
width: @affordance-length;
height: @affordance-width;
background-color: @colorGray12;
border-radius: 2px;
display: block;
// Don't change without also changing the calculated width of pane1 above.
margin: 1px;
}
.ext-WikiEditor-ResizingDragBar:hover span {
background-color: @colorGray5;
}
.ext-WikiEditor-ResizingDragBar-ew span {
height: @affordance-length;
width: @affordance-width;
border-width: 0 1px;
}