Skip to content

Commit

Permalink
fix: splitter active resizer handle scroll
Browse files Browse the repository at this point in the history
  • Loading branch information
@g-cheishvili
g-cheishvili committed Jan 3, 2024
1 parent efd835a commit b8d4442
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 76 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,4 +169,4 @@
"fast-deep-equal": "^3.1.3",
"jsdom": "^20.0.1"
}
}
}
159 changes: 84 additions & 75 deletions packages/styles/src/splitter.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,65 @@

$block: #{$fd-namespace}-splitter;

@mixin fd-splitter-line-horizontal($fullWidth) {
height: var(--fdSplitter_Resizer_Line_Thickness);

@if $fullWidth {
flex-grow: 1;
} @else {
flex-basis: var(--fdSplitter_Resizer_Line_Size);
}
}

@mixin fd-splitter-line-vertical($fullHeight) {
width: var(--fdSplitter_Resizer_Line_Thickness);

@if $fullHeight {
flex-grow: 1;
} @else {
flex-basis: var(--fdSplitter_Resizer_Line_Size);
}
}

@mixin fd-splitter-resizer-decorations() {
.#{$block}__resizer-decoration-before,
.#{$block}__resizer-decoration-after {
@content;
}
}

@mixin fd-splitter-resizer-decoration-before-active() {
@include fd-active() {
& ~ .#{$block}__resizer-decoration-before {
@content;
}
}
}

@mixin fd-splitter-resizer-decoration-after-active() {
@include fd-active() {
& ~ .#{$block}__resizer-decoration-after {
@content;
}
}
}

@mixin fd-splitter-resizer-decoration-before-focus() {
@include fd-focus() {
& ~ .#{$block}__resizer-decoration-before {
@content;
}
}
}

@mixin fd-splitter-resizer-decoration-after-focus() {
@include fd-focus() {
& ~ .#{$block}__resizer-decoration-after {
@content;
}
}
}

.#{$block} {
--fdSplitter_Split_Pane_BoxShadow: none;
--fdSplitter_Split_Pane_Background: transparent;
Expand All @@ -16,51 +75,20 @@ $block: #{$fd-namespace}-splitter;
--fdSplitter_Resizer_Grip_Cursor: auto;
--fdSplitter_Resizer_Flex_Direction: row;
--fdSplitter_Resizer_Background: transparent;
--fdSplitter_Resizer_Before_Width: 4rem;
--fdSplitter_Resizer_Before_Height: 0.0625rem;
--fdSplitter_Resizer_Before_Border_Radius: 0.125rem;
--fdSplitter_Resizer_Before_Background: linear-gradient(to left, var(--sapGroup_TitleBorderColor), transparent);
--fdSplitter_Resizer_After_Width: 4rem;
--fdSplitter_Resizer_After_Height: 0.0625rem;
--fdSplitter_Resizer_After_Border_Radius: 0.125rem;
--fdSplitter_Resizer_After_Background: linear-gradient(to right, var(--sapGroup_TitleBorderColor), transparent);
--fdSplitter_Resizer_Line_Border_Radius: 0.125rem;
--fdSplitter_Resizer_Line_Thickness: 0.0625rem;
--fdSplitter_Resizer_Line_Size: 4rem;

@mixin fd-splitter-resizer-decoration-before-active() {
@include fd-active() {
& ~ .#{$block}__resizer-decoration-before {
@content;
}
}
}

@mixin fd-splitter-resizer-decoration-after-active() {
@include fd-active() {
& ~ .#{$block}__resizer-decoration-after {
@content;
}
}
}

@mixin fd-splitter-resizer-decoration-before-focus() {
@include fd-focus() {
& ~ .#{$block}__resizer-decoration-before {
@content;
}
}
}

@mixin fd-splitter-resizer-decoration-after-focus() {
@include fd-focus() {
& ~ .#{$block}__resizer-decoration-after {
@content;
}
}
}
width: 100%;
height: 100%;

@include fd-flex();

width: 100%;
height: 100%;
@include fd-splitter-resizer-decorations() {
@include fd-splitter-line-horizontal(false);
}

&,
&__pagination,
Expand Down Expand Up @@ -97,14 +125,14 @@ $block: #{$fd-namespace}-splitter;
--fdSplitter_Resizer_Height: 1rem;
--fdSplitter_Resizer_Flex_Direction: row;
--fdSplitter_Pane_Container_Flex_Direction: column;
--fdSplitter_Resizer_Before_Width: 4rem;
--fdSplitter_Resizer_Before_Height: 0.0625rem;
--fdSplitter_Resizer_Before_Background: linear-gradient(to left, var(--sapGroup_TitleBorderColor), transparent);
--fdSplitter_Resizer_After_Width: 4rem;
--fdSplitter_Resizer_After_Height: 0.0625rem;
--fdSplitter_Resizer_After_Background: linear-gradient(to right, var(--sapGroup_TitleBorderColor), transparent);

& > .#{$block}__resizer {
@include fd-splitter-resizer-decorations() {
@include fd-splitter-line-horizontal(false);
}

.#{$block}__resizer-grip {
--fdSplitter_Resizer_Grip_Cursor: row-resize;

