javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(split-pane): sizing via scss variables

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/split-pane/split-pane.ios.scss
View File

@ -4,11 +4,18 @@
// Split Pane // 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-border: $hairlines-width solid $list-ios-border-color;
.split-pane-ios.split-pane-visible >.split-pane-side { .split-pane-ios.split-pane-visible >.split-pane-side {
min-width: 270px; min-width: $split-pane-ios-side-min-width;
max-width: 28%; max-width: $split-pane-ios-side-max-width;
border-right: $split-pane-ios-border; border-right: $split-pane-ios-border;
border-left: 0; border-left: 0;

11
src/components/split-pane/split-pane.md.scss
View File

@ -4,11 +4,18 @@
// Split Pane // 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-border: 1px solid $list-md-border-color;
.split-pane-md.split-pane-visible >.split-pane-side { .split-pane-md.split-pane-visible >.split-pane-side {
min-width: 270px; min-width: $split-pane-md-side-min-width;
max-width: 28%; max-width: $split-pane-md-side-max-width;
border-right: $split-pane-md-border; border-right: $split-pane-md-border;
border-left: 0; border-left: 0;

3
src/components/split-pane/split-pane.scss
View File

@ -4,6 +4,9 @@
// Split Pane // Split Pane
// -------------------------------------------------- // --------------------------------------------------
$split-pane-side-min-width: 270px !default;
$split-pane-side-max-width: 28% !default;
.split-pane { .split-pane {
position: absolute; position: absolute;
top: 0; top: 0;

11
src/components/split-pane/split-pane.wp.scss
View File

@ -4,11 +4,18 @@
// Split Pane // 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-border: 1px solid $list-wp-border-color;
.split-pane-wp.split-pane-visible >.split-pane-side { .split-pane-wp.split-pane-visible >.split-pane-side {
min-width: 270px; min-width: $split-pane-wp-side-min-width;
max-width: 28%; max-width: $split-pane-wp-side-max-width;
border-right: $split-pane-wp-border; border-right: $split-pane-wp-border;
border-left: 0; border-left: 0;