Skip to content

Commit

Permalink
feat(flag): use emoji svg flags with (auto) sizing
Browse files Browse the repository at this point in the history
This PR replaces the sprite flag backgrounds by the new emoji flags keeping existing code bases backward compatible (you still use <i class="uk flag"></i> as before)

Additionally

almost all countries are available now (famfamfam sprite misses a lot of flags)
flags can now be sized
they are autosized by current font-size if no size class is given
the old sprite approach was kept into an additional theme famfamfam which one can easily switch back by changing the flag theme in theme.config
  • Loading branch information
lubber-de committed Aug 9, 2021
1 parent ff6e030 commit 3ca5ff5
Show file tree
Hide file tree
Showing 5 changed files with 2,688 additions and 1,008 deletions.
24 changes: 7 additions & 17 deletions src/definitions/elements/flag.less
Expand Up @@ -24,29 +24,19 @@
*******************************/

i.flag:not(.icon) {
display: inline-block;

width: @width;
height: @height;

line-height: @height;
vertical-align: @verticalAlign;
margin: 0 @margin 0 0;

text-decoration: inherit;

speak: none;
-webkit-font-smoothing: antialiased;
backface-visibility: hidden;
}

/* Sprite */
i.flag:not(.icon):before {
content: '\00A0\00A0\00A0\00A0\00A0\00A0\00A0';
display: inline-block;
content: '';
background: url(@spritePath) no-repeat -108px -1976px;
width: @width;
height: @height;
line-height: @flagLineHeight;
background-repeat: no-repeat;
background-position: center center;
& when not (@flagFileType = 'svg') {
background-size: contain;
}
}

.loadUIOverrides();

0 comments on commit 3ca5ff5

Please sign in to comment.