Skip to content

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

library beautify

parent cccbb5f7
Show 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 @@ ...@@ -40,4 +40,18 @@
&__title { &__title {
margin-top: 0; 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 () { ...@@ -1380,97 +1380,142 @@ $('#test').on('hidden.nth.dropdown', function () {
</section> </section>
<section class="blocks-library__item" id="label" data-name=".label"> <section class="blocks-library__item" id="label" data-name=".label">
<div> <div class="p">
Обычный текст Метки-<code>span</code>:
<span class="label">Метка</span> <span class="label">Метка</span>
<span class="label label--main">Метка</span> <span class="label label--main">Метка</span>
<span class="label label--danger">Метка</span> <span class="label label--danger">Метка</span>
<span class="label label--success">Метка</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"><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--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--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--success"><svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-search"></use></svg> Метка</span>
| </p>
<span class="label label--tag">Метка</span> <div class="p">
<span class="label label--tag label--main">Метка</span> Метки в кнопках:
<span class="label label--tag label--danger">Метка</span> <a href="" class="btn">Кнопка <span class="label">1</span></a>
<span class="label label--tag label--success">Метка</span> <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>
<span class="label label--circle">Метка</span> <a href="" class="btn btn--sm">Кнопка <span class="label">1</span></a>
<span class="label label--circle label--main">Метка</span> <a href="" class="btn btn--sm btn--danger">Кнопка <span class="label label--danger">1</span></a>
<span class="label label--circle label--danger">Метка</span> <a href="" class="btn btn--sm btn--main">Кнопка <span class="label label--success">1</span></a>
<span class="label label--circle label--success">Метка</span> <a href="" class="btn btn--lg">Кнопка <span class="label">1</span></a>
<br> <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>
</div>
<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 class="label">
Метка-div с доп. примечанием Метка-div
<span class="label__detail">23</span> <span class="label__detail">23</span>
</div> </div>
Обычный текст Обычный текст
<span class="label"> <span class="label">
Метка-span с доп. примечанием Метка-span
<span class="label__detail">999</span> <span class="label__detail">999</span>
</span> </span>
Обычный текст Обычный текст
<a href="" class="label"> <a href="" class="label">
Метка-ссылка с доп. примечанием Метка-ссылка
<span class="label__detail">7</span> <span class="label__detail">7</span>
</a> </a>
</div> </div>
<div class="row"> </div>
<div class="col-md-6">
<h1>Заголовок 1 <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"><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--tag">Метка</span>
<span class="label label--circle label--tag">Метка</span> <span class="label label--circle label--tag">Метка</span>
</h1> </h1>
<h2>Заголовок 2 <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--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--tag">Метка</span>
<span class="label label--circle label--tag">Метка</span> <span class="label label--circle label--tag">Метка</span>
</h2> </h2>
<h3>Заголовок 3 <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--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--tag">Метка</span>
<span class="label label--circle label--tag">Метка</span> <span class="label label--circle label--tag">Метка</span>
</h3> </h3>
<h4>Заголовок 4 <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--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--tag">Метка</span>
<span class="label label--circle label--tag">Метка</span> <span class="label label--circle label--tag">Метка</span>
</h4> </h4>
<h5>Заголовок 5 <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"><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--tag">Метка</span>
<span class="label label--circle label--tag">Метка</span> <span class="label label--circle label--tag">Метка</span>
</h5> </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> </div>
<div class="col-md-6">
<h1>Только иконка: <div class="blocks-library__sub-item">
<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> <b class="blocks-library__sub-item-title">Модификатор: <code>label--absolute</code> (отдельный LESS-файл)</b>
<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> <p>
Лейблы в кнопках:
<a href="" class="btn">Кнопка <span class="label label--absolute">1</span></a> <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--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">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> </p>
</div> </div>
</div>
</section> </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