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

list/item/button/card css overhaul

Browse Source
This commit is contained in:
Adam Bradley
2015-08-25 13:17:29 -05:00
parent cb48d67d4a
commit 069ac65e24
36 changed files with 370 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,16 +22,18 @@
a.item,
button.item.item {
border-radius: 0;
margin: 0;
color: inherit;
text-decoration: none;
padding: 0;
width: 100%;
min-height: 4.4rem;
line-height: normal;
justify-content: inherit;
box-shadow: none;
min-height: 4.4rem;
font-weight: normal;
line-height: normal;
text-decoration: none;
text-transform: none;
color: inherit;
border-radius: 0;
box-shadow: none;
}
ion-item-content {
@@ -46,18 +48,18 @@ ion-item-content {
white-space: normal;
}
.list .item > icon:first-child {
min-width: 24px;
text-align: center;
}
.list .item > icon[small]:first-child {
min-width: 18px;
}
.list .item {
border-radius: 0;
icon:first-child {
min-width: 24px;
text-align: center;
}
icon[small]:first-child {
min-width: 18px;
}
&.activated {
background-color: #d9d9d9;
}
@@ -69,34 +71,7 @@ ion-item-content {
}
.list .item.item {
ion-item-content + button,
ion-item-content + [button],
button + ion-item-content,
[button] + ion-item-content,
icon + icon,
ion-item-content + icon,
.item-media + ion-item-content,
ion-item-content + .item-media,
ion-item-content + ion-item-content,
icon + .input,
.input + icon,
icon + .input-label,
.input-label + .input {
margin-left: 0;
}
}
.list a.item.item,
.list button.item.item {
margin-left: 0;
margin-right: 0;
padding: 0;
}
.item icon {
.item > icon {
font-size: 2.4rem;
&[large] {
@@ -108,18 +83,6 @@ ion-item-content {
}
}
.list .item button.icon-only,
.item button.icon-only icon {
padding: 0;
}
.item > button.icon-left icon,
.item > button.icon-right icon {
font-size: 1.2em;
margin: 0;
padding: 0;
}
.item {
h1 {
@@ -171,10 +134,7 @@ ion-item-content {
text-decoration: none;
}
.item.item.item.no-border-bottom:after {
border: none;
}
.item.item.item.no-border-bottom:after,
.item.item.item.no-border-bottom + .item:before {
border: none;
}

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

@@ -11,51 +11,51 @@ $item-ios-padding-bottom: 14px !default;
$item-ios-padding-left: 16px !default;
$item-ios-padding-media-top: 10px !default;
$item-ios-padding-media-bottom: 11px !default;
$item-ios-padding-media-bottom: 10px !default;
$item-ios-padding-icon-top: 8px !default;
$item-ios-padding-icon-bottom: 8px !default;
$item-ios-avatar-size: 3.6rem !default;
$item-ios-thumbnail-size: 5.6rem !default;
$item-ios-note-color: $item-ios-border-color !default;
$item-ios-note-color: darken($item-ios-border-color, 10%) !default;
$item-ios-forward-icon-color: $item-ios-border-color !default;
.list[mode=ios] {
.item {
font-size: $item-ios-font-size;
margin-top: -1px;
padding-right: ($item-ios-padding-right / 2);
padding-left: ($item-ios-padding-left / 2);
font-size: $item-ios-font-size;
&:before {
position: absolute;
content: '';
top: 0;
right: 0;
left: $item-ios-padding-left;
border-top: 1px solid $item-ios-border-color;
content: '';
}
&:after {
position: absolute;
content: '';
right: 0;
bottom: 0;
left: $item-ios-padding-left;
border-top: 1px solid $item-ios-border-color;
content: '';
}
&:first-of-type {
&:before {
left: 0;
}
&:first-child:before,
&:last-child:after {
left: 0;
}
}
&:last-of-type {
margin-bottom: -1px;
&:after {
left: 0;
}
}
ion-header + .item:before {
left: 0;
}
&[inset] .item {
@@ -65,53 +65,54 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
}
}
.input-label,
ion-item-content,
.item-note {
margin: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
ion-item-content {
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2);
}
.item-media {
margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom $item-ios-padding-left;
[item-left],
[item-right] {
margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($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;
}
button[item-left],
button[item-right],
[button][item-left],
[button][item-right] {
padding: 0 0.6em;
font-size: 1.5rem;
min-height: 25px;
}
[item-left].icon-only icon,
[item-right].icon-only icon {
padding: 0;
}
[item-left].icon-left icon,
[item-right].icon-left icon {
padding-right: 0.2em;
}
[item-left].icon-right icon,
[item-right].icon-right icon {
padding-left: 0.2em;
}
.item-note {
color: $item-ios-note-color;
}
.item icon + ion-item-content {
margin-left: 0;
}
.item > icon {
margin-left: $item-ios-padding-left;
margin-right: $item-ios-padding-right;
}
.item-input > icon {
margin-top: $item-ios-padding-media-top - 1;
}
icon[forward] {
font-size: 2rem;
color: $item-ios-forward-icon-color;
}
button {
margin: 0 $item-ios-padding-right 0 $item-ios-padding-left;
padding: 2px 6px;
min-height: 26px;
font-size: 1.3rem;
}
.item-input .input + button {
margin-top: $item-ios-padding-media-top;
}
.badge {
margin-right: $item-ios-padding-right;
}
.avatar {
max-width: $item-ios-avatar-size;
max-height: $item-ios-avatar-size;

80
ionic/components/item/modes/material.scss
View File

@@ -18,40 +18,73 @@ $item-md-body-text-line-height: 1.5 !default;
$item-md-avatar-size: 4rem !default;
$item-md-thumbnail-size: 8rem !default;
$item-md-note-color: $item-md-border-color !default;
$item-md-note-color: darken($item-md-border-color, 10%) !default;
$item-md-forward-icon-color: $item-md-border-color !default;
.list[mode=md] {
.item {
font-size: $item-md-font-size;
margin-top: -1px;
padding-right: ($item-md-padding-right / 2);
padding-left: ($item-md-padding-left / 2);
font-size: $item-md-font-size;
text-transform: none;
&:before {
position: absolute;
content: '';
top: 0;
right: 0;
left: $item-md-padding-left;
border-top: 1px solid $item-md-border-color;
content: '';
}
&:after {
position: absolute;
content: '';
right: 0;
bottom: 0;
left: 0;
border-top: 1px solid $item-md-border-color;
content: '';
}
}
.input-label,
ion-item-content,
.item-note {
margin: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
ion-header + .item:before {
left: 0;
}
ion-item-content {
margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
}
[item-left],
[item-right] {
margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom ($item-md-padding-left / 2);
}
button[item-left],
button[item-right],
[button][item-left],
[button][item-right] {
padding: 0 0.6em;
min-height: 26px;
font-size: 1.3rem;
}
[item-left].icon-only icon,
[item-right].icon-only icon {
padding: 0;
}
[item-left].icon-left icon,
[item-right].icon-left icon {
padding-right: 0.2em;
}
[item-left].icon-right icon,
[item-right].icon-right icon {
padding-left: 0.2em;
}
.item-text-wrap ion-item-content {
@@ -59,21 +92,16 @@ $item-md-forward-icon-color: $item-md-border-color !default;
line-height: $item-md-body-text-line-height;
}
.item-media {
margin: $item-md-padding-media-top $item-md-padding-right $item-md-padding-media-bottom $item-md-padding-left;
}
.item-note {
color: $item-md-note-color;
}
.item > icon {
margin-left: $item-md-padding-left;
margin-right: $item-md-padding-right;
.item[actions] ion-item-content {
margin: 4px;
}
.item-input > icon {
margin-top: $item-md-padding-media-top;
icon + ion-item-content {
margin-left: $item-md-padding-left + ($item-md-padding-left / 2);
}
icon[forward] {
@@ -81,24 +109,6 @@ $item-md-forward-icon-color: $item-md-border-color !default;
color: $item-md-forward-icon-color;
}
.item > button {
margin: 0 $item-md-padding-right 0 $item-md-padding-left;
padding: 2px 6px;
min-height: 26px;
}
.item-input .input + button {
margin-top: $item-md-padding-media-top;
}
.item[actions] ion-item-content {
margin: 8px;
}
.badge {
margin-right: $item-md-padding-right;
}
.avatar {
max-width: $item-md-avatar-size;
max-height: $item-md-avatar-size;

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

@@ -23,17 +23,40 @@
</button>
<ion-item>
<button item-left>Edit</button>
ion-item left button
<button item-left>Default</button>
Inner Buttons
<button outline item-right>Outline</button>
</ion-item>
<ion-item>
ion-item right button[outline][secondary]
<button secondary outline item-right>Open</button>
<button item-left>
<icon name="ion-home"></icon>
Left Icon
</button>
left icon buttons
<button outline item-right>
<icon name="ion-star"></icon>
Left Icon
</button>
</ion-item>
<ion-item>
ion-item icon only button
<button item-left>
Right Icon
<icon name="ion-home"></icon>
</button>
right icon buttons
<button outline item-right>
Right Icon
<icon name="ion-star"></icon>
</button>
</ion-item>
<ion-item>
<button item-left>
<icon name="ion-help-circled"></icon>
</button>
icon only buttons
<button item-right>
<icon name="ion-help-circled"></icon>
</button>

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

@@ -8,43 +8,49 @@
</ion-item>
<a ion-item href="#">
a[ion-item] with forward icon
a[ion-item] w/ forward icon
<icon forward item-right></icon>
</a>
<button ion-item>
button[ion-item] with forward icon
button[ion-item] w/ forward icon
<icon forward item-right></icon>
</button>
<a ion-item href="#">
a[ion-item] with right side default icon
a[ion-item] w/ right side default icon
<icon name="ion-ios-information-outline" item-right></icon>
</a>
<a ion-item href="#">
a[ion-item] with right side large icon
a[ion-item] w/ right side large icon
<icon large name="ion-ios-information-outline" item-right></icon>
</a>
<a ion-item href="#">
a[ion-item] with right side small icon
a[ion-item] w/ right side small icon
<icon small name="ion-ios-information-outline" item-right></icon>
</a>
<button ion-item>
<icon name="ion-star" item-left></icon>
button[ion-item] with left side icon
button[ion-item] w/ left side icon
</button>
<button ion-item>
<icon name="ion-flag" item-left></icon>
button[ion-item] with both side icons
button[ion-item] w/ both side icons
<icon name="ion-ios-checkmark" item-right></icon>
</button>
<ion-item>
<icon name="ion-flag" item-left></icon>
ion-item w/ both side icons
<icon name="ion-ios-checkmark" item-right></icon>
</ion-item>
<a ion-item href="#">
a[ion-item] with two right side icons
a[ion-item] w/ two right side icons
<icon name="ion-checkmark-circled" item-right></icon>
<icon name="ion-shuffle" item-right></icon>
</a>
@@ -52,12 +58,17 @@
<button ion-item>
<icon name="ion-clipboard" item-left></icon>
<icon name="ion-minus-circled" item-left></icon>
button[ion-item] with two left side icons
button[ion-item] w/ two left side icons
</button>
<button ion-item>
Red Balloons
<div class="badge" item-right>99</div>
<item-badge item-right>99</item-badge>
</button>
<ion-item>
Problems
<item-badge item-right>99</item-badge>
</ion-item>
</ion-list>