Skip to content

Commit

Permalink
fix(image): support centered div and adjusted aligned groups
Browse files Browse the repository at this point in the history
The current image component can only be centered with img element. It is not able
to center when using a different HTML element, for example, an image link with
anchor tag or a DIV container.

This PR would support to center the image not only for img tag, but also for other
HTML element by using `centered` flag.

This PR would also support to display the group images horizontally center. Additionally
the group images can now share the same vertical alignment as `top`, `middle` or `bottom`
together or can have it's own vertical alignment.

Closes: #1608
  • Loading branch information
ko2in authored Jul 30, 2020
1 parent 9866014 commit 51ca1ed
Showing 1 changed file with 20 additions and 4 deletions.
24 changes: 20 additions & 4 deletions src/definitions/elements/image.less
Original file line number Diff line number Diff line change
Expand Up @@ -91,27 +91,36 @@ img.ui.image {
Vertical Aligned
-------------------*/

.ui.top.aligned.images .image,
.ui.top.aligned.image,
.ui.top.aligned.image svg,
.ui.top.aligned.image img {
display: inline-block;
vertical-align: top;
}
.ui.middle.aligned.images .image,
.ui.middle.aligned.image,
.ui.middle.aligned.image svg,
.ui.middle.aligned.image img {
display: inline-block;
vertical-align: middle;
}
.ui.bottom.aligned.images .image,
.ui.bottom.aligned.image,
.ui.bottom.aligned.image svg,
.ui.bottom.aligned.image img {
display: inline-block;
vertical-align: bottom;
}
.ui.top.aligned.images .image,
.ui.images .ui.top.aligned.image {
align-self: flex-start;
}
.ui.middle.aligned.images .image,
.ui.images .ui.middle.aligned.image {
align-self: center;
}
.ui.bottom.aligned.images .image,
.ui.images .ui.bottom.aligned.image {
align-self: flex-end;
}
}

& when (@variationImageRounded) {
Expand Down Expand Up @@ -250,11 +259,18 @@ img.ui.image {
}

& when (@variationImageCentered) {
.ui.centered.images,
.ui.centered.image {
display: block;
margin-left: auto;
margin-right: auto;
}
.ui.centered.images {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
}
}

/*--------------
Expand Down

0 comments on commit 51ca1ed

Please sign in to comment.