Префиксы тем с иконками

[XenBaza]

Tristan добавил(а) новый ресурс:

Префиксы тем с иконками - Красивые и стильные префиксы тем с иконками

Добавляем в extra.less, лучше модификацией, объяснять не буду здесь и так все умные.

@svgPrefixBorderRadius: @xf-borderRadiusSmall; // Радиус префиксов
@svgPrefixFontFamily: inherit;                 // Семейство шрифта префикса
@svgPrefixColorGradient: rgba(0,0,0,.4);       // Цвет градиента прификса
@svgPrefixTextShadow: rgba(0,0,0,.5);          // Цвет тени префикса

.svgPrefix,
.label.svgPrefix
{
    font-family: @svgPrefixFontFamily;
    font-size: 70%;
    font-weight: 500...

Узнать больше об этом ресурсе...

 

[XenBaza]

Код

// ==================================================
// НАСТРОЙКИ
// ==================================================

@svgPrefixBorderRadius: 3px;
@svgPrefixFontSize: x-small;
@svgPrefixFontWeight: 700;
@svgPrefixIconGap: 4px;
@svgPrefixPaddingX: 6px;
@svgPrefixPaddingY: 2px;

// ==================================================
// БАЗОВЫЙ СТИЛЬ
// ==================================================

.svgPrefix,
.label.svgPrefix
{
font-size: @svgPrefixFontSize;
font-weight: @svgPrefixFontWeight;
display: inline-flex;
align-items: center;
text-transform: uppercase;
line-height: 1.2;
padding: @svgPrefixPaddingY @svgPrefixPaddingX;
margin: 0 2px 0 0;
border: 1px solid transparent;
background: transparent;
border-radius: @svgPrefixBorderRadius;
white-space: nowrap;
text-decoration: none;
box-sizing: border-box;

&:before {
margin-right: @svgPrefixIconGap;
flex-shrink: 0;
}
}

// ==================================================
// МИКСИН ДЛЯ ПРЕФИКСОВ
// ==================================================

.svgLabelPrefix(@prefix-name, @prefix-color, @prefix-icon: "none")
{
.svgPrefix.@{prefix-name},
.label.svgPrefix.@{prefix-name}
{
color: @prefix-color;
border-color: @prefix-color;

&when not (@prefix-icon = "none")
{
&:before
{
.m-faBase();
.m-faContent(@prefix-icon);
font-size: 1.1em;
}
}
}

a.svgPrefix.@{prefix-name}:hover,
a.label.svgPrefix.@{prefix-name}:hover,
a:hover .svgPrefix.@{prefix-name},
a:hover .label.svgPrefix.@{prefix-name}
{
border-color: @prefix-color;
color: @prefix-color;
}
}

// ==================================================
// Префиксы
// ==================================================

.svgLabelPrefix(vpn, #2857b8, @fa-var-plug);