Skip to content

K
kpp
Commit 44292ea9 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Добавил label

parent 004f3e6d
Show whitespace changes
Inline Side-by-side
Showing with 70 additions and 284 deletions
package.json
View file @ 44292ea9
......@@ -36,7 +36,8 @@
"field-actions": [],
"form": [],
"dropdown": [],
"menu": []
"menu": [],
"label": []
},
"addCssBefore": [
"./src/scss/variables.scss",
......
src/blocks-demo.html
View file @ 44292ea9
......@@ -1171,6 +1171,27 @@
</section>
<section class="blocks-library__item" id="label" data-name=".label">
<h2 class="blocks-library__item-title">Лейблы</h2>
<div class="label">Метка-<code>div</code></div>
<span class="label">Метка-<code>span</code></span>
<a href="" class="label">Метка-<code>a</code></a>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre class="code">
<code>&lt;div class="label">Метка-&lt;code>div&lt;/code>&lt;/div></code>
<code>&lt;span class="label">Метка-&lt;code>span&lt;/code>&lt;/span></code>
<code>&lt;a href="" class="label">Метка-&lt;code>a&lt;/code>&lt;/a></code>
</pre>
</div>
</div>
</section>
</div>
<style>
......
src/blocks/label/label--absolute.less deleted 100644 → 0
View file @ 004f3e6d
// Для импорта в диспетчер подключений: @import './src/blocks/label/label--absolute.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.label {
&--absolute {
position: absolute;
z-index: 1;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
}
src/blocks/label/label--circle.less deleted 100644 → 0
View file @ 004f3e6d
// Для импорта в диспетчер подключений: @import './src/blocks/label/label--circle.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.label {
&--circle {
border-radius: 1.45em;
}
}
src/blocks/label/label--tag.less deleted 100644 → 0
View file @ 004f3e6d
// Для импорта в диспетчер подключений: @import './src/blocks/label/label--tag.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.label {
&--tag {
margin-left: 1em;
padding-left: 0.7em;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
&:before {
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-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%;
background-position: 100% 0;
position: absolute;
top: 0;
right: 100%;
transform: translateX(0.15em);
width: 1em;
height: 1.45em; // line-height + patting-top + padding-bottom
.label--main& {
// ВНИМАНИЕ! В строку с URL-кодированным SVG интерполирована переменная с цветом!
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="15" height="24" viewBox="0 0 15 24"><path fill="@{color-main}" d="M12.03 0L0 12l12.03 12H15V0z"/></svg>');
background-image: url('data:image/svg+xml,@{svg}');
}
.label--danger& {
// ВНИМАНИЕ! В строку с URL-кодированным SVG интерполирована переменная с цветом!
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="15" height="24" viewBox="0 0 15 24"><path fill="@{color-danger}" d="M12.03 0L0 12l12.03 12H15V0z"/></svg>');
background-image: url('data:image/svg+xml,@{svg}');
}
.label--success& {
// ВНИМАНИЕ! В строку с URL-кодированным SVG интерполирована переменная с цветом!
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="15" height="24" viewBox="0 0 15 24"><path fill="@{color-success}" d="M12.03 0L0 12l12.03 12H15V0z"/></svg>');
background-image: url('data:image/svg+xml,@{svg}');
}
}
&:after {
position: absolute;
content: '';
top: 50%;
left: -0.2em;
margin-top: -0.25em;
background-color: @body-bg !important;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.3);
}
}
}
src/blocks/label/label.html
View file @ 44292ea9
<!--DEV
<div class="label">
Метка-<code>div</code>
<span class="label__detail">23</span>
</div>
<div class="label">Метка-<code>div</code></div>
<span class="label">
Метка-<code>span</code>
<span class="label__detail">999</span>
</span>
<span class="label">Метка-<code>span</code></span>
<a href="" class="label">
Метка-<code>a</code>
<span class="label__detail">7</span>
</a>
<a href="" class="label">Метка-<code>a</code></a>
-->
src/blocks/label/label.less deleted 100644 → 0
View file @ 004f3e6d
// Для импорта в диспетчер подключений: @import './src/blocks/label/label.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.label {
display: inline-block;
position: relative;
margin: 0 0.1em;
vertical-align: baseline;
line-height: 1;
padding: 0.25em 0.4em 0.2em;
background-color: @gray-lighter;
color: @text-color;
text-decoration: none;
text-transform: none;
font-weight: 700;
font-size: 75%;
white-space: nowrap;
border-radius: @border-radius;
&:hover,
&:focus {
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/label/label.scss 0 → 100644
View file @ 44292ea9
// В этом файле должны быть стили только для БЭМ-блока label, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// Не пишите здесь другие селекторы.
$gray-lightest: hsl(0, 0%, 90%) !default;
$color-main: hsl(208, 98%, 43%) !default;
$text-color: hsl(0, 0%, 10%) !default;
$border-radius: 3px !default;
.label {
display: inline-block;
position: relative;
margin: 0 0.1em;
vertical-align: baseline;
line-height: 1;
padding: 0.25em 0.4em 0.2em;
background-color: $gray-lightest;
color: $text-color;
text-decoration: none;
text-transform: none;
font-weight: 700;
font-size: 75%;
white-space: nowrap;
border-radius: $border-radius;
&:hover,
&:focus {
color: $text-color;
text-decoration: none;
}
// &--main {
// background-color: $color-main;
// color: #fff;
// &:hover,
// &:focus {
// color: #fff;
// }
// }
}
src/blocks/label/label__detail.less deleted 100644 → 0
View file @ 004f3e6d
// Для импорта в диспетчер подключений: @import './src/blocks/label/label__detail.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.label {
&__detail {
display: inline-block;
margin-left: 0.4em;
opacity: 0.7;
}
}
src/blocks/label/svg_to_bg/tag-bg.svg deleted 100644 → 0
View file @ 004f3e6d
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="24" viewBox="0 0 15 24"><path fill="#000" d="M12.03 0L0 12l12.03 12H15V0z"/></svg>
src/blocks/list-nums/list-nums--main.less deleted 100644 → 0
View file @ 004f3e6d
// Для импорта в диспетчер подключений: @import './src/blocks/list-nums/list-nums--main.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.list-nums {
&--main {
& > li {
&:before {
color: #fff;
background-color: @color-main;
}
}
}
}
src/blocks/list-nums/list-nums.html deleted 100644 → 0
View file @ 004f3e6d
<!--DEV
<ol class="list-nums">
<li>Далеко-далеко за словесными горами.</li>
<li>Одна послушавшись дал, большого.</li>
<li>Проектах за вопрос курсивных.</li>
<li>Власти, она себя за?</li>
<li>Решила алфавит, назад маленький.</li>
</ol>
-->
src/blocks/list-nums/list-nums.less deleted 100644 → 0
View file @ 004f3e6d
// Для импорта в диспетчер подключений: @import './src/blocks/list-nums/list-nums.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.list-nums {
list-style: none;
padding-left: 0;
counter-reset: li;
& & {
counter-reset: li-in;
padding-top: 0.25em;
& > li,
& > &__item {
&:before {
content: counter(li) '.' counter(li-in);
counter-increment: li-in;
}
}
}
& > li,
& > &__item {
position: relative;
padding-left: 1.8em;
padding-top: 0.25em;
padding-bottom: 0.25em;
&:before {
content: counter(li);
counter-increment: li;
position: absolute;
top: 0.35em;
left: 0;
font-size: 70%;
width: 1.9em;
height: 1.9em;
line-height: 2em;
color: #fff;
background-color: @gray-light;
border-radius: 50%;
text-align: center;
}
}
}
src/blocks/list-nums/list-nums__item.less deleted 100644 → 0
View file @ 004f3e6d
// Для импорта в диспетчер подключений: @import './src/blocks/list-nums/list-nums__item.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.list-nums {
& > &__item {
&--main {
&:before {
color: #fff;
background-color: @color-main;
}
}
}
}
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