fix(split-pane): add and document custom properties

references #14850

core/src/components/split-pane/readme.md

@@ -64,6 +64,13 @@ SplitPane also provides some predefined media queries that can be used.
 | `isVisible` | Returns if the split pane is toggled or not |
 
 
+## CSS Custom Properties
+
+| Name       | Description          |
+| ---------- | -------------------- |
+| `--border` | Border between panes |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

core/src/components/split-pane/split-pane.ios.scss

@@ -1,15 +1,18 @@
-
 @import "./split-pane";
 @import "./split-pane.ios.vars";
 
 // Split Pane
 // --------------------------------------------------
 
+.split-pane-ios {
+  --border: #{$split-pane-ios-border};
+}
+
 .split-pane-ios.split-pane-visible > .split-pane-side {
   min-width: $split-pane-ios-side-min-width;
   max-width: $split-pane-ios-side-max-width;
 
-  border-right: $split-pane-ios-border;
+  border-right: var(--border);
   border-left: 0;
 }
 
@@ -18,5 +21,5 @@
   max-width: $split-pane-ios-side-max-width;
 
   border-right: 0;
-  border-left: $split-pane-ios-border;
+  border-left: var(--border);
 }

core/src/components/split-pane/split-pane.md.scss

@@ -4,11 +4,15 @@
 // Split Pane
 // --------------------------------------------------
 
+.split-pane-md {
+  --border: #{$split-pane-md-border};
+}
+
 .split-pane-md.split-pane-visible > .split-pane-side {
   min-width: $split-pane-md-side-min-width;
   max-width: $split-pane-md-side-max-width;
 
-  border-right: $split-pane-md-border;
+  border-right: var(--border);
   border-left: 0;
 }
 
@@ -17,5 +21,5 @@
   max-width: $split-pane-md-side-max-width;
 
   border-right: 0;
-  border-left: $split-pane-md-border;
+  border-left: var(--border);
 }

core/src/components/split-pane/split-pane.scss

@@ -4,6 +4,10 @@
 // --------------------------------------------------
 
 .split-pane {
+  /**
+   * @prop --border: Border between panes
+   */
+
   @include position(0, 0, 0, 0);
 
   display: flex;