Expand All @@ -117,12 +145,14 @@ $block: #{$fd-namespace}-splitter;
}

@include fd-splitter-resizer-decoration-before-active() {
--fdSplitter_Resizer_Before_Width: 100%;
@include fd-splitter-line-horizontal(true);

--fdSplitter_Resizer_Before_Background: var(--sapGroup_TitleBorderColor);
}

@include fd-splitter-resizer-decoration-after-active() {
--fdSplitter_Resizer_After_Width: 100%;
@include fd-splitter-line-horizontal(true);

--fdSplitter_Resizer_After_Background: var(--sapGroup_TitleBorderColor);
}
}
Expand All @@ -133,14 +163,13 @@ $block: #{$fd-namespace}-splitter;
--fdSplitter_Resizer_Width: 1rem;
--fdSplitter_Resizer_Cursor: col-resize;
--fdSplitter_Resizer_Flex_Direction: column;
--fdSplitter_Resizer_Before_Height: 4rem;
--fdSplitter_Resizer_Before_Width: 0.0625rem;
--fdSplitter_Resizer_Before_Background: linear-gradient(to top, var(--sapGroup_TitleBorderColor), transparent);
--fdSplitter_Resizer_After_Height: 4rem;
--fdSplitter_Resizer_After_Width: 0.0625rem;
--fdSplitter_Resizer_After_Background: linear-gradient(to bottom, var(--sapGroup_TitleBorderColor), transparent);

& > .#{$block}__resizer {
@include fd-splitter-resizer-decorations() {
@include fd-splitter-line-vertical(false);
}
.#{$block}__resizer-grip {
--fdSplitter_Resizer_Grip_Cursor: col-resize;

Expand All @@ -153,33 +182,21 @@ $block: #{$fd-namespace}-splitter;
}

@include fd-splitter-resizer-decoration-before-active() {
--fdSplitter_Resizer_Before_Height: 100%;
@include fd-splitter-line-vertical(true);

--fdSplitter_Resizer_Before_Background: var(--sapGroup_TitleBorderColor);
}

@include fd-splitter-resizer-decoration-after-active() {
--fdSplitter_Resizer_After_Height: 100%;
@include fd-splitter-line-vertical(true);

--fdSplitter_Resizer_After_Background: var(--sapGroup_TitleBorderColor);
}
}

@include fd-active() {
--fdSplitter_Resizer_Before_Height: 100%;
--fdSplitter_Resizer_Before_Width: 0.0625rem;
--fdSplitter_Resizer_After_Height: 100%;
--fdSplitter_Resizer_After_Width: 0.0625rem;
}

@include fd-focus() {
--fdSplitter_Resizer_Before_Background: linear-gradient(to top, var(--sapContent_FocusColor), transparent);
--fdSplitter_Resizer_After_Background: linear-gradient(to bottom, var(--sapContent_FocusColor), transparent);

@include fd-active() {
--fdSplitter_Resizer_Before_Height: 100%;
--fdSplitter_Resizer_Before_Width: 0.0625rem;
--fdSplitter_Resizer_After_Height: 100%;
--fdSplitter_Resizer_After_Width: 0.0625rem;
}
}
}
}
Expand Down Expand Up @@ -231,9 +248,7 @@ $block: #{$fd-namespace}-splitter;
}

@include fd-active() {
--fdSplitter_Resizer_Before_Width: 100%;
--fdSplitter_Resizer_Before_Background: var(--sapGroup_TitleBorderColor);
--fdSplitter_Resizer_After_Width: 100%;
--fdSplitter_Resizer_After_Background: var(--sapGroup_TitleBorderColor);
}

Expand All @@ -242,9 +257,7 @@ $block: #{$fd-namespace}-splitter;
--fdSplitter_Resizer_After_Background: linear-gradient(to right, var(--sapContent_FocusColor), transparent);

@include fd-active() {
--fdSplitter_Resizer_Before_Width: 100%;
--fdSplitter_Resizer_Before_Background: var(--sapGroup_TitleBorderColor);
--fdSplitter_Resizer_After_Width: 100%;
--fdSplitter_Resizer_After_Background: var(--sapGroup_TitleBorderColor);
}
}
Expand All @@ -253,19 +266,15 @@ $block: #{$fd-namespace}-splitter;
&__resizer-decoration-before {
order: 1;
transition: all 0.1s ease-in;
height: var(--fdSplitter_Resizer_Before_Height);
min-width: var(--fdSplitter_Resizer_Before_Width);
background: var(--fdSplitter_Resizer_Before_Background);
border-radius: var(--fdSplitter_Resizer_Before_Border_Radius);
border-radius: var(--fdSplitter_Resizer_Line_Border_Radius);
}

&__resizer-decoration-after {
order: 3;
transition: all 0.1s ease-in;
height: var(--fdSplitter_Resizer_After_Height);
min-width: var(--fdSplitter_Resizer_After_Width);
background: var(--fdSplitter_Resizer_After_Background);
border-radius: var(--fdSplitter_Resizer_After_Border_Radius);
border-radius: var(--fdSplitter_Resizer_Line_Border_Radius);
}

.#{$block}__resizer-grip {
Expand Down

0 comments on commit b8d4442

Please sign in to comment.