[TASK] Rework Module-Menu CSS/Less 61/33261/3
authorFelix Kopp <felix-source@phorax.com>
Sat, 11 Oct 2014 10:44:22 +0000 (12:44 +0200)
committerChristian Kuhn <lolli@schwarzbu.ch>
Wed, 15 Oct 2014 19:39:03 +0000 (21:39 +0200)
Overwork Module-Menu CSS without visual changes.

Resolves: #62161
Releases: master
Change-Id: I8670548c7192d337550589d4aa325a63d186b1c3
Reviewed-on: http://review.typo3.org/33261
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_module_menu.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3kin.css

index 94a311b..0988aae 100644 (file)
@@ -17,168 +17,110 @@ Module menu
 
 #typo3-module-menu {
        background: #dddddd;
-       left: 0;
-       top: 0;
-       position: absolute;
-       overflow: hidden;
 
        .x-panel-body {
                background-color: transparent;
        }
-}
-
-#typo3-menu {
-    margin-top: 18px;
-       padding-left: 0;
 
-       a {
-                       color: #1e2121;
-                       outline: 0;
-       }
-
-       ul {
-               padding: 0;
-               margin: 0;
-               list-style: none;
+       #typo3-menu {
+           margin-top: 18px;
                padding-left: 0;
-       }
-
-       > li {
-               margin-bottom: 6px;
-               border-bottom: 1px solid #c7c7c7;
-               border-bottom-right-radius: 3px;
-       }
-
-       > li:last-child {
-               border-bottom: none;
-       }
-
+               .list-unstyled;
 
-       li {
-               clear: both;
-               padding-bottom: 1px;
+               > li {
+                       margin-bottom: 6px;
+                       border-bottom: 1px solid #c7c7c7;
 
-               ul {
-                       margin: 6px 0 6px 0;
-
-                       li {
+                       div.modgroup {
+                               color: #252524;
                                cursor: pointer;
-                               font-weight: normal;
-                               line-height: 15px;
-                               min-height: 21px;
-
-                               a {
-                                       text-decoration: none;
-                                       display: block;
-                                       margin-bottom: 1px;
-                                       padding: 3px 0 3px 24px;
+                               font-weight: bold;
+                               text-transform: uppercase;
+                               font-size: 0.9em;
+                               padding-left: 24px;
+                               margin-bottom: 3px;
+                               margin-left: 0px;
+                               padding: 2px 0px 4px 16px;
+                               background-repeat: no-repeat;
+
+                               &.collapsed {
+                                       background-image: url('../../../../images/arrows/module-menu-left-gray.png');
+                                       background-position: right 23px top 7px;
                                }
-                       }
 
-                       li a:hover,
-                       li.hover a,
-                       li.highlighted a {
-                               margin-bottom: 1px;
-                               padding-bottom: 2px;
-                               padding-top: 2px;
+                               &.expanded {
+                                       background-image: url('../../../../images/arrows/module-menu-down-gray.png');
+                                       background-position: right 22px top 9px;
+                               }
                        }
-               }
 
-               span.submodule-icon {
-                       position: absolute;
-               }
+                       ul {
+                               .list-unstyled;
+                               margin: 6px 0;
 
-               span.submodule-label {
-                       display: block;
-                       margin-left: 26px;
-               }
+                               li {
+                                       &.highlighted {
+                                               font-weight: bold;
+                                       }
 
-               div {
-                       overflow: hidden;
-                       padding: 2px 0px 4px 16px;
-                       vertical-align: middle;
-               }
+                                       a {
+                                               display: block;
+                                               color: #1e2121;
+                                               text-decoration: none;
+                                               line-height: 16px;
+                                               padding: 3px 0 3px 24px;
 
-               a {
-                       display: block;
-                       padding-bottom: 1px;
-                       margin-bottom: 0;
-               }
+                                               span.submodule-icon {
+                                                       position: absolute;
+                                               }
 
-               img {
-                       vertical-align: baseline;
-                       max-width: 16px;
-                       max-height: 16px;
-               }
+                                               span.submodule-label {
+                                                       display: block;
+                                                       margin-left: 26px;
+                                               }
 
-               div.modgroup {
-                       color: #252524;
-                       cursor: pointer;
-                       font-weight: bold;
-                       text-transform: uppercase;
-                       font-size: 0.9em;
-                       padding-left: 24px;
-                       margin-bottom: 3px;
-               }
-       }
+                                       }
+                               }
 
-       /* active menu item */
-       li.highlighted {
-               font-weight: bold;
-       }
+                               li a:hover {
+                                       background-color: #e8e8e8;
+                               }
 
-       div.expanded,
-       div.collapsed {
-               margin-left: 0px;
-       }
+                               /* hovered menu item */
+                               li a:hover,
+                               li.highlighted a {
+                                       border-top: 1px solid #b8b8b8;
+                                       border-bottom: 1px solid #b8b8b8;
+                                       padding-top: 2px;
+                                       padding-bottom: 2px;
 
-       div.collapsed {
-               background-image: url('../../../../images/arrows/module-menu-left-gray.png');
-               background-position: right 23px top 7px;
-               background-repeat: no-repeat;
-       }
+                                       background-color: #ebebeb;
+                                       box-shadow: none;
+                               }
+                       }
 
-       div.expanded {
-               background-image: url('../../../../images/arrows/module-menu-down-gray.png');
-               background-position: right 22px top 9px;
-               background-repeat: no-repeat;
-       }
+                       img {
+                               max-width: 16px;
+                               max-height: 16px;
+                       }
+               }
 
-       #typo3-docheader {
-               min-width: 0;
+               > li:last-child {
+                       border-bottom: none;
+               }
        }
 }
 
 /**
  * Shadow on the right side of the module menu.
  */
