<!-- Default -->
<span class="c-badge">
default
</span>
<!-- User -->
<span class="c-badge c-badge--user">HAZ+</span>
<!-- Prop -->
<span class="c-badge c-badge--prop c-badge--prop-gallery">
12
</span>
<!-- Default -->
<span class="c-badge{% if additionalClasses %} {{ additionalClasses }}{% endif %}">
{{ text }}
</span>
<!-- User -->
<span class="c-badge c-badge--user{% if additionalClasses %} {{ additionalClasses }}{% endif %}">{{ text }}</span>
<!-- Prop -->
<span class="c-badge c-badge--prop{% if modifier %} c-badge--prop-{{ modifier }}{% endif %}{% if additionalClasses %} {{ additionalClasses }}{% endif %}">
{{ text }}
</span>
/* Default */
{
"text": "default",
"additionalClasses": ""
}
/* User */
{
"text": "HAZ+",
"additionalClasses": ""
}
/* Prop */
{
"text": "12",
"additionalClasses": "",
"modifier": "gallery"
}
.c-badge {
background-color: $color-grey-light;
color: $color-white;
display: inline-block;
font-size: rem-calc(13);
line-height: rem-calc(14);
margin: 0 .2em 0 0;
padding: 1px .4em;
position: relative;
&--user {
background-color: $color-yellow;
text-shadow: 0 0 4px #cc9900;
}
&--prop {
background-color: $color-grey;
font-family: $body-font-family;
// Font Awesome migration
&::before {
content: '';
display: inline-block;
font-family: "Font Awesome 5 Free", sans-serif;
font-size: rem-calc(13);
font-style: normal;
font-variant: normal;
font-weight: 900;
margin-right: .2em;
text-rendering: auto;
}
}
&--user,
&--prop {
border-radius: rem-calc(2);
font-weight: 700;
}
&--outline {
border: 1px solid $color-white;
}
// Icons (See /node_modules/@fortawesome/fontawesome-free/css/fontawesome.css)
&--prop-gallery::before {
// Camera
content: '\f030';
}
&--prop-video::before {
// Video
content: '\f03d';
}
&.c-badge--large {
font-size: rem-calc(24);
font-weight: 600;
line-height: 1;
padding: .2em .4em;
}
}
There are no notes for this item.