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

Merge branch 'list-border-refactor'

Browse Source
This commit is contained in:
Brandy Carney
2015-11-16 20:12:53 -05:00
parent fb3fb887df cd365a60b3
commit f11ca076da
17 changed files with 381 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ionic/components/card/card.scss
View File

@ -22,3 +22,15 @@ ion-card-header {
ion-card-content {
display: block;
}
ion-card {
> .list:first-child {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
> .list:last-child {
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
}

49
ionic/components/card/modes/ios.scss
View File

@ -50,16 +50,19 @@ ion-card {
ion-item-content {
padding: 0;
}
> .item:last-child,
> ion-item-sliding:last-child .item {
border-bottom: none;
}
}
.item {
padding-left: ($card-ios-padding-left / 2);
padding-right: ($card-ios-padding-right / 2);
font-size: $item-ios-font-size;
padding-left: $card-ios-padding-left / 2;
}
ion-item-content {
padding: $card-ios-padding-top ($card-ios-padding-right / 2) $card-ios-padding-bottom ($card-ios-padding-left / 2);
.item-inner {
border: none;
}
ion-card-content {
@ -89,28 +92,13 @@ ion-card {
button,
[button] {
margin: $item-ios-padding-icon-top ($item-ios-padding-right / 2) $item-ios-padding-icon-bottom ($item-ios-padding-left / 2);
margin: 0 ($item-ios-padding-right / 2);
padding: 2px 6px;
min-height: 26px;
font-size: 1.3rem;
}
}
[item-left],
[item-right] {
margin: $card-ios-padding-media-top ($card-ios-padding-right / 2) $card-ios-padding-media-bottom ($card-ios-padding-left / 2);
}
button[item-left],
button[item-right],
[button][item-left],
[button][item-right], {
margin: $item-ios-padding-icon-top ($item-ios-padding-right / 2) $item-ios-padding-icon-bottom ($item-ios-padding-left / 2);
padding: 2px 6px;
min-height: 26px;
font-size: 1.3rem;
}
ion-note[item-left],
ion-note[item-right], {
font-size: 1.3rem;
@ -122,25 +110,6 @@ ion-card {
color: $card-ios-title-text-color;
}
ion-avatar {
min-width: $item-ios-avatar-size;
img {
max-width: $item-ios-avatar-size;
max-height: $item-ios-avatar-size;
border-radius: $item-ios-avatar-size / 2;
}
}
ion-thumbnail {
min-width: $item-ios-thumbnail-size;
img {
max-width: $item-ios-thumbnail-size;
max-height: $item-ios-thumbnail-size;
}
}
h1 {
margin: 0 0 2px;
font-size: 2.4rem;

45
ionic/components/card/modes/md.scss
View File

@ -49,16 +49,19 @@ ion-card {
ion-item-content {
padding: 0;
}
> .item:last-child,
> ion-item-sliding:last-child .item {
border-bottom: none;
}
}
.item {
padding-right: ($card-md-padding-right / 2);
padding-left: ($card-md-padding-left / 2);
font-size: $item-md-font-size;
}
ion-item-content {
padding: $card-md-padding-top ($card-md-padding-right / 2) $card-md-padding-bottom ($card-md-padding-left / 2);
.item-inner {
border: none;
}
ion-card-content {
@ -88,21 +91,6 @@ ion-card {
}
}
[item-left],
[item-right] {
margin: $card-md-padding-media-top ($card-md-padding-right / 2) $card-md-padding-media-bottom ($card-md-padding-left / 2);
}
button[item-left],
button[item-right],
[button][item-left],
[button][item-right], {
margin: 0 ($card-md-padding-right / 4) 0 ($card-md-padding-left / 4);
min-height: 26px;
font-size: 1.3rem;
border-color: transparent;
}
ion-note[item-left],
ion-note[item-right], {
font-size: 1.3rem;
@ -114,25 +102,6 @@ ion-card {
color: $card-md-title-text-color;
}
ion-avatar {
min-width: $card-md-avatar-size;
img {
max-width: $card-md-avatar-size;
max-height: $card-md-avatar-size;
border-radius: $card-md-avatar-size / 2;
}
}
ion-thumbnail {
min-width: $card-md-thumbnail-size;
img {
max-width: $card-md-thumbnail-size;
max-height: $card-md-thumbnail-size;
}
}
h1 {
margin: 0 0 2px;
font-size: 2.4rem;

2
ionic/components/item/item.scss
View File

@ -55,7 +55,7 @@
}
a.item,
button.item.item {
button.item {
margin: 0;
padding: 0;
width: 100%;

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

@ -30,18 +30,11 @@ $item-ios-sliding-content-bg: $background-color !default;
$item-ios-sliding-transition: transform 250ms ease-in-out !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;
color: $item-ios-divider-color;
}
ion-note {
color: $item-ios-note-color;
}
.item-group {
ion-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;
color: $item-ios-divider-color;
border-bottom: 1px solid $item-ios-border-color;
}
@ -52,6 +45,16 @@ ion-note {
}
}
ion-note {
color: $item-ios-note-color;
}
.item {
border-radius: 0;
padding-left: $item-ios-padding-left;
font-size: $item-ios-font-size;
}
.item.activated,
a.item.activated,
button.item.activated {
@ -64,3 +67,106 @@ a.item,
button.item {
transition-duration: 200ms;
}
.item-inner {
padding-right: ($item-ios-padding-right / 2);
border-bottom: 1px solid $item-ios-border-color;
}
ion-item-content {
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
}
[item-left] {
margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) 0;
}
[item-right] {
margin: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2);
}
icon[item-left],
icon[item-right] {
margin-top: $item-ios-padding-icon-top;
margin-bottom: $item-ios-padding-icon-bottom;
}
ion-avatar[item-left],
ion-thumbnail[item-left] {
margin: ($item-ios-padding-right / 2) $item-ios-padding-right ($item-ios-padding-right / 2) 0;
}
ion-avatar[item-right],
ion-thumbnail[item-right] {
margin: ($item-ios-padding-right / 2);
}
button[item-left],
button[item-right],
[button][item-left],
[button][item-right] {
padding: 0 0.5em;
font-size: 1.3rem;
min-height: 25px;
margin-top: 9px;
}
[item-left].icon-only,
[item-right].icon-only,
[item-left].icon-only icon,
[item-right].icon-only icon,
[item-left][clear],
[item-right][clear] {
padding: 0 1px;
}
[item-left].icon-left icon,
[item-right].icon-left icon {
margin-left: 0;
margin-bottom: 1px;
padding-right: 0.3em;
}
[item-left].icon-right icon,
[item-right].icon-right icon {
margin-right: 0;
margin-bottom: 1px;
}
ion-avatar {
min-width: $item-ios-avatar-size;
min-height: $item-ios-avatar-size;
img {
max-width: $item-ios-avatar-size;
max-height: $item-ios-avatar-size;
border-radius: $item-ios-avatar-size / 2;
}
}
ion-thumbnail {
min-width: $item-ios-thumbnail-size;
min-height: $item-ios-thumbnail-size;
img {
max-width: $item-ios-thumbnail-size;
max-height: $item-ios-thumbnail-size;
}
}
button.item:not([detail-none]) .item-inner,
a.item:not([detail-none]) .item-inner,
.item[detail-push] .item-inner {
@include ios-detail-push-icon($item-ios-detail-push-color);
background-repeat: no-repeat;
background-position: right ($item-ios-padding-right - 2) center;
background-size: 14px 14px;
padding-right: 32px;
}
&.hairlines {
.item-inner,
.item-group ion-item-group-title {
border-bottom-width: 0.55px;
}
}

132
ionic/components/item/modes/md.scss
View File

@ -42,6 +42,138 @@ ion-note {
color: $item-md-note-color;
}
.item {
padding-right: 0;
padding-left: ($item-md-padding-left);
font-size: $item-md-font-size;
text-transform: none;
font-weight: normal;
box-shadow: none;
h1 {
margin: 0 0 2px;
font-size: 2.4rem;
font-weight: normal;
}
h2 {
margin: 2px 0 2px;
font-size: 1.6rem;
font-weight: normal;
}
h3,
h4,
h5,
h6 {
line-height: normal;
margin: 2px 0 2px;
font-size: 1.4rem;
font-weight: normal;
}
p {
line-height: normal;
color: #666;
font-size: 1.4rem;
margin: 0 0 2px;
}
}
.item-inner {
border-bottom: 1px solid $item-md-border-color;
padding-right: ($item-md-padding-right / 2);
}
ion-item-content {
margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0;
}
button.item.activated {
box-shadow: none;
}
[item-left],
[item-right] {
margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom 0;
}
icon[item-left],
icon[item-right] {
margin-top: $item-md-padding-icon-top;
margin-left: 0;
margin-bottom: $item-md-padding-icon-bottom;
}
button[item-left],
button[item-right],
[button][item-left],
[button][item-right] {
padding: 0 0.6em;
min-height: 26px;
font-size: 1.2rem;
}
[item-left].icon-only,
[item-right].icon-only,
[item-left].icon-only icon,
[item-right].icon-only icon {
padding: 0 1px;
}
[item-left][clear],
[item-right][clear] {
padding: 0 8px;
}
[item-left].icon-left icon,
[item-right].icon-left icon {
margin-left: 0;
margin-bottom: 1px;
padding-right: 0.3em;
}
[item-left].icon-right icon,
[item-right].icon-right icon {
margin-right: 0;
margin-bottom: 1px;
}
[text-wrap] ion-item-content {
font-size: $item-md-body-text-font-size;
line-height: $item-md-body-text-line-height;
}
.item[actions] ion-item-content {
margin: 4px;
}
icon[item-left] + .item-inner,
icon[item-left] + [text-input] {
margin-left: $item-md-padding-left + ($item-md-padding-left / 2);
}
ion-avatar {
min-width: $item-md-avatar-size;
min-height: $item-md-avatar-size;
img {
max-width: $item-md-avatar-size;
max-height: $item-md-avatar-size;
border-radius: $item-md-avatar-size / 2;
}
}
ion-thumbnail {
min-width: $item-md-thumbnail-size;
min-height: $item-md-thumbnail-size;
img {
max-width: $item-md-thumbnail-size;
max-height: $item-md-thumbnail-size;
}
}
.item,
a.item,
button.item {

6
ionic/components/item/test/buttons/main.html
View File

@ -1,6 +1,6 @@
<ion-toolbar><ion-title>Items as Links/Buttons</ion-title></ion-toolbar>
<ion-list>
<ion-content>
<a ion-item href="#" (click)="testClick($event)">
a[ion-item]
@ -87,5 +87,5 @@
and a <a href="#" (click)="testClick($event)">link</a>.
<button outline item-right (click)="testClick($event)">View</button>
</ion-item>
</ion-list>
</ion-content>

10
ionic/components/item/test/groups/component-list.html
View File

@ -4,10 +4,12 @@
{{data.day}} - Sessions
</ion-item-group-title>
<ion-item-sliding *ng-for="#session of data.sessions">
<h3>{{session.name}}</h3>
<p>
<span>{{session.location}}</span>
</p>
<button ion-item>
<h3>{{session.name}}</h3>
<p>
<span>{{session.location}}</span>
</p>
</button>
<ion-item-options>
<button primary>Speaker Info</button>
<button secondary>Add to <br>Favorites</button>

15
ionic/components/item/test/groups/index.ts
View File

@ -1,21 +1,20 @@
import {ElementRef, Host} from 'angular2/angular2';
import {Component, View, NgIf, NgFor} from 'angular2/angular2';
import {App, Content, Icon, Item, ItemGroup, ItemGroupTitle, ItemSliding, List, ListHeader, NavController} from 'ionic/ionic';
import {Component, NgIf, NgFor} from 'angular2/angular2';
import {App, Icon, Item, ItemGroup, ItemGroupTitle, ItemSliding, List, ListHeader, NavController} from 'ionic/ionic';
@Component({
properties: ['data'],
selector: 'component-list',
directives: [ComponentList, Item, ItemGroup, ItemGroupTitle, ItemSliding, List, NgIf, NgFor],
directives: [Item, ItemGroup, ItemGroupTitle, ItemSliding, List, NgIf, NgFor],
templateUrl: 'component-list.html'
})
class ComponentList {
constructor(elementRef: ElementRef, @Host() content:Content) {
console.log('Component List init', content);
export class ComponentList {
constructor() {
}
}
@App({
directives: [Content, ComponentList, Item, ItemGroup, ItemGroupTitle, ItemSliding, List, NgIf, NgFor],
directives: [ComponentList],
templateUrl: 'main.html'
})
class E2EApp {

2
ionic/components/item/test/groups/main.html
View File

@ -1,4 +1,4 @@
<ion-toolbar><ion-title>Item Groups</ion-title></ion-toolbar>
<ion-content class="outer-content content-selected">
<h4>Component List</h4>
<component-list [data]="data"></component-list>
</ion-content>

4
ionic/components/item/test/icons/main.html
View File

@ -1,6 +1,6 @@
<ion-toolbar><ion-title>Item Icons</ion-title></ion-toolbar>
<ion-list>
<ion-content>
<ion-item detail-push>
ion-item [detail-push] attr
@ -67,4 +67,4 @@
<item-badge item-right>99</item-badge>
</ion-item>
</ion-list>
</ion-content>

4
ionic/components/item/test/images/main.html
View File

@ -1,6 +1,6 @@
<ion-toolbar><ion-title>Item Images</ion-title></ion-toolbar>
<ion-list>
<ion-content>
<ion-item>
Plain Ol' div w/ some text, no images
@ -58,7 +58,7 @@
<p>Paragraph text.</p>
</ion-item>
</ion-list>
</ion-content>
<style>
img {

10
ionic/components/item/test/media/main.html
View File

@ -1,12 +1,6 @@
<ion-toolbar><ion-title>Item Media</ion-title></ion-toolbar>
<!--
class="line-media"
class="line-none"
class="line-full"
-->
<ion-list>
<ion-content>
<button ion-item>
<ion-avatar item-left>
@ -65,7 +59,7 @@
<icon close-circle item-right></icon>
</button>
</ion-list>
</ion-content>
<style>
img {

90
ionic/components/item/test/text/main.html
View File

@ -2,60 +2,56 @@
<ion-content class="outer-content">
<ion-list>
<ion-item>
Plain Ol' div with some text
</ion-item>
<ion-item>
Plain Ol' div with some text
</ion-item>
<ion-item>
Single line text that should have ellipses when it doesn't all fit in the item
</ion-item>
<ion-item>
Single line text that should have ellipses when it doesn't all fit in the item
</ion-item>
<ion-item no-lines>
Single line item with no lines
</ion-item>
<ion-item no-lines>
Single line item with no lines
</ion-item>
<ion-item text-wrap>
Multiline text that should wrap when it is too long
to fit on one line in the item. Attribute on .item
</ion-item>
<ion-item text-wrap>
Multiline text that should wrap when it is too long
to fit on one line in the item. Attribute on .item
</ion-item>
<ion-item text-wrap>
<h1>H1 Title Text</h1>
<p>Paragraph line 1</p>
</ion-item>
<ion-item text-wrap>
<h1>H1 Title Text</h1>
<p>Paragraph line 1</p>
</ion-item>
<ion-item text-wrap>
<h2>H2 Title Text</h2>
<p>Paragraph line 1</p>
</ion-item>
<ion-item text-wrap>
<h2>H2 Title Text</h2>
<p>Paragraph line 1</p>
</ion-item>
<ion-item text-wrap>
<h3>H3 Title Text</h3>
<p>Paragraph line 1</p>
<p>Paragraph line 2</p>
</ion-item>
<ion-item text-wrap>
<h3>H3 Title Text</h3>
<p>Paragraph line 1</p>
<p>Paragraph line 2</p>
</ion-item>
<ion-item text-wrap>
<h4>H4 Title Text</h4>
<p>Paragraph line 1</p>
<p>Paragraph line 2</p>
<p>Paragraph line 3</p>
</ion-item>
<ion-item text-wrap>
<h4>H4 Title Text</h4>
<p>Paragraph line 1</p>
<p>Paragraph line 2</p>
<p>Paragraph line 3</p>
</ion-item>
<ion-item>
<ion-item-content>
Column 1
</ion-item-content>
<ion-item-content>
Column 2
</ion-item-content>
<ion-item-content>
Column 3
</ion-item-content>
</ion-item>
</ion-list>
<ion-item>
<ion-item-content>
Column 1
</ion-item-content>
<ion-item-content>
Column 2
</ion-item-content>
<ion-item-content>
Column 3
</ion-item-content>
</ion-item>
</ion-content>

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

@ -19,6 +19,8 @@ $list-ios-header-font-weight: 500 !default;
$list-ios-header-letter-spacing: 0.1rem !default;
$list-ios-header-color: #333 !default;
$list-ios-border-color: $list-border-color !default;
/****************/
/* DEFAULT LIST */
@ -35,43 +37,24 @@ $list-ios-header-color: #333 !default;
letter-spacing: $list-ios-header-letter-spacing;
text-transform: uppercase;
color: $list-ios-header-color;
}
ion-header,
ion-item-group-title , {
border-bottom: 1px solid $item-ios-border-color;
}
.item {
border-radius: 0;
// TODO this makes the border not show on sticky
padding-left: $item-ios-padding-left;
font-size: $item-ios-font-size;
border-bottom: 1px solid $list-ios-border-color;
}
> .item:first-child {
border-top: 1px solid $item-ios-border-color;
border-top: 1px solid $list-ios-border-color;
}
> .item:last-child,
> ion-item-sliding:last-child .item {
border-bottom: 1px solid $item-ios-border-color;
border-bottom: 1px solid $list-ios-border-color;
.item-inner {
border-bottom: none;
}
}
.item {
.item-inner {
padding-right: ($item-ios-padding-right / 2);
border-bottom: 1px solid $item-ios-border-color;
}
ion-item-content {
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
}
.item-inner {
border-bottom: 1px solid $list-ios-border-color;
}
// If the item has the no-lines attribute remove the bottom border from:
@ -82,86 +65,8 @@ $list-ios-header-color: #333 !default;
border-width: 0;
}
[item-left] {
margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) 0;
}
[item-right] {
margin: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2);
}
// TODO clean up Sass variables
icon[item-left],
icon[item-right] {
margin-top: $item-ios-padding-icon-top;
margin-bottom: $item-ios-padding-icon-bottom;
}
ion-avatar[item-left],
ion-thumbnail[item-left] {
margin: ($item-ios-padding-right / 2) $item-ios-padding-right ($item-ios-padding-right / 2) 0;
}
ion-avatar[item-right],
ion-thumbnail[item-right] {
margin: ($item-ios-padding-right / 2);
}
button[item-left],
button[item-right],
[button][item-left],
[button][item-right] {
padding: 0 0.5em;
font-size: 1.3rem;
min-height: 25px;
margin-top: 9px;
}
[item-left].icon-only,
[item-right].icon-only,
[item-left].icon-only icon,
[item-right].icon-only icon,
[item-left][clear],
[item-right][clear] {
padding: 0 1px;
}
[item-left].icon-left icon,
[item-right].icon-left icon {
margin-left: 0;
margin-bottom: 1px;
padding-right: 0.3em;
}
[item-left].icon-right icon,
[item-right].icon-right icon {
margin-right: 0;
margin-bottom: 1px;
}
ion-avatar {
min-width: $item-ios-avatar-size;
min-height: $item-ios-avatar-size;
img {
max-width: $item-ios-avatar-size;
max-height: $item-ios-avatar-size;
border-radius: $item-ios-avatar-size / 2;
}
}
ion-thumbnail {
min-width: $item-ios-thumbnail-size;
min-height: $item-ios-thumbnail-size;
img {
max-width: $item-ios-thumbnail-size;
max-height: $item-ios-thumbnail-size;
}
}
ion-item-options {
border-bottom: 1px solid $item-ios-border-color;
border-bottom: 1px solid $list-ios-border-color;
button, [button] {
min-height: 100%;
@ -181,19 +86,6 @@ $list-ios-header-color: #333 !default;
}
}
.list,
ion-card {
button.item:not([detail-none]) .item-inner,
a.item:not([detail-none]) .item-inner,
.item[detail-push] .item-inner {
@include ios-detail-push-icon($item-ios-detail-push-color);
background-repeat: no-repeat;
background-position: right ($item-ios-padding-right - 2) center;
background-size: 14px 14px;
padding-right: 32px;
}
}
.list + .list {
margin-top: $list-ios-margin-top + $list-ios-margin-bottom;
@ -209,8 +101,7 @@ ion-card {
border-width: 0.55px;
}
ion-header,
ion-item-group-title {
ion-header {
border-bottom-width: 0.55px;
}
@ -240,8 +131,7 @@ ion-card {
border-radius: $list-inset-ios-border-radius;
.item {
margin-top: 0;
border-bottom: 1px solid $item-ios-border-color;
border-bottom: 1px solid $list-ios-border-color;
.item-inner {
border-bottom: none;
@ -250,7 +140,6 @@ ion-card {
> .item:first-child,
ion-header {
margin-top: 0;
border-top-right-radius: $list-inset-ios-border-radius;
border-top-left-radius: $list-inset-ios-border-radius;
}
@ -261,7 +150,6 @@ ion-card {
> .item:last-child,
> ion-item-sliding:last-child .item {
margin-bottom: 0;
border-bottom-right-radius: $list-inset-ios-border-radius;
border-bottom-left-radius: $list-inset-ios-border-radius;
border-bottom: none;

183
ionic/components/list/modes/md.scss
View File

@ -17,174 +17,43 @@ $list-md-header-padding: 16px $item-md-padding-right 16px $item-md-paddi
$list-md-header-font-size: 1.4rem !default;
$list-md-header-color: #858585 !default;
$list-md-border-color: $item-md-border-color !default;
/****************/
/* DEFAULT LIST */
/****************/
.list {
margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
ion-header,
ion-item-group-title , {
border-bottom: 1px solid $item-md-border-color;
ion-item-group-title {
border-bottom: 1px solid $list-md-border-color;
margin-left: 0;
padding: $list-md-header-padding;
font-size: $list-md-header-font-size;
color: $list-md-header-color;
}
.item {
padding-right: ($item-md-padding-right / 2);
padding-left: ($item-md-padding-left);
font-size: $item-md-font-size;
text-transform: none;
.item-inner {
border-bottom: 1px solid $item-md-border-color;
}
.item-inner {
border-bottom: 1px solid $list-md-border-color;
}
> .item:first-child {
border-top: 1px solid $item-md-border-color;
> .item:first-child,
> ion-item-sliding:first-child .item {
border-top: 1px solid $list-md-border-color;
}
> .item:last-child,
> ion-item-sliding:last-child .item {
border-bottom: 1px solid $item-md-border-color;
border-bottom: 1px solid $list-md-border-color;
.item-inner {
border-bottom: none;
}
}
// If the item has the no-lines attribute remove the bottom border from:
// the item itself (for last-child items)
// the item-inner class (if it is not last)
.item[no-lines],
.item[no-lines] .item-inner {
border-width: 0;
}
ion-header,
ion-item-group-title {
border-bottom: 1px solid $item-md-border-color;
margin-left: 0;
padding-left: $item-md-padding-left;
}
ion-item-content {
margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0;
}
[item-left],
[item-right] {
margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom 0;
}
icon[item-left],
icon[item-right] {
margin-top: $item-md-padding-icon-top;
margin-left: 0;
margin-bottom: $item-md-padding-icon-bottom;
}
button[item-left],
button[item-right],
[button][item-left],
[button][item-right] {
padding: 0 0.6em;
min-height: 26px;
font-size: 1.2rem;
}
[item-left].icon-only,
[item-right].icon-only,
[item-left].icon-only icon,
[item-right].icon-only icon {
padding: 0 1px;
}
[item-left][clear],
[item-right][clear] {
padding: 0 8px;
}
[item-left].icon-left icon,
[item-right].icon-left icon {
margin-left: 0;
margin-bottom: 1px;
padding-right: 0.3em;
}
[item-left].icon-right icon,
[item-right].icon-right icon {
margin-right: 0;
margin-bottom: 1px;
}
[text-wrap] ion-item-content {
font-size: $item-md-body-text-font-size;
line-height: $item-md-body-text-line-height;
}
.item[actions] ion-item-content {
margin: 4px;
}
icon[item-left] + .item-inner,
icon[item-left] + [text-input] {
margin-left: $item-md-padding-left + ($item-md-padding-left / 2);
}
ion-avatar {
min-width: $item-md-avatar-size;
min-height: $item-md-avatar-size;
img {
max-width: $item-md-avatar-size;
max-height: $item-md-avatar-size;
border-radius: $item-md-avatar-size / 2;
}
}
ion-thumbnail {
min-width: $item-md-thumbnail-size;
min-height: $item-md-thumbnail-size;
img {
max-width: $item-md-thumbnail-size;
max-height: $item-md-thumbnail-size;
}
}
h1 {
margin: 0 0 2px;
font-size: 2.4rem;
font-weight: normal;
}
h2 {
margin: 2px 0 2px;
font-size: 1.6rem;
font-weight: normal;
}
h3,
h4,
h5,
h6 {
line-height: normal;
margin: 2px 0 2px;
font-size: 1.4rem;
font-weight: normal;
}
p {
line-height: normal;
color: #666;
font-size: 1.4rem;
margin: 0 0 2px;
}
button.item.activated {
box-shadow: none;
}
ion-item-options {
button, [button] {
height: calc(100% - 2px);
@ -202,15 +71,13 @@ $list-md-header-color: #858585 !default;
}
}
}
}
.list {
margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
ion-header {
padding: $list-md-header-padding;
font-size: $list-md-header-font-size;
color: $list-md-header-color;
// If the item has the no-lines attribute remove the bottom border from:
// the item itself (for last-child items)
// the item-inner class (if it is not last)
.item[no-lines],
.item[no-lines] .item-inner {
border-width: 0;
}
+ .list {
@ -234,22 +101,16 @@ $list-md-header-color: #858585 !default;
.item:first-child {
border-top-width: 0;
margin-top: 0;
border-top-right-radius: $list-inset-md-border-radius;
border-top-left-radius: $list-inset-md-border-radius;
}
.item:last-child {
border-bottom-width: 0;
margin-bottom: 0;
border-bottom-right-radius: $list-inset-md-border-radius;
border-bottom-left-radius: $list-inset-md-border-radius;
}
.item:not(ion-input):last-child:after {
border-bottom: none;
}
+ .list[inset] {
margin-top: 0;
}

6
ionic/components/text-input/modes/md.scss
View File

@ -43,6 +43,11 @@ ion-card {
margin-bottom: 0;
}
[stacked-label] ion-label,
[floating-label] ion-label {
margin-left: 0;
}
[stacked-label].has-focus ion-label,
[floating-label].has-focus ion-label {
color: $text-input-highlight-color;
@ -52,6 +57,7 @@ ion-card {
[floating-label] [text-input] {
margin-bottom: 8px;
margin-top: 8px;
margin-left: 0;
}
[floating-label] ion-label {