Skip to content

Commit 0905ccf

Browse files
authored
feat(list): icon buttons were misaligned
When an icon button was used inside lists, those got vertical misaligned, because the icon selector was not aware of this and always assumed an i-tag which this PR now makes clear.
1 parent 2239f64 commit 0905ccf

File tree

1 file changed

+12
-12
lines changed

1 file changed

+12
-12
lines changed

src/definitions/elements/list.less

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -158,18 +158,18 @@ ol.ui.list ol li,
158158
}
159159
& when (@variationListImage) or (@variationListIcon) {
160160
.ui.list .list > .item > .image + .content,
161-
.ui.list .list > .item > .icon + .content,
161+
.ui.list .list > .item > i.icon + .content,
162162
.ui.list > .item > .image + .content,
163-
.ui.list > .item > .icon + .content {
163+
.ui.list > .item > i.icon + .content {
164164
display: table-cell;
165165
width: 100%;
166166
padding: 0 0 0 @contentDistance;
167167
vertical-align: @contentVerticalAlign;
168168
}
169169
}
170170
& when (@variationListIcon) {
171-
.ui.list .list > .item > .loading.icon + .content,
172-
.ui.list > .item > .loading.icon + .content {
171+
.ui.list .list > .item > i.loading.icon + .content,
172+
.ui.list > .item > i.loading.icon + .content {
173173
padding-left: e(%("calc(%d + %d)", @iconDistance, @contentDistance));
174174
}
175175
}
@@ -321,8 +321,8 @@ ol.ui.list ol li,
321321
}
322322
.ui.horizontal.list > .item > .image,
323323
.ui.horizontal.list .list > .item > .image,
324-
.ui.horizontal.list > .item > .icon,
325-
.ui.horizontal.list .list > .item > .icon,
324+
.ui.horizontal.list > .item > i.icon,
325+
.ui.horizontal.list .list > .item > i.icon,
326326
.ui.horizontal.list > .item > .content,
327327
.ui.horizontal.list .list > .item > .content {
328328
vertical-align: @horizontalVerticalAlign;
@@ -344,8 +344,8 @@ ol.ui.list ol li,
344344
}
345345
& when (@variationListImage) or (@variationListIcon) {
346346
.ui.horizontal.list > .item > .image + .content,
347-
.ui.horizontal.list > .item > .icon,
348-
.ui.horizontal.list > .item > .icon + .content {
347+
.ui.horizontal.list > .item > i.icon,
348+
.ui.horizontal.list > .item > i.icon + .content {
349349
float: none;
350350
display: inline-block;
351351
width: auto;
@@ -386,8 +386,8 @@ ol.ui.list ol li,
386386
& when (@variationListIcon) {
387387
.ui.list .list > a.item:hover > .icons,
388388
.ui.list > a.item:hover > .icons,
389-
.ui.list .list > a.item:hover > .icon,
390-
.ui.list > a.item:hover > .icon {
389+
.ui.list .list > a.item:hover > i.icon,
390+
.ui.list > a.item:hover > i.icon {
391391
color: @itemLinkIconHoverColor;
392392
}
393393
}
@@ -401,8 +401,8 @@ ol.ui.list ol li,
401401
Inverted
402402
--------------------*/
403403
& when (@variationListIcon) {
404-
.ui.inverted.list .list > a.item > .icon,
405-
.ui.inverted.list > a.item > .icon {
404+
.ui.inverted.list .list > a.item > i.icon,
405+
.ui.inverted.list > a.item > i.icon {
406406
color: @invertedIconLinkColor;
407407
}
408408
}

0 commit comments

Comments
 (0)