feat(split-pane): sizing via scss variables

fixes #10893
ionic-team · Apr 1, 2017 · 979ca63 · 979ca63
1 parent 57f3f97
commit 979ca63
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;