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(item): Adjust item padding variables, create item-avatar-right

Browse Source
This commit is contained in:
Adam Bradley
2014-04-08 11:50:48 -05:00
parent 92c65f367b
commit 6a1ac355a8
3 changed files with 55 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
scss/_items.scss
View File

@@ -53,13 +53,13 @@
@include display-flex();
position: absolute;
top: $item-padding;
right: ($item-padding * 2) + 5;
right: ($item-padding * 2);
}
&.item-button-right .badge {
right: ($item-padding * 2) + 35;
}
&.item-divider .badge {
top: $item-padding / 2;
top: ceil($item-padding / 2);
}
.badge + .badge {
margin-right: 5px;
@@ -190,7 +190,7 @@ button.item.item-complex {
.item-radio .item-content {
position: relative;
z-index: $z-index-item;
padding: $item-padding (($item-padding * 3) - 5) $item-padding $item-padding;
padding: $item-padding (ceil( ($item-padding * 3) + ($item-padding / 3) ) - 5) $item-padding $item-padding;
border: none;
background-color: white;
}
@@ -263,32 +263,32 @@ a.item-content {
}
.item-icon-left {
padding-left: ($item-padding * 3);
padding-left: ceil( ($item-padding * 3) + ($item-padding / 3) );
.icon {
left: $item-padding / 2;
left: ceil( ($item-padding / 3) * 2);
}
}
.item-complex.item-icon-left {
padding-left: 0;
.item-content {
padding-left: ($item-padding * 3);
padding-left: ceil( ($item-padding * 3) + ($item-padding / 3) );
}
}
.item-icon-right {
padding-right: ($item-padding * 3);
padding-right: ceil( ($item-padding * 3) + ($item-padding / 3) );
.icon {
right: $item-padding / 2;
right: ceil( ($item-padding / 3) * 2);
}
}
.item-complex.item-icon-right {
padding-right: 0;
.item-content {
padding-right: ($item-padding * 3);
padding-right: ceil( ($item-padding * 3) + ($item-padding / 3) );
}
}
@@ -306,10 +306,10 @@ a.item-content {
font-size: $item-icon-accessory-font-size;
}
.item-icon-left .icon-accessory {
left: round($item-padding / 5);
left: floor($item-padding / 5);
}
.item-icon-right .icon-accessory {
right: round($item-padding / 5);
right: floor($item-padding / 5);
}
@@ -320,7 +320,7 @@ a.item-content {
*/
.item-button-left {
padding-left: $item-padding * 4.5;
padding-left: ceil($item-padding * 4.5);
}
.item-button-left > .button,
@@ -328,8 +328,8 @@ a.item-content {
@include display-flex();
@include align-items(center);
position: absolute;
top: $item-padding / 2;
left: $item-padding / 2;
top: ceil($item-padding / 2);
left: ceil( ($item-padding / 3) * 2);
min-width: $item-icon-font-size + ($button-border-width * 2);
min-height: $item-icon-font-size + ($button-border-width * 2);
font-size: $item-button-font-size;
@@ -363,7 +363,7 @@ button.item.item-button-right {
@include display-flex();
@include align-items(center);
position: absolute;
top: $item-padding / 2;
top: ceil($item-padding / 2);
right: $item-padding;
min-width: $item-icon-font-size + ($button-border-width * 2);
min-height: $item-icon-font-size + ($button-border-width * 2);
@@ -405,7 +405,24 @@ button.item.item-button-right {
max-width: $item-avatar-width;
max-height: $item-avatar-height;
width: 100%;
border-radius: 4px;
border-radius: $item-avatar-border-radius;
}
}
.item-avatar-right,
.item-avatar-right .item-content {
padding-right: $item-avatar-width + ($item-padding * 2);
min-height: $item-avatar-width + ($item-padding * 2);
> img:first-child,
.item-image {
position: absolute;
top: $item-padding;
right: $item-padding;
max-width: $item-avatar-width;
max-height: $item-avatar-height;
width: 100%;
border-radius: $item-avatar-border-radius;
}
}
@@ -449,6 +466,7 @@ button.item.item-button-right {
width: 100%;
}
}
.item-avatar-right.item-complex,
.item-thumbnail-right.item-complex {
padding-right: 0;
}
@@ -488,8 +506,8 @@ button.item.item-button-right {
// -------------------------------
.item-divider {
padding-top: $item-padding / 2;
padding-bottom: $item-padding / 2;
padding-top: ceil($item-padding / 2);
padding-bottom: ceil($item-padding / 2);
min-height: 30px;
background-color: $item-divider-bg;
color: $item-divider-color;

1
scss/_variables.scss
View File

@@ -294,6 +294,7 @@ $item-icon-accessory-font-size: 16px !default;
$item-avatar-width: 40px !default;
$item-avatar-height: 40px !default;
$item-avatar-border-radius: 4px !default;
$item-thumbnail-width: 80px !default;
$item-thumbnail-height: 80px !default;

74
test/html/lists.html
View File

@@ -219,22 +219,10 @@
</button>
</div>
<a href="#" class="item item-complex">
<div class="item-content slide-right">
Auto Right side arrow cuz its a link
</div>
</a>
<div class="item item-complex" ng-click="asdf()">
<div class="item-content slide-right">
Auto Right side arrow cuz it has an ng-click
</div>
</div>
<a href="#" class="item item-complex item-icon-right">
<div class="item-content slide-right">
Processing Icon
<i class="icon ion-loading"></i>
<i class="icon ion-loading-b"></i>
</div>
</a>
@@ -262,24 +250,6 @@
</div>
</a>
<a href="#" class="item item-complex">
<div class="item-content slide-left">
Multiple Badges
<span class="badge badge-light">1</span>
<span class="badge badge-stable">2</span>
<span class="badge badge-positive">3</span>
<span class="badge badge-calm">4</span>
<span class="badge badge-balanced">7</span>
<span class="badge badge-assertive">5</span>
<span class="badge badge-energized">6</span>
<span class="badge badge-royal">8</span>
<span class="badge badge-dark">9</span>
</div>
<div class="item-options">
<button class="button">Button</button>
</div>
</a>
</div>
<h3>List with padding</h3>
@@ -478,14 +448,12 @@
<div class="list">
<a href="#" class="item item-avatar-left">
<div class="item-content">
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</div>
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</a>
<a href="#" class="item item-avatar-left">
<a href="#" class="item item-complex item-avatar-left">
<div class="item-content">
<img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
<h2>Nevermind</h2>
@@ -493,15 +461,13 @@
</div>
</a>
<a href="#" class="item item-avatar-left">
<div class="item-content">
<img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
<h2>License To Ill</h2>
<p>Bestie Boys</p>
</div>
<a href="#" class="item item-avatar-right">
<img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
<h2>License To Ill</h2>
<p>Bestie Boys</p>
</a>
<a href="#" class="item item-avatar-left">
<a href="#" class="item item-complex item-avatar-right">
<div class="item-content">
<img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
<h2>gjpqy</h2>
@@ -515,14 +481,12 @@
<div class="list">
<a href="#" class="item item-thumbnail-left">
<div class="item-content">
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</div>
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</a>
<a href="#" class="item item-thumbnail-left">
<a href="#" class="item item-complex item-thumbnail-left">
<div class="item-content">
<img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
<h2>Nevermind</h2>
@@ -531,14 +495,12 @@
</a>
<a href="#" class="item item-thumbnail-right">
<div class="item-content">
<img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
<h2>License To Ill</h2>
<p>Bestie Boys</p>
</div>
<img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
<h2>License To Ill</h2>
<p>Bestie Boys</p>
</a>
<a href="#" class="item item-thumbnail-right">
<a href="#" class="item item-complex item-thumbnail-right">
<div class="item-content">
<img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
<h2>Dookie</h2>