[TASK] Bring Toolbar styling for Bootstrap HTML5 markup 41/34141/3
authorFelix Kopp <felix-source@phorax.com>
Fri, 14 Nov 2014 00:15:05 +0000 (01:15 +0100)
committerBenjamin Mack <benni@typo3.org>
Fri, 14 Nov 2014 09:16:14 +0000 (10:16 +0100)
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>
typo3/sysext/backend/Classes/Toolbar/LiveSearchToolbarItem.php
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_topbar.less
typo3/sysext/t3skin/Resources/Private/Styles/bootstrap/variables.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

index 2ce107f..c6075b0 100644 (file)
@@ -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>
index 0f50c67..3ac3e58 100644 (file)
@@ -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;
 }
index 399814d..dd3fb5a 100644 (file)
 
 // 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);
index 0d91008..861084d 100644 (file)
@@ -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.