lists

src/blocks/blocks-library/blocks-library.less

@@ -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

+@import '../../less/variables.less';     // только для удобства обращения к переменным
+
+
+.list-nums {
+
+  &--main {
+    & > li {
+
+      &:before {
+        color: #fff;
+        background-color: @color-main;
+      }
+    }
+  }
+
+}

src/blocks/list-nums/list-nums.less

@@ -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

+@import '../../less/variables.less';     // только для удобства обращения к переменным
+
+
+
+.list-nums {
+  & > &__item {
+    &--main {
+      &:before {
+        color: #fff;
+        background-color: @color-main;
+      }
+    }
+  }
+}

src/blocks_library.html

@@ -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

@@ -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';