Skip to content

Commit

Permalink
INF-14 minor overhaul of menu options to ensure colors and patterns a…
Browse files Browse the repository at this point in the history 
…re consistently applied
  • Loading branch information
@MrMaz
MrMaz committed Jun 14, 2015
1 parent b37017e commit c203499
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 92 deletions.
90 changes: 16 additions & 74 deletions src/assets/css/extensions.css
View file
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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) */
Expand All @@ -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) */
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand Down
57 changes: 39 additions & 18 deletions src/engine/config/features.php
View file
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
);
Expand All @@ -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
);
Expand All @@ -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 )
);
Expand All @@ -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'
),
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -306,15 +306,15 @@
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
);

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 )
);
Expand All @@ -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
//
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
);
Expand All @@ -402,15 +423,15 @@
'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
);

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 )
);
Expand All @@ -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'
),
Expand Down

0 comments on commit c203499

Please sign in to comment.