Skip to content

Commit

Permalink
feat: add split-view-separator-border class (#406)
Browse files Browse the repository at this point in the history
  • Loading branch information
@johnwalley
johnwalley authored Aug 24, 2022
1 parent b353e13 commit 8843ff4
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 44 deletions.
45 changes: 23 additions & 22 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,28 +229,29 @@ Some common style changes can be made by setting CSS variables.

These include:

| Name | Default | Description |
| :-------------------- | :-------------------------- | :----------------------------- |
| `--focus-border` | `#007fd4` | Color of the sash when hovered |
| ` --separator-border` | `rgba(128, 128, 128, 0.35)` | Color of the separator |
| Name | Default | Description |
| :------------------- | :-------------------------- | :----------------------------- |
| `--focus-border` | `#007fd4` | Color of the sash when hovered |
| `--separator-border` | `rgba(128, 128, 128, 0.35)` | Color of the separator |

For more involved styling you can target the component's child elements.

| Class | Description |
| :------------------------- | :------------------------------------------------------------- |
| `.split-view` | Styles applied to the top-level container |
| `.split-view-horizontal` | Styles applied to the top-level container if `vertical={false} |
| `.split-view-vertical` | Styles applied to the top-level container if `vertical={true} |
| `.sash-container` | Styles applied to the sash container |
| `.sash` | Styles applied to the sash |
| `.sash-active` | Styles applied to the sash if being dragged |
| `.sash-disabled` | Styles applied to the sash if disabled |
| `.sash-horizontal` | Styles applied to the sash if vertical={false}` |
| `.sash-hover` | Styles applied to the sash if being hovered over |
| `.sash-mac` | Styles applied to the sash if running under macos |
| `.sash-maximum` | Styles applied to the sash if the pane is maximised |
| `.sash-minimum` | Styles applied to the sash if the pane is minimised |
| `.sash-vertical` | Styles applied to the sash if vertical={true}` |
| `.split-view-container` | Styles applied to the split view container |
| `.split-view-view` | Styles applied to the split view view |
| `.split-view-view-visible` | Styles applied to the split view view if `visible={true}` |
| Class | Description |
| :----------------------------- | :------------------------------------------------------------- |
| `.split-view` | Styles applied to the top-level container |
| `.split-view-horizontal` | Styles applied to the top-level container if `vertical={false} |
| `.split-view-vertical` | Styles applied to the top-level container if `vertical={true} |
| `.split-view-separator-border` | Styles applied to the top-level container if `separator={true} |
| `.sash-container` | Styles applied to the sash container |
| `.sash` | Styles applied to the sash |
| `.sash-active` | Styles applied to the sash if being dragged |
| `.sash-disabled` | Styles applied to the sash if disabled |
| `.sash-horizontal` | Styles applied to the sash if vertical={false}` |
| `.sash-hover` | Styles applied to the sash if being hovered over |
| `.sash-mac` | Styles applied to the sash if running under macos |
| `.sash-maximum` | Styles applied to the sash if the pane is maximised |
| `.sash-minimum` | Styles applied to the sash if the pane is minimised |
| `.sash-vertical` | Styles applied to the sash if vertical={true}` |
| `.split-view-container` | Styles applied to the split view container |
| `.split-view-view` | Styles applied to the split view view |
| `.split-view-view-visible` | Styles applied to the split view view if `visible={true}` |
1 change: 1 addition & 0 deletions src/allotment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -463,6 +463,7 @@ const Allotment = forwardRef<AllotmentHandle, AllotmentProps>(
className={classNames(
"split-view",
vertical ? "split-view-vertical" : "split-view-horizontal",
{ "split-view-separator-border": separator },
styles.splitView,
vertical ? styles.vertical : styles.horizontal,
{ [styles.separatorBorder]: separator },
Expand Down
40 changes: 18 additions & 22 deletions website/docs/styling.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,28 +9,24 @@ Some common style changes can be made by setting CSS variables.

These include:

| Name | Default | Description |
| :-------------------- | :-------------------------- | :----------------------------- |
| `--focus-border` | `#007fd4` | Color of the sash when hovered |
| ` --separator-border` | `rgba(128, 128, 128, 0.35)` | Color of the separator |
| Name | Default | Description |
| :------------------- | :-------------------------- | :----------------------------- |
| `--focus-border` | `#007fd4` | Color of the sash when hovered |
| `--separator-border` | `rgba(128, 128, 128, 0.35)` | Color of the separator |

For more involved styling you can target the component's child elements.

| Class | Description |
| :------------------------- | :------------------------------------------------------------- |
| `.split-view` | Styles applied to the top-level container |
| `.split-view-horizontal` | Styles applied to the top-level container if `vertical={false} |
| `.split-view-vertical` | Styles applied to the top-level container if `vertical={true} |
| `.sash-container` | Styles applied to the sash container |
| `.sash` | Styles applied to the sash |
| `.sash-active` | Styles applied to the sash if being dragged |
| `.sash-disabled` | Styles applied to the sash if disabled |
| `.sash-horizontal` | Styles applied to the sash if vertical={false}` |
| `.sash-hover` | Styles applied to the sash if being hovered over |
| `.sash-mac` | Styles applied to the sash if running under macos |
| `.sash-maximum` | Styles applied to the sash if the pane is maximised |
| `.sash-minimum` | Styles applied to the sash if the pane is minimised |
| `.sash-vertical` | Styles applied to the sash if vertical={true}` |
| `.split-view-container` | Styles applied to the split view container |
| `.split-view-view` | Styles applied to the split view view |
| `.split-view-view-visible` | Styles applied to the split view view if `visible={true}` |
| Class | Description |
| :----------------------------- | :------------------------------------------------------------- | --- | ------------- | ------------------------------------------------ | --- | ----------- | ------------------------------------------------- | --- | --------------- | --------------------------------------------------- | --- | --------------- | --------------------------------------------------- | --- | ---------------- | ---------------------------------------------- |
| `.split-view` | Styles applied to the top-level container |
| `.split-view-horizontal` | Styles applied to the top-level container if `vertical={false} |
| `.split-view-vertical` | Styles applied to the top-level container if `vertical={true} |
| `.split-view-separator-border` | Styles applied to the top-level container if `separator={true} |
| `.sash-container` | Styles applied to the sash container |
| `.sash` | Styles applied to the sash |
| `.sash-active` | Styles applied to the sash if being dragged |
| `.sash-disabled` | Styles applied to the sash if disabled |
| `.sash-horizontal` | Styles applied to the sash if vertical={false}` | | `.sash-hover` | Styles applied to the sash if being hovered over | | `.sash-mac` | Styles applied to the sash if running under macos | | `.sash-maximum` | Styles applied to the sash if the pane is maximised | | `.sash-minimum` | Styles applied to the sash if the pane is minimised | | `.sash-vertical` | Styles applied to the sash if vertical={true}` |
| `.split-view-container` | Styles applied to the split view container |
| `.split-view-view` | Styles applied to the split view view |
| `.split-view-view-visible` | Styles applied to the split view view if `visible={true}` |

0 comments on commit 8843ff4

Please sign in to comment.