[TASK] Bring Toolbar styling for Bootstrap HTML5 markup

Toolbar now is based on Bootstrap compatible HTML5 markup.
Styles all elements. Removes the previous CSS compatibility layer.

Layout in Toolbar dropdown menu is out of scope (#62927, …).

Resolves: #62939
Releases: master
Change-Id: I701fd7862db331a54fc1f8514c3839e9c8e1be9d
Reviewed-on: http://review.typo3.org/34141
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Reviewed-by: Benjamin Mack <benni@typo3.org>
Tested-by: Benjamin Mack <benni@typo3.org>

diff --git a/typo3/sysext/backend/Classes/Toolbar/LiveSearchToolbarItem.php b/typo3/sysext/backend/Classes/Toolbar/LiveSearchToolbarItem.php
index 2ce107f..c6075b0 100644 (file)
--- a/typo3/sysext/backend/Classes/Toolbar/LiveSearchToolbarItem.php
+++ b/typo3/sysext/backend/Classes/Toolbar/LiveSearchToolbarItem.php
@@ -66,12 +66,7 @@ class LiveSearchToolbarItem implements ToolbarItemInterface {
                        <form class="navbar-form" role="search">
                                <div class="live-search-wrapper">
                                        <div class="form-group">
-                                               <div class="input-group">
-                                                       <input type="text" class="form-control" placeholder="Search" id="live-search-box">
-                                                       <span class="input-group-addon">
-                                                               <span title="' . $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_common.xlf:search') . '" class="t3-icon t3-icon-apps t3-icon-apps-toolbar t3-icon-toolbar-menu-search">&nbsp;</span>
-                                                       </span>
-                                               </div>
+                                               <input type="text" class="form-control" placeholder="Search" id="live-search-box">
                                        </div>
                                </div>
                        </form>

diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_topbar.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_topbar.less
index 0f50c67..3ac3e58 100644 (file)
--- a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_topbar.less
+++ b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_topbar.less
@@ -45,39 +45,37 @@ Topbar
                        }
 
                        > li {
-                               .dropdown;
-                       }
+                               margin-right: 1px;
+
+                               .t3-icon {
+                                       margin-right: 0;
+                               }
+
+                               &.dropdown {
+                                       color: @navbar-inverse-link-color;
+                                       background-color: @navbar-inverse-link-bg;
+                               }
 
-                       .toolbar-item {
                                .badge {
                                        position: absolute;
                                        top: 6px;
                                        right: 4px;
                                        font-size: 7px;
                                }
-
-                               text-align: center;
                        }
 
-                       .toolbar-item-active {
-                               background-color: @navbar-inverse-link-active-bg;
-                               color: @navbar-inverse-link-active-color;
-                       }
-
-                       .toolbar-item-menu {
-                               .dropdown-menu;
-
-                               // Migration between Toolbaritem -> Bootstrap
-                               display: block;
-                               visiblity: hidden;
-                               left: auto;
-                               right: 0;
-
+                       .dropdown-menu {
                                background-color: @navbar-inverse-link-active-bg;
                                color: @navbar-inverse-link-active-color;
                                border: 0;
                                margin: 0;
 
+                               .active {
+                                       a {
+                                               background-color: darken(@navbar-inverse-link-active-bg, 15%);
+                                       }
+                               }
+
                                li,
                                td {
                                        a {
@@ -97,28 +95,6 @@ Topbar
 }
 
 /* - - - - - - - - - - - - - - - - - - - - -
-Clear cache
-- - - - - - - - - - - - - - - - - - - - - */
-
-#clear-cache-actions-menu {
-       li {
-               text-align: left;
-
-               img {
-                       float: left;
-                       padding-right: 6px;
-               }
-               a {
-                       text-decoration: none;
-
-                       span.t3-icon {
-                               vertical-align: middle;
-                       }
-               }
-       }
-}
-
-/* - - - - - - - - - - - - - - - - - - - - -
 Shortcuts menu
 - - - - - - - - - - - - - - - - - - - - - */
 
@@ -127,7 +103,6 @@ Shortcuts menu
                width: 100%;
 
                tr.shortcut td {
-                       line-height: 16px;
                        padding: 2px 1px;
                }
 
@@ -142,20 +117,11 @@ Shortcuts menu
        text-align: center;
 }
 
-#shortcut-menu .shortcut-list tr.shortcut td.shortcut-label a,
 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-edit img,
 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-delete img {
        cursor: pointer;
 }
 
-#shortcut-menu .shortcut-list .shortcut-group td {
-       background-color: #dbdbdb;
-       color: #000;
-       border-bottom: 1px solid #a5a5a5;
-       border-top: 1px solid #a5a5a5;
-}
-
-
 #shortcut-menu .shortcut-list tr.shortcut-group td.shortcut-group-icon,
 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-icon,
 #shortcut-menu .shortcut-list td.shortcut-edit,
@@ -188,47 +154,18 @@ Shortcuts menu
 Username inside the toolbar
 - - - - - - - - - - - - - - - - - - - - - */
 
-#username {
-       color: #fff;
-
-       a {
-               color: #ffffff;
-               font-weight: bold;
-               font-size: 11px;
-               text-decoration: none;
-               line-height: 18px;
-
-               span.t3-icon {
-                       vertical-align: top;
-                       margin-top: 1px;
-               }
-       }
-
-       img {
-               padding-right: 4px;
-       }
-
-
+#topbar-user-menu {
        &.su-user {
                a {
                        color: #eb6e5a;
                }
-
        }
 }
 
 /* - - - - - - - - - - - - - - - - - - - - -
-Logon / Logout
-- - - - - - - - - - - - - - - - - - - - - */
-
-#login-info p {
-       padding-bottom: 30px;
-       padding-top: 5px;
-}
-
-/* - - - - - - - - - - - - - - - - - - - - -
 Workspace Selector
 - - - - - - - - - - - - - - - - - - - - - */
+
 #workspace-selector-menu  {
        ul {
                li {
@@ -262,10 +199,6 @@ body.typo3-in-workspace {
                        url('../../../../images/backgrounds/topbar-in-workspace-background.gif');
                background-repeat: no-repeat, no-repeat, repeat-x;
                background-position: left top, right top, left top;
-
-               #username {
-                       text-shadow: 0 0 5px #000000;
-               }
        }
 }
 
@@ -327,14 +260,7 @@ Live Search
 }
 
 .search-list-help-content {
-       margin: 5px;
+       margin: @navbar-padding-vertical @navbar-padding-horizontal;
        height: 100%;
-       padding: 0.6em 0.6em 0.6em 2.6em;
-       background-repeat: no-repeat;
-       background-position: 0.5em 0.7em;
-       border: 1px solid;
        color: #000000;
-
-       background-color: #ddeef9;
-       border-color: #8aafc4;
 }

diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/bootstrap/variables.less b/typo3/sysext/t3skin/Resources/Private/Styles/bootstrap/variables.less
index 399814d..dd3fb5a 100644 (file)
--- a/typo3/sysext/t3skin/Resources/Private/Styles/bootstrap/variables.less
+++ b/typo3/sysext/t3skin/Resources/Private/Styles/bootstrap/variables.less
@@ -377,6 +377,8 @@
 
 // Inverted navbar links
 @navbar-inverse-link-color:                 @navbar-inverse-color;
+// TYPO3 specific variable:
+@navbar-inverse-link-bg:                    lighten(@navbar-inverse-bg, 7.5%);
 
 @navbar-inverse-link-hover-color:           rgb(200, 200, 200);
 @navbar-inverse-link-hover-bg:              rgb(50, 50, 50);

diff --git a/typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css b/typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css
index 0d91008..861084d 100644 (file)
--- a/typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css
+++ b/typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css
@@ -10075,104 +10075,48 @@ Topbar
   background-image: url('../../../../images/spinner/3f3f3f.gif');
 }
 #typo3-topbar #typo3-top-container #typo3-toolbar > li {
-  position: relative;
+  margin-right: 1px;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .toolbar-item {
-  text-align: center;
+#typo3-topbar #typo3-top-container #typo3-toolbar > li .t3-icon {
+  margin-right: 0;
+}
+#typo3-topbar #typo3-top-container #typo3-toolbar > li.dropdown {
+  color: #999999;
+  background-color: #353535;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .toolbar-item .badge {
+#typo3-topbar #typo3-top-container #typo3-toolbar > li .badge {
   position: absolute;
   top: 6px;
   right: 4px;
   font-size: 7px;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .toolbar-item-active {
-  background-color: #4e4e4e;
-  color: #ffffff;
-}
-#typo3-topbar #typo3-top-container #typo3-toolbar .toolbar-item-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 1000;
-  display: none;
-  float: left;
-  min-width: 160px;
-  padding: 5px 0;
-  margin: 2px 0 0;
-  list-style: none;
-  font-size: 12px;
-  text-align: left;
-  background-color: #ffffff;
-  border: 1px solid #cccccc;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 2px;
-  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-  background-clip: padding-box;
-  display: block;
-  visiblity: hidden;
-  left: auto;
-  right: 0;
+#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu {
   background-color: #4e4e4e;
   color: #ffffff;
   border: 0;
   margin: 0;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .toolbar-item-menu.pull-right {
-  right: 0;
-  left: auto;
-}
-#typo3-topbar #typo3-top-container #typo3-toolbar .toolbar-item-menu .divider {
-  height: 1px;
-  margin: 8px 0;
-  overflow: hidden;
-  background-color: #e5e5e5;
-}
-#typo3-topbar #typo3-top-container #typo3-toolbar .toolbar-item-menu > li > a {
-  display: block;
-  padding: 3px 20px;
-  clear: both;
-  font-weight: normal;
-  line-height: 1.5;
-  color: #5a5a5a;
-  white-space: nowrap;
+#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu .active a {
+  background-color: #282828;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .toolbar-item-menu li a,
-#typo3-topbar #typo3-top-container #typo3-toolbar .toolbar-item-menu td a {
+#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu li a,
+#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu td a {
   color: #ffffff;
   text-decoration: none;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .toolbar-item-menu li a:hover,
-#typo3-topbar #typo3-top-container #typo3-toolbar .toolbar-item-menu td a:hover {
+#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu li a:hover,
+#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu td a:hover {
   background-color: #353535;
   color: #ffffff;
   text-decoration: none;
 }
 /* - - - - - - - - - - - - - - - - - - - - -
-Clear cache
-- - - - - - - - - - - - - - - - - - - - - */
-#clear-cache-actions-menu li {
-  text-align: left;
-}
-#clear-cache-actions-menu li img {
-  float: left;
-  padding-right: 6px;
-}
-#clear-cache-actions-menu li a {
-  text-decoration: none;
-}
-#clear-cache-actions-menu li a span.t3-icon {
-  vertical-align: middle;
-}
-/* - - - - - - - - - - - - - - - - - - - - -
 Shortcuts menu
 - - - - - - - - - - - - - - - - - - - - - */
 #shortcut-menu .shortcut-list {
   width: 100%;
 }
 #shortcut-menu .shortcut-list tr.shortcut td {
-  line-height: 16px;
   padding: 2px 1px;
 }
 #shortcut-menu .shortcut-list tr.shortcut-group td.shortcut-group-icon,
@@ -10181,17 +10125,10 @@ Shortcuts menu
 #shortcut-menu .shortcut-list td.shortcut-delete {
   text-align: center;
 }
-#shortcut-menu .shortcut-list tr.shortcut td.shortcut-label a,
 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-edit img,
 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-delete img {
   cursor: pointer;
 }
-#shortcut-menu .shortcut-list .shortcut-group td {
-  background-color: #dbdbdb;
-  color: #000;
-  border-bottom: 1px solid #a5a5a5;
-  border-top: 1px solid #a5a5a5;
-}
 #shortcut-menu .shortcut-list tr.shortcut-group td.shortcut-group-icon,
 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-icon,
 #shortcut-menu .shortcut-list td.shortcut-edit,
@@ -10218,34 +10155,10 @@ Shortcuts menu
 /* - - - - - - - - - - - - - - - - - - - - -
 Username inside the toolbar
 - - - - - - - - - - - - - - - - - - - - - */
-#username {
-  color: #fff;
-}
-#username a {
-  color: #ffffff;
-  font-weight: bold;
-  font-size: 11px;
-  text-decoration: none;
-  line-height: 18px;
-}
-#username a span.t3-icon {
-  vertical-align: top;
-  margin-top: 1px;
-}
-#username img {
-  padding-right: 4px;
-}
-#username.su-user a {
+#topbar-user-menu.su-user a {
   color: #eb6e5a;
 }
 /* - - - - - - - - - - - - - - - - - - - - -
-Logon / Logout
-- - - - - - - - - - - - - - - - - - - - - */
-#login-info p {
-  padding-bottom: 30px;
-  padding-top: 5px;
-}
-/* - - - - - - - - - - - - - - - - - - - - -
 Workspace Selector
 - - - - - - - - - - - - - - - - - - - - - */
 #workspace-selector-menu ul li span.t3-icon {
@@ -10268,9 +10181,6 @@ body.typo3-in-workspace #typo3-top-container {
   background-repeat: no-repeat, no-repeat, repeat-x;
   background-position: left top, right top, left top;
 }
-body.typo3-in-workspace #typo3-top-container #username {
-  text-shadow: 0 0 5px #000000;
-}
 /* - - - - - - - - - - - - - - - - - - - - -
 Live Search
 - - - - - - - - - - - - - - - - - - - - - */
@@ -10316,15 +10226,9 @@ Live Search
   color: #ddd;
 }
 .search-list-help-content {
-  margin: 5px;
+  margin: 13.5px 15px;
   height: 100%;
-  padding: 0.6em 0.6em 0.6em 2.6em;
-  background-repeat: no-repeat;
-  background-position: 0.5em 0.7em;
-  border: 1px solid;
   color: #000000;
-  background-color: #ddeef9;
-  border-color: #8aafc4;
 }
 /**
  * This file is part of the TYPO3 CMS project.