Merge pull request #1673 from overleaf/jel-cms-table-style

Styling for features table

GitOrigin-RevId: a8c37cf9bcda7c93d3d910036cd08f3cba06209e

services/web/config/settings.defaults.coffee

@@ -542,5 +542,6 @@ module.exports = settings =
 					'span': [ 'class', 'id', 'style' ]
 					'table': [ 'border', 'class', 'id', 'style' ]
 					'td': [ 'colspan', 'rowspan', 'headers' ]
-					'th': [ 'abbr', 'headers', 'colspan', 'rowspan', 'scope', 'sorted' ]
-					'video': [ 'alt', 'class', 'controls', 'height', 'width' ]
+					'th': [ 'abbr', 'headers', 'colspan', 'rowspan', 'scope', 'sorted', 'style' ]
+					'tr': [ 'class' ]
+					'video': [ 'alt', 'class', 'controls', 'height', 'width' ]

services/web/public/stylesheets/app/cms-page.less

@@ -103,10 +103,81 @@
         word-break: normal;
       }
     }
-    .fa-check-square {
+  }
+  .table-styled, .features-table {
+    .fa-check-square, .fa-check {
       color: @ol-green;
     }
   }
+  .features-table {
+    background: white;
+    max-width: none;
+    th, td {
+      border: 1px solid @gray-lighter;
+      hyphens: auto;
+      padding: @padding-sm;
+      text-align: center;
+    }
+    th, td {
+      width: 20%;
+    }
+    .btn {
+      max-width: 100%;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+    &.left-align-first-col {
+      td, th {
+        text-align: left;
+      }
+      td + td,
+      th + th {
+        text-align: center;
+      }
+    }
+    .hidden-row-above-xs {
+      display: none;
+    }
+    @media screen and (max-width: @screen-xs-max) {
+      tbody, thead {
+        display: block;
+      }
+      tr {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: space-around;
+      }
+
+      td, th {
+        display: block;
+        width: 25%;
+      }
+      tr:first-child {
+        th {
+          width: 50%;
+        }  
+        th:first-child {
+          width: 100%;
+        }
+      }
+
+      td:first-child {
+        text-align: center;
+        background: #efefef;
+        width: 100%;
+      }
+      
+      .hidden-row-xs {
+        display: none;
+      }
+      .hidden-row-above-xs {
+        display: flex;
+      }
+      .table-header {
+        text-align: center;
+      }
+    }
+  }
 
   /*
     universities page