ResizingDragBar.less
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

ResizingDragBar.less
View Options

	@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: @background-color-interactive;
	@background-color-wikieditor-resizing-dragbar-ew: @background-color-interactive-subtle;
	@background-color-wikieditor-resizing-dragbar-drag: @background-color-disabled;
	@background-color-wikieditor-resizing-dragbar-drag--hover: @color-subtle;

	.ext-WikiEditor-ResizingDragBar {
	background-color: @background-color-wikieditor-resizing-dragbar;
	display: flex;
	align-items: center;
	justify-content: center;

	&-ns {
	cursor: ns-resize;
	}

	span {
	width: @affordance-length;
	height: @affordance-width;
	background-color: @background-color-wikieditor-resizing-dragbar-drag;
	border-radius: @border-radius-base;
	display: block;
	margin: 2px;
	}

	&:hover span {
	background-color: @background-color-wikieditor-resizing-dragbar-drag--hover;
	}

	&-ew {
	cursor: ew-resize;
	background-color: @background-color-wikieditor-resizing-dragbar-ew;

	span {
	height: @affordance-length;
	width: @affordance-width;
	border-width: 0 @border-width-base;
	}
	}
	}

	// This is needed to make the CodeMirror editor height constrained to .wikiEditor-ui-text
	// This only is needed when the ResizingDragBar is enabled.
	.cm-editor {
	// stylelint-disable-next-line declaration-no-important
	height: 100% !important;
	}