Skip to content

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

Упорядочил описание кнопок

parent 0fb05446
Hide whitespace changes
Inline Side-by-side
Showing with 45 additions and 39 deletions
src/blocks_library.html
View file @ bc87f98c
......@@ -3182,11 +3182,11 @@
<code class="html"> &lt;div class=&quot;field-checkbox__input-wrap&quot;&gt;...&lt;/div&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html"> &lt;div class=&quot;field-radio&quot;&gt;</code>
<code class="html"> &lt;div class=&quot;field-radio__title&quot;&gt;&lt;/div&gt; &lt;!-- &larr; &#x412;&#x41d;&#x418;&#x41c;&#x410;&#x41d;&#x418;&#x415;, &#x43f;&#x443;&#x441;&#x442;&#x43e;&#x439; div &#x434;&#x43b;&#x44f; &#x43e;&#x442;&#x441;&#x442;&#x443;&#x43f;&#x430; --&gt;</code>
<code class="html"> &lt;div class=&quot;field-radio__title&quot;&gt;&lt;/div&gt; &lt;!-- &larr; ВНИМАНИЕ! Общего названия нет, но есть div — есть отступ --&gt;</code>
<code class="html"> &lt;div class=&quot;field-radio__input-wrap&quot;&gt;...&lt;/div&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html"> &lt;div class=&quot;field-radio&quot;&gt;</code>
<code class="html"> &lt;!-- Нет пустого div (title) &mdash; &#x43d;&#x435;&#x442; &#x438; &#x43e;&#x442;&#x441;&#x442;&#x443;&#x43f;&#x430; --&gt;</code>
<code class="html"> &lt;!-- Нет общего названия, нет пустого div — нет отступа --&gt;</code>
<code class="html"> &lt;div class=&quot;field-radio__input-wrap&quot;&gt;...&lt;/div&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html"> &lt;div class=&quot;field-toggler&quot;&gt;...&lt;/div&gt;</code>
......@@ -3208,61 +3208,67 @@
<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>Показанные кнопки (кнопки по умолчанию) стилизуются примесями. Для создания индивидуальных кнопок используйте примесь <code>.btn()</code> или полностью индивидуальное оформление с включением правил этой примеси.</p>
<div class="js-font-resizer">
<p>
<a href="" class="btn">Cсылка</a>
<input type="submit" class="btn" value="Input">
<button class="btn">Button</button>
<!-- .btn.btn--main -->
</p>
<p>
<a href="" class="btn btn--main">Cсылка</a>
<input type="submit" class="btn btn--main" value="Input">
<button class="btn btn--main">Button</button>
<!-- .btn.btn--success -->
</p>
<p>
<a href="" class="btn btn--success">Cсылка</a>
<input type="submit" class="btn btn--success" value="Input">
<button class="btn btn--success">Button</button>
<!-- .btn.btn--danger -->
</p>
<p>
<a href="" class="btn btn--danger">Cсылка</a>
<input type="submit" class="btn btn--danger" value="Input">
<button class="btn btn--danger">Button</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="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>
<code class="html"> </code>
<code class="html">&lt;a class="btn btn--main" href=""&gt;Cсылка&lt;/a&gt;</code>
<code class="html">&lt;input class="btn btn--main" type="submit" value="Input"&gt;</code>
<code class="html">&lt;button class="btn btn--main"&gt;Button&lt;/button&gt;</code>
<code class="html"> </code>
<code class="html">&lt;a class="btn btn--success" href=""&gt;Cсылка&lt;/a&gt;</code>
<code class="html">&lt;input class="btn btn--success" type="submit" value="Input"&gt;</code>
<code class="html">&lt;button class="btn btn--success"&gt;Button&lt;/button&gt;</code>
<code class="html"> </code>
<code class="html">&lt;a class="btn btn--danger" href=""&gt;Cсылка&lt;/a&gt;</code>
<code class="html">&lt;input class="btn btn--danger" type="submit" value="Input"&gt;</code>
<code class="html">&lt;button class="btn btn--danger"&gt;Button&lt;/button&gt;</code>
</pre>
</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;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>
<code class="html"> </code>
<code class="html">&lt;a class="btn btn--main" href=""&gt;Cсылка&lt;/a&gt;</code>
<code class="html">&lt;input class="btn btn--main" type="submit" value="Input"&gt;</code>
<code class="html">&lt;button class="btn btn--main"&gt;Button&lt;/button&gt;</code>
<code class="html"> </code>
<code class="html">&lt;a class="btn btn--success" href=""&gt;Cсылка&lt;/a&gt;</code>
<code class="html">&lt;input class="btn btn--success" type="submit" value="Input"&gt;</code>
<code class="html">&lt;button class="btn btn--success"&gt;Button&lt;/button&gt;</code>
<code class="html"> </code>
<code class="html">&lt;a class="btn btn--danger" href=""&gt;Cсылка&lt;/a&gt;</code>
<code class="html">&lt;input class="btn btn--danger" type="submit" value="Input"&gt;</code>
<code class="html">&lt;button class="btn btn--danger"&gt;Button&lt;/button&gt;</code>
</pre>
</div>
</div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Увеличение и уменьшение модификаторами</h2>
<p>
<a href="" class="btn btn--lg">Cсылка (lg)</a>
<input type="submit" class="btn btn--lg" value="Input (lg)">
<button class="btn btn--lg">Button (lg)</button>
</p>
<p>
<a href="" class="btn btn--sm">Cсылка (sm)</a>
<input type="submit" class="btn btn--sm" value="Input (sm)">
<button class="btn btn--sm">Button (sm)</button>
</p>
<p>Размеры изменены благодаря модификатору. Модификаторы меняют <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p>
<div class="js-font-resizer">
<p>
<a href="" class="btn btn--lg">Cсылка (lg)</a>
<input type="submit" class="btn btn--lg" value="Input (lg)">
<button class="btn btn--lg">Button (lg)</button>
</p>
<p>
<a href="" class="btn btn--sm">Cсылка (sm)</a>
<input type="submit" class="btn btn--sm" value="Input (sm)">
<button class="btn btn--sm">Button (sm)</button>
</p>
</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">
......
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