Skip to content

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

lists

parent a57a6da9
Show whitespace changes
Inline Side-by-side
Showing with 158 additions and 57 deletions
src/blocks/blocks-library/blocks-library.less
View file @ a0ef35d0
......@@ -49,6 +49,7 @@
&__sub-item-title {
display: block;
text-transform: lowercase;
color: @gray-light;
font-size: @font-size;
margin-bottom: 0.7em;
......
src/blocks/list-nums/list-nums--main.less 0 → 100644
View file @ a0ef35d0
@import '../../less/variables.less'; // только для удобства обращения к переменным
.list-nums {
&--main {
& > li {
&:before {
color: #fff;
background-color: @color-main;
}
}
}
}
src/blocks/list-nums/list-nums.less
View file @ a0ef35d0
......@@ -35,7 +35,7 @@
height: 1.9em;
line-height: 2.1em;
color: #fff;
background-color: @color-main;
background-color: @gray-light;
border-radius: 50%;
text-align: center;
}
......
src/blocks/list-nums/list-nums__item.less 0 → 100644
View file @ a0ef35d0
@import '../../less/variables.less'; // только для удобства обращения к переменным
.list-nums {
& > &__item {
&--main {
&:before {
color: #fff;
background-color: @color-main;
}
}
}
}
src/blocks_library.html
View file @ a0ef35d0
......@@ -33,8 +33,15 @@
<section class="blocks-library__item" id="text" data-name="Текст">
<p>Параграфы, расстояние между ними. Далеко-далеко за словесными горами в стране, гласных и согласных живут <a href="/">рыбные ссылки</a>. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Параграфы, расстояние между ними</b>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут <a href="/">рыбные ссылки</a>. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<div class="p"><code>div class="p"</code>. <mark>Это единственный класс в этом разделе. Оставлен, ввиду своей микроскопичности.</mark> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</div>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Заголовки и параграфы</b>
<h1>Заголовок 1 <small>Дополнительный текст</small></h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h2>Заголовок 2 <small>Дополнительный текст</small></h2>
......@@ -47,7 +54,11 @@
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h6>Заголовок 6 <small>Дополнительный текст</small></h6>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Маркированный и нумерованный списки и параграфы</b>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<div class="row">
<div class="col-md-6">
<ul>
......@@ -74,7 +85,11 @@
</ol>
</div>
</div>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Список определений и параграфы</b>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<dl>
<dt>Определяемая сущность 1</dt>
......@@ -84,9 +99,15 @@
<dd>Некое, возможно, относительно длинное определение упомянутой сущности.</dd>
</dl>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Разделитель уровня параграфа</b>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<hr>
<p>Разделитель уровня параграфа. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<div class="p"><code>div</code> с классом <code>.p</code>. <mark>Это единственный класс в этом разделе. Оставлен, в виду своей микроскопичности.</mark> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</div>
<p>. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</div>
</section>
......@@ -241,18 +262,64 @@
<div class="col-md-6">
<ol class="list-nums">
<li>Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами.</li>
<li>Одна послушавшись дал, большого.</li>
<li>Проектах за вопрос курсивных.
<ul class="list-nums">
<li>Одна послушавшись дал, большого.</li>
<li>Далеко-далеко за словесными горами.</li>
</ul>
</li>
<li>Далеко-далеко за словесными горами.</li
</ol>
</div>
<div class="col-md-6">
<ul class="list-nums">
<li>Далеко-далеко за словесными горами.</li>
<li>Одна послушавшись дал, большого.</li>
<li>Проектах за вопрос курсивных.</li>
<li>Власти, она себя за?</li>
<li>Решила алфавит, назад маленький.</li>
</ul>
</div>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Элемент с модификатором <code>list-nums__item &nbsp;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>
</div>
</div>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Модификатор <code>list-nums--main</code> (отдельный LESS-файл)</b>
<div class="row">
<div class="col-md-6">
<ol class="list-nums list-nums--main">
<li>Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами.</li>
<li>Проектах за вопрос курсивных.
<ul class="list-nums">
<li>Одна послушавшись дал, большого.</li>
<li>Далеко-далеко за словесными горами.</li>
</ul>
</li>
<li>Далеко-далеко за словесными горами.</li
</ol>
</div>
<div class="col-md-6">
<ul class="list-nums list-nums--main">
<li>Далеко-далеко за словесными горами.</li>
<li>Одна послушавшись дал, большого.</li>
<li>Проектах за вопрос курсивных.</li>
......@@ -261,6 +328,7 @@
</ul>
</div>
</div>
</div>
</section>
......
src/less/style.less
View file @ a0ef35d0
......@@ -32,6 +32,8 @@
@import './src/blocks/btn-group/btn-group.less';
@import './src/blocks/checked-btn/checked-btn.less';
@import './src/blocks/list-nums/list-nums.less';
@import './src/blocks/list-nums/list-nums--main.less';
@import './src/blocks/list-nums/list-nums__item.less';
@import './src/blocks/list-bullet/list-bullet.less';
@import './src/blocks/step-list/step-list.less';
@import './src/blocks/label/label.less';
......
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