From 979ca63a6abc1550a30bded216d9ade16fd43a3a Mon Sep 17 00:00:00 2001
From: Manuel Mtz-Almeida <manu.valladolid@gmail.com>
Date: Sat, 1 Apr 2017 21:42:18 +0200
Subject: [PATCH] feat(split-pane): sizing via scss variables

fixes #10893
---
 src/components/split-pane/split-pane.ios.scss | 11 +++++++++--
 src/components/split-pane/split-pane.md.scss  | 11 +++++++++--
 src/components/split-pane/split-pane.scss     |  3 +++
 src/components/split-pane/split-pane.wp.scss  | 11 +++++++++--
 4 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/components/split-pane/split-pane.ios.scss b/src/components/split-pane/split-pane.ios.scss
index c12a5e673e6..b9cc68958c8 100644
--- a/src/components/split-pane/split-pane.ios.scss
+++ b/src/components/split-pane/split-pane.ios.scss
@@ -4,11 +4,18 @@
 // Split Pane
 // --------------------------------------------------
 
+/// @prop - Minimum width of the split-pane's side pane
+$split-pane-ios-side-min-width: $split-pane-side-min-width;
+
+/// @prop - Maximum width of the split-pane's side pane
+$split-pane-ios-side-max-width: $split-pane-side-max-width;
+
+/// @prop - Border style of the side pane
 $split-pane-ios-border: $hairlines-width solid $list-ios-border-color;
 
 .split-pane-ios.split-pane-visible >.split-pane-side {
-  min-width: 270px;
-  max-width: 28%;
+  min-width: $split-pane-ios-side-min-width;
+  max-width: $split-pane-ios-side-max-width;
 
   border-right: $split-pane-ios-border;
   border-left: 0;
diff --git a/src/components/split-pane/split-pane.md.scss b/src/components/split-pane/split-pane.md.scss
index 7d4cf0995d7..087e2e51883 100644
--- a/src/components/split-pane/split-pane.md.scss
+++ b/src/components/split-pane/split-pane.md.scss
@@ -4,11 +4,18 @@
 // Split Pane
 // --------------------------------------------------
 
+/// @prop - Minimum width of the split-pane's side pane
+$split-pane-md-side-min-width: $split-pane-side-min-width;
+
+/// @prop - Maximum width of the split-pane's side pane
+$split-pane-md-side-max-width: $split-pane-side-max-width;
+
+/// @prop - Border style of the side pane
 $split-pane-md-border: 1px solid $list-md-border-color;
 
 .split-pane-md.split-pane-visible >.split-pane-side {
-  min-width: 270px;
-  max-width: 28%;
+  min-width: $split-pane-md-side-min-width;
+  max-width: $split-pane-md-side-max-width;
 
   border-right: $split-pane-md-border;
   border-left: 0;
diff --git a/src/components/split-pane/split-pane.scss b/src/components/split-pane/split-pane.scss
index e0347b45485..6e17e1b7e70 100644
--- a/src/components/split-pane/split-pane.scss
+++ b/src/components/split-pane/split-pane.scss
@@ -4,6 +4,9 @@
 // Split Pane
 // --------------------------------------------------
 
+$split-pane-side-min-width: 270px !default;
+$split-pane-side-max-width: 28% !default;
+
 .split-pane {
   position: absolute;
   top: 0;
diff --git a/src/components/split-pane/split-pane.wp.scss b/src/components/split-pane/split-pane.wp.scss
index 52e461ab8d7..287a2d150f3 100644
--- a/src/components/split-pane/split-pane.wp.scss
+++ b/src/components/split-pane/split-pane.wp.scss
@@ -4,11 +4,18 @@
 // Split Pane
 // --------------------------------------------------
 
+/// @prop - Minimum width of the split-pane's side pane
+$split-pane-wp-side-min-width: $split-pane-side-min-width;
+
+/// @prop - Maximum width of the split-pane's side pane
+$split-pane-wp-side-max-width: $split-pane-side-max-width;
+
+/// @prop - Border style of the side pane
 $split-pane-wp-border: 1px solid $list-wp-border-color;
 
 .split-pane-wp.split-pane-visible >.split-pane-side {
-  min-width: 270px;
-  max-width: 28%;
+  min-width: $split-pane-wp-side-min-width;
+  max-width: $split-pane-wp-side-max-width;
 
   border-right: $split-pane-wp-border;
   border-left: 0;