table-responsive to mixin

src/_blocks_library.html

@@ -138,7 +138,7 @@
 
   <section>
     <h2>Исходное: Адаптивные таблицы</h2>
-    <p>Внимание! Адаптивные таблицы требуют добавления дата-атрибутов. Фиксация минимальной ширины имитатора <code>th</code> будет полезной.</p>
+    <p>Внимание! Адаптивные таблицы требуют добавления дата-атрибутов. Фиксация минимальной ширины имитатора <code>th</code> будет полезной (делается для каждой таблицы индивидуально).</p>
     <table class="table-responsive">
       <thead>
         <tr>
@@ -157,6 +157,7 @@
         </tr>
       </tbody>
     </table>
+    <p>Приоритетным является не использование класса <code>.table-responsive</code>, а использование семантических БЭМ-классов и LESS-примеси <code>.table-responsive(sm);</code> (принимает в себя значение той ширины вьюпорта, на которой таблица ещё адаптивна).</p>
     <hr>
   </section>
 

src/less/blocks/table-responsive.less

@@ -3,42 +3,8 @@
 //------------------------------------------------------------------------------
 
 .table-responsive {
-
-  @media (max-width: (@screen-md - 1)) {
-    display: block;
-    border: 0;
-    overflow-x: auto; // IE11 отказывается переносить длинный текст в <td>, даём костыль
-
-    thead {
-      display: none;
-    }
-
-    tbody {
-      display: block;
-      width: 100%;
-
-      tr {
-        display: block;
-        border-top: 0;
-
-        &:not(:last-child) {
-          margin-bottom: @line-height;
-        }
-      }
-
-      td {
-        display: flex;
-        width: 100%;
-
-        &:before {
-          display: block;
-          padding-right: .5em;
-          font-weight: 700;
-          white-space: nowrap;
-          content: attr(data-label) + ":";
-        }
-      }
-    }
-  }
+  // Таблицу с любым классом можно сделать адаптивной, вызывая эту примесь.
+  // ВНИМАНИЕ: примесь ждет макс. ширину, на которой таблица ещё адпативна.
+  .table-responsive(sm);
 }
 

src/less/mixins/mixins.less

@@ -198,3 +198,79 @@
   }
   .make-offsets(@n, @screen, (@i + 1));
 }
+
+
+
+
+//------------------------------------------------------------------------------
+//  Правила для адаптивной таблицы
+//------------------------------------------------------------------------------
+//  ВНИМАНИЕ: примесь ждет макс. ширину, на которой таблица ещё адпативна.
+//------------------------------------------------------------------------------
+
+.table-responsive(@screen: md) {
+
+  & when (@screen = sm) {
+    @media (max-width: (@screen-md - 1)) {
+      .table-responsive-properties();
+    }
+  }
+  & when (@screen = md) {
+    @media (max-width: (@screen-lg - 1)) {
+      .table-responsive-properties();
+    }
+  }
+  & when (@screen = lg) {
+    @media (max-width: (@screen-xl - 1)) {
+      .table-responsive-properties();
+    }
+  }
+  & when (@screen = xl) {
+    @media (max-width: (@screen-xxl - 1)) {
+      .table-responsive-properties();
+    }
+  }
+  & when (@screen = xxl) {
+    @media (max-width: (@screen-xxl - 1)) {
+      .table-responsive-properties();
+    }
+  }
+
+}
+
+.table-responsive-properties() {
+  display: block;
+  border: 0;
+  overflow-x: auto; // IE11 отказывается переносить длинный текст в <td>, даём костыль
+
+  thead {
+    display: none;
+  }
+
+  tbody {
+    display: block;
+    width: 100%;
+
+    tr {
+      display: block;
+      border-top: 0;
+
+      &:not(:last-child) {
+        margin-bottom: @line-height;
+      }
+    }
+
+    td {
+      display: flex;
+      width: 100%;
+
+      &:before {
+        display: block;
+        padding-right: .5em;
+        font-weight: 700;
+        white-space: nowrap;
+        content: attr(data-label) + ":";
+      }
+    }
+  }
+}