1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
@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;
}
|
