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

fix(split-pane): add and document custom properties

Browse Source 
references #14850
This commit is contained in:
Cam Wiegert
2018-08-21 15:55:03 -05:00
parent 77ca2bdaf5
commit 9104850646
4 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/src/components/split-pane/readme.md
View File

@ -64,6 +64,13 @@ SplitPane also provides some predefined media queries that can be used.
| `isVisible` | Returns if the split pane is toggled or not | | `isVisible` | Returns if the split pane is toggled or not |
## CSS Custom Properties
| Name | Description |
| ---------- | -------------------- |
| `--border` | Border between panes |
---------------------------------------------- ----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)* *Built with [StencilJS](https://stenciljs.com/)*

9
core/src/components/split-pane/split-pane.ios.scss
View File

@ -1,15 +1,18 @@
@import "./split-pane"; @import "./split-pane";
@import "./split-pane.ios.vars"; @import "./split-pane.ios.vars";
// Split Pane // Split Pane
// -------------------------------------------------- // --------------------------------------------------
.split-pane-ios {
--border: #{$split-pane-ios-border};
}
.split-pane-ios.split-pane-visible > .split-pane-side { .split-pane-ios.split-pane-visible > .split-pane-side {
min-width: $split-pane-ios-side-min-width; min-width: $split-pane-ios-side-min-width;
max-width: $split-pane-ios-side-max-width; max-width: $split-pane-ios-side-max-width;
border-right: $split-pane-ios-border; border-right: var(--border);
border-left: 0; border-left: 0;
} }
@ -18,5 +21,5 @@
max-width: $split-pane-ios-side-max-width; max-width: $split-pane-ios-side-max-width;
border-right: 0; border-right: 0;
border-left: $split-pane-ios-border; border-left: var(--border);
} }

8
core/src/components/split-pane/split-pane.md.scss
View File

@ -4,11 +4,15 @@
// Split Pane // Split Pane
// -------------------------------------------------- // --------------------------------------------------
.split-pane-md {
--border: #{$split-pane-md-border};
}
.split-pane-md.split-pane-visible > .split-pane-side { .split-pane-md.split-pane-visible > .split-pane-side {
min-width: $split-pane-md-side-min-width; min-width: $split-pane-md-side-min-width;
max-width: $split-pane-md-side-max-width; max-width: $split-pane-md-side-max-width;
border-right: $split-pane-md-border; border-right: var(--border);
border-left: 0; border-left: 0;
} }
@ -17,5 +21,5 @@
max-width: $split-pane-md-side-max-width; max-width: $split-pane-md-side-max-width;
border-right: 0; border-right: 0;
border-left: $split-pane-md-border; border-left: var(--border);
} }

4
core/src/components/split-pane/split-pane.scss
View File

@ -4,6 +4,10 @@
// -------------------------------------------------- // --------------------------------------------------
.split-pane { .split-pane {
/**
* @prop --border: Border between panes
*/
@include position(0, 0, 0, 0); @include position(0, 0, 0, 0);
display: flex; display: flex;