Skip to content

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

library beautify

parent cccbb5f7
Hide whitespace changes
Inline Side-by-side
Showing with 137 additions and 78 deletions
src/blocks/blocks-library/blocks-library.less
View file @ a57a6da9
......@@ -40,4 +40,18 @@
&__title {
margin-top: 0;
}
&__sub-item {
&:not(:first-child) {
margin-top: 2.5em;
}
}
&__sub-item-title {
display: block;
color: @gray-light;
font-size: @font-size;
margin-bottom: 0.7em;
border-bottom: 2px dashed @gray-lighter;
}
}
src/blocks_library.html
View file @ a57a6da9
......@@ -1380,97 +1380,142 @@ $('#test').on('hidden.nth.dropdown', function () {
</section>
<section class="blocks-library__item" id="label" data-name=".label">
<div>
Обычный текст
<div class="p">
Метки-<code>span</code>:
<span class="label">Метка</span>
<span class="label label--main">Метка</span>
<span class="label label--danger">Метка</span>
<span class="label label--success">Метка</span>
|
Метки-<code>div</code>:
<div class="label">Метка</div>
<div class="label label--main">Метка</div>
<div class="label label--danger">Метка</div>
<div class="label label--success">Метка</div>
Метки-ссылки:
<a href="" class="label">Метка</a>
<a href="" class="label label--main">Метка</a>
<a href="" class="label label--danger">Метка</a>
<a href="" class="label label--success">Метка</a>
</div>
<p>
Метки с иконками:
<span class="label"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg> Метка</span>
<span class="label label--main"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-folder-open"></use></svg> Метка</span>
<span class="label label--danger"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-road"></use></svg> Метка</span>
<span class="label label--success"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-search"></use></svg> Метка</span>
|
<span class="label label--tag">Метка</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>
|
<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>
<br>
Обычный текст
<div class="label">
Метка-div с доп. примечанием
<span class="label__detail">23</span>
</p>
<div class="p">
Метки в кнопках:
<a href="" class="btn">Кнопка <span class="label">1</span></a>
<a href="" class="btn btn--danger">Кнопка <span class="label label--danger">1</span></a>
<a href="" class="btn btn--main">Кнопка <span class="label label--success">1</span></a>
<a href="" class="btn btn--sm">Кнопка <span class="label">1</span></a>
<a href="" class="btn btn--sm btn--danger">Кнопка <span class="label label--danger">1</span></a>
<a href="" class="btn btn--sm btn--main">Кнопка <span class="label label--success">1</span></a>
<a href="" class="btn btn--lg">Кнопка <span class="label">1</span></a>
<a href="" class="btn btn--lg btn--danger">Кнопка <span class="label label--danger">1</span></a>
<a href="" class="btn btn--lg btn--main">Кнопка <span class="label label--success">1</span></a>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Только иконка, нет текстового узла (увеличен размер шрифта родителя)</b>
<div class="p" style="font-size: 2.4rem">
<span class="label"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg></span>
<span class="label label--circle"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-folder-open"></use></svg></span>
<span class="label label--circle label--tag"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-road"></use></svg></span>
<span class="label label--danger"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-search"></use></svg></span>
</div>
Обычный текст
<span class="label">
Метка-span с доп. примечанием
<span class="label__detail">999</span>
</span>
Обычный текст
<a href="" class="label">
Метка-ссылка с доп. примечанием
<span class="label__detail">7</span>
</a>
</div>
<div class="row">
<div class="col-md-6">
<h1>Заголовок 1
<span class="label"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg> Метка</span>
<span class="label label--tag">Метка</span>
<span class="label label--circle label--tag">Метка</span>
</h1>
<h2>Заголовок 2
<span class="label label--main"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg> Метка</span>
<span class="label label--tag">Метка</span>
<span class="label label--circle label--tag">Метка</span>
</h2>
<h3>Заголовок 3
<span class="label label--danger"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg> Метка</span>
<span class="label label--tag">Метка</span>
<span class="label label--circle label--tag">Метка</span>
</h3>
<h4>Заголовок 4
<span class="label label--success"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg> Метка</span>
<span class="label label--tag">Метка</span>
<span class="label label--circle label--tag">Метка</span>
</h4>
<h5>Заголовок 5
<span class="label"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg> Метка</span>
<span class="label label--tag">Метка</span>
<span class="label label--circle label--tag">Метка</span>
</h5>
<h6>Заголовок 6
<span class="label"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg> Метка</span>
<span class="label label--tag">Метка</span>
</h6>
<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>
</div>
<div class="col-md-6">
<h1>Только иконка:
<span class="label"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg></span>
<span class="label label--circle"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-folder-open"></use></svg></span>
<span class="label label--circle label--tag"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-road"></use></svg></span>
<span class="label label--danger"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-search"></use></svg></span>
</h1>
<p>
Лейблы в кнопках:
<a href="" class="btn">Кнопка <span class="label">1</span></a>
<a href="" class="btn btn--danger">Кнопка <span class="label label--danger">1</span></a>
<a href="" class="btn btn--success">Кнопка <span class="label label--success">1</span></a>
</p>
<p>
Лейблы в кнопках:
<a href="" class="btn">Кнопка <span class="label label--absolute">1</span></a>
<a href="" class="btn btn--danger">Кнопка <span class="label label--absolute label--danger">1</span></a>
<a href="" class="btn btn--success">Кнопка <span class="label label--absolute label--success">1</span></a>
</p>
</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>
</div>
</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>
</div>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Размеры (без модификатора, относительно родительского элемента)</b>
<h1 style="margin: 1rem 0;">Заголовок 1
<span class="label"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg> Метка</span>
<span class="label label--tag">Метка</span>
<span class="label label--circle label--tag">Метка</span>
</h1>
<h2 style="margin: 1rem 0;">Заголовок 2
<span class="label label--main"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg> Метка</span>
<span class="label label--tag">Метка</span>
<span class="label label--circle label--tag">Метка</span>
</h2>
<h3 style="margin: 1rem 0;">Заголовок 3
<span class="label label--danger"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg> Метка</span>
<span class="label label--tag">Метка</span>
<span class="label label--circle label--tag">Метка</span>
</h3>
<h4 style="margin: 1rem 0;">Заголовок 4
<span class="label label--success"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg> Метка</span>
<span class="label label--tag">Метка</span>
<span class="label label--circle label--tag">Метка</span>
</h4>
<h5 style="margin: 1rem 0;">Заголовок 5
<span class="label"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg> Метка</span>
<span class="label label--tag">Метка</span>
<span class="label label--circle label--tag">Метка</span>
</h5>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Модификатор: <code>label--absolute</code> (отдельный LESS-файл)</b>
<p>
<a href="" class="btn">Кнопка <span class="label label--absolute">1</span></a>
<a href="" class="btn btn--danger">Кнопка <span class="label label--absolute label--danger label--circle">1</span></a>
<a href="" class="btn btn--success">Кнопка <span class="label label--absolute label--success label--tag label--circle">1</span></a>
<a href="" class="btn btn--sm">Кнопка <span class="label label--absolute">1</span></a>
<a href="" class="btn btn--sm btn--danger">Кнопка <span class="label label--absolute label--danger label--circle">1</span></a>
<a href="" class="btn btn--sm btn--success">Кнопка <span class="label label--absolute label--success label--tag label--circle">1</span></a>
<a href="" class="btn btn--lg">Кнопка <span class="label label--absolute">1</span></a>
<a href="" class="btn btn--lg btn--danger">Кнопка <span class="label label--absolute label--danger label--circle">1</span></a>
<a href="" class="btn btn--lg btn--success">Кнопка <span class="label label--absolute label--success label--tag label--circle">1</span></a>
</p>
</div>
</section>
......
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