Skip to content

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

label fix

parent 1b06c6b2
Hide 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 @@ ...@@ -13,7 +13,7 @@
content: ''; content: '';
// Изображение: svg_to_bg/tag-bg.svg // Изображение: svg_to_bg/tag-bg.svg
// ВНИМАНИЕ! В строку с URL-кодированным 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-image: url("data:image/svg+xml,@{svg}");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: auto 100%; background-size: auto 100%;
...@@ -54,6 +54,7 @@ ...@@ -54,6 +54,7 @@
width: 0.5em; width: 0.5em;
height: 0.5em; height: 0.5em;
border-radius: 50%; 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 @@ ...@@ -8,8 +8,8 @@
vertical-align: baseline; vertical-align: baseline;
line-height: 1; line-height: 1;
padding: 0.25em 0.4em 0.2em; padding: 0.25em 0.4em 0.2em;
background-color: @gray; background-color: @gray-lighter;
color: #fff; color: @text-color;
text-decoration: none; text-decoration: none;
text-transform: none; text-transform: none;
font-weight: 700; font-weight: 700;
...@@ -18,23 +18,51 @@ ...@@ -18,23 +18,51 @@
border-radius: @border-radius; border-radius: @border-radius;
&:hover, &:focus { &:hover, &:focus {
color: #fff; color: @text-color;
text-decoration: none; text-decoration: none;
} }
svg {
fill: @text-color;
}
&--main { &--main {
background-color: @color-main; background-color: @color-main;
color: #fff;
&:hover, &:focus {
color: #fff;
}
svg {
fill: #fff;
}
} }
&--danger { &--danger {
background-color: @color-danger; background-color: @color-danger;
color: #fff;
&:hover, &:focus {
color: #fff;
}
svg {
fill: #fff;
}
} }
&--success { &--success {
background-color: @color-success; background-color: @color-success;
} color: #fff;
svg { &:hover, &:focus {
fill: #fff; color: #fff;
}
svg {
fill: #fff;
}
} }
} }
src/blocks_library.html
View file @ 40bd32ca
...@@ -1522,45 +1522,64 @@ $('#test').on('hidden.nth.dropdown', function () { ...@@ -1522,45 +1522,64 @@ $('#test').on('hidden.nth.dropdown', function () {
<div class="blocks-library__sub-item"> <div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Элемент: <code>label__detail</code> (отдельный LESS-файл)</b> <b class="blocks-library__sub-item-title">Элемент: <code>label__detail</code> (отдельный LESS-файл)</b>
<div class="p"> <div class="p">
Обычный текст Метки-<code>span</code>:
<div class="label"> <span class="label">Метка <span class="label__detail">7</span></span>
Метка-div <span class="label label--main">Метка <span class="label__detail">7</span></span>
<span class="label__detail">23</span> <span class="label label--danger">Метка <span class="label__detail">7</span></span>
</div> <span class="label label--success">Метка <span class="label__detail">7</span></span>
Обычный текст Метки-<code>div</code>:
<span class="label"> <div class="label">Метка <span class="label__detail">7</span></div>
Метка-span <div class="label label--main">Метка <span class="label__detail">7</span></div>
<span class="label__detail">999</span> <div class="label label--danger">Метка <span class="label__detail">7</span></div>
</span> <div class="label label--success">Метка <span class="label__detail">7</span></div>
Обычный текст Метки-ссылки:
<a href="" class="label"> <a href="" class="label">Метка <span class="label__detail">7</span></a>
Метка-ссылка <a href="" class="label label--main">Метка <span class="label__detail">7</span></a>
<span class="label__detail">7</span> <a href="" class="label label--danger">Метка <span class="label__detail">7</span></a>
</a> <a href="" class="label label--success">Метка <span class="label__detail">7</span></a>
</div> </div>
</div> </div>
<div class="blocks-library__sub-item"> <div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Модификатор: <code>label--tag</code> (отдельный LESS-файл)</b> <b class="blocks-library__sub-item-title">Модификатор: <code>label--tag</code> (отдельный LESS-файл)</b>
<div class="p"> <div class="p">
Обычный текст Метки-<code>span</code>:
<div class="label label--tag">Метка-div</div> <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">Метка-span</span> <span class="label label--tag label--danger">Метка</span>
Обычный текст <span class="label label--tag label--success">Метка</span>
<a href="" class="label label--tag">Метка-ссылка</a> Метки-<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> </div>
<p>Внимание: круг внутри метки не прозрачный! Это <code>@body-bg</code> (по умолчанию — <code>#fff</code>).</p>
</div> </div>
<div class="blocks-library__sub-item"> <div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Модификатор: <code>label--circle</code> (отдельный LESS-файл)</b> <b class="blocks-library__sub-item-title">Модификатор: <code>label--circle</code> (отдельный LESS-файл)</b>
<div class="p"> <div class="p">
Обычный текст Метки-<code>span</code>:
<div class="label label--circle">Метка-div</div> <span class="label label--circle">Метка</span>
Обычный текст <span class="label label--circle label--main">Метка</span>
<span class="label label--circle">Метка-span</span> <span class="label label--circle label--danger">Метка</span>
Обычный текст <span class="label label--circle label--success">Метка</span>
<a href="" class="label label--circle">Метка-ссылка</a> Метки-<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>
</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