mediawiki-extensions-WikiEd.../modules/realtimepreview/ResizingDragBar.less
Volker E 58e69d97b9 styles: Replace 'mediawiki.ui/variables' call with skin variables
Replacing 'mediawiki.ui/variables.less' @import with
new skin-aware 'mediawiki.skin.variables.less' standard.
Also
- replacing several static values with new Codex design token featuring
  skin variables.
- reinstate static values only on resizeable drag bar. This is not a
  standardized component yet and will be revisited with further Codex
  component definitions in future.
Bump required MediaWiki core version to v1.41.0.

Bug: T319381
Bug: T332541
Change-Id: I323561894ddf23aa89f51439fc9df2b7642eaca5
2023-03-27 11:26:24 -07:00

48 lines
1.4 KiB
Plaintext

@import 'mediawiki.skin.variables.less';
// TODO: Replace static color values as soon as a drag bar and its design tokens
// have been defined in Codex.
// The dimensions of the UI affordance (the little line in the draggable area).
@affordance-width: 4px;
@affordance-length: 52px;
@background-color-wikieditor-resizing-dragbar: #eaecf0;
@background-color-wikieditor-resizing-dragbar-ew: #f8f9fa;
@background-color-wikieditor-resizing-dragbar-drag: #c8ccd1;
@background-color-wikieditor-resizing-dragbar-drag--hover: #54595d;
.ext-WikiEditor-ResizingDragBar {
background-color: @background-color-wikieditor-resizing-dragbar;
display: flex;
align-items: center;
justify-content: center;
}
.ext-WikiEditor-ResizingDragBar-ns {
cursor: ns-resize;
}
.ext-WikiEditor-ResizingDragBar-ew {
cursor: ew-resize;
background-color: @background-color-wikieditor-resizing-dragbar-ew;
}
.ext-WikiEditor-ResizingDragBar span {
width: @affordance-length;
height: @affordance-width;
background-color: @background-color-wikieditor-resizing-dragbar-drag;
border-radius: @border-radius-base;
display: block;
margin: 2px;
}
.ext-WikiEditor-ResizingDragBar:hover span {
background-color: @background-color-wikieditor-resizing-dragbar-drag--hover;
}
.ext-WikiEditor-ResizingDragBar-ew span {
height: @affordance-length;
width: @affordance-width;
border-width: 0 @border-width-base;
}