Skip to content

K
kpp
Commit 40bd32ca authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

label fix

parent 1b06c6b2
Show whitespace changes
Inline Side-by-side
Showing with 82 additions and 34 deletions
src/blocks/label/label--tag.less
View file @ 40bd32ca
......@@ -13,7 +13,7 @@
content: '';
// Изображение: svg_to_bg/tag-bg.svg
// ВНИМАНИЕ! В строку с URL-кодированным SVG интерполирована переменная с цветом!
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="15" height="24" viewBox="0 0 15 24"><path fill="@{gray}" d="M12.03 0L0 12l12.03 12H15V0z"/></svg>');
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="15" height="24" viewBox="0 0 15 24"><path fill="@{gray-lighter}" d="M12.03 0L0 12l12.03 12H15V0z"/></svg>');
background-image: url("data:image/svg+xml,@{svg}");
background-repeat: no-repeat;
background-size: auto 100%;
......@@ -54,6 +54,7 @@
width: 0.5em;
height: 0.5em;
border-radius: 50%;
box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.3);
}
}
}
src/blocks/label/label.less
View file @ 40bd32ca
......@@ -8,8 +8,8 @@
vertical-align: baseline;
line-height: 1;
padding: 0.25em 0.4em 0.2em;
background-color: @gray;
color: #fff;
background-color: @gray-lighter;
color: @text-color;
text-decoration: none;
text-transform: none;
font-weight: 700;
......@@ -18,23 +18,51 @@
border-radius: @border-radius;
&:hover, &:focus {
color: #fff;
color: @text-color;
text-decoration: none;
}
svg {
fill: @text-color;
}
&--main {
background-color: @color-main;
color: #fff;
&:hover, &:focus {
color: #fff;
}
svg {
fill: #fff;
}
}
&--danger {
background-color: @color-danger;
color: #fff;
&:hover, &:focus {
color: #fff;
}
svg {
fill: #fff;
}
}
&--success {
background-color: @color-success;
color: #fff;
&:hover, &:focus {
color: #fff;
}
svg {
fill: #fff;
}
}
}
src/blocks_library.html
View file @ 40bd32ca
......@@ -1522,45 +1522,64 @@ $('#test').on('hidden.nth.dropdown', function () {
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Элемент: <code>label__detail</code> (отдельный LESS-файл)</b>
<div class="p">
Обычный текст
<div class="label">
Метка-div
<span class="label__detail">23</span>
</div>
Обычный текст
<span class="label">
Метка-span
<span class="label__detail">999</span>
</span>
Обычный текст
<a href="" class="label">
Метка-ссылка
<span class="label__detail">7</span>
</a>
Метки-<code>span</code>:
<span class="label">Метка <span class="label__detail">7</span></span>
<span class="label label--main">Метка <span class="label__detail">7</span></span>
<span class="label label--danger">Метка <span class="label__detail">7</span></span>
<span class="label label--success">Метка <span class="label__detail">7</span></span>
Метки-<code>div</code>:
<div class="label">Метка <span class="label__detail">7</span></div>
<div class="label label--main">Метка <span class="label__detail">7</span></div>
<div class="label label--danger">Метка <span class="label__detail">7</span></div>
<div class="label label--success">Метка <span class="label__detail">7</span></div>
Метки-ссылки:
<a href="" class="label">Метка <span class="label__detail">7</span></a>
<a href="" class="label label--main">Метка <span class="label__detail">7</span></a>
<a href="" class="label label--danger">Метка <span class="label__detail">7</span></a>
<a href="" class="label label--success">Метка <span class="label__detail">7</span></a>
</div>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Модификатор: <code>label--tag</code> (отдельный LESS-файл)</b>
<div class="p">
Обычный текст
<div class="label label--tag">Метка-div</div>
Обычный текст
<span class="label label--tag">Метка-span</span>
Обычный текст
<a href="" class="label label--tag">Метка-ссылка</a>
Метки-<code>span</code>:
<span class="label label--tag">Метка <span class="label__detail">7</span></span>
<span class="label label--tag label--main">Метка</span>
<span class="label label--tag label--danger">Метка</span>
<span class="label label--tag label--success">Метка</span>
Метки-<code>div</code>:
<div class="label label--tag">Метка</div>
<div class="label label--tag label--main">Метка</div>
<div class="label label--tag label--danger">Метка</div>
<div class="label label--tag label--success">Метка</div>
Метки-ссылки:
<a href="" class="label label--tag">Метка</a>
<a href="" class="label label--tag label--main">Метка</a>
<a href="" class="label label--tag label--danger">Метка</a>
<a href="" class="label label--tag label--success">Метка</a>
</div>
<p>Внимание: круг внутри метки не прозрачный! Это <code>@body-bg</code> (по умолчанию — <code>#fff</code>).</p>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Модификатор: <code>label--circle</code> (отдельный LESS-файл)</b>
<div class="p">
Обычный текст
<div class="label label--circle">Метка-div</div>
Обычный текст
<span class="label label--circle">Метка-span</span>
Обычный текст
<a href="" class="label label--circle">Метка-ссылка</a>
Метки-<code>span</code>:
<span class="label label--circle">Метка</span>
<span class="label label--circle label--main">Метка</span>
<span class="label label--circle label--danger">Метка</span>
<span class="label label--circle label--success">Метка</span>
Метки-<code>div</code>:
<div class="label label--circle">Метка</div>
<div class="label label--circle label--main">Метка</div>
<div class="label label--circle label--danger">Метка</div>
<div class="label label--circle label--success">Метка</div>
Метки-ссылки:
<a href="" class="label label--circle">Метка</a>
<a href="" class="label label--circle label--main">Метка</a>
<a href="" class="label label--circle label--danger">Метка</a>
<a href="" class="label label--circle label--success">Метка</a>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment