Адаптивные таблицы

package.json

@@ -39,7 +39,8 @@
       "menu": [],
       "label": [],
       "loader": [],
-      "table": []
+      "table": [],
+      "table-responsive": []
     },
     "addCssBefore": [
       "./src/scss/variables.scss",

src/blocks-demo.html

@@ -1321,6 +1321,59 @@
 
     </section>
 
+    <section class="blocks-library__item" id="table-responsive" data-name=".table-responsive">
+
+      <h2 class="blocks-library__item-title">Адаптивность для таблиц</h2>
+
+      <p class="alert  alert--warning">Требует добавления атрибутов <code>data-label</code> для каждой ячейки.</p>
+
+      <table class="table-responsive  table">
+        <thead>
+          <tr>
+            <th>Имя и фамилия</th>
+            <th>Тип мироощущения</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td data-label="Имя и фамилия">Анатоле Вассерман</td>
+            <td data-label="Тип мироощущения">Девственность</td>
+          </tr>
+          <tr>
+            <td data-label="Имя и фамилия">Джакомо Казанова</td>
+            <td data-label="Тип мироощущения">Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <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 class="code">
+            <code>&lt;table class="table-responsive  table"></code>
+            <code>  &lt;thead></code>
+            <code>    &lt;tr></code>
+            <code>      &lt;th>Имя и фамилия&lt;/th></code>
+            <code>      &lt;th>Тип мироощущения&lt;/th></code>
+            <code>    &lt;/tr></code>
+            <code>  &lt;/thead></code>
+            <code>  &lt;tbody></code>
+            <code>    &lt;tr></code>
+            <code>      &lt;td data-label="Имя и фамилия">Анатоле Вассерман&lt;/td></code>
+            <code>      &lt;td data-label="Тип мироощущения">Девственность&lt;/td></code>
+            <code>    &lt;/tr></code>
+            <code>    &lt;tr></code>
+            <code>      &lt;td data-label="Имя и фамилия">Джакомо Казанова&lt;/td></code>
+            <code>      &lt;td data-label="Тип мироощущения">Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи.&lt;/td></code>
+            <code>    &lt;/tr></code>
+            <code>  &lt;/tbody></code>
+            <code>&lt;/table></code>
+          </pre>
+        </div>
+      </div>
+
+    </section>
+
   </div>
 
   <style>

src/blocks/loader/loader.scss

@@ -2,6 +2,9 @@
 // модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
 // Не пишите здесь другие селекторы.
 
+$gray-lighter:                hsl(0, 0%, 80%) !default;
+$gray-lightest:               hsl(0, 0%, 90%) !default;
+
 .loader {
   display: inline-block;
 

src/blocks/table-responsive/table-responsive.scss

-// Для импорта в диспетчер подключений: @import './src/blocks/table-responsive/table-responsive.less';
+// В этом файле должны быть стили только для БЭМ-блока table-responsive, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
+// Не пишите здесь другие селекторы.
 
-@import '../../less/variables.less';     // только для удобства обращения к переменным
+$border-color:                hsl(0, 0%, 60%) !default;
 
+$line-height:                 1.375em !default;
 
-//------------------------------------------------------------------------------
-//  Адаптивные таблицы (требуют наличия атрибутов data-label на тегах td)
-//------------------------------------------------------------------------------
+$screen-xs:                   0 !default;
+$screen-sm:                   480px !default;
+$screen-md:                   768px !default;
+$screen-lg:                   992px !default;
+$screen-xl:                   1200px !default;
+$screen-xxl:                  1800px !default;
 
 .table-responsive {
 
-  @media (max-width: (@screen-md - 1)) {
+  @media (max-width: ($screen-md - 1)) {
     display: block;
     border: 0;
 
@@ -29,11 +35,11 @@
 
       tr {
         display: block;
-        border: 1px solid @gray-lighter;
+        border: 1px solid $border-color;
         border-bottom: 0;
 
         &:not(:last-child) {
-          margin-bottom: @line-height;
+          margin-bottom: $line-height;
         }
       }
 

src/blocks/table/table.scss

@@ -2,6 +2,19 @@
 // модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
 // Не пишите здесь другие селекторы.
 
+$gray-lightest:               hsl(0, 0%, 90%) !default;
+
+$text-color--muted:           hsl(0, 0%, 50%) !default;
+
+$border-color:                hsl(0, 0%, 60%) !default;
+
+$font-size--small:            0.75em !default;
+
+$line-height:                 1.375em !default;
+
+$field-padding-vertical:      0.3em !default;
+$field-padding-horizontal:    0.7em !default;
+
 .table {
   border-collapse: collapse;
   width: 100%;