Skip to content

Commit 6a1ac35

Browse files
adamdbradleyadamdbradley
committed
refactor(item): Adjust item padding variables, create item-avatar-right
1 parent 92c65f3 commit 6a1ac35

File tree

3 files changed

+55
-74
lines changed

3 files changed

+55
-74
lines changed

Diff for: ‎scss/_items.scss

+36-18
Original file line numberDiff line numberDiff line change
@@ -53,13 +53,13 @@
5353
@include display-flex();
5454
position: absolute;
5555
top: $item-padding;
56-
right: ($item-padding * 2) + 5;
56+
right: ($item-padding * 2);
5757
}
5858
&.item-button-right .badge {
5959
right: ($item-padding * 2) + 35;
6060
}
6161
&.item-divider .badge {
62-
top: $item-padding / 2;
62+
top: ceil($item-padding / 2);
6363
}
6464
.badge + .badge {
6565
margin-right: 5px;
@@ -190,7 +190,7 @@ button.item.item-complex {
190190
.item-radio .item-content {
191191
position: relative;
192192
z-index: $z-index-item;
193-
padding: $item-padding (($item-padding * 3) - 5) $item-padding $item-padding;
193+
padding: $item-padding (ceil( ($item-padding * 3) + ($item-padding / 3) ) - 5) $item-padding $item-padding;
194194
border: none;
195195
background-color: white;
196196
}
@@ -263,32 +263,32 @@ a.item-content {
263263
}
264264

265265
.item-icon-left {
266-
padding-left: ($item-padding * 3);
266+
padding-left: ceil( ($item-padding * 3) + ($item-padding / 3) );
267267

268268
.icon {
269-
left: $item-padding / 2;
269+
left: ceil( ($item-padding / 3) * 2);
270270
}
271271
}
272272
.item-complex.item-icon-left {
273273
padding-left: 0;
274274

275275
.item-content {
276-
padding-left: ($item-padding * 3);
276+
padding-left: ceil( ($item-padding * 3) + ($item-padding / 3) );
277277
}
278278
}
279279

280280
.item-icon-right {
281-
padding-right: ($item-padding * 3);
281+
padding-right: ceil( ($item-padding * 3) + ($item-padding / 3) );
282282

283283
.icon {
284-
right: $item-padding / 2;
284+
right: ceil( ($item-padding / 3) * 2);
285285
}
286286
}
287287
.item-complex.item-icon-right {
288288
padding-right: 0;
289289

290290
.item-content {
291-
padding-right: ($item-padding * 3);
291+
padding-right: ceil( ($item-padding * 3) + ($item-padding / 3) );
292292
}
293293
}
294294

@@ -306,10 +306,10 @@ a.item-content {
306306
font-size: $item-icon-accessory-font-size;
307307
}
308308
.item-icon-left .icon-accessory {
309-
left: round($item-padding / 5);
309+
left: floor($item-padding / 5);
310310
}
311311
.item-icon-right .icon-accessory {
312-
right: round($item-padding / 5);
312+
right: floor($item-padding / 5);
313313
}
314314

315315

@@ -320,16 +320,16 @@ a.item-content {
320320
*/
321321

322322
.item-button-left {
323-
padding-left: $item-padding * 4.5;
323+
padding-left: ceil($item-padding * 4.5);
324324
}
325325

326326
.item-button-left > .button,
327327
.item-button-left .item-content > .button {
328328
@include display-flex();
329329
@include align-items(center);
330330
position: absolute;
331-
top: $item-padding / 2;
332-
left: $item-padding / 2;
331+
top: ceil($item-padding / 2);
332+
left: ceil( ($item-padding / 3) * 2);
333333
min-width: $item-icon-font-size + ($button-border-width * 2);
334334
min-height: $item-icon-font-size + ($button-border-width * 2);
335335
font-size: $item-button-font-size;
@@ -363,7 +363,7 @@ button.item.item-button-right {
363363
@include display-flex();
364364
@include align-items(center);
365365
position: absolute;
366-
top: $item-padding / 2;
366+
top: ceil($item-padding / 2);
367367
right: $item-padding;
368368
min-width: $item-icon-font-size + ($button-border-width * 2);
369369
min-height: $item-icon-font-size + ($button-border-width * 2);
@@ -405,7 +405,24 @@ button.item.item-button-right {
405405
max-width: $item-avatar-width;
406406
max-height: $item-avatar-height;
407407
width: 100%;
408-
border-radius: 4px;
408+
border-radius: $item-avatar-border-radius;
409+
}
410+
}
411+
412+
.item-avatar-right,
413+
.item-avatar-right .item-content {
414+
padding-right: $item-avatar-width + ($item-padding * 2);
415+
min-height: $item-avatar-width + ($item-padding * 2);
416+
417+
> img:first-child,
418+
.item-image {
419+
position: absolute;
420+
top: $item-padding;
421+
right: $item-padding;
422+
max-width: $item-avatar-width;
423+
max-height: $item-avatar-height;
424+
width: 100%;
425+
border-radius: $item-avatar-border-radius;
409426
}
410427
}
411428

@@ -449,6 +466,7 @@ button.item.item-button-right {
449466
width: 100%;
450467
}
451468
}
469+
.item-avatar-right.item-complex,
452470
.item-thumbnail-right.item-complex {
453471
padding-right: 0;
454472
}
@@ -488,8 +506,8 @@ button.item.item-button-right {
488506
// -------------------------------
489507

490508
.item-divider {
491-
padding-top: $item-padding / 2;
492-
padding-bottom: $item-padding / 2;
509+
padding-top: ceil($item-padding / 2);
510+
padding-bottom: ceil($item-padding / 2);
493511
min-height: 30px;
494512
background-color: $item-divider-bg;
495513
color: $item-divider-color;

Diff for: ‎scss/_variables.scss

+1
Original file line numberDiff line numberDiff line change
@@ -294,6 +294,7 @@ $item-icon-accessory-font-size: 16px !default;
294294

295295
$item-avatar-width: 40px !default;
296296
$item-avatar-height: 40px !default;
297+
$item-avatar-border-radius: 4px !default;
297298

298299
$item-thumbnail-width: 80px !default;
299300
$item-thumbnail-height: 80px !default;

Diff for: ‎test/html/lists.html

+18-56
Original file line numberDiff line numberDiff line change
@@ -219,22 +219,10 @@ <h1 class="title">Lists</h1>
219219
</button>
220220
</div>
221221

222-
<a href="#" class="item item-complex">
223-
<div class="item-content slide-right">
224-
Auto Right side arrow cuz its a link
225-
</div>
226-
</a>
227-
228-
<div class="item item-complex" ng-click="asdf()">
229-
<div class="item-content slide-right">
230-
Auto Right side arrow cuz it has an ng-click
231-
</div>
232-
</div>
233-
234222
<a href="#" class="item item-complex item-icon-right">
235223
<div class="item-content slide-right">
236224
Processing Icon
237-
<i class="icon ion-loading"></i>
225+
<i class="icon ion-loading-b"></i>
238226
</div>
239227
</a>
240228

@@ -262,24 +250,6 @@ <h1 class="title">Lists</h1>
262250
</div>
263251
</a>
264252

265-
<a href="#" class="item item-complex">
266-
<div class="item-content slide-left">
267-
Multiple Badges
268-
<span class="badge badge-light">1</span>
269-
<span class="badge badge-stable">2</span>
270-
<span class="badge badge-positive">3</span>
271-
<span class="badge badge-calm">4</span>
272-
<span class="badge badge-balanced">7</span>
273-
<span class="badge badge-assertive">5</span>
274-
<span class="badge badge-energized">6</span>
275-
<span class="badge badge-royal">8</span>
276-
<span class="badge badge-dark">9</span>
277-
</div>
278-
<div class="item-options">
279-
<button class="button">Button</button>
280-
</div>
281-
</a>
282-
283253
</div>
284254

285255
<h3>List with padding</h3>
@@ -478,30 +448,26 @@ <h3>Thumbnails .item-thumbnail</h3>
478448
<div class="list">
479449

480450
<a href="#" class="item item-avatar-left">
481-
<div class="item-content">
482-
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
483-
<h2>Pretty Hate Machine</h2>
484-
<p>Nine Inch Nails</p>
485-
</div>
451+
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
452+
<h2>Pretty Hate Machine</h2>
453+
<p>Nine Inch Nails</p>
486454
</a>
487455

488-
<a href="#" class="item item-avatar-left">
456+
<a href="#" class="item item-complex item-avatar-left">
489457
<div class="item-content">
490458
<img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
491459
<h2>Nevermind</h2>
492460
<p>Nirvana</p>
493461
</div>
494462
</a>
495463

496-
<a href="#" class="item item-avatar-left">
497-
<div class="item-content">
498-
<img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
499-
<h2>License To Ill</h2>
500-
<p>Bestie Boys</p>
501-
</div>
464+
<a href="#" class="item item-avatar-right">
465+
<img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
466+
<h2>License To Ill</h2>
467+
<p>Bestie Boys</p>
502468
</a>
503469

504-
<a href="#" class="item item-avatar-left">
470+
<a href="#" class="item item-complex item-avatar-right">
505471
<div class="item-content">
506472
<img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
507473
<h2>gjpqy</h2>
@@ -515,14 +481,12 @@ <h3>Large Thumbnails .item-thumbnail-left and .item-thumbnail-right</h3>
515481
<div class="list">
516482

517483
<a href="#" class="item item-thumbnail-left">
518-
<div class="item-content">
519-
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
520-
<h2>Pretty Hate Machine</h2>
521-
<p>Nine Inch Nails</p>
522-
</div>
484+
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
485+
<h2>Pretty Hate Machine</h2>
486+
<p>Nine Inch Nails</p>
523487
</a>
524488

525-
<a href="#" class="item item-thumbnail-left">
489+
<a href="#" class="item item-complex item-thumbnail-left">
526490
<div class="item-content">
527491
<img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
528492
<h2>Nevermind</h2>
@@ -531,14 +495,12 @@ <h2>Nevermind</h2>
531495
</a>
532496

533497
<a href="#" class="item item-thumbnail-right">
534-
<div class="item-content">
535-
<img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
536-
<h2>License To Ill</h2>
537-
<p>Bestie Boys</p>
538-
</div>
498+
<img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
499+
<h2>License To Ill</h2>
500+
<p>Bestie Boys</p>
539501
</a>
540502

541-
<a href="#" class="item item-thumbnail-right">
503+
<a href="#" class="item item-complex item-thumbnail-right">
542504
<div class="item-content">
543505
<img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
544506
<h2>Dookie</h2>

0 commit comments

Comments
 (0)