Skip to content

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

library fixs

parent e34bb2b0
Hide whitespace changes
Inline Side-by-side
Showing with 272 additions and 193 deletions
src/blocks/blocks-library/blocks-library.html
View file @ faf48754
......@@ -11,6 +11,15 @@
Контент
<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>
<code class="html">&lt;input type="text" value="Текстовое поле для сравнения высоты" style="width:70px"&gt;</code>
</pre>
</div>
</div>
</div>
</section>
......
src/blocks/blocks-library/blocks-library.less
View file @ faf48754
......@@ -53,13 +53,13 @@
&__code-show-trigger {
display: block;
width: 3rem;
height: 2rem;
height: 20px;
cursor: pointer;
margin-bottom: 0.3em;
@media (min-width: @screen-md) {
position: absolute;
top: 0;
top: -2.9rem;
left: -4rem;
}
}
......@@ -67,7 +67,7 @@
&__code-icon {
display: block;
width: 3rem;
height: 0.2rem;
height: 2px;
background-color: @gray-light;
&:before,
......@@ -75,35 +75,38 @@
position: absolute;
background-color: @gray-light;
width: 3rem;
height: 0.2rem;
height: 2px;
left: 0;
content: '';
}
&:before {
top: 0.8rem;
top: 8px;
}
&:after {
top: 1.6rem;
top: 16px;
}
}
&__code {
transition: max-height @transition-time;
overflow: hidden;
.js & {
max-height: 0;
transition-duration: @transition-time;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.js &--shown {
max-height: 410px;
transition-duration: @transition-time;
transition-timing-function: ease-in;
max-height: 1000px;
}
pre {
margin: 0;
max-height: 410px;
max-height: 500px;
}
}
}
......
src/blocks/checked-btn/checked-btn.less
View file @ faf48754
......@@ -8,20 +8,5 @@
top: 0;
left: 0;
visibility: hidden;
&:checked {
& ~ .btn {
.btn-color--active(@text-color; @gray-lighter; @gray-lighter);
}
& ~ .btn--main {
.btn-color--active(#fff; @color-main; @color-main);
}
& ~ .btn--success {
.btn-color--active(#fff; @color-success; @color-success);
}
& ~ .btn--danger {
.btn-color--active(#fff; @color-danger; @color-danger);
}
}
}
}
src/blocks_library.html
View file @ faf48754
......@@ -27,20 +27,30 @@
<h2 class="blocks-library__title" id="typo">Текст, теги</h2>
<section class="blocks-library__item" id="text" data-name="Текст">
<h1 class="blocks-library__item-title">Текст, теги</h1>
<div class="blocks-library__sub-item">
<p>Параграфы, расстояние между ними. Далеко-далеко за словесными горами в стране, гласных и согласных живут <a href="/">рыбные ссылки</a>. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<div class="p"><code>div class="p"</code>. <mark>Это единственный класс в этом разделе. Оставлен, ввиду своей микроскопичности.</mark> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</div>
<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>
<code class="html">&lt;div class=&quot;p&quot;&gt;...&lt;/div&gt;</code>
</pre>
</div>
</div>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Заголовки и параграфы</b>
<h2 class="blocks-library__sub-item-title">Заголовки и параграфы</h2>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h1>Заголовок 1 <small>Дополнительный текст</small></h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h2>Заголовок 2 <small>Дополнительный текст</small></h2>
......@@ -56,7 +66,7 @@
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Маркированный и нумерованный списки и параграфы</b>
<h2 class="blocks-library__sub-item-title">Маркированный и нумерованный списки и параграфы</h2>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<div class="row">
<div class="col-md-6">
......@@ -88,7 +98,7 @@
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Список определений и параграфы</b>
<h2 class="blocks-library__sub-item-title">Список определений и параграфы</h2>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<dl>
<dt>Определяемая сущность 1</dt>
......@@ -101,132 +111,143 @@
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Разделитель уровня параграфа</b>
<h2 class="blocks-library__sub-item-title">Разделитель уровня параграфа</h2>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<hr>
<p>. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</div>
</section>
<section class="blocks-library__item" id="inline-tags" data-name="Строчные теги">
<div class="row">
<div class="col-lg-6">
<table>
<tr>
<td><code>&lt;a&gt;</code></td>
<td><a href="">ссылка</a></td>
</tr>
<tr>
<td><code>&lt;strong&gt;</code></td>
<td><strong>действительно значимый текст</strong></td>
</tr>
<tr>
<td><code>&lt;b&gt;</code></td>
<td><b>просто выделенный текст, лид</b></td>
</tr>
<tr>
<td><code>&lt;i&gt;</code></td>
<td><i>иностранное слово или термин</i></td>
</tr>
<tr>
<td><code>&lt;em&gt;</code></td>
<td><em>эмфатическое ударение</em></td>
</tr>
<tr>
<td><code>&lt;s&gt;</code></td>
<td><s>информация, утратившая актуальность</s></td>
</tr>
<tr>
<td><code>&lt;del&gt;</code></td>
<td><del>изменение, внесённое в документ (удаление)</del></td>
</tr>
<tr>
<td><code>&lt;ins&gt;</code></td>
<td><ins>изменение, внесённое в документ (добавление)</ins></td>
</tr>
</table>
</div>
<div class="col-lg-6">
<table>
<tr>
<td><code>&lt;mark&gt;</code></td>
<td><mark>акцент маркерным выделением</mark></td>
</tr>
<tr>
<td><code>&lt;small&gt;</code></td>
<td><small>малозначимый текст</small></td>
</tr>
<tr>
<td><code>&lt;abbr&gt;</code></td>
<td><abbr title="Аббревиатура">АББРЕВИАТУРА</abbr></td>
</tr>
<tr>
<td><code>&lt;kbd&gt;</code></td>
<td><kbd>Ctrl + C</kbd></td>
</tr>
<tr>
<td><code>&lt;sup&gt;</code></td>
<td>2<sup>3</sup></td>
</tr>
<tr>
<td><code>&lt;sub&gt;</code></td>
<td>H<sub>2</sub>O</td>
</tr>
<tr>
<td><code>&lt;code&gt;</code></td>
<td><code>code</code></td>
</tr>
</table>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Строчные теги</h2>
<div class="row">
<div class="col-lg-6">
<table>
<tr>
<td><code>&lt;a&gt;</code></td>
<td><a href="">ссылка</a></td>
</tr>
<tr>
<td><code>&lt;strong&gt;</code></td>
<td><strong>действительно значимый текст</strong></td>
</tr>
<tr>
<td><code>&lt;b&gt;</code></td>
<td><b>просто выделенный текст, лид</b></td>
</tr>
<tr>
<td><code>&lt;i&gt;</code></td>
<td><i>иностранное слово или термин</i></td>
</tr>
<tr>
<td><code>&lt;em&gt;</code></td>
<td><em>эмфатическое ударение</em></td>
</tr>
<tr>
<td><code>&lt;s&gt;</code></td>
<td><s>информация, утратившая актуальность</s></td>
</tr>
<tr>
<td><code>&lt;del&gt;</code></td>
<td><del>изменение, внесённое в документ (удаление)</del></td>
</tr>
<tr>
<td><code>&lt;ins&gt;</code></td>
<td><ins>изменение, внесённое в документ (добавление)</ins></td>
</tr>
</table>
</div>
<div class="col-lg-6">
<table>
<tr>
<td><code>&lt;mark&gt;</code></td>
<td><mark>акцент маркерным выделением</mark></td>
</tr>
<tr>
<td><code>&lt;small&gt;</code></td>
<td><small>малозначимый текст</small></td>
</tr>
<tr>
<td><code>&lt;abbr&gt;</code></td>
<td><abbr title="Аббревиатура">АББРЕВИАТУРА</abbr></td>
</tr>
<tr>
<td><code>&lt;kbd&gt;</code></td>
<td><kbd>Ctrl + C</kbd></td>
</tr>
<tr>
<td><code>&lt;sup&gt;</code></td>
<td>2<sup>3</sup></td>
</tr>
<tr>
<td><code>&lt;sub&gt;</code></td>
<td>H<sub>2</sub>O</td>
</tr>
<tr>
<td><code>&lt;code&gt;</code></td>
<td><code>code</code></td>
</tr>
</table>
</div>
</div>
</div>
</section>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Контактная информация автора материала</h2>
<p>Тег <code>address</code> представляет контактную информацию для ближайшего элемента-предка <code>article</code> или <code>body</code>. Если это элемент <code>body</code>, то контактная информация применяется ко всему документу целиком. Тег обязан не использоваться для предоставления произвольного адреса (например, почтовых адресов), если эти адреса не являются реальной контактной информацией. <a href="http://spec.piraruco.com/html5/sections.htm#the-address-element">Подробнее</a></p>
<hr>
<address>
<strong>Имя Фамилия</strong>
<br>
г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя) <br>
<a href="mailto:imya@mail.com">imya@mail.com</a>
</address>
<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>
<code class="html">&lt;address&gt;</code>
<code class="html"> &lt;strong&gt;&#x418;&#x43c;&#x44f; &#x424;&#x430;&#x43c;&#x438;&#x43b;&#x438;&#x44f;&lt;/strong&gt;</code>
<code class="html"> &lt;br&gt;</code>
<code class="html"> &#x433;. &#x41b;&#x43e;&#x43d;&#x434;&#x43e;&#x43d;, &#x443;&#x43b;. &#x412;&#x438;&#x43d;&#x434;&#x437;&#x43e;&#x440;&#x441;&#x43a;&#x438;&#x439; &#x441;&#x430;&#x434;, &#x434;. 32 (&#x441;&#x43f;&#x440;&#x43e;&#x441;&#x438;&#x442;&#x44c; &#x43c;&#x438;&#x441;&#x442;&#x435;&#x440;&#x430; &#x418;&#x43c;&#x44f;) &lt;br&gt;</code>
<code class="html"> &lt;a href=&quot;mailto:imya@mail.com&quot;&gt;imya@mail.com&lt;/a&gt;</code>
<code class="html">&lt;/address&gt;</code>
</pre>
</div>
</div>
</div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Блочные цитаты</h2>
<blockquote>
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
</blockquote>
<blockquote>
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer>Emmet</footer>
</blockquote>
<blockquote>
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer><cite>Emmet</cite></footer>
</blockquote>
</div>
<section class="blocks-library__item" id="address" data-name="address">
<address>
<strong>Имя Фамилия</strong>
<br>
г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя) <br>
<a href="mailto:imya@mail.com">imya@mail.com</a>
</address>
</section>
<section class="blocks-library__item" id="blockquote" data-name="blockquote">
<blockquote>
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
</blockquote>
<blockquote>
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer>Emmet</footer>
</blockquote>
<blockquote>
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer><cite>Emmet</cite></footer>
</blockquote>
</section>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Форматированный текст</h2>
<pre>// Блочный код с тегом переноса строки<br>// Вторая строка</pre>
<pre>
// Блочный код с введённым переносом строки и табуляцией перед строками
// Вторая строка
</pre>
</div>
<section class="blocks-library__item" id="pre" data-name="pre">
<pre>// Блочный код<br>// Вторая строка</pre>
<pre>
// Блочный код
// Вторая строка</pre>
</section>
<h3 class="blocks-library__title" id="typo-add">Текст, дополнительные классы</h3>
<section class="blocks-library__item" id="dl-horizontal" data-name=".dl-horizontal">
<h1 class="blocks-library__item-title">Горизонтальный ассоциативный список</h1>
<section class="blocks-library__item" id="dl-horizontal" data-name=".dl-horizontal">
<dl class="dl-horizontal">
<dt>Ассоциативный список</dt>
<dd><code>dl</code> представляет собой ассоциативный список, состоящий из нуля и более пар имя-значение. Варианты использования: глоссарий, диалог, анонсы новостей.</dd>
......@@ -241,6 +262,9 @@
<section class="blocks-library__item" id="blockquote-right" data-name=".blockquote-right">
<h1 class="blocks-library__item-title">Блочные цитаты по правому краю</h1>
<blockquote class="blockquote-right">
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
</blockquote>
......@@ -257,6 +281,9 @@
<section class="blocks-library__item" id="list-nums" data-name=".list-nums">
<h1 class="blocks-library__item-title">Нумерованные списки с особыми маркерами</h1>
<div class="row">
<div class="col-md-6">
<ol class="list-nums">
......@@ -267,7 +294,7 @@
<li>Далеко-далеко за словесными горами.</li>
</ul>
</li>
<li>Далеко-далеко за словесными горами.</li
<li>Далеко-далеко за словесными горами.</li>
</ol>
</div>
<div class="col-md-6">
......@@ -280,30 +307,47 @@
</ul>
</div>
</div>
<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>
<code class="html">&lt;ol class=&quot;list-nums&quot;&gt;</code>
<code class="html"> &lt;li&gt;&#x414;&#x430;&#x43b;&#x435;&#x43a;&#x43e;-&#x434;&#x430;&#x43b;&#x435;&#x43a;&#x43e; &#x437;&#x430; &#x441;&#x43b;&#x43e;&#x432;&#x435;&#x441;&#x43d;&#x44b;&#x43c;&#x438; &#x433;&#x43e;&#x440;&#x430;&#x43c;&#x438;. &#x414;&#x430;&#x43b;&#x435;&#x43a;&#x43e;-&#x434;&#x430;&#x43b;&#x435;&#x43a;&#x43e; &#x437;&#x430; &#x441;&#x43b;&#x43e;&#x432;&#x435;&#x441;&#x43d;&#x44b;&#x43c;&#x438; &#x433;&#x43e;&#x440;&#x430;&#x43c;&#x438;. &#x414;&#x430;&#x43b;&#x435;&#x43a;&#x43e;-&#x434;&#x430;&#x43b;&#x435;&#x43a;&#x43e; &#x437;&#x430; &#x441;&#x43b;&#x43e;&#x432;&#x435;&#x441;&#x43d;&#x44b;&#x43c;&#x438; &#x433;&#x43e;&#x440;&#x430;&#x43c;&#x438;. &#x414;&#x430;&#x43b;&#x435;&#x43a;&#x43e;-&#x434;&#x430;&#x43b;&#x435;&#x43a;&#x43e; &#x437;&#x430; &#x441;&#x43b;&#x43e;&#x432;&#x435;&#x441;&#x43d;&#x44b;&#x43c;&#x438; &#x433;&#x43e;&#x440;&#x430;&#x43c;&#x438;. &#x414;&#x430;&#x43b;&#x435;&#x43a;&#x43e;-&#x434;&#x430;&#x43b;&#x435;&#x43a;&#x43e; &#x437;&#x430; &#x441;&#x43b;&#x43e;&#x432;&#x435;&#x441;&#x43d;&#x44b;&#x43c;&#x438; &#x433;&#x43e;&#x440;&#x430;&#x43c;&#x438;.&lt;/li&gt;</code>
<code class="html"> &lt;li&gt;&#x41f;&#x440;&#x43e;&#x435;&#x43a;&#x442;&#x430;&#x445; &#x437;&#x430; &#x432;&#x43e;&#x43f;&#x440;&#x43e;&#x441; &#x43a;&#x443;&#x440;&#x441;&#x438;&#x432;&#x43d;&#x44b;&#x445;.</code>
<code class="html"> &lt;ul class=&quot;list-nums&quot;&gt;</code>
<code class="html"> &lt;li&gt;&#x41e;&#x434;&#x43d;&#x430; &#x43f;&#x43e;&#x441;&#x43b;&#x443;&#x448;&#x430;&#x432;&#x448;&#x438;&#x441;&#x44c; &#x434;&#x430;&#x43b;, &#x431;&#x43e;&#x43b;&#x44c;&#x448;&#x43e;&#x433;&#x43e;.&lt;/li&gt;</code>
<code class="html"> &lt;li&gt;&#x414;&#x430;&#x43b;&#x435;&#x43a;&#x43e;-&#x434;&#x430;&#x43b;&#x435;&#x43a;&#x43e; &#x437;&#x430; &#x441;&#x43b;&#x43e;&#x432;&#x435;&#x441;&#x43d;&#x44b;&#x43c;&#x438; &#x433;&#x43e;&#x440;&#x430;&#x43c;&#x438;.&lt;/li&gt;</code>
<code class="html"> &lt;/ul&gt;</code>
<code class="html"> &lt;/li&gt;</code>
<code class="html"> &lt;li&gt;&#x414;&#x430;&#x43b;&#x435;&#x43a;&#x43e;-&#x434;&#x430;&#x43b;&#x435;&#x43a;&#x43e; &#x437;&#x430; &#x441;&#x43b;&#x43e;&#x432;&#x435;&#x441;&#x43d;&#x44b;&#x43c;&#x438; &#x433;&#x43e;&#x440;&#x430;&#x43c;&#x438;.&lt;/li&gt;</code>
<code class="html">&lt;/ol&gt;</code>
</pre>
</div>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Отдельный элемент с модификатором <code>.list-nums__item.list-nums__item--main</code> (отдельный LESS-файл)</b>
<div class="row">
<div class="col-md-6">
<ol class="list-nums">
<li>Далеко-далеко за словесными горами.</li>
<li class="list-nums__item list-nums__item--main">Проектах за вопрос курсивных.
<ul class="list-nums">
<li>Одна послушавшись дал, большого.</li>
</ul>
</li>
</ol>
</div>
<div class="col-md-6">
<ul class="list-nums">
<li>Далеко-далеко за словесными горами.</li>
<li class="list-nums__item list-nums__item--main">Одна послушавшись дал, большого.</li>
<li>Проектах за вопрос курсивных.</li>
</ul>
<h2 class="blocks-library__sub-item-title">Подсветка маркера пункта модификатором</h2>
<p class="blocks-library__sub-item-title">Подсветка маркера пункта модификатором элемента <code>.list-nums__item.list-nums__item--main</code> (отдельный LESS-файл)</p>
<ol class="list-nums">
<li>Далеко-далеко за словесными горами.</li>
<li class="list-nums__item list-nums__item--main">Проектах за вопрос курсивных.</li>
</ol>
<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>
<code class="html">&lt;ol class=&quot;list-nums&quot;&gt;</code>
<code class="html"> &lt;li&gt;&#x414;&#x430;&#x43b;&#x435;&#x43a;&#x43e;-&#x434;&#x430;&#x43b;&#x435;&#x43a;&#x43e; &#x437;&#x430; &#x441;&#x43b;&#x43e;&#x432;&#x435;&#x441;&#x43d;&#x44b;&#x43c;&#x438; &#x433;&#x43e;&#x440;&#x430;&#x43c;&#x438;.&lt;/li&gt;</code>
<code class="html"> &lt;li class=&quot;list-nums__item list-nums__item--main&quot;&gt;&#x41f;&#x440;&#x43e;&#x435;&#x43a;&#x442;&#x430;&#x445; &#x437;&#x430; &#x432;&#x43e;&#x43f;&#x440;&#x43e;&#x441; &#x43a;&#x443;&#x440;&#x441;&#x438;&#x432;&#x43d;&#x44b;&#x445;.&lt;/li&gt;</code>
<code class="html">&lt;/ol&gt;</code>
</pre>
</div>
</div>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title"><code>.list-nums.list-nums--main</code> (отдельный LESS-файл)</b>
<h2 class="blocks-library__sub-item-title">Подсветка всех маркеров списка модификатором</h2>
<p class="blocks-library__sub-item-title">Подсветка всех маркеров списка модификатором блока<code>.list-nums.list-nums--main</code> (отдельный LESS-файл). Распространяется только на тот список, которому дан модификатор.</p>
<div class="row">
<div class="col-md-6">
<ol class="list-nums list-nums--main">
......@@ -314,7 +358,7 @@
<li>Далеко-далеко за словесными горами.</li>
</ul>
</li>
<li>Далеко-далеко за словесными горами.</li
<li>Далеко-далеко за словесными горами.</li>
</ol>
</div>
<div class="col-md-6">
......@@ -327,12 +371,32 @@
</ul>
</div>
</div>
<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>
<code class="html">&lt;ol class=&quot;list-nums list-nums--main&quot;&gt;</code>
<code class="html"> &lt;li&gt;&#x414;&#x430;&#x43b;&#x435;&#x43a;&#x43e;-&#x434;&#x430;&#x43b;&#x435;&#x43a;&#x43e; &#x437;&#x430; &#x441;&#x43b;&#x43e;&#x432;&#x435;&#x441;&#x43d;&#x44b;&#x43c;&#x438; &#x433;&#x43e;&#x440;&#x430;&#x43c;&#x438;. &#x414;&#x430;&#x43b;&#x435;&#x43a;&#x43e;-&#x434;&#x430;&#x43b;&#x435;&#x43a;&#x43e; &#x437;&#x430; &#x441;&#x43b;&#x43e;&#x432;&#x435;&#x441;&#x43d;&#x44b;&#x43c;&#x438; &#x433;&#x43e;&#x440;&#x430;&#x43c;&#x438;. &#x414;&#x430;&#x43b;&#x435;&#x43a;&#x43e;-&#x434;&#x430;&#x43b;&#x435;&#x43a;&#x43e; &#x437;&#x430; &#x441;&#x43b;&#x43e;&#x432;&#x435;&#x441;&#x43d;&#x44b;&#x43c;&#x438; &#x433;&#x43e;&#x440;&#x430;&#x43c;&#x438;. &#x414;&#x430;&#x43b;&#x435;&#x43a;&#x43e;-&#x434;&#x430;&#x43b;&#x435;&#x43a;&#x43e; &#x437;&#x430; &#x441;&#x43b;&#x43e;&#x432;&#x435;&#x441;&#x43d;&#x44b;&#x43c;&#x438; &#x433;&#x43e;&#x440;&#x430;&#x43c;&#x438;. &#x414;&#x430;&#x43b;&#x435;&#x43a;&#x43e;-&#x434;&#x430;&#x43b;&#x435;&#x43a;&#x43e; &#x437;&#x430; &#x441;&#x43b;&#x43e;&#x432;&#x435;&#x441;&#x43d;&#x44b;&#x43c;&#x438; &#x433;&#x43e;&#x440;&#x430;&#x43c;&#x438;.&lt;/li&gt;</code>
<code class="html"> &lt;li&gt;&#x41f;&#x440;&#x43e;&#x435;&#x43a;&#x442;&#x430;&#x445; &#x437;&#x430; &#x432;&#x43e;&#x43f;&#x440;&#x43e;&#x441; &#x43a;&#x443;&#x440;&#x441;&#x438;&#x432;&#x43d;&#x44b;&#x445;.</code>
<code class="html"> &lt;ul class=&quot;list-nums&quot;&gt;</code>
<code class="html"> &lt;li&gt;&#x41e;&#x434;&#x43d;&#x430; &#x43f;&#x43e;&#x441;&#x43b;&#x443;&#x448;&#x430;&#x432;&#x448;&#x438;&#x441;&#x44c; &#x434;&#x430;&#x43b;, &#x431;&#x43e;&#x43b;&#x44c;&#x448;&#x43e;&#x433;&#x43e;.&lt;/li&gt;</code>
<code class="html"> &lt;li&gt;&#x414;&#x430;&#x43b;&#x435;&#x43a;&#x43e;-&#x434;&#x430;&#x43b;&#x435;&#x43a;&#x43e; &#x437;&#x430; &#x441;&#x43b;&#x43e;&#x432;&#x435;&#x441;&#x43d;&#x44b;&#x43c;&#x438; &#x433;&#x43e;&#x440;&#x430;&#x43c;&#x438;.&lt;/li&gt;</code>
<code class="html"> &lt;/ul&gt;</code>
<code class="html"> &lt;/li&gt;</code>
<code class="html"> &lt;li&gt;&#x414;&#x430;&#x43b;&#x435;&#x43a;&#x43e;-&#x434;&#x430;&#x43b;&#x435;&#x43a;&#x43e; &#x437;&#x430; &#x441;&#x43b;&#x43e;&#x432;&#x435;&#x441;&#x43d;&#x44b;&#x43c;&#x438; &#x433;&#x43e;&#x440;&#x430;&#x43c;&#x438;.&lt;/li&gt;</code>
<code class="html">&lt;/ol&gt;</code>
</pre>
</div>
</div>
</div>
</section>
<section class="blocks-library__item" id="list-bullet" data-name=".list-bullet">
<h1 class="blocks-library__item-title">Маркированные списки с особыми маркерами</h1>
<div class="row">
<div class="col-md-6">
<ul class="list-bullet">
......@@ -357,6 +421,25 @@
</ol>
</div>
</div>
<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>
<code class="html">&lt;ul class=&quot;list-bullet&quot;&gt;</code>
<code class="html"> &lt;li&gt;&#x414;&#x430;&#x43b;&#x435;&#x43a;&#x43e;-&#x434;&#x430;&#x43b;&#x435;&#x43a;&#x43e; &#x437;&#x430; &#x441;&#x43b;&#x43e;&#x432;&#x435;&#x441;&#x43d;&#x44b;&#x43c;&#x438; &#x433;&#x43e;&#x440;&#x430;&#x43c;&#x438;.&lt;/li&gt;</code>
<code class="html"> &lt;li&gt;&#x41e;&#x434;&#x43d;&#x430; &#x43f;&#x43e;&#x441;&#x43b;&#x443;&#x448;&#x430;&#x432;&#x448;&#x438;&#x441;&#x44c; &#x434;&#x430;&#x43b;, &#x431;&#x43e;&#x43b;&#x44c;&#x448;&#x43e;&#x433;&#x43e;.&lt;/li&gt;</code>
<code class="html"> &lt;li&gt;&#x41f;&#x440;&#x43e;&#x435;&#x43a;&#x442;&#x430;&#x445; &#x437;&#x430; &#x432;&#x43e;&#x43f;&#x440;&#x43e;&#x441; &#x43a;&#x443;&#x440;&#x441;&#x438;&#x432;&#x43d;&#x44b;&#x445;.&lt;/li&gt;</code>
<code class="html"> &lt;li&gt;&#x412;&#x43b;&#x430;&#x441;&#x442;&#x438;, &#x43e;&#x43d;&#x430; &#x441;&#x435;&#x431;&#x44f; &#x437;&#x430;?</code>
<code class="html"> &lt;ul&gt;</code>
<code class="html"> &lt;li&gt;&#x41e;&#x434;&#x43d;&#x430; &#x43f;&#x43e;&#x441;&#x43b;&#x443;&#x448;&#x430;&#x432;&#x448;&#x438;&#x441;&#x44c; &#x434;&#x430;&#x43b;, &#x431;&#x43e;&#x43b;&#x44c;&#x448;&#x43e;&#x433;&#x43e;.&lt;/li&gt;</code>
<code class="html"> &lt;li&gt;&#x414;&#x430;&#x43b;&#x435;&#x43a;&#x43e;-&#x434;&#x430;&#x43b;&#x435;&#x43a;&#x43e; &#x437;&#x430; &#x441;&#x43b;&#x43e;&#x432;&#x435;&#x441;&#x43d;&#x44b;&#x43c;&#x438; &#x433;&#x43e;&#x440;&#x430;&#x43c;&#x438;.&lt;/li&gt;</code>
<code class="html"> &lt;/ul&gt;</code>
<code class="html"> &lt;/li&gt;</code>
<code class="html"> &lt;li&gt;&#x420;&#x435;&#x448;&#x438;&#x43b;&#x430; &#x430;&#x43b;&#x444;&#x430;&#x432;&#x438;&#x442;, &#x43d;&#x430;&#x437;&#x430;&#x434; &#x43c;&#x430;&#x43b;&#x435;&#x43d;&#x44c;&#x43a;&#x438;&#x439;.&lt;/li&gt;</code>
<code class="html">&lt;/ul&gt;</code>
</pre>
</div>
</div>
</section>
......@@ -1523,9 +1606,9 @@
<section class="blocks-library__item" id="btn" data-name=".btn">
<h1 class="blocks-library__item-title">Кнопки</h1>
<p>Показанные кнопки стилизуются примесями. Для создания индивидуальных кнопок используйте примесь <code>.btn()</code> или полностью индивидуальное оформление с включением правил этой примеси.</p>
<div class="blocks-library__sub-item">
<p>
<input type="text" value="Текстовое поле для сравнения высоты" title="Текстовое поле для сравнения высоты" style="width:70px">
<a href="" class="btn">Cсылка</a>
<input type="submit" class="btn" value="Input">
<button class="btn">Button</button>
......@@ -1546,8 +1629,7 @@
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre>
<code class="html">&lt;input type="text" value="Текстовое поле для сравнения высоты" style="width:70px"&gt;</code>
<code class="html"> </code>
<code class="html">&lt;a class="btn" href=""&gt;Cсылка&lt;/a&gt;</code>
<code class="html">&lt;a class="btn" href=""&gt;Cсылка&lt;/a&gt;</code>
<code class="html">&lt;input class="btn" type="submit" value="Input"&gt;</code>
<code class="html">&lt;button class="btn"&gt;Button&lt;/button&gt;</code>
......@@ -1579,14 +1661,38 @@
<input type="submit" class="btn btn--sm" value="Input (sm)">
<button class="btn btn--sm">Button (sm)</button>
</p>
<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>
<code class="html">&lt;a class=&quot;btn btn--lg&quot href=&quot;&quot;;&gt;C&#x441;&#x44b;&#x43b;&#x43a;&#x430; (lg)&lt;/a&gt;</code>
<code class="html">&lt;input class=&quot;btn btn--lg&quot; type=&quot;submit&quot; value=&quot;Input (lg)&quot;&gt;</code>
<code class="html">&lt;button class=&quot;btn btn--lg&quot;&gt;Button (lg)&lt;/button&gt;</code>
<code class="html"> </code>
<code class="html">&lt;a class=&quot;btn btn--sm&quot; href=&quot;&quot;&gt;C&#x441;&#x44b;&#x43b;&#x43a;&#x430; (sm)&lt;/a&gt;</code>
<code class="html">&lt;input class=&quot;btn btn--sm&quot; type=&quot;submit&quot; value=&quot;Input (sm)&quot;&gt;</code>
<code class="html">&lt;button class=&quot;btn btn--sm&quot;&gt;Button (sm)&lt;/button&gt;</code>
</pre>
</div>
</div>
</div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Блочные кнопки</h2>
<p>
<a href="" class="btn btn--block">Cсылка (sm)</a>
<input type="submit" class="btn btn--block btn--main" value="Input (sm)">
<button class="btn btn--block btn--success">Button (sm)</button>
<a href="" class="btn btn--block">Cсылка</a>
<input type="submit" class="btn btn--block btn--main" value="Input">
<button class="btn btn--block btn--success btn--lg">Button (lg)</button>
</p>
<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>
<code class="html">&lt;a class=&quot;btn btn--block&quot; href=&quot;&quot;&gt;C&#x441;&#x44b;&#x43b;&#x43a;&#x430;&lt;/a&gt;</code>
<code class="html">&lt;input class=&quot;btn btn--block btn--main&quot; type=&quot;submit&quot; value=&quot;Input&quot;&gt;</code>
<code class="html">&lt;button class=&quot;btn btn--block btn--success btn--lg&quot;&gt;Button (lg)&lt;/button&gt;</code>
</pre>
</div>
</div>
</div>
</section>
......
src/less/mixins/btn-mixins.less
View file @ faf48754
......@@ -53,59 +53,35 @@
// Примесь-генератор цветовых стилей
//------------------------------------------------------------------------------
.btn-color(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter) {
.btn-color(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter;) {
color: @color;
background-color: @background;
border-color: @border;
&--hover,
&:hover {
.btn-color--hover(@color; @background; @border);
.btn-color--mod(@color; darken(@background, 10%); darken(@border, 12%));
}
&--active,
&:active,
&:focus {
.btn-color--active(@color; @background; @border);
.btn-color--mod(@color; darken(@background, 15%); darken(@border, 17%));
}
&--disabled,
&:disabled {
.btn-color--disabled(@color; @background; @border);
.btn-color--mod(@color; @background; @border);
}
}
//------------------------------------------------------------------------------
// Вспомогательная примесь-генератор цветовых стилей для hover
//------------------------------------------------------------------------------
.btn-color--hover(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter) {
color: @color;
background-color: darken(@background, 10%);
border-color: darken(@border, 12%);
}
//------------------------------------------------------------------------------
// Вспомогательная примесь-генератор цветовых стилей для active и focus
//------------------------------------------------------------------------------
.btn-color--active(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter) {
color: @color;
background-color: darken(@background, 15%);
border-color: darken(@border, 17%);
}
//------------------------------------------------------------------------------
// Вспомогательная примесь-генератор цветовых стилей для disabled
//------------------------------------------------------------------------------
.btn-color--disabled(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter) {
.btn-color--mod(@color; @background; @border) {
color: @color;
background-color: @background;
border-color: @border;
......
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