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

update item

Browse Source
This commit is contained in:
Adam Bradley
2015-12-07 07:17:48 -06:00
parent c6626e0af8
commit d3c5f251ef
3 changed files with 120 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,14 +18,6 @@
overflow: hidden;
box-sizing: border-box;
&[no-lines] {
border: none;
.item-inner {
border: none;
}
}
}
.item-inner {
@ -42,6 +34,14 @@
align-self: stretch;
}
.item[no-lines] {
border: none;
.item-inner {
border: none;
}
}
ion-item-group {
display: block;
}
@ -64,6 +64,7 @@ a.item,
button.item {
margin: 0;
padding: 0;
border: 0;
width: 100%;
justify-content: inherit;
min-height: 4.4rem;
@ -74,7 +75,6 @@ button.item {
color: inherit;
border-radius: 0;
box-shadow: none;
will-change: initial;
}
ion-item-content {
@ -95,52 +95,6 @@ ion-item-content {
white-space: normal;
}
.item {
h1 {
margin: 0 0 2px;
font-size: 2.4rem;
font-weight: normal;
}
h2 {
margin: 0 0 2px;
font-size: 1.6rem;
font-weight: normal;
}
h3,
h4,
h5,
h6 {
line-height: normal;
margin: 0 0 3px 0;
font-size: 1.4rem;
font-weight: normal;
}
p {
line-height: normal;
color: #666;
font-size: 1.2rem;
margin: 0 0 2px;
}
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child {
margin-bottom: 0;
}
a {
text-decoration: none;
}
}
.vertical-align-top,
ion-input.item {
align-items: flex-start;

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

@ -18,54 +18,65 @@ $item-ios-sliding-content-bg: $background-ios-color !default;
$item-ios-sliding-transition: transform 250ms ease-in-out !default;
.item {
background-color: $list-ios-background-color;
color: $list-ios-text-color;
}
ion-item-group {
.item:first-child {
.item-inner {
border-top-width: 0;
}
}
.item:last-child .item-inner,
ion-item-sliding:last-child .item .item-inner {
border: none;
}
}
ion-item-divider {
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;
}
// iOS Item
// --------------------------------------------------
.item {
border-radius: 0;
padding-left: $item-ios-padding-left;
font-size: $item-ios-font-size;
border-radius: 0;
color: $list-ios-text-color;
background-color: $list-ios-background-color;
transition-duration: 200ms;
h1 {
margin: 0 0 2px;
font-size: 2.4rem;
font-weight: normal;
}
.item.activated,
a.item.activated,
button.item.activated {
h2 {
margin: 0 0 2px;
font-size: 1.6rem;
font-weight: normal;
}
h3,
h4,
h5,
h6 {
line-height: normal;
margin: 0 0 3px 0;
font-size: 1.4rem;
font-weight: normal;
}
p {
line-height: normal;
color: #666;
font-size: 1.2rem;
margin: 0 0 2px;
}
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child {
margin-bottom: 0;
}
a {
text-decoration: none;
}
}
.item.activated {
background-color: $list-ios-activated-background-color;
transition-duration: 0ms;
}
.item,
a.item,
button.item {
transition-duration: 200ms;
}
.item-inner {
padding-right: ($item-ios-padding-right / 2);
border-bottom: 1px solid $list-ios-border-color;
@ -75,6 +86,10 @@ ion-item-content {
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
}
// iOS Item Media
// --------------------------------------------------
[item-left] {
margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) 0;
}
@ -152,6 +167,10 @@ ion-thumbnail {
}
}
ion-note {
color: $item-ios-note-color;
}
button.item:not([detail-none]) .item-inner,
a.item:not([detail-none]) .item-inner,
.item[detail-push] .item-inner {
@ -162,6 +181,34 @@ a.item:not([detail-none]) .item-inner,
padding-right: 32px;
}
// iOS Item Group
// --------------------------------------------------
ion-item-group {
.item:first-child {
.item-inner {
border-top-width: 0;
}
}
.item:last-child .item-inner,
ion-item-sliding:last-child .item .item-inner {
border: none;
}
}
// iOS Item Divider
// --------------------------------------------------
ion-item-divider {
padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
color: $item-ios-divider-color;
background-color: $item-ios-divider-bg;
}
&.hairlines {
.item-inner {
border-bottom-width: 0.55px;

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

@ -20,16 +20,6 @@ $item-md-sliding-content-bg: $background-md-color !default;
$item-md-sliding-transition: transform 250ms ease-in-out !default;
ion-item-divider {
padding: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
background-color: $item-md-divider-bg;
color: $item-md-divider-color;
}
ion-note {
color: $item-md-note-color;
}
.item {
position: relative;
padding-right: 0;
@ -37,10 +27,11 @@ ion-note {
font-size: $item-md-font-size;
text-transform: none;
font-weight: normal;
box-shadow: none;
background-color: $list-md-background-color;
color: $list-md-text-color;
background-color: $list-md-background-color;
box-shadow: none;
transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms;
h1 {
margin: 0 0 2px;
@ -72,18 +63,26 @@ ion-note {
}
}
.item.activated {
background-color: $list-md-activated-background-color;
}
.item[no-lines] {
border-width: 0;
}
.item-inner {
border-bottom: 1px solid $list-md-border-color;
padding-right: ($item-md-padding-right / 2);
border-bottom: 1px solid $list-md-border-color;
}
ion-item-content {
margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0;
}
button.item.activated {
box-shadow: none;
}
// Material Design Item Media
// --------------------------------------------------
[item-left],
[item-right] {
@ -93,8 +92,8 @@ button.item.activated {
icon[item-left],
icon[item-right] {
margin-top: $item-md-padding-icon-top;
margin-left: 0;
margin-bottom: $item-md-padding-icon-bottom;
margin-left: 0;
}
button[item-left],
@ -120,8 +119,8 @@ button[item-right],
[item-left].icon-left icon,
[item-right].icon-left icon {
margin-left: 0;
margin-bottom: 1px;
margin-left: 0;
padding-right: 0.3em;
}
@ -172,19 +171,16 @@ ion-thumbnail {
}
}
.item,
a.item,
button.item {
transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms;
ion-note {
color: $item-md-note-color;
}
.item.activated,
a.item.activated,
button.item.activated {
background-color: $list-md-activated-background-color;
box-shadow: none;
}
.item[no-lines] {
border-width: 0;
// Material Design Item Divider
// --------------------------------------------------
ion-item-divider {
padding: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
background-color: $item-md-divider-bg;
color: $item-md-divider-color;
}