-
 #typo3-module-menu,
-#typo3-menu li.menuSection li a:hover {
+#typo3-menu li li a:hover {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9JREFUeNpi3LFjB0CAAQAEWAIqGE4BVwAAAABJRU5ErkJggg==");
        background-position: right;
        background-repeat: repeat-y;
 }
 
-/* hovered menu item */
-#typo3-menu li.menuSection li a:hover,
-#typo3-menu li.highlighted a {
-       border-top: 1px solid #b8b8b8;
-       border-bottom: 1px solid #b8b8b8;
-}
-
-#typo3-menu li.menuSection li a:hover {
-       background-color: #e8e8e8;
-}
-
-#typo3-menu li.highlighted a,
-#typo3-menu li.menuSection li.highlighted a:hover,
-.no-boxshadow #typo3-menu li.menuSection li.highlighted a:hover {
-       background-color: #ebebeb;
-       background-image: none;
-       box-shadow: none;
-}
-
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        .backgroundsize #typo3-menu li div.collapsed {
                background-image: url('../../../../images/arrows/module-menu-left-gray@2x.png');
@@ -188,4 +130,4 @@ Module menu
                background-image: url('../../../../images/arrows/module-menu-down-gray@2x.png');
                background-size: 7px 6px;
        }
-}
+}
\ No newline at end of file
index 8e1a126..b65a330 100644 (file)
@@ -10478,139 +10478,90 @@ Module menu
 - - - - - - - - - - - - - - - - - - - - - */
 #typo3-module-menu {
   background: #dddddd;
-  left: 0;
-  top: 0;
-  position: absolute;
-  overflow: hidden;
 }
 #typo3-module-menu .x-panel-body {
   background-color: transparent;
 }
-#typo3-menu {
+#typo3-module-menu #typo3-menu {
   margin-top: 18px;
   padding-left: 0;
-  /* active menu item */
-}
-#typo3-menu a {
-  color: #1e2121;
-  outline: 0;
-}
-#typo3-menu ul {
-  padding: 0;
-  margin: 0;
   list-style: none;
-  padding-left: 0;
 }
-#typo3-menu > li {
+#typo3-module-menu #typo3-menu > li {
   margin-bottom: 6px;
   border-bottom: 1px solid #c7c7c7;
-  border-bottom-right-radius: 3px;
 }
-#typo3-menu > li:last-child {
-  border-bottom: none;
+#typo3-module-menu #typo3-menu > li div.modgroup {
+  color: #252524;
+  cursor: pointer;
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: 0.9em;
+  padding-left: 24px;
+  margin-bottom: 3px;
+  margin-left: 0px;
+  padding: 2px 0px 4px 16px;
+  background-repeat: no-repeat;
 }
-#typo3-menu li {
-  clear: both;
-  padding-bottom: 1px;
+#typo3-module-menu #typo3-menu > li div.modgroup.collapsed {
+  background-image: url('../../../../images/arrows/module-menu-left-gray.png');
+  background-position: right 23px top 7px;
 }
-#typo3-menu li ul {
-  margin: 6px 0 6px 0;
+#typo3-module-menu #typo3-menu > li div.modgroup.expanded {
+  background-image: url('../../../../images/arrows/module-menu-down-gray.png');
+  background-position: right 22px top 9px;
 }
