Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

Flag component

Browse Source
This commit is contained in:
mrszympek
2019-06-01 17:23:43 +02:00
parent cde7893407
commit ef40b91ef8
4 changed files with 45 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
pages/_docs/flags.md Normal file
View File

@@ -0,0 +1,22 @@
---
title: Flags
menu: docs.flags
---
## Flag
{% example html %}
{% include ui/flag.html name="tg" class="mr-1" %}
{% include ui/flag.html name="br" class="mr-1" %}
{% include ui/flag.html name="pt" %}
{% endexample %}
## Flag sizes
{% example html %}
{% include ui/flag.html name="tg" class="flag-size-xl mr-1" %}
{% include ui/flag.html name="br" class="flag-size-lg mr-1" %}
{% include ui/flag.html name="pt" class="flag-size-md" %}
{% include ui/flag.html name="gb" class="mr-1" %}
{% include ui/flag.html name="gr" class="flag-size-sm" %}
{% endexample %}

1
pages/_includes/ui/flag.html Normal file
View File

@@ -0,0 +1 @@
<span class="flag flag-{{ include.name }}{% if include.class %} {{ include.class }}{% endif %}"></span>

19
pages/flags.html
View File

@@ -1,11 +1,14 @@
--- ---
title: Flags
page-title: Flags
done: true
--- ---
<div class="d-flex flex-row flex-wrap"> <div class="d-flex flex-row flex-wrap">
{% for flag in site.data.flags %} {% for flag in site.data.flags %}
<div class="d-flex flex-column text-center m-3"> <div class="d-flex flex-column text-center m-3">
<p class="d-inline-block">{{flag.name}}</p> <p class="d-inline-block">{{flag.name}}</p>
<span class="flag flag-{{flag.flag}} my-3 mx-auto"></span> {% include ui/flag.html name=flag.flag class="my-3 mx-auto" %}
<code>.flag .flag-{{flag.flag}}</code> <code>.flag .flag-{{flag.flag}}</code>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>

14
scss/ui/_flags.scss
View File

@@ -19,13 +19,14 @@
.flag { .flag {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 1.3333em; width: 2em;
height: 1em; height: 2rem;
line-height: 1em; line-height: 2rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 50%; background-position: 50%;
background-size: contain; background-size: contain;
border-radius: 2px; border-radius: 2px;
vertical-align: bottom;
} }
.flag::before { .flag::before {
@@ -39,3 +40,10 @@
} }
} }
@each $avatar-size, $size in $avatar-sizes {
.flag-size-#{$avatar-size} {
width: $size;
height: $size;
line-height: $size;
}
}