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

list headers/footers

Browse Source
This commit is contained in:
Adam Bradley
2015-07-27 08:31:34 -05:00
parent 84d7f72887
commit d2b730c5e3
9 changed files with 117 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
ionic/components/form/form.scss
View File

@ -19,11 +19,6 @@ textarea {
// Form Controls
// -------------------------------
textarea {
height: auto;
padding: 0;
}
.item-input {
// text inputs
@ -65,6 +60,15 @@ textarea {
}
}
textarea {
height: auto;
padding: 0;
}
.platform-mobile textarea {
resize: none;
}
// Placeholder
// -------------------------------
@ -92,9 +96,3 @@ input[type="checkbox"][readonly] {
background-color: transparent;
}
.platform-ios,
.platform-android {
textarea {
resize: none;
}
}

13
ionic/components/item/extensions/ios.scss
View File

@ -2,6 +2,7 @@
// iOS Item
// --------------------------------------------------
$item-ios-border-color: #c8c7cc !default;
$item-ios-font-size: 1.6rem !default;
$item-ios-padding-top: 13px !default;
@ -9,9 +10,9 @@ $item-ios-padding-right: 15px !default;
$item-ios-padding-bottom: 14px !default;
$item-ios-padding-left: 15px !default;
$item-ios-border-color: $list-ios-border-color !default;
$item-ios-avatar-size: 4rem;
$item-ios-thumbnail-size: 8rem;
$item-ios-avatar-size: 4rem !default;
$item-ios-thumbnail-size: 8rem !default;
$item-ios-note-color: #999 !default;
.list[mode="ios"] {
@ -37,10 +38,6 @@ $item-ios-thumbnail-size: 8rem;
left: $item-ios-padding-left;
border-top: 1px solid $item-ios-border-color;
}
&:last-child:after {
left: 0;
}
}
.text-input,
@ -52,7 +49,7 @@ $item-ios-thumbnail-size: 8rem;
}
.item-note {
color: #999;
color: $item-ios-note-color;
}
.item > icon {

25
ionic/components/list/extensions/ios.scss
View File

@ -2,38 +2,29 @@
// iOS List
// --------------------------------------------------
$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: 1.4rem !default;
$list-ios-header-padding: 30px $item-ios-padding-right 10px $item-ios-padding-left !default;
$list-ios-header-font-size: 1.2rem !default;
$list-ios-header-color: #6d6d72 !default;
$list-ios-footer-padding: 0 15px !default;
$list-ios-footer-font-size: 1.4rem !default;
$list-ios-footer-padding: 10px $item-ios-padding-right 0 $item-ios-padding-left !default;
$list-ios-footer-font-size: 1.2rem !default;
$list-ios-footer-color: #8f8f94 !default;
.list[mode="ios"] {
/*
.list-header {
position: relative;
margin: $list-ios-header-margin;
.list-header {
padding: $list-ios-header-padding;
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 {
padding: $list-ios-footer-padding;
font-size: $list-ios-footer-font-size;
text-transform: uppercase;
color: $list-ios-footer-color;
}
*/
}

36
ionic/components/list/list.scss
View File

@ -10,41 +10,9 @@
list-style-type: none;
}
/*
.list-header {
margin-top: $list-margin-top;
margin-bottom: $list-margin-bottom;
.list-header,
.list-footer {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.list {
position: relative;
display: block;
margin: $list-margin-top 0;
padding: 0;
// TODO: Verify if we need this, it makes margin sizing (inset, etc.) not
// work and is not present in v1
//width: 100%;
list-style-type: none;
&[inset],
&.list-inset {
margin-top: 0;
margin-left: -$content-padding;
margin-right: -$content-padding;
}
}
.list + .list-footer {
margin: ($list-margin-bottom - $list-margin-top) 0 $list-margin-bottom;
}
.list-header + .list {
margin-top: 0;
}
*/

1
ionic/components/list/test/headers-footers/e2e.ts Normal file
View File

@ -0,0 +1 @@

7
ionic/components/list/test/headers-footers/index.ts Normal file
View File

@ -0,0 +1,7 @@
import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class IonicApp {}

83
ionic/components/list/test/headers-footers/main.html Normal file
View File

@ -0,0 +1,83 @@
<ion-toolbar><ion-title>List Headers/Footers</ion-title></ion-toolbar>
<ion-list>
<div class="list-header">
List Header
</div>
<div class="item">
<icon name="ion-wifi"></icon>
<div class="item-content">
Wifi
</div>
<div class="item-note">
Terrible
</div>
</div>
<div class="item">
<icon name="ion-heart"></icon>
<div class="item-content">
Affection
</div>
<div class="item-note">
Very Little
</div>
</div>
</ion-list>
<ion-list>
<div class="list-header">
List Header
</div>
<div class="item">
<icon name="ion-wand"></icon>
<div class="item-content">
Magic
</div>
<div class="item-note">
Activated
</div>
</div>
<div class="list-footer">
List Footer
</div>
</ion-list>
<ion-list>
<div class="list-header">
List Header with text that is too long to fit inside the list header
</div>
<div class="item">
<icon name="ion-pizza"></icon>
<div class="item-content">
Pizza
</div>
<div class="item-note">
Always
</div>
</div>
<div class="item">
<icon name="ion-beer"></icon>
<div class="item-content">
Beer
</div>
<div class="item-note">
Yes Plz
</div>
</div>
<div class="list-footer">
List Footer with text that is also too long why do you do this all the time plz stop its too long!
</div>
</ion-list>

2
ionic/components/search-bar/extensions/ios.scss
View File

@ -3,7 +3,7 @@
// --------------------------------------------------
$search-bar-ios-background-color: #c9c9ce !default;
$search-bar-ios-border-color: $list-ios-border-color !default;
$search-bar-ios-border-color: $item-ios-border-color !default;
$search-bar-ios-padding: 0 8px !default;
$search-bar-ios-input-height: 28px !default;
$search-bar-ios-background-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='#939398' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='#939398' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;

2
ionic/ionic.scss
View File

@ -49,13 +49,13 @@
// iOS Components
@import
"components/item/extensions/ios",
"components/toolbar/extensions/ios",
"components/action-menu/extensions/ios",
"components/card/extensions/ios",
"components/checkbox/extensions/ios",
"components/content/extensions/ios",
"components/list/extensions/ios",
"components/item/extensions/ios",
"components/nav-bar/extensions/ios",
"components/popup/extensions/ios",
"components/radio/extensions/ios",