javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

iOS lists

Browse Source
This commit is contained in:
Adam Bradley
2015-03-25 14:23:23 -05:00
parent 8a198c1029
commit 33d9589700
3 changed files with 73 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/item/extensions/ios/item-ios.scss
View File

@@ -28,17 +28,16 @@ $item-ios-border-color: $list-ios-border-color !default;
right: auto;
bottom: 0;
left: 0;
z-index: $z-index-list-border;
display: block;
width: 100%;
height: 1px;
@include transform-origin(50%, 0);
background-color: $item-ios-border-color;
display: block;
content: '';
z-index: $z-index-list-border;
}
}

2
src/components/item/test/item-ios-default/index.html
View File

@@ -1,4 +1,4 @@
<div class="pane">
<div class="pane" style="background: #efeff4">
<div class="pane-container">

103
src/components/list/extensions/ios/list-ios.scss
View File

@@ -2,43 +2,80 @@
// iOS List
// --------------------------------------------------
$list-ios-border-color: #c8c7cc !default;
$list-ios-background-color: #fff !default;
$list-ios-border-color: #c8c7cc !default;
$list-ios-header-margin: 35px 15px 10px 15px !default;
$list-ios-header-font-size: 14px !default;
$list-ios-header-color: #6d6d72 !default;
$list-ios-footer-margin: 10px 0 35px 0 !default;
$list-ios-footer-padding: 0 15px !default;
$list-ios-footer-font-size: 14px !default;
$list-ios-footer-color: #8f8f94 !default;
.list-ios .list-content:before {
position: absolute;
top: 0;
right: auto;
bottom: auto;
left: 0;
.list-ios {
width: 100%;
height: 1px;
@include transform-origin(50%, 0);
.list-content {
background: $list-ios-background-color;
}
background-color: $list-ios-border-color;
display: block;
.list-content:before {
position: absolute;
top: 0;
right: auto;
bottom: auto;
left: 0;
z-index: $z-index-list-border;
display: block;
content: '';
width: 100%;
height: 1px;
@include transform-origin(50%, 0);
background-color: $list-ios-border-color;
content: '';
}
.list-content:after {
position: absolute;
top: auto;
right: auto;
bottom: 0;
left: 0;
z-index: $z-index-list-border;
display: block;
width: 100%;
height: 1px;
@include transform-origin(50%, 0);
background-color: $list-ios-border-color;
content: '';
}
.list-header {
position: relative;
margin: $list-ios-header-margin;
font-size: $list-ios-header-font-size;
text-transform: uppercase;
color: $list-ios-header-color;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.list-footer {
margin: $list-ios-footer-margin;
padding: $list-ios-footer-padding;
font-size: $list-ios-footer-font-size;
color: $list-ios-footer-color;
}
z-index: $z-index-list-border;
}
.list-ios .list-content:after {
position: absolute;
top: auto;
right: auto;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
@include transform-origin(50%, 0);
background-color: $list-ios-border-color;
display: block;
content: '';
z-index: $z-index-list-border;
}