-#typo3-menu li ul li {
-  cursor: pointer;
-  font-weight: normal;
-  line-height: 15px;
-  min-height: 21px;
+#typo3-module-menu #typo3-menu > li ul {
+  padding-left: 0;
+  list-style: none;
+  margin: 6px 0;
+  /* hovered menu item */
 }
-#typo3-menu li ul li a {
-  text-decoration: none;
+#typo3-module-menu #typo3-menu > li ul li.highlighted {
+  font-weight: bold;
+}
+#typo3-module-menu #typo3-menu > li ul li a {
   display: block;
-  margin-bottom: 1px;
+  color: #1e2121;
+  text-decoration: none;
+  line-height: 16px;
   padding: 3px 0 3px 24px;
 }
-#typo3-menu li ul li a:hover,
-#typo3-menu li ul li.hover a,
-#typo3-menu li ul li.highlighted a {
-  margin-bottom: 1px;
-  padding-bottom: 2px;
-  padding-top: 2px;
-}
-#typo3-menu li span.submodule-icon {
+#typo3-module-menu #typo3-menu > li ul li a span.submodule-icon {
   position: absolute;
 }
-#typo3-menu li span.submodule-label {
+#typo3-module-menu #typo3-menu > li ul li a span.submodule-label {
   display: block;
   margin-left: 26px;
 }
-#typo3-menu li div {
-  overflow: hidden;
-  padding: 2px 0px 4px 16px;
-  vertical-align: middle;
+#typo3-module-menu #typo3-menu > li ul li a:hover {
+  background-color: #e8e8e8;
 }
-#typo3-menu li a {
-  display: block;
-  padding-bottom: 1px;
-  margin-bottom: 0;
+#typo3-module-menu #typo3-menu > li ul li a:hover,
+#typo3-module-menu #typo3-menu > li ul li.highlighted a {
+  border-top: 1px solid #b8b8b8;
+  border-bottom: 1px solid #b8b8b8;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  background-color: #ebebeb;
+  box-shadow: none;
 }
-#typo3-menu li img {
-  vertical-align: baseline;
+#typo3-module-menu #typo3-menu > li img {
   max-width: 16px;
   max-height: 16px;
 }
-#typo3-menu li div.modgroup {
-  color: #252524;
-  cursor: pointer;
-  font-weight: bold;
-  text-transform: uppercase;
-  font-size: 0.9em;
-  padding-left: 24px;
-  margin-bottom: 3px;
-}
-#typo3-menu li.highlighted {
-  font-weight: bold;
-}
-#typo3-menu div.expanded,
-#typo3-menu div.collapsed {
-  margin-left: 0px;
-}
-#typo3-menu div.collapsed {
-  background-image: url('../../../../images/arrows/module-menu-left-gray.png');
-  background-position: right 23px top 7px;
-  background-repeat: no-repeat;
-}
-#typo3-menu div.expanded {
-  background-image: url('../../../../images/arrows/module-menu-down-gray.png');
-  background-position: right 22px top 9px;
-  background-repeat: no-repeat;
-}
-#typo3-menu #typo3-docheader {
-  min-width: 0;
+#typo3-module-menu #typo3-menu > li:last-child {
+  border-bottom: none;
 }
 /**
  * Shadow on the right side of the module menu.
  */
 #typo3-module-menu,
-#typo3-menu li.menuSection li a:hover {
+#typo3-menu li li a:hover {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9JREFUeNpi3LFjB0CAAQAEWAIqGE4BVwAAAABJRU5ErkJggg==");
   background-position: right;
   background-repeat: repeat-y;
 }
-/* hovered menu item */
-#typo3-menu li.menuSection li a:hover,
-#typo3-menu li.highlighted a {
-  border-top: 1px solid #b8b8b8;
-  border-bottom: 1px solid #b8b8b8;
-}
-#typo3-menu li.menuSection li a:hover {
-  background-color: #e8e8e8;
-}
-#typo3-menu li.highlighted a,
-#typo3-menu li.menuSection li.highlighted a:hover,
-.no-boxshadow #typo3-menu li.menuSection li.highlighted a:hover {
-  background-color: #ebebeb;
-  background-image: none;
-  box-shadow: none;
-}
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   .backgroundsize #typo3-menu li div.collapsed {
     background-image: url('../../../../images/arrows/module-menu-left-gray@2x.png');