[FEATURE] Base EXT: t3skin on twbs

Base TYPO3 CMS backend on twbs bootstrap. Brings bootstrap variables
adapted for TYPO3 CMS t3skin. There is no visual change.

This patch is the first step in a list of CSS refactorings.

Next steps:
Base more TYPO3 CMS backend widgets on twbs components.

Resolves: #61471
Releases: 6.3
Change-Id: I38df90a4925306a5aa8dd6ce5934ce5bd454a1db
Reviewed-on: http://review.typo3.org/32679


Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Benjamin Mack <benni@typo3.org>
Tested-by: Benjamin Mack <benni@typo3.org>
Reviewed-by: Mathias Schreiber <mathias.schreiber@wmdb.de>
Tested-by: Mathias Schreiber <mathias.schreiber@wmdb.de>
Reviewed-by: Oliver Hader <oliver.hader@typo3.org>
Tested-by: Oliver Hader <oliver.hader@typo3.org>

typo3/sysext/core/Documentation/Changelog/master/Breaking-61471-t3skinCssFilesMovedToLess.rst

+=====================================================
+Breaking: #61471 - EXT:t3skin CSS files moved to less
+=====================================================
+
+Description
+===========
+
+All CSS files in EXT:t3skin are moved to less files and handled by less CSS pre processor
+and merged to a single CSS file.
+
+
+Impact
+======
+
+Single CSS files can not be included anymore. This may result in broken layouts.
+
+
+Affected installations
+======================
+
+A TYPO3 instance is affected if an extension loads single CSS files from EXT:t3skin. Backend modules of
+extensions usually get CSS core stuff loaded by default, which will not be a problem. An extension is
+only affected if single CSS files are explicitly referenced. This should be a rare case.
+
+
+Migration
+=========
+
+Most simple solution is to copy over the "old" CSS file from an older instance. Directly including those
+files from t3skin is discouraged. A better solution is to refactor the extension to use the full t3skin
+CSS file and to overlay it with required changes in an own file.
\ No newline at end of file

typo3/sysext/t3skin/Resources/Public/Css/structure/element_button_back.css → typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_button_back.less

+/**
+ * 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
 - - - - - - - - - - - - - - - - - - - - - */

typo3/sysext/t3skin/Resources/Public/Css/structure/element_clipboard.css → typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_clipboard.less

+/**
+ * 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!
+ */
+
 /* - - - - - - - - - - - - - - - - - - - - -
 Clipboard
-
 - - - - - - - - - - - - - - - - - - - - - */
 
 table#typo3-clipboard,

typo3/sysext/t3skin/Resources/Public/Css/structure/element_csh.css → typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_csh.less

+/**
+ * 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!
+ */
+
 /* - - - - - - - - - - - - - - - - - - - - -
 Context sensitive help
 - - - - - - - - - - - - - - - - - - - - - */

typo3/sysext/t3skin/Resources/Public/Css/structure/element_csm.css → typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_csm.less

+/**
+ * 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!
+ */
+
 /* - - - - - - - - - - - - - - - - - - - - -
 Context Sensitive Menu / Layer (alt_clickmenu.php creates it)
 Notice: Rollover color is set by ->bgColor5 in the template object of alt_clickmenu.php

typo3/sysext/t3skin/Resources/Public/Css/structure/element_docheader.css → typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_docheader.less

+/**
+ * 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!
+ */
+
 /**
  * Docheader
  */
@@ -9,27 +22,28 @@
 	padding: 0 24px;
 	overflow: hidden;
 }
+
 /* overwrite defaults from normalise.css */
 .typo3-docheader-functions select {
 	color: #000;
 }
 .typo3-docheader-buttons {
 	color: #000;
-	height: 16px;
+	height: 22px;
 	padding: 3px 24px;
 	overflow: hidden;
 }
 
 #typo3-docheader .left {
-	float: left;
+	.pull-left;
 }
 #typo3-docheader .right {
-	float: right;
+	.pull-right;
 }
 
 /** Extra margin 6px added to it-icon margin, doubled spacing = 12px */
 #typo3-docheader .left .buttongroup {
-	float: left;
+	.pull-left;
 	margin-right: 6px;
 }
 

typo3/sysext/t3skin/Resources/Public/Css/structure/element_history.css → typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_history.less

+/**
+ * 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!
+ */
+
 /* - - - - - - - - - - - - - - - - - - - - -
 History / Undo
 - - - - - - - - - - - - - - - - - - - - - */

typo3/sysext/t3skin/Resources/Public/Css/structure/element_infopopup.css → typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_infopopup.less

+/**
+ * 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!
+ */
+
 /* - - - - - - - - - - - - - - - - - - - - -
 Information popup, show_item.php
 - - - - - - - - - - - - - - - - - - - - - */

typo3/sysext/t3skin/Resources/Public/Css/structure/element_message.css → typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_message.less

+/**
+ * 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!
+ */
+
 /* - - - - - - - - - - - - - - - - - - - - -
 Flash Messages
 - - - - - - - - - - - - - - - - - - - - - */

typo3/sysext/t3skin/Resources/Public/Css/structure/element_move_element.css → typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_move_element.less

+/**
+ * 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!
+ */
+
 /* - - - - - - - - - - - - - - - - - - - - -
 Move Element
 - - - - - - - - - - - - - - - - - - - - - */

typo3/sysext/t3skin/Resources/Public/Css/structure/element_pagetree.css → typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_pagetree.less

+/**
+ * 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!
+ */
+
 /* - - - - - - - - - - - - - - - - - - - - -
 Pagetree
 - - - - - - - - - - - - - - - - - - - - - */
@@ -39,18 +52,14 @@ Pagetree
 }
 
 #typo3-pagetree .x-panel-tbar .x-toolbar {
-	padding-top: 7px;
-	height: 20px;
+	padding-top: 2px;
+	height: 27px;
 }
 
 #typo3-pagetree .x-toolbar-ct {
 	height: 20px;
 }
 
-#typo3-pagetree-topPanel-item-newNode.x-toolbar {
-	padding-top: 2px;
-}
-
 #typo3-pagetree ul {
 	padding-left: 0;
 	list-style: none;
@@ -113,9 +122,9 @@ Pagetree
 }
 
 .typo3-pagetree-topPanel-button {
-	margin: 0 5px 0 0;
+	margin: 1px 5px 0 0;
 	padding: 1px 2px;
-	height: 18px;
+	height: 25px;
 }
 
 .typo3-pagetree-topPanel-button button {
@@ -145,7 +154,7 @@ Pagetree
 
 #typo3-pagetree .typo3-pagetree-topPanel-button {
 	margin-right: 1px;
-	margin-top: -2px;
+	margin-top: 3px;
 	margin-bottom: -2px;
 	padding: 2px 3px 4px 3px;
 }

typo3/sysext/t3skin/Resources/Public/Css/structure/element_recent_edited.css → typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_recent_edited.less

+/**
+ * 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!
+ */
+
 /* - - - - - - - - - - - - - - - - - - - - -
 Document, listing recently edited records if no records were open
 (alt_doc_nodoc.php) - this is effectively the Doc module

typo3/sysext/t3skin/Resources/Public/Css/structure/element_rte.css → typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_rte.less

+/**
+ * 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!
+ */
+
 /* - - - - - - - - - - - - - - - - - - - - -
 Element Browser / RTE link selection
 - - - - - - - - - - - - - - - - - - - - - */

typo3/sysext/t3skin/Resources/Public/Css/structure/element_spinner.css → typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_spinner.less

+/**
+ * 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!
+ */
+
 /* - - - - - - - - - - - - - - - - - - - - -
 Animated spinner icon
 - - - - - - - - - - - - - - - - - - - - - */

typo3/sysext/t3skin/Resources/Public/Css/structure/element_tab.css → typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_tab.less

+/**
+ * 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!
+ */
+
 /* - - - - - - - - - - - - - - - - - - - - -
 Tab menu
 - - - - - - - - - - - - - - - - - - - - - */

typo3/sysext/t3skin/Resources/Public/Css/structure/element_table.css → typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_table.less

+/**
+ * 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
 - - - - - - - - - - - - - - - - - - - - - */

typo3/sysext/t3skin/Resources/Public/Css/structure/element_tceforms.css → typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_tceforms.less

+/**
+ * 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
 - - - - - - - - - - - - - - - - - - - - - */

typo3/sysext/t3skin/Resources/Public/Css/structure/element_tree.css → typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_tree.less

+/**
+ * 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!
+ */
+
 /* - - - - - - - - - - - - - - - - - - - - -
 Trees
 - - - - - - - - - - - - - - - - - - - - - */

typo3/sysext/t3skin/Resources/Public/Css/structure/element_version.css → typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_version.less

+/**
+ * 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!
+ */
+
 /* - - - - - - - - - - - - - - - - - - - - -
 Workspace
 - - - - - - - - - - - - - - - - - - - - - */

typo3/sysext/t3skin/Resources/Public/Css/structure/element_wizard.css → typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_wizard.less

+/**
+ * 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!
+ */
+
 /* - - - - - - - - - - - - - - - - - - - - -
 Wizards
 - - - - - - - - - - - - - - - - - - - - - */