feat(split-pane): sizing via scss variables

fixes #10893
This commit is contained in:
Manuel Mtz-Almeida
2017-04-01 21:42:18 +02:00
parent 57f3f9742b
commit 979ca63a6a
4 changed files with 30 additions and 6 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;