Skip to content

Commit

Permalink
refactor(item): Adjust item padding variables, create item-avatar-right
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamdbradley
adamdbradley committed Apr 8, 2014
1 parent 92c65f3 commit 6a1ac35
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 74 deletions.
54 changes: 36 additions & 18 deletions scss/_items.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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) );
}
}

Expand All @@ -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);
}


Expand All @@ -320,16 +320,16 @@ a.item-content {
*/

.item-button-left {
padding-left: $item-padding * 4.5;
padding-left: ceil($item-padding * 4.5);
}

.item-button-left > .button,
.item-button-left .item-content > .button {
@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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
}
}

Expand Down Expand Up @@ -449,6 +466,7 @@ button.item.item-button-right {
width: 100%;
}
}
.item-avatar-right.item-complex,
.item-thumbnail-right.item-complex {
padding-right: 0;
}
Expand Down Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
74 changes: 18 additions & 56 deletions test/html/lists.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,22 +219,10 @@ <h1 class="title">Lists</h1>
</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>

Expand Down Expand Up @@ -262,24 +250,6 @@ <h1 class="title">Lists</h1>
</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>
Expand Down Expand Up @@ -478,30 +448,26 @@ <h3>Thumbnails .item-thumbnail</h3>
<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>
<p>Nirvana</p>
</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>
Expand All @@ -515,14 +481,12 @@ <h3>Large Thumbnails .item-thumbnail-left and .item-thumbnail-right</h3>
<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>
Expand All @@ -531,14 +495,12 @@ <h2>Nevermind</h2>
</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>
Expand Down

0 comments on commit 6a1ac35

Please sign in to comment.