From 9104850646294a3c2e7f4a2c25ef8f9e788b9b1e Mon Sep 17 00:00:00 2001
From: Cam Wiegert <cam@camwiegert.com>
Date: Tue, 21 Aug 2018 15:55:03 -0500
Subject: [PATCH] fix(split-pane): add and document custom properties

references #14850
---
 core/src/components/split-pane/readme.md           | 7 +++++++
 core/src/components/split-pane/split-pane.ios.scss | 9 ++++++---
 core/src/components/split-pane/split-pane.md.scss  | 8 ++++++--
 core/src/components/split-pane/split-pane.scss     | 4 ++++
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/core/src/components/split-pane/readme.md b/core/src/components/split-pane/readme.md
index c8403abc64..8c2c1426cf 100644
--- a/core/src/components/split-pane/readme.md
+++ b/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/)*
diff --git a/core/src/components/split-pane/split-pane.ios.scss b/core/src/components/split-pane/split-pane.ios.scss
index 6d5d273611..819988fa75 100644
--- a/core/src/components/split-pane/split-pane.ios.scss
+++ b/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);
 }
diff --git a/core/src/components/split-pane/split-pane.md.scss b/core/src/components/split-pane/split-pane.md.scss
index 49121cf37b..d10d0936b8 100644
--- a/core/src/components/split-pane/split-pane.md.scss
+++ b/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);
 }
diff --git a/core/src/components/split-pane/split-pane.scss b/core/src/components/split-pane/split-pane.scss
index fbaf9a977d..df991481ea 100644
--- a/core/src/components/split-pane/split-pane.scss
+++ b/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;