From c203499ebefc1bd05c73ed23b1e6889e26426039 Mon Sep 17 00:00:00 2001 From: MrMaz Date: Sun, 14 Jun 2015 14:33:01 -0400 Subject: [PATCH] INF-14 minor overhaul of menu options to ensure colors and patterns are consistently applied --- src/assets/css/extensions.css | 90 ++++++---------------------------- src/engine/config/features.php | 57 ++++++++++++++------- 2 files changed, 55 insertions(+), 92 deletions(-) diff --git a/src/assets/css/extensions.css b/src/assets/css/extensions.css index f6133e63..0c270a8c 100644 --- a/src/assets/css/extensions.css +++ b/src/assets/css/extensions.css @@ -252,6 +252,7 @@ body.infinity-layout { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; + background-color: #333333; } .infinity-layout .base-menu ul li { float: left; @@ -261,66 +262,13 @@ body.infinity-layout { .infinity-layout .base-menu ul li.right { float: right; } -.infinity-layout .base-menu ul li li:hover ul, -.infinity-layout .base-menu ul li li.sfHover ul, -.infinity-layout .base-menu ul li li li:hover ul, -.infinity-layout .base-menu ul li li li.sfHover ul, -.infinity-layout .base-menu ul li li li li:hover ul, -.infinity-layout .base-menu ul li li li li.sfHover ul { - /* match .nav ul width */ - top: -5px; - left: 190px; -} .infinity-layout .base-menu ul li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } -.infinity-layout .base-menu ul li:hover li ul, -.infinity-layout .base-menu ul li.sfHover li ul, -.infinity-layout .base-menu ul li li:hover li ul, -.infinity-layout .base-menu ul li li.sfHover li ul, -.infinity-layout .base-menu ul li li li:hover li ul, -.infinity-layout .base-menu ul li li li.sfHover li ul { - top: -9999em; -} -.infinity-layout .base-menu ul li:hover ul, -.infinity-layout .base-menu ul li.sfHover ul { - top: 27px; - /* match top ul list item height */ - left: 0px; - z-index: 95; -} /* display as block, or hover fails to work properly when text wraps */ .infinity-layout .base-menu a span { display: block; } -.infinity-layout .base-menu ul ul { - top: -9999em; - width: 210px; - /* left offset of submenus need to match (see below) */ - margin: 3px 0 0 0; - padding: 15px 5px 15px 5px; - z-index: 50; - position: absolute; -} -.infinity-layout .base-menu ul ul li { - float: left; - width: 180px; -} -.infinity-layout .base-menu ul ul ul { - margin-left: -10px; -} -.infinity-layout .base-menu ul ul li { - width: 85%; -} -.infinity-layout .base-menu ul ul li:first-child { - border-top: none; -} -.infinity-layout .base-menu ul ul li:last-child { - border-bottom: none; -} -.infinity-layout .base-menu ul ul li a { - width: 180px; -} .infinity-layout .base-menu ul a { float: left; padding: 8px 10px; @@ -330,26 +278,27 @@ body.infinity-layout { .infinity-layout .base-menu li.sfHover li a { background: none; } +.infinity-layout .base-menu li li a span { + padding: 0; + color: #BBB; +} .infinity-layout .base-menu li li a span.sf-sub-indicator, .infinity-layout .base-menu li.sfHover li a span.sf-sub-indicator { float: right; margin: 5px 0 0 0; } -.infinity-layout .base-menu li li a span { - padding: 0; color: #BBB; -} .infinity-layout .base-menu ul li.sfHover li a, .infinity-layout .base-menu ul li.sfHover li a:hover, .infinity-layout .base-menu ul li.sfHover > a span, .infinity-layout .base-menu ul li.sfHover li.sfHover > a span, .infinity-layout .base-menu ul li.sfHover li.sfHover li.sfHover > a span, .infinity-layout .base-menu ul li.sfHover li a span:hover { - color: #DDD; + /*opacity: 0.8;*/ } /* Make sub menus appear */ .infinity-layout .base-menu ul li:hover ul, .infinity-layout .base-menu ul li.sfHover ul { - top: 34px; /* match top ul list item height */ + top: 30px; /* match top ul list item height */ z-index: 150; } /* Hide all subs subs (4 levels deep) */ @@ -368,11 +317,12 @@ body.infinity-layout { .infinity-layout .base-menu ul li li li.sfHover ul, .infinity-layout .base-menu ul li li li li:hover ul, .infinity-layout .base-menu ul li li li li.sfHover ul { - left: 190px; /* match .nav ul width */ - top: -5px; + left: 180px; /* match .nav ul width */ + top: 5px; } /* 2nd level skin */ .infinity-layout .base-menu ul ul { + z-index: 50; position: absolute; top: -9999em; width: 180px; /* left offset of submenus need to match (see below) */ @@ -386,7 +336,7 @@ body.infinity-layout { background: none; } .infinity-layout .base-menu li a:hover { - color: #DDD; + opacity: 0.8; } .infinity-layout .base-menu ul ul li:first-child { border-top: none; @@ -432,6 +382,7 @@ html body.infinity-layout .top-wrap ul.sub-menu { margin: 8px 0 0; padding: 0 !important; z-index: 150 !important; + background-color: #333333; } .infinity-layout .main-menu ul.sub-menu a { margin-right: 0; @@ -441,7 +392,7 @@ html body.infinity-layout .top-wrap ul.sub-menu { } .infinity-layout #main-menu-wrap ul ul li.sfHover ul { left: 180px; /* match .nav ul width */ - top: -2px; + top: 10px; } .infinity-layout #footer ul.sub-menu, .infinity-layout #footer ul.sub-menu:before { @@ -505,7 +456,7 @@ html body.infinity-layout .top-wrap ul.sub-menu { margin-left: 0px; } .infinity-layout #footer-menu ul li a:hover { - color: #777; + opacity: 0.8; } .infinity-layout #footer-menu ul li { display: inline; @@ -1237,13 +1188,10 @@ body.infinity-design { background: #FFF; } /* Global CSS3 Stuff */ -.infinity-design .top-menu, -.infinity-design .top-wrap .sub-menu, .infinity-design .item-list-tabs, .infinity-design .footer-wrap, .infinity-design thead:first-child tr th, .infinity-design thead:first-child tr td, -.infinity-design .base-menu ul ul, .infinity-design .sidebar-activity-tabs ul li.current, .infinity-design .sidebar-activity-tabs ul li.selected, .infinity-design .docs .toggle-switch, @@ -1299,11 +1247,6 @@ body.infinity-design { .infinity-design #footer-menu ul li a { color: #FFF; font-weight: 400; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); -} -.infinity-design .base-menu ul a:hover, -.infinity-design #footer-menu ul li a:hover { - color: #BBB; } .infinity-design .main-menu { border-radius: 6px 6px 6px 6px; @@ -1313,14 +1256,13 @@ body.infinity-design { font-weight: 500; border-radius: 6px 6px 6px 6px; } -.infinity-design .main-menu ul a:hover { - background: url("../images/design/bg-body.gif") repeat transparent; +.infinity-design .main-menu ul a:hover:before { + border-radius: 6px 6px 6px 6px; } .infinity-design .base-menu ul li.current-cat a, .infinity-design .base-menu ul li.current_page_item a, .infinity-design .base-menu ul li.current-menu-item a { font-weight: bold; - background: url("../images/design/bg-body.gif") repeat transparent; } .infinity-design .widget h4, .infinity-design #activity-navigation h4 { diff --git a/src/engine/config/features.php b/src/engine/config/features.php index 9dfc8029..6ca2b2c6 100644 --- a/src/engine/config/features.php +++ b/src/engine/config/features.php @@ -173,7 +173,7 @@ 'type' => 'colorpicker', 'title' => __( 'Font Color', 'infinity-engine' ), 'description' => __( 'Choose a font color for links of the menu above the header.', 'infinity-engine' ), - 'style_selector' => 'body.theme-option .top-menu ul li a span', + 'style_selector' => 'body.theme-option nav.base-menu.top-menu ul li a span', 'style_property' => 'color' ), $infinity_top_menu_defaults @@ -185,7 +185,7 @@ 'type' => 'select', 'title' => __( 'Font Weight', 'infinity-engine' ), 'description' => __( 'Choose a font weight for links of the menu above the header.', 'infinity-engine' ), - 'style_selector' => 'body.theme-option .top-menu ul li a span', + 'style_selector' => 'body.theme-option nav.base-menu.top-menu ul li a span', 'style_property' => 'font-weight' ), $infinity_top_menu_defaults @@ -195,7 +195,7 @@ array( 'name' => 'background-color', 'type' => 'css/bg-color', - 'style_selector' => 'body.theme-option .top-menu' + 'style_selector' => 'body.theme-option nav.base-menu.top-menu' ), $infinity_top_menu_defaults ); @@ -206,7 +206,7 @@ 'type' => 'css/bg-color', 'title' => __( 'Sub-item Background', 'infinity-engine' ), 'description' => __( 'Choose a background color for the submenu items of the menu above the header.', 'infinity-engine' ), - 'style_selector' => 'body.theme-option .top-menu ul ul' + 'style_selector' => 'body.theme-option nav.base-menu.top-menu ul ul' ), $infinity_top_menu_defaults ); @@ -216,7 +216,7 @@ 'name' => 'overlay-image', 'group' => 'top-menu', 'section' => 'menus-top', - 'style_selector' => 'body.theme-option .top-menu' + 'style_selector' => 'body.theme-option nav.base-menu.top-menu' ), array_merge( $infinity_top_menu_defaults, $overlay_image_defaults ) ); @@ -225,7 +225,7 @@ array( 'name' => 'overlay-opacity', 'type' => 'css/overlay-opacity', - 'style_selector' => 'body.theme-option .top-menu:before', + 'style_selector' => 'body.theme-option nav.base-menu.top-menu:before', 'parent' => 'overlay-image', 'linked_image' => 'overlay-image' ), @@ -271,7 +271,7 @@ 'type' => 'colorpicker', 'title' => __( 'Font Color', 'infinity-engine' ), 'description' => __( 'Choose a font color for links of the menu inside the header.', 'infinity-engine' ), - 'style_selector' => 'body.theme-option .main-menu ul li a span', + 'style_selector' => 'body.theme-option nav.base-menu.main-menu ul li a span', 'style_property' => 'color' ), $infinity_main_menu_defaults @@ -283,7 +283,7 @@ 'type' => 'select', 'title' => __( 'Font Weight', 'infinity-engine' ), 'description' => __( 'Choose a font weight for links of the menu inside the header.', 'infinity-engine' ), - 'style_selector' => 'body.theme-option .main-menu ul li a span', + 'style_selector' => 'body.theme-option nav.base-menu.main-menu ul li a span', 'style_property' => 'font-weight' ), $infinity_main_menu_defaults @@ -296,7 +296,7 @@ 'title' => __( 'Padding', 'infinity-engine' ), 'description' => __( 'Select the padding (spacing) around the menu links by moving the slider.', 'infinity-engine' ), 'max' => 30, - 'style_selector' => 'body.theme-option .main-menu', + 'style_selector' => 'body.theme-option nav.base-menu.main-menu', 'style_property' => 'padding' ), $infinity_main_menu_defaults @@ -306,7 +306,7 @@ array( 'name' => 'background-color', 'type' => 'css/bg-color', - 'style_selector' => 'body.theme-option .main-menu' + 'style_selector' => 'body.theme-option nav.base-menu.main-menu' ), $infinity_main_menu_defaults ); @@ -314,7 +314,7 @@ ice_register_option( array( 'name' => 'overlay-image', - 'style_selector' => 'body.theme-option .main-menu' + 'style_selector' => 'body.theme-option nav.base-menu.main-menu' ), array_merge( $infinity_main_menu_defaults, $overlay_image_defaults ) ); @@ -323,13 +323,34 @@ array( 'name' => 'overlay-opacity', 'type' => 'css/overlay-opacity', - 'style_selector' => 'body.theme-option .main-menu:before', + 'style_selector' => 'body.theme-option nav.base-menu.main-menu:before', 'parent' => 'overlay-image', 'linked_image' => 'overlay-image' ), $infinity_main_menu_defaults ); + ice_register_option( + array( + 'name' => 'hover-background', + 'title' => __( 'Hover Background', 'infinity-engine' ), + 'style_selector' => 'body.theme-option nav.base-menu.main-menu ul a:hover' + ), + array_merge( $infinity_main_menu_defaults, $overlay_image_defaults ) + ); + + ice_register_option( + array( + 'name' => 'hover-opacity', + 'type' => 'css/overlay-opacity', + 'title' => __( 'Hover Background Opacity', 'infinity-engine' ), + 'style_selector' => 'body.theme-option nav.base-menu.main-menu ul a:hover:before', + 'parent' => 'hover-background', + 'linked_image' => 'hover-background' + ), + $infinity_main_menu_defaults + ); + // // Sub Menu Group // @@ -369,7 +390,7 @@ 'type' => 'colorpicker', 'title' => __( 'Font Color', 'infinity-engine' ), 'description' => __( 'Choose a font color for links of the menu below the header.', 'infinity-engine' ), - 'style_selector' => 'body.theme-option .sub-menu ul li a span', + 'style_selector' => 'body.theme-option nav.base-menu.sub-menu ul li a span', 'style_property' => 'color' ), $infinity_sub_menu_defaults @@ -381,7 +402,7 @@ 'type' => 'select', 'title' => __( 'Font Weight', 'infinity-engine' ), 'description' => __( 'Choose a font weight for links of the menu below the header.', 'infinity-engine' ), - 'style_selector' => 'body.theme-option .sub-menu ul li a span', + 'style_selector' => 'body.theme-option nav.base-menu.sub-menu ul li a span', 'style_property' => 'font-weight' ), $infinity_sub_menu_defaults @@ -391,7 +412,7 @@ array( 'name' => 'background-color', 'type' => 'css/bg-color', - 'style_selector' => 'body.theme-option .sub-menu' + 'style_selector' => 'body.theme-option nav.base-menu.sub-menu' ), $infinity_sub_menu_defaults ); @@ -402,7 +423,7 @@ 'type' => 'css/bg-color', 'title' => __( 'Sub-item Background', 'infinity-engine' ), 'description' => __( 'Choose a background color for the submenu items of the menu below the header.', 'infinity-engine' ), - 'style_selector' => 'body.theme-option .sub-menu ul ul' + 'style_selector' => 'body.theme-option nav.base-menu.sub-menu ul ul' ), $infinity_sub_menu_defaults ); @@ -410,7 +431,7 @@ ice_register_option( array( 'name' => 'overlay-image', - 'style_selector' => 'body.theme-option .sub-menu' + 'style_selector' => 'body.theme-option nav.base-menu.sub-menu' ), array_merge( $infinity_sub_menu_defaults, $overlay_image_defaults ) ); @@ -419,7 +440,7 @@ array( 'name' => 'overlay-opacity', 'type' => 'css/overlay-opacity', - 'style_selector' => 'body.theme-option .sub-menu:before', + 'style_selector' => 'body.theme-option nav.base-menu.sub-menu:before', 'parent' => 'overlay-image', 'linked_image' => 'overlay-image' ),