Skip to content

Commit

Permalink
fix(icon): adjust icons width to match single icon
Browse files Browse the repository at this point in the history
I have a dropdown with two items

The first item has a simple icon

<i class="blue file excel outline icon"></i>

The second one has two grouped icons

<i class="icons">
    <i class="red file excel outline icon"></i>
    <i class="red bottom right corner key icon"></i>
</i>
Because the .icon has a width and the .icons does not visually they look off. The grouped icons has a smaller width then the simple icon

This PR adds a min-width to the .icons to make sure that the .icons group will be at least the same size of the .icon
I didn't want to use width because in some cases maybe the grouped icons need more space.

For the same reason i added a min-width i added also a min-height.
the height is not the cause of my problem, but i think it's best to add it as well.
  • Loading branch information
shadoWalker89 committed Sep 17, 2021
1 parent aad2a1f commit 344d349
Showing 1 changed file with 5 additions and 0 deletions.
5 changes: 5 additions & 0 deletions src/definitions/elements/icon.less
Expand Up @@ -105,6 +105,7 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
Fitted
--------------------*/

i.fitted.icons,
i.fitted.icon {
width: auto;
margin: 0 !important;
Expand Down Expand Up @@ -376,6 +377,10 @@ i.icons {
display: inline-block;
position: relative;
line-height: 1;
min-width: @width;
min-height: @height;
margin: 0 @distanceFromText 0 0;
text-align: center;
}

i.icons .icon {
Expand Down

0 comments on commit 344d349

Please sign in to comment.