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

refactor(list): moved item css outside of the list selector and into the proper file md

Browse Source 
Cleaned up duplicated CSS and combined selectors, renamed Sass
variables so they are named list if used in the list files.
This commit is contained in:
Brandy Carney
2015-11-16 16:35:13 -05:00
parent 503abf5225
commit 5265f21062
3 changed files with 159 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,6 +42,135 @@ ion-note {
color: $item-md-note-color;
}
.item {
padding-right: ($item-md-padding-right / 2);
padding-left: ($item-md-padding-left);
font-size: $item-md-font-size;
text-transform: 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;
}
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 {

14
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 */
@@ -39,16 +41,16 @@ $list-ios-header-color: #333 !default;
ion-header,
ion-item-group-title {
border-bottom: 1px solid $item-ios-border-color;
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;
@@ -56,7 +58,7 @@ $list-ios-header-color: #333 !default;
}
.item-inner {
border-bottom: 1px solid $item-ios-border-color;
border-bottom: 1px solid $list-ios-border-color;
}
// If the item has the no-lines attribute remove the bottom border from:
@@ -68,7 +70,7 @@ $list-ios-header-color: #333 !default;
}
ion-item-options {
border-bottom: 1px solid $item-ios-border-color;
border-bottom: 1px solid $list-ios-border-color;
button, [button] {
min-height: 100%;
@@ -135,7 +137,7 @@ $list-ios-header-color: #333 !default;
.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;

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;
}