Skip to content

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

lists

parent a57a6da9
Hide 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 @@ ...@@ -49,6 +49,7 @@
&__sub-item-title { &__sub-item-title {
display: block; display: block;
text-transform: lowercase;
color: @gray-light; color: @gray-light;
font-size: @font-size; font-size: @font-size;
margin-bottom: 0.7em; 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 @@ ...@@ -35,7 +35,7 @@
height: 1.9em; height: 1.9em;
line-height: 2.1em; line-height: 2.1em;
color: #fff; color: #fff;
background-color: @color-main; background-color: @gray-light;
border-radius: 50%; border-radius: 50%;
text-align: center; 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,60 +33,81 @@ ...@@ -33,60 +33,81 @@
<section class="blocks-library__item" id="text" data-name="Текст"> <section class="blocks-library__item" id="text" data-name="Текст">
<p>Параграфы, расстояние между ними. Далеко-далеко за словесными горами в стране, гласных и согласных живут <a href="/">рыбные ссылки</a>. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <div class="blocks-library__sub-item">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <b class="blocks-library__sub-item-title">Параграфы, расстояние между ними</b>
<h1>Заголовок 1 <small>Дополнительный текст</small></h1> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут <a href="/">рыбные ссылки</a>. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <div class="p"><code>div class="p"</code>. <mark>Это единственный класс в этом разделе. Оставлен, ввиду своей микроскопичности.</mark> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</div>
<h2>Заголовок 2 <small>Дополнительный текст</small></h2> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> </div>
<h3>Заголовок 3 <small>Дополнительный текст</small></h3>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <div class="blocks-library__sub-item">
<h4>Заголовок 4 <small>Дополнительный текст</small></h4> <b class="blocks-library__sub-item-title">Заголовки и параграфы</b>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <h1>Заголовок 1 <small>Дополнительный текст</small></h1>
<h5>Заголовок 5 <small>Дополнительный текст</small></h5> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <h2>Заголовок 2 <small>Дополнительный текст</small></h2>
<h6>Заголовок 6 <small>Дополнительный текст</small></h6> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <h3>Заголовок 3 <small>Дополнительный текст</small></h3>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<div class="row"> <h4>Заголовок 4 <small>Дополнительный текст</small></h4>
<div class="col-md-6"> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<ul> <h5>Заголовок 5 <small>Дополнительный текст</small></h5>
<li>Пункт 1 <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<ul> <h6>Заголовок 6 <small>Дополнительный текст</small></h6>
<li>Подпункт 1</li> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<li>Подпункт 2</li> </div>
</ul>
</li> <div class="blocks-library__sub-item">
<li>Пункт 2</li> <b class="blocks-library__sub-item-title">Маркированный и нумерованный списки и параграфы</b>
<li>Пункт 3</li> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</ul> <div class="row">
</div> <div class="col-md-6">
<div class="col-md-6"> <ul>
<ol> <li>Пункт 1
<li>Пункт 1 <ul>
<ol> <li>Подпункт 1</li>
<li>Подпункт 1</li> <li>Подпункт 2</li>
<li>Подпункт 2</li> </ul>
</ol> </li>
</li> <li>Пункт 2</li>
<li>Пункт 2</li> <li>Пункт 3</li>
<li>Пункт 3</li> </ul>
</ol> </div>
</div> <div class="col-md-6">
</div> <ol>
<li>Пункт 1
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <ol>
<dl> <li>Подпункт 1</li>
<dt>Определяемая сущность 1</dt> <li>Подпункт 2</li>
<dd>Некое, возможно, относительно длинное определение упомянутой сущности. Скорее всего, многострочное.</dd> </ol>
<dt>Определяемая сущность 2</dt> </li>
<dd>Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.</dd> <li>Пункт 2</li>
<dd>Некое, возможно, относительно длинное определение упомянутой сущности.</dd> <li>Пункт 3</li>
</dl> </ol>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> </div>
<hr> </div>
<p>Разделитель уровня параграфа. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<div class="p"><code>div</code> с классом <code>.p</code>. <mark>Это единственный класс в этом разделе. Оставлен, в виду своей микроскопичности.</mark> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</div> </div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Список определений и параграфы</b>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<dl>
<dt>Определяемая сущность 1</dt>
<dd>Некое, возможно, относительно длинное определение упомянутой сущности. Скорее всего, многострочное.</dd>
<dt>Определяемая сущность 2</dt>
<dd>Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.</dd>
<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>
</section> </section>
...@@ -241,14 +262,13 @@ ...@@ -241,14 +262,13 @@
<div class="col-md-6"> <div class="col-md-6">
<ol class="list-nums"> <ol class="list-nums">
<li>Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами.</li> <li>Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами.</li>
<li>Одна послушавшись дал, большого.</li>
<li>Проектах за вопрос курсивных. <li>Проектах за вопрос курсивных.
<ul class="list-nums"> <ul class="list-nums">
<li>Одна послушавшись дал, большого.</li> <li>Одна послушавшись дал, большого.</li>
<li>Далеко-далеко за словесными горами.</li> <li>Далеко-далеко за словесными горами.</li>
</ul> </ul>
</li> </li>
<li>Власти, она себя за?</li> <li>Далеко-далеко за словесными горами.</li
</ol> </ol>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
...@@ -261,6 +281,54 @@ ...@@ -261,6 +281,54 @@
</ul> </ul>
</div> </div>
</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>
<li>Власти, она себя за?</li>
<li>Решила алфавит, назад маленький.</li>
</ul>
</div>
</div>
</div>
</section> </section>
......
src/less/style.less
View file @ a0ef35d0
...@@ -32,6 +32,8 @@ ...@@ -32,6 +32,8 @@
@import './src/blocks/btn-group/btn-group.less'; @import './src/blocks/btn-group/btn-group.less';
@import './src/blocks/checked-btn/checked-btn.less'; @import './src/blocks/checked-btn/checked-btn.less';
@import './src/blocks/list-nums/list-nums.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/list-bullet/list-bullet.less';
@import './src/blocks/step-list/step-list.less'; @import './src/blocks/step-list/step-list.less';
@import './src/blocks/label/label.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