[TASK] t3skin: Base table.t3-table on Bootstrap 35/32735/4
authorFelix Kopp <felix-source@phorax.com>
Thu, 11 Sep 2014 19:01:42 +0000 (21:01 +0200)
committerWouter Wolters <typo3@wouterwolters.nl>
Wed, 17 Sep 2014 06:59:48 +0000 (08:59 +0200)
Base the common <table class="t3-table"> on Bootstrap
predefined classes .table, .table-hover and .table-striped.

This way we benefit of future Bootstrap browser fixes.

Resolves: #61546
Releases: master
Change-Id: Iaebfd3a661ace31f13cf7d1ac491352f468fd5c0
Reviewed-on: http://review.typo3.org/32735
Reviewed-by: Markus Klein <klein.t3@reelworx.at>
Tested-by: Markus Klein <klein.t3@reelworx.at>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_deprecated.less [new file with mode: 0644]
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_table.less [new file with mode: 0644]
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_table.less [deleted file]
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/visual/_element_table.less [deleted file]
typo3/sysext/t3skin/Resources/Private/Styles/t3kin.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3kin.css

diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_deprecated.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_deprecated.less
new file mode 100644 (file)
index 0000000..70b93a8
--- /dev/null
@@ -0,0 +1,43 @@
+/**
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+.t3-row-header {
+       background-color: #666;
+       color: #fff;
+}
+
+.t3-row-header a,
+.t3-row-header a:hover {
+       color: #fff;
+}
+
+.t3-col-header {
+       background-color: #585858;
+       color: #fff;
+}
+
+table.t3-table-info {
+       background: #ffffff;
+       border: 1px solid #cccccc;
+}
+
+.t3-col-header,
+.t3-row-header,
+.tableheader td,
+table.t3-table-info td {
+       padding: 6px;
+}
+
+.t3-row-header span.t3-icon {
+       margin-right: 3px;
+}
\ No newline at end of file
diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_table.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_table.less
new file mode 100644 (file)
index 0000000..584599e
--- /dev/null
@@ -0,0 +1,103 @@
+/**
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+/** used in the admin tools => DB check **/
+.t3-overview-list dt {
+       padding: 0px 0px 2px 20px;
+
+       img {
+               vertical-align: middle;
+               margin-right: 5px;
+       }
+}
+
+.t3-overview-list dd {
+       margin: 2px 0 15px 20px;
+       padding-left: 22px;
+}
+
+/**
+ * Common style for tables
+ *
+ * <table class="t3-table>
+ *   <thead>
+ *     <tr>
+ *       <th>...</th>
+ *       <th>...</th>
+ *     </tr>
+ *   </thead>
+ *   <tbody>
+ *     <tr>
+ *       <td>
+ *         <span class="t3-icon t3-icon-treeline t3-icon-treeline-join t3-icon-join">&nbsp;</span>
+ *       </td>
+ *       <td>...</td>
+ *     </tr>
+ *   </tbody>
+ * </table>
+ */
+
+.table {
+       border-right: 1px solid @table-border-color;
+       border-bottom: 1px solid @table-border-color;
+       border-left: 1px solid @table-border-color;
+
+       > thead,
+       > tbody {
+               tr {
+                       th:first-child,
+                       th:last-child,
+                       td:first-child,
+                       td:last-child {
+                               padding-left: 12px;
+                       }
+               }
+       }
+
+       > thead {
+               > tr {
+                       > th,
+                       > td {
+                               background-color: #666;
+                               color: #fff;
+                               font-weight: normal;
+                               min-height: 16px;
+
+                               a,
+                               a {
+                                       color: #fff;
+                                       text-decoration: underline;
+                               }
+                       }
+               }
+       }
+
+       > tbody {
+               > tr:hover {
+                       > td {
+                               transition: background-color 100ms linear;
+
+                               a {
+                                       text-decoration: underline;
+                               }
+                       }
+               }
+       }
+}
+
+// TYPO3 standard <table class="t3-table">
+table.t3-table {
+       .table;
+       .table-striped;
+       .table-hover;
+}
\ No newline at end of file
diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_table.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_table.less
deleted file mode 100644 (file)
index 1c04465..0000000
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * This file is part of the TYPO3 CMS project.
- *
- * It is free software; you can redistribute it and/or modify it under
- * the terms of the GNU General Public License, either version 2
- * of the License, or any later version.
- *
- * For the full copyright and license information, please read the
- * LICENSE.txt file that was distributed with this source code.
- *
- * The TYPO3 project - inspiring people to share!
- */
-
-/* - - - - - - - - - - - - - - - - - - - - -
-Table
-- - - - - - - - - - - - - - - - - - - - - */
-
-th,
-td {
-       vertical-align: top;
-}
-
-/** @deprecated styles */
-.t3-col-header,
-.t3-row-header,
-.tableheader td,
-table.t3-table-info td {
-       padding: 6px;
-}
-
-.t3-row-header span.t3-icon {
-       margin-right: 3px;
-}
-
-/** used in the admin tools => DB check **/
-.t3-overview-list dt {
-       padding: 0px 0px 2px 20px;
-}
-
-.t3-overview-list dt img {
-       vertical-align: middle;
-       margin-right: 5px;
-}
-
-.t3-overview-list dd {
-       margin: 2px 0 15px 20px;
-       padding-left: 22px;
-}
-
-/**
- * Common style for tables
- *
- * <table class="t3-table>
- *   <thead>
- *     <tr>
- *       <th>...</th>
- *       <th>...</th>
- *     </tr>
- *   </thead>
- *   <tbody>
- *     <tr>
- *       <td>
- *         <span class="t3-icon t3-icon-treeline t3-icon-treeline-join t3-icon-join">&nbsp;</span>
- *       </td>
- *       <td>...</td>
- *     </tr>
- *   </tbody>
- * </table>
- */
-table.t3-table {
-       width: 100%;
-       border: none;
-       margin-bottom: 1.5em;
-}
-
-table.t3-table th,
-table.t3-table td {
-       padding: 6px;
-       /** Height of sprite icon */
-       min-height: 16px;
-       text-align: left;
-}
-
-table.t3-table tr th:first-child,
-table.t3-table tr td:first-child {
-       padding-left: 12px;
-}
-table.t3-table tr th:last-child,
-table.t3-table tr td:last-child {
-       padding-right: 12px;
-}
\ No newline at end of file
diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/visual/_element_table.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/visual/_element_table.less
deleted file mode 100644 (file)
index c1444ce..0000000
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * This file is part of the TYPO3 CMS project.
- *
- * It is free software; you can redistribute it and/or modify it under
- * the terms of the GNU General Public License, either version 2
- * of the License, or any later version.
- *
- * For the full copyright and license information, please read the
- * LICENSE.txt file that was distributed with this source code.
- *
- * The TYPO3 project - inspiring people to share!
- */
-
-/* - - - - - - - - - - - - - - - - - - - - -
-Table
-- - - - - - - - - - - - - - - - - - - - - */
-
-/** @deprecated styles */
-.t3-row-header {
-       background-color: #666;
-       color: #fff;
-}
-
-.t3-row-header a,
-.t3-row-header a:hover {
-       color: #fff;
-}
-
-.t3-col-header {
-       background-color: #585858;
-       color: #fff;
-}
-
-/** used for any table where a table is used for displaying information (and thus, there is air to breathe) **/
-table.t3-table-info {
-       background: #ffffff;
-       border: 1px solid #cccccc;
-}
-
-/**
- * Common style for tables
- */
-table.t3-table {
-       border: 1px solid #d7d7d7;
-}
-
-/** Allow <thead><td> only for edge cases - please use <thead><th> */
-table.t3-table thead th,
-table.t3-table thead td {
-       background-color: #666;
-       color: #fff;
-       font-weight: normal;
-}
-table.t3-table thead th a,
-table.t3-table thead td a {
-       color: #fff;
-       text-decoration: underline;
-}
-
-table.t3-table tbody tr:nth-child(odd) td {
-       background-color: #f7f7f7;
-}
-table.t3-table tbody tr:nth-child(even) td {
-       background-color: #fff;
-}
-
-table.t3-table tbody tr:hover td {
-       background-color: #efefef;
-       transition: background-color 100ms linear;
-}
-
-table.t3-table tbody td a {
-       text-decoration: underline;
-}
\ No newline at end of file
index dfe9315..dc97be8 100644 (file)
  * TYPO3
  */
 
+@import "TYPO3/_deprecated.less";
+
 @import "TYPO3/_element_message.less";
+@import "TYPO3/_element_table.less";
 
 @import "TYPO3/structure/_element_button_back.less";
 @import "TYPO3/structure/_element_clipboard.less";
 @import "TYPO3/structure/_element_rte.less";
 @import "TYPO3/structure/_element_spinner.less";
 @import "TYPO3/structure/_element_tab.less";
-@import "TYPO3/structure/_element_table.less";
 @import "TYPO3/structure/_element_tceforms.less";
 @import "TYPO3/structure/_element_tree.less";
 @import "TYPO3/structure/_element_version.less";
 @import "TYPO3/visual/_element_rte.less";
 @import "TYPO3/visual/_element_spinner.less";
 @import "TYPO3/visual/_element_tab.less";
-@import "TYPO3/visual/_element_table.less";
 @import "TYPO3/visual/_element_tceforms.less";
 @import "TYPO3/visual/_element_tree.less";
 @import "TYPO3/visual/_element_typoscript.less";
 @import "TYPO3/visual/_toolbar_shortcut.less";
 @import "TYPO3/visual/_toolbar_username.less";
 @import "TYPO3/visual/_toolbar_workspace.less";
-@import "TYPO3/visual/_topbar.less";
+@import "TYPO3/visual/_topbar.less";
\ No newline at end of file
index e40088a..5882e3c 100644 (file)
@@ -7159,6 +7159,43 @@ button.close {
  *
  * The TYPO3 project - inspiring people to share!
  */
+.t3-row-header {
+  background-color: #666;
+  color: #fff;
+}
+.t3-row-header a,
+.t3-row-header a:hover {
+  color: #fff;
+}
+.t3-col-header {
+  background-color: #585858;
+  color: #fff;
+}
+table.t3-table-info {
+  background: #ffffff;
+  border: 1px solid #cccccc;
+}
+.t3-col-header,
+.t3-row-header,
+.tableheader td,
+table.t3-table-info td {
+  padding: 6px;
+}
+.t3-row-header span.t3-icon {
+  margin-right: 3px;
+}
+/**
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
 #typo3-messages {
   margin-bottom: 10px;
 }
@@ -7288,6 +7325,160 @@ button.close {
  *
  * The TYPO3 project - inspiring people to share!
  */
+/** used in the admin tools => DB check **/
+.t3-overview-list dt {
+  padding: 0px 0px 2px 20px;
+}
+.t3-overview-list dt img {
+  vertical-align: middle;
+  margin-right: 5px;
+}
+.t3-overview-list dd {
+  margin: 2px 0 15px 20px;
+  padding-left: 22px;
+}
+/**
+ * Common style for tables
+ *
+ * <table class="t3-table>
+ *   <thead>
+ *     <tr>
+ *       <th>...</th>
+ *       <th>...</th>
+ *     </tr>
+ *   </thead>
+ *   <tbody>
+ *     <tr>
+ *       <td>
+ *         <span class="t3-icon t3-icon-treeline t3-icon-treeline-join t3-icon-join">&nbsp;</span>
+ *       </td>
+ *       <td>...</td>
+ *     </tr>
+ *   </tbody>
+ * </table>
+ */
+.table {
+  border-right: 1px solid #dddddd;
+  border-bottom: 1px solid #dddddd;
+  border-left: 1px solid #dddddd;
+}
+.table > thead tr th:first-child,
+.table > tbody tr th:first-child,
+.table > thead tr th:last-child,
+.table > tbody tr th:last-child,
+.table > thead tr td:first-child,
+.table > tbody tr td:first-child,
+.table > thead tr td:last-child,
+.table > tbody tr td:last-child {
+  padding-left: 12px;
+}
+.table > thead > tr > th,
+.table > thead > tr > td {
+  background-color: #666;
+  color: #fff;
+  font-weight: normal;
+  min-height: 16px;
+}
+.table > thead > tr > th a,
+.table > thead > tr > td a,
+.table > thead > tr > th a,
+.table > thead > tr > td a {
+  color: #fff;
+  text-decoration: underline;
+}
+.table > tbody > tr:hover > td {
+  transition: background-color 100ms linear;
+}
+.table > tbody > tr:hover > td a {
+  text-decoration: underline;
+}
+table.t3-table {
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 18px;
+  border-right: 1px solid #dddddd;
+  border-bottom: 1px solid #dddddd;
+  border-left: 1px solid #dddddd;
+}
+table.t3-table > thead > tr > th,
+table.t3-table > tbody > tr > th,
+table.t3-table > tfoot > tr > th,
+table.t3-table > thead > tr > td,
+table.t3-table > tbody > tr > td,
+table.t3-table > tfoot > tr > td {
+  padding: 6px;
+  line-height: 1.5;
+  vertical-align: top;
+  border-top: 1px solid #dddddd;
+}
+table.t3-table > thead > tr > th {
+  vertical-align: bottom;
+  border-bottom: 2px solid #dddddd;
+}
+table.t3-table > caption + thead > tr:first-child > th,
+table.t3-table > colgroup + thead > tr:first-child > th,
+table.t3-table > thead:first-child > tr:first-child > th,
+table.t3-table > caption + thead > tr:first-child > td,
+table.t3-table > colgroup + thead > tr:first-child > td,
+table.t3-table > thead:first-child > tr:first-child > td {
+  border-top: 0;
+}
+table.t3-table > tbody + tbody {
+  border-top: 2px solid #dddddd;
+}
+table.t3-table .table {
+  background-color: #ffffff;
+}
+table.t3-table > thead tr th:first-child,
+table.t3-table > tbody tr th:first-child,
+table.t3-table > thead tr th:last-child,
+table.t3-table > tbody tr th:last-child,
+table.t3-table > thead tr td:first-child,
+table.t3-table > tbody tr td:first-child,
+table.t3-table > thead tr td:last-child,
+table.t3-table > tbody tr td:last-child {
+  padding-left: 12px;
+}
+table.t3-table > thead > tr > th,
+table.t3-table > thead > tr > td {
+  background-color: #666;
+  color: #fff;
+  font-weight: normal;
+  min-height: 16px;
+}
+table.t3-table > thead > tr > th a,
+table.t3-table > thead > tr > td a,
+table.t3-table > thead > tr > th a,
+table.t3-table > thead > tr > td a {
+  color: #fff;
+  text-decoration: underline;
+}
+table.t3-table > tbody > tr:hover > td {
+  transition: background-color 100ms linear;
+}
+table.t3-table > tbody > tr:hover > td a {
+  text-decoration: underline;
+}
+table.t3-table > tbody > tr:nth-child(odd) > td,
+table.t3-table > tbody > tr:nth-child(odd) > th {
+  background-color: #f7f7f7;
+}
+table.t3-table > tbody > tr:hover > td,
+table.t3-table > tbody > tr:hover > th {
+  background-color: #dedede;
+}
+/**
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
 /* - - - - - - - - - - - - - - - - - - - - -
 Go back A-tags
 - - - - - - - - - - - - - - - - - - - - - */
@@ -8130,87 +8321,6 @@ div.typo3-dyntabmenu-divs-foldout div.tabact a {
  * The TYPO3 project - inspiring people to share!
  */
 /* - - - - - - - - - - - - - - - - - - - - -
-Table
-- - - - - - - - - - - - - - - - - - - - - */
-th,
-td {
-  vertical-align: top;
-}
-/** @deprecated styles */
-.t3-col-header,
-.t3-row-header,
-.tableheader td,
-table.t3-table-info td {
-  padding: 6px;
-}
-.t3-row-header span.t3-icon {
-  margin-right: 3px;
-}
-/** used in the admin tools => DB check **/
-.t3-overview-list dt {
-  padding: 0px 0px 2px 20px;
-}
-.t3-overview-list dt img {
-  vertical-align: middle;
-  margin-right: 5px;
-}
-.t3-overview-list dd {
-  margin: 2px 0 15px 20px;
-  padding-left: 22px;
-}
-/**
- * Common style for tables
- *
- * <table class="t3-table>
- *   <thead>
- *     <tr>
- *       <th>...</th>
- *       <th>...</th>
- *     </tr>
- *   </thead>
- *   <tbody>
- *     <tr>
- *       <td>
- *         <span class="t3-icon t3-icon-treeline t3-icon-treeline-join t3-icon-join">&nbsp;</span>
- *       </td>
- *       <td>...</td>
- *     </tr>
- *   </tbody>
- * </table>
- */
-table.t3-table {
-  width: 100%;
-  border: none;
-  margin-bottom: 1.5em;
-}
-table.t3-table th,
-table.t3-table td {
-  padding: 6px;
-  /** Height of sprite icon */
-  min-height: 16px;
-  text-align: left;
-}
-table.t3-table tr th:first-child,
-table.t3-table tr td:first-child {
-  padding-left: 12px;
-}
-table.t3-table tr th:last-child,
-table.t3-table tr td:last-child {
-  padding-right: 12px;
-}
-/**
- * This file is part of the TYPO3 CMS project.
- *
- * It is free software; you can redistribute it and/or modify it under
- * the terms of the GNU General Public License, either version 2
- * of the License, or any later version.
- *
- * For the full copyright and license information, please read the
- * LICENSE.txt file that was distributed with this source code.
- *
- * The TYPO3 project - inspiring people to share!
- */
-/* - - - - - - - - - - - - - - - - - - - - -
 TCEforms
 - - - - - - - - - - - - - - - - - - - - - */
 img.t3-TCEforms-reqImg {
@@ -11177,70 +11287,6 @@ div.typo3-dyntabmenu-divs-foldout div.tabact a {
  * The TYPO3 project - inspiring people to share!
  */
 /* - - - - - - - - - - - - - - - - - - - - -
-Table
-- - - - - - - - - - - - - - - - - - - - - */
-/** @deprecated styles */
-.t3-row-header {
-  background-color: #666;
-  color: #fff;
-}
-.t3-row-header a,
-.t3-row-header a:hover {
-  color: #fff;
-}
-.t3-col-header {
-  background-color: #585858;
-  color: #fff;
-}
-/** used for any table where a table is used for displaying information (and thus, there is air to breathe) **/
-table.t3-table-info {
-  background: #ffffff;
-  border: 1px solid #cccccc;
-}
-/**
- * Common style for tables
- */
-table.t3-table {
-  border: 1px solid #d7d7d7;
-}
-/** Allow <thead><td> only for edge cases - please use <thead><th> */
-table.t3-table thead th,
-table.t3-table thead td {
-  background-color: #666;
-  color: #fff;
-  font-weight: normal;
-}
-table.t3-table thead th a,
-table.t3-table thead td a {
-  color: #fff;
-  text-decoration: underline;
-}
-table.t3-table tbody tr:nth-child(odd) td {
-  background-color: #f7f7f7;
-}
-table.t3-table tbody tr:nth-child(even) td {
-  background-color: #fff;
-}
-table.t3-table tbody tr:hover td {
-  background-color: #efefef;
-  transition: background-color 100ms linear;
-}
-table.t3-table tbody td a {
-  text-decoration: underline;
-}
-/**
- * This file is part of the TYPO3 CMS project.
- *
- * It is free software; you can redistribute it and/or modify it under
- * the terms of the GNU General Public License, either version 2
- * of the License, or any later version.
- *
- * For the full copyright and license information, please read the
- * LICENSE.txt file that was distributed with this source code.
- *
- * The TYPO3 project - inspiring people to share!
- */
-/* - - - - - - - - - - - - - - - - - - - - -
 TCEforms
 - - - - - - - - - - - - - - - - - - - - - */
 table#typo3-altdoc-header input,