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

refactor(list): fixing UI issues with refactoring the border

Browse Source 
Removed margin-top for now. Removed unused css rule called no-border.
References #437
This commit is contained in:
Brandy Carney
2015-11-10 14:48:46 -05:00
parent a86eeb8dd5
commit 5e5e5f48e1
6 changed files with 51 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demos/weather/main.html
View File

@ -2,7 +2,7 @@
<ion-view> <ion-view>
<background-cycler class="bg-fade" [image]="activeBgImage"></background-cycler> <background-cycler class="bg-fade" [image]="activeBgImage"></background-cycler>
<ion-toolbar id="header" class="no-border"><ion-title><span class="city"><i id="city-nav-icon" class="icon ion-navigate"></i> {{currentLocationString}}</span><br><current-time localtz="current.local_tz_short"></current-time></ion-title><button (click)="showSettings()" class="toolbar-secondary-item"><i class="icon ion-ios-gear"></i></button></ion-toolbar> <ion-toolbar id="header"><ion-title><span class="city"><i id="city-nav-icon" class="icon ion-navigate"></i> {{currentLocationString}}</span><br><current-time localtz="current.local_tz_short"></current-time></ion-title><button (click)="showSettings()" class="toolbar-secondary-item"><i class="icon ion-ios-gear"></i></button></ion-toolbar>
<ion-content> <ion-content>
<div id="main-content"> <div id="main-content">

3
ionic/components/checkbox/modes/md.scss
View File

@ -36,7 +36,8 @@ ion-checkbox {
media-checkbox { media-checkbox {
display: block; display: block;
margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom ($item-md-padding-left / 2); // TODO convert these to sass variables
margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px;
} }
checkbox-icon { checkbox-icon {

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

@ -18,6 +18,20 @@
background-color: $list-background-color; background-color: $list-background-color;
color: $list-text-color; color: $list-text-color;
box-sizing: border-box;
}
.item-inner {
width: 100%;
display: flex;
margin: 0;
padding: 0;
border: 0;
align-items: center;
overflow: hidden;
align-self: stretch;
box-sizing: border-box;
} }
.item-group { .item-group {
@ -55,18 +69,6 @@ button.item.item {
will-change: initial; will-change: initial;
} }
.item-inner {
// height: 100%;
width: 100%;
display: flex;
margin: 0;
padding: 0;
border: 0;
align-items: center;
overflow: hidden;
align-self: stretch;
}
ion-item-content { ion-item-content {
margin: 0; margin: 0;
flex: 1; flex: 1;

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

@ -38,7 +38,9 @@ $list-ios-header-color: #333 !default;
} }
ion-header + .item, ion-header + .item,
ion-item-group-title + .item { ion-header + script + .item,
ion-item-group-title + .item,
ion-item-group-title + script + .item {
border-top: 1px solid $item-ios-border-color; border-top: 1px solid $item-ios-border-color;
.item-inner { .item-inner {
@ -48,7 +50,7 @@ $list-ios-header-color: #333 !default;
.item { .item {
border-radius: 0; border-radius: 0;
margin-top: -1px; // margin-top: -1px;
padding-left: $item-ios-padding-left; padding-left: $item-ios-padding-left;
font-size: $item-ios-font-size; font-size: $item-ios-font-size;
@ -71,7 +73,7 @@ $list-ios-header-color: #333 !default;
} }
ion-item-content { ion-item-content {
//margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0; margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
} }
} }
@ -203,15 +205,17 @@ ion-card {
button, [button] { button, [button] {
min-height: calc(100% - 1px); min-height: calc(100% - 1px);
height: calc(100% - 1px); height: calc(100% - 1px);
margin-top: 0.55px; //margin-top: 0.55px;
margin-bottom: 0.55px; margin-bottom: 0.55px;
} }
} }
ion-header + .item, ion-header + .item,
ion-item-group-title + .item { ion-header + script + .item,
ion-item-group-title + .item,
ion-item-group-title + script + .item {
border-top-width: 0.55px; border-top-width: 0.55px;
margin-top: -0.55px; //margin-top: -0.55px;
.item-inner { .item-inner {
border-width: 0; border-width: 0;
@ -219,7 +223,7 @@ ion-card {
} }
.item { .item {
margin-top: -0.55px; //margin-top: -0.55px;
.item-inner { .item-inner {
border-width: 0.55px; border-width: 0.55px;
@ -235,7 +239,7 @@ ion-card {
&:last-child { &:last-child {
border-bottom-width: 0.55px; border-bottom-width: 0.55px;
margin-bottom: -0.55px; //margin-bottom: -0.55px;
} }
} }
} }

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

@ -34,10 +34,24 @@ $list-md-header-color: #858585 !default;
margin-left: $item-md-padding-left; margin-left: $item-md-padding-left;
font-size: $item-md-font-size; font-size: $item-md-font-size;
text-transform: none; text-transform: none;
&:last-child {
border-bottom: 1px solid $item-md-border-color;
}
}
.item[no-lines],
.item[no-lines] + .item {
border-width: 0;
.item-inner {
border-width: 0;
}
} }
ion-header + .item, ion-header + .item,
ion-item-group-title + .item { ion-header + script + .item,
ion-item-group-title + .item,
ion-item-group-title + script + .item {
margin-left: 0; margin-left: 0;
padding-left: $item-md-padding-left; padding-left: $item-md-padding-left;
} }
@ -54,6 +68,7 @@ $list-md-header-color: #858585 !default;
icon[item-left], icon[item-left],
icon[item-right] { icon[item-right] {
margin-top: $item-md-padding-icon-top; margin-top: $item-md-padding-icon-top;
margin-left: 0;
margin-bottom: $item-md-padding-icon-bottom; margin-bottom: $item-md-padding-icon-bottom;
} }
@ -100,7 +115,7 @@ $list-md-header-color: #858585 !default;
margin: 4px; margin: 4px;
} }
icon[item-left] + ion-item-content, icon[item-left] + .item-inner,
icon[item-left] + [text-input] { icon[item-left] + [text-input] {
margin-left: $item-md-padding-left + ($item-md-padding-left / 2); margin-left: $item-md-padding-left + ($item-md-padding-left / 2);
} }
@ -207,12 +222,14 @@ $list-md-header-color: #858585 !default;
border-radius: $list-inset-md-border-radius; border-radius: $list-inset-md-border-radius;
.item:first-child { .item:first-child {
border-top-width: 0;
margin-top: 0; margin-top: 0;
border-top-right-radius: $list-inset-md-border-radius; border-top-right-radius: $list-inset-md-border-radius;
border-top-left-radius: $list-inset-md-border-radius; border-top-left-radius: $list-inset-md-border-radius;
} }
.item:last-child { .item:last-child {
border-bottom-width: 0;
margin-bottom: 0; margin-bottom: 0;
border-bottom-right-radius: $list-inset-md-border-radius; border-bottom-right-radius: $list-inset-md-border-radius;
border-bottom-left-radius: $list-inset-md-border-radius; border-bottom-left-radius: $list-inset-md-border-radius;
@ -238,7 +255,9 @@ $list-md-header-color: #858585 !default;
} }
ion-header + .item, ion-header + .item,
ion-item-group-title + .item { ion-header + script + .item,
ion-item-group-title + .item,
ion-item-group-title + script + .item {
border-width: 1px !important; border-width: 1px !important;
} }
} }

5
ionic/util/util.scss
View File

@ -15,11 +15,6 @@
transition: none !important; transition: none !important;
} }
// Remove any hairline borders
.no-border:after {
background: none !important;
}
.hide, .hide,
[hidden], [hidden],
template, template,