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

Merge branch 'master' into alpha38

Browse Source
This commit is contained in:
Adam Bradley
2015-10-05 20:16:20 -05:00
parent 70810bab38 26d7fd89d2
commit 04ac079cbc
12 changed files with 82 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
ionic/components/item/modes/ios.scss
View File

@ -26,6 +26,7 @@ $item-ios-divider-bg: #f5f5f5 !default;
$item-ios-divider-color: #222 !default;
$item-ios-divider-padding: 5px 15px !default;
.item-group-title {
padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
background-color: $item-ios-divider-bg;
@ -34,8 +35,6 @@ $item-ios-divider-padding: 5px 15px !default;
.list {
.item-group {
// Make sure the first and last items don't have borders
> .item:first-of-type:before {
@ -78,7 +77,7 @@ $item-ios-divider-padding: 5px 15px !default;
}
}
ion-header + .item:before {
ion-header + .item:first-of-type:before {
left: 0;
}

16
ionic/components/list/modes/ios.scss
View File

@ -24,16 +24,32 @@ $list-ios-header-color: #333 !default;
margin: 0 $list-ios-margin-right $list-ios-margin-bottom $list-ios-margin-left;
ion-header {
position: relative;
padding: $list-ios-header-padding;
font-size: $list-ios-header-font-size;
font-weight: $list-ios-header-font-weight;
letter-spacing: $list-ios-header-letter-spacing;
text-transform: uppercase;
color: $list-ios-header-color;
&:after {
position: absolute;
z-index: 1;
right: 0;
bottom: 0;
left: 0;
border-top: 1px solid $item-ios-border-color;
content: '';
pointer-events: none;
}
}
}
&.hairlines .list ion-header:after {
border-top-width: 0.55px;
}
.list + .list {
margin-top: $list-ios-margin-top + $list-ios-margin-bottom;
}

15
ionic/components/list/test/repeat-headers/index.ts Normal file
View File

@ -0,0 +1,15 @@
import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class IonicApp {
constructor() {
this.people = [
{"name": "Adam Bradley", "components": [ "app", "badge", "button", "card"]},
{"name": "Max Lynch", "components": [ "checkbox", "content", "form"]},
{"name": "Tim Lancina", "components": [ "tabs"]}
];
}
}

16
ionic/components/list/test/repeat-headers/main.html Normal file
View File

@ -0,0 +1,16 @@
<ion-toolbar><ion-title>List Headers Borders</ion-title></ion-toolbar>
<ion-content>
<ion-list class="outer-content" *ng-for="#person of people">
<ion-header>
{{person.name}}
</ion-header>
<ion-item *ng-for="#component of person.components">
<span>{{component}}</span>
<div item-right>
<icon pin></icon>
</div>
</ion-item>
</ion-list>
</ion-content>

46
ionic/components/search-bar/modes/ios.scss
View File

@ -8,9 +8,16 @@ $search-bar-ios-padding: 0 8px !default;
$search-bar-ios-input-height: 28px !default;
$search-bar-ios-input-text-color: #9D9D9D !default;
$search-bar-ios-input-background-color: #FFFFFF !default;
$search-bar-ios-input-icon-color: #767676 !default;
$search-bar-ios-input-background-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='" + $search-bar-ios-input-icon-color + "' 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;
$search-bar-ios-background-size: 13px 13px !default;
$search-bar-ios-input-transition: all 0.3s cubic-bezier(.25, .45, .05, 1) !default;
$search-bar-ios-input-search-icon-color: #767676 !default;
$search-bar-ios-input-search-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='" + $search-bar-ios-input-search-icon-color + "' 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='" + $search-bar-ios-input-search-icon-color + "' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
$search-bar-ios-input-search-icon-size: 13px !default;
$search-bar-ios-input-close-icon-color: #8F8E94 !default;
$search-bar-ios-input-close-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $search-bar-ios-input-close-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
$search-bar-ios-input-close-icon-size: 17px !default;
.search-bar {
padding: $search-bar-ios-padding;
@ -18,14 +25,15 @@ $search-bar-ios-background-size: 13px 13px !default;
border-bottom: 1px solid $search-bar-ios-border-color;
}
.search-bar-icon {
width: 100%;
height: 13px;
.search-bar-search-icon {
width: $search-bar-ios-input-search-icon-size + 1;
height: $search-bar-ios-input-search-icon-size + 1;
transform: translateX(calc(50% - 60px));
transform: translateX(calc(50% + 90px));
transition: $search-bar-ios-input-transition;
@include svg-background-image($search-bar-ios-input-background-svg);
background-size: $search-bar-ios-background-size;
@include svg-background-image($search-bar-ios-input-search-icon-svg);
background-size: $search-bar-ios-input-search-icon-size;
background-repeat: no-repeat;
position: absolute;
left: 10px;
@ -45,21 +53,31 @@ $search-bar-ios-background-size: 13px 13px !default;
background-repeat: no-repeat;
background-position: 8px center;
transition: $search-bar-ios-input-transition;
@include calc(padding-left, "50% - 28px");
}
.search-bar-close-icon {
width: $search-bar-ios-input-close-icon-size;
height: $search-bar-ios-input-close-icon-size;
@include svg-background-image($search-bar-ios-input-close-icon-svg);
background-size: $search-bar-ios-input-close-icon-size;
background-repeat: no-repeat;
position: absolute;
right: 10px;
top: 6px;
}
.search-bar-input-container.left-align {
.search-bar-icon {
.search-bar-search-icon {
transform: translateX(0);
-webkit-transition: all 0.3s cubic-bezier(.25, .45, .05, 1);
-moz-transition: all 0.3s cubic-bezier(.25, .45, .05, 1);
transition: $search-bar-ios-input-transition;
}
.search-bar-input {
padding-left: 28px;
-webkit-transition: all 0.3s cubic-bezier(.25, .45, .05, 1);
-moz-transition: all 0.3s cubic-bezier(.25, .45, .05, 1);
transition: $search-bar-ios-input-transition;
}
}

2
ionic/components/search-bar/search-bar.ts
View File

@ -23,7 +23,7 @@ import {IonicComponent, IonicView} from '../../config/decorators';
@IonicView({
template: `
<div class="search-bar-input-container" [class.left-align]="shouldLeftAlign">
<div class="search-bar-icon"></div>
<div class="search-bar-search-icon"></div>
<input (focus)="inputFocused()" (blur)="inputBlurred()"
(input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder">
<div class="search-bar-close-icon"></div>

1
ionic/components/tabs/test/tab-bar-bottom/e2e.ts
View File

@ -1 +0,0 @@

7
ionic/components/tabs/test/tab-bar-bottom/index.ts
View File

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

17
ionic/components/tabs/test/tab-bar-bottom/main.html
View File

@ -1,17 +0,0 @@
<nav-bar></nav-bar>
<ion-tabs tab-bar-placement="bottom">
<ion-tab tab-title="Tab 1">
<ion-content padding>
Tab 1 Content
</ion-content>
</ion-tab>
<ion-tab tab-title="Tab 2">
<ion-content padding>
Tab 2 Content
</ion-content>
</ion-tab>
</ion-tabs>

1
ionic/components/tabs/test/tab-bar-top/e2e.ts
View File

@ -1 +0,0 @@

7
ionic/components/tabs/test/tab-bar-top/index.ts
View File

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

21
ionic/components/tabs/test/tab-bar-top/main.html
View File

@ -1,21 +0,0 @@
<ion-tabs tab-bar-placement="top">
<ion-tab tab-title="Tab 1">
<ion-view nav-title="Tab 1">
<ion-content padding>
Tab 1 Content
</ion-content>
</ion-view>
</ion-tab>
<ion-tab tab-title="Tab 2">
<ion-view nav-title="Tab 2">
<ion-content padding>
Tab 2 Content
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>