codecheck
87 строк · 1.6 Кб
1// core
2.p-splitter {3display: flex;4flex-wrap: nowrap;5}
6
7.p-splitter-vertical {8flex-direction: column;9}
10
11.p-splitter-gutter {12flex-grow: 0;13flex-shrink: 0;14display: flex;15align-items: center;16justify-content: center;17cursor: col-resize;18}
19
20.p-splitter-horizontal.p-splitter-resizing {21cursor: col-resize;22user-select: none;23}
24
25.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {26height: 24px;27width: 100%;28}
29
30.p-splitter-horizontal > .p-splitter-gutter {31cursor: col-resize;32}
33
34.p-splitter-vertical.p-splitter-resizing {35cursor: row-resize;36user-select: none;37}
38
39.p-splitter-vertical > .p-splitter-gutter {40cursor: row-resize;41}
42
43.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {44width: 24px;45height: 100%;46}
47
48.p-splitter-panel {49flex-grow: 1;50overflow: hidden;51}
52
53.p-splitter-panel-nested {54display: flex;55}
56
57.p-splitter-panel .p-splitter {58flex-grow: 1;59border: 0 none;60}
61
62// theme
63.p-splitter {64border: $panelContentBorder;65background: $panelContentBg;66border-radius: $borderRadius;67color: $panelContentTextColor;68
69.p-splitter-gutter {70transition: $actionIconTransition;71background: $splitterGutterBg;72
73.p-splitter-gutter-handle {74background: $splitterGutterHandleBg;75transition: $formElementTransition;76outline-color: transparent;77
78&:focus-visible {79@include focused();80}81}82}83
84.p-splitter-gutter-resizing {85background: $splitterGutterHandleBg;86}87}