feat(split-pane): sizing via scss variables

fixes #10893

Author: manucorporat

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;

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;

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;

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;