/* * ------------------------------------------------------------------------------------------------ * © Copyright 2012 SunGard K-12 Education, All Rights Reserved. * This program is PROPRIETARY and CONFIDENTIAL information of SunGard K-12 Education, and may not * be disclosed or used except as expressly authorized in a license agreement controlling such use * and disclosure. Unauthorized use of this program will result in legal proceedings, civil * damages, and possible criminal prosecution. * ------------------------------------------------------------------------------------------------ * System Name: Teacher Access Center * ------------------------------------------------------------------------------------------------ * File Name: Navigation.css * ------------------------------------------------------------------------------------------------ * File Description: * CSS for the TAC navigation menu * ------------------------------------------------------------------------------------------------ * SOURCE * CHG-SET* DATE/TIME MODIFIED BY COMMENTS * ======== ========== ==================== ==================================================== * 0 04/26/2012 randy.kline Navigation Menu initial checkin. Css and jQuery for the basic navigation layout. All icons are in the single sprite. * 09:57:13 P * 35346 04/26/2012 randy.kline Move Navigation.css to proper directory (common) * 11:00:45 P * 35348 04/28/2012 randy.kline Fix how the menu is centered. We don't need jQuery to center if the main container is a table. * 06:58:50 A The submenus are centered as well, so I removed some padding until I find out a definitive answer on how it should be. * 35542 04/28/2012 randy.kline Create controllers for all missing menu options * 10:06:24 A Add Index views for all controllers (empty for now) * Modify navigation.css to reflect controller name changes * 35546 05/15/2012 randy.kline Navigation Menu rework based on feedback. * 04:02:46 P Refactored Controller names where necessary. * 36093 05/16/2012 randy.kline changeset 37497 from 2.5 SP1 HFD to 2.5 SP2 HFD * 09:09:38 A * 36092 05/16/2012 randy.kline changeset 37497 from 2.5 SP2 HFD to 2.5 SP2 HF * 09:11:15 A * 37526 05/17/2012 randy.kline Navigation changes including: * 10:09:23 P Animate Drop Down Menus instantly. * Remove border radius from top of menu. * Adjust spacing between text/icons. * Move selected arrow to center above list item * Comment out notifications for Phase 1 from Banner. * 37598 05/17/2012 randy.kline changeset 38119 from 2.5 SP1 HFD to 2.5 SP2 HFD * 11:31:27 P * 37599 05/17/2012 randy.kline changeset 38118 from 2.5 SP2 HFD to 2.5 SP2 HF * 11:32:33 P * 38119 05/24/2012 randy.kline Changes to NavBar and Banner Menu; * 01:26:36 P Reworked sprite to better account for padding. * Reworked Banner Menu for consistencyl. * 38124 05/25/2012 scott.korin Merge changeset 29180 (Changes to NavBar and Banner Menu) for randy.kline from 2.5 SP1 HFD to 2.5 SP2 HFD * 02:58:31 P * 39452 05/25/2012 scott.korin Merge changeset 39447 (originally 39180) for randy.kline from 2.5 SP2 HFD to 2.5 SP2 HF. * 03:10:06 P * 36089 05/18/2012 rich.johnson Merge approved changes through 05/18/2012 for version 2.5 from SP2 Hot Fix to Service Pack * 03:35:53 P * 36091 05/18/2012 rich.johnson Merge approved changes through 05/18/2012 from Service Pack to Development(2.5) * 03:43:07 P * 38357 05/25/2012 rich.johnson Merge approved changes through 05/25/2012 for version 2.5 from SP2 Hot Fix to Service Pack * 03:42:08 P * 38360 05/25/2012 rich.johnson Merge approved changes through 05/25/2012 from Service Pack to Development(2.5) * 03:46:44 P * 39180 05/30/2012 randy.kline Add box-shadow to all drop down menus; * 01:59:08 P Set nav menu drop down line-height to 20px; * Set the option divider to a color, instead of an image; * 39447 05/31/2012 scott.korin Merge changeset 39643 for randy.kline from 2.5 SP1 HFD to 2.5 SP2 HFD * 02:04:40 P * 39454 05/31/2012 scott.korin Merge changeset 39769 (originally 39643) for randy.kline from 2.5 SP2 HFD to 2.5 SP2 HF * 02:06:21 P * 39643 06/05/2012 randy.kline Banner/NavMenu Drop Down css changes; * 12:49:13 P Tac Links reworked, dynamic on banner tools menu; * Add Competency Entry View; * Common Controller and LinksExtension added; * 39769 06/11/2012 scott.korin Merge changeset 40177 from 2.5 SP1 HFD to 2.5 SP2 HFD for randy.kline * 10:33:47 A * 39770 06/11/2012 scott.korin Merge changeset 40856 from 2.5 SP2 HFD to 2.5 SP2 HF * 10:42:54 A * 39463 06/01/2012 fred.jamann Merge approved changes through 06/01/2012 for version 2.5 from SP2 Hot Fix to Service Pack * 03:22:45 P * 39897 06/15/2012 fred.jamann Merge approved changes through 06/15/2012 for version 2.5 from SP2 Hot Fix to Service Pack * 05:25:28 P * 39897 06/15/2012 fred.jamann Merge approved changes through 06/15/2012 for version 2.5 from SP2 Hot Fix to Service Pack * 05:26:24 P * 39465 06/01/2012 fred.jamann Merge approved changes through 06/01/2012 from Service Pack to Development(2.5) * 03:28:52 P * 39900 06/15/2012 fred.jamann Merge approved changes through 06/15/2012 from Service Pack to Development(2.5) * 05:34:16 P * 40177 06/14/2012 randy.kline Color changes/tweaks to Banner and Nav Menu. * 04:34:25 P Standardized colors between both menus. * Add a "bullet dot" to the dynamic links. * Hide banner and navigation controller when user prints * 40856 06/15/2012 scott.korin Mske sure 2.5 SP2 HFD matches 2.5 SP1 HFD for all TAC files. * 12:05:16 P * 40861 06/26/2012 randy.kline Merge all programmer-approved TAC specific changesets from 2.5 SP2 HFD to 2.5 SP2 HF * 05:04:21 P * 41775 06/29/2012 randy.kline Merge approved changes through 06/29/2012 for version 2.5 from SP2 Hot Fix to Service Pack * 03:57:24 P * 41777 06/29/2012 randy.kline Merge approved changes through 06/29/2012 from 2.5 Service Pack to Development * 04:24:08 P * 41536 07/05/2012 stephen.heckman Fix sitewide font scaleing. Fix news widget size. * 02:08:45 P * 41645 07/05/2012 randy.kline merge TAC changes (in batch) from 2.5 SP1 HFD to 2.5 SP2 HFD * 03:41:47 P * 42805 07/05/2012 randy.kline merge TAC changes (in batch) from 2.5 SP2 HFD to 2.5 SP2 HF * 03:54:35 P * 43506 07/06/2012 randy.kline Standardize/Modify Text Colors, Background Colors, Borders, and * 12:06:30 A Highlighting between the Navigation, Banner, and ComboBox * drop-down menus. * 43550 07/10/2012 randy.kline Use new image for selected menu option instead of the arrow and a colored background * 09:05:29 P * 43907 07/27/2012 Scott.Korin Add ability to have a navigation item that doesn't navigate. * 09:02:32 A * 52798 10/22/2012 randy.kline Retro Bug 12422 from 2.5 SP1 to 3.0 - Navigation menu fix for no-navigate feature * 03:51:42 P In 3.0, there should be a top navigation option for Intervention, so remove the check. * $log$ * * SOURCE CHG-SET refers to the TFS Changeset that the changes were applied to. * ------------------------------------------------------------------------------------------------ */ /* Set the height and background of the actual navigation bar */ #navController { height: 30px; background: url(../../Media/Themes/Base/Navigation/nav-fill.png); } /* Set the navMenu to display as a table so the menu is centered */ #navController #navMenu { display: table; text-align: center; margin: 0 auto 0 auto; font-size: .917em; /* equivalent to 11px */ } /* set some values for the #navMenu and ul to ensure the padding and line-height are set */ #navMenu, #navMenu ul { padding: 0; list-style-type: none; position: relative; line-height: 30px; } /* float the images and list items, use relative for positioning of submenu */ #navMenu li { float: left; position: relative; } /* Set the top menu text as well as turn off the text decoration */ #navMenu a { color: #5C5C5C; margin: 0; text-decoration: none; } /* Set the text of the top menu to have a line-height of 26px, even though the navBar height is 30px so the highlighted box is the correct height. This is due to the 4px padding on top to align the text where we want it. Visibility is set so it can possibly be turned off later. IMPORTANT: must display:block so whole area is clickable to the user, not just text Padding, not margin, is used so the whole area is clickable.*/ #navMenu li a .navTxt { display:block; float: left; padding: 4px 5px 0px 5px; visibility: visible; line-height: 26px; } /* Set the image sprite location, to be used by all images on the navBar Padding, not margin, is used so the whole area is clickable.*/ #navMenu li a .navImg { float: left; position: relative; padding: 4px 0px 0px 5px; width: 22px; height: 22px; background: url(../../Media/Themes/Base/Navigation/navBarSprite.png); background-repeat: no-repeat; } /* NOTE: the Controller name for the menu option is directly related to the class name that is added to the span used to display the image below. For example the "Home" controller matches up with #navHome. This applies to all images. Each image has 4px padding-top and 5px padding-left, so the numbers for the position below needed to include the padding in them already.*/ /* Home Link */ #navMenu #navHome { background-position: 0 -1px; } /* Attendance Link */ #navMenu #navAttendance { background-position: -30px -1px; } /* GradeBook Link */ #navMenu #navGradebook { background-position: -60px -1px;} /* Grade/Mark Reporting Link */ #navMenu #navMarkReporting { background-position: 0 -31px; } /* Performance Link */ #navMenu #navPerformance { background-position: -30px -31px; } /* Class Management Link */ #navMenu #navClassRoster { background-position: -60px -31px; } /* Discipline/Interventions Link */ #navMenu #navIntervention { background-position: 0 -61px; } /* Course Recommendations Link */ #navMenu #navRecommendation { background-position: -30px -61px; } /* Reports Link */ #navMenu #navReport { background-position: -60px -61px; } /* use the image sprite to set the divider */ #navMenu .navDivider { background-color: #999999; margin-top: 5px; height: 20px; width: 1px; } /* Sets the layout and image for the more menus icon, where applicable, using the image sprite Padding, not margin, is used so the whole area is clickable.*/ #navMenu li .navMore { float: left; padding: 15px 5px 7px 0; background: url(../../Media/Themes/Base/Navigation/navBarSprite.png) -10px -90px; background-repeat: no-repeat; height: 6px; width: 8px; } /* When the top menu item is hovered, the jquery will add this class changing the navMore icon to have a white inside Padding, not margin, is used so the whole area is clickable.*/ #navMenu li .navMoreSelected { float: left; padding: 15px 5px 7px 0; background: url(../../Media/Themes/Base/Navigation/navBarSprite.png) -35px -90px; background-repeat: no-repeat; height: 6px; width: 8px; } /* IMPORTANT: must display:block so whole area is clickable to the user, not just text */ #navMenu li ul li a .navSubTxt { display: block; line-height: 20px; } /* Set the selected menu option to have the icon centered/top above the navigation item. Background color is set The top 1px and height are so the highlight is inside the border for the navigation background, otherwise it looked funny. NOTE: This also lowers the text/image by 1px */ #navMenu li.navTopBarSelected { background: url(../../Media/Themes/Base/Navigation/nav-depressed.png) repeat-x; top: 1px; height: 28px; } /* Set the selected options text color */ #navMenu li.navTopBarSelected a span.navTxt { color: #000000; } /* Highlight the top menu option the mouse is on with a light gray color Same as the selected option, the height of the highlight should be 2px less than the total navigation bar size, with a 1 px drop off, This also lowers the text/image by 1px giving the button a depressed looked on mouse over */ #navMenu li:hover { background-color: #CCCCCC; top: 1px; height: 28px; z-index: 1; } /* set the height for the divider, otherwise the li:hover is set */ #navMenu .navDivider:hover { height: 20px; } /* Sets the submenu top offset as well as hiding the submenus absolute position allows for the positioning to be set by other css classes Sets the border and box shadow for the drop down menu */ #navMenu ul { position: absolute; display: none; top: 29px; box-shadow: 4px 4px 10px #999999; border: 2px solid #999999; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } /* Set the border between the rows of the submenus Sets the width used for the submenus. Value based on largest option. Weird things happen without this, or if the value is too low. Value needs to match the "left" setting in the #navMenu li ul li ul Set the text to align left with an indent for the sub menus TODO: set dynamically in jQuery based on width of all menu options? */ #navMenu li ul li { border-top : 1px solid #999999; width: 15em; text-align: left; text-indent: .5em; height: 20px; } /* Sets the top border to be 0px for the first child since the ul has already set the top border */ #navMenu li ul li:first-child { border-top: 0px; } /* Sets the top of the 2nd submenu to be next to the 1st submenu and left the distance of the width of the 1st submenu*/ #navMenu li ul li ul { top: -.2em; left: 15em; } /* Sets the hovered ul's background color with the outside border having rounded edges on the bottom only. Width set so it matches the list items (otherwise issue in web-kit) */ #navMenu li:hover ul, #navMenu li li:hover ul { width: 15em; background-color: #000000; } /* Sets the text color for the submenus */ #navMenu li:hover ul li a { color: #FFFFFF; } /* Sets the hovered list items color. the height and top are reset here otherwise the settings from above cause the sub menu to appear wrong */ #navMenu li ul li:hover { background: url(../../Media/Themes/Base/Navigation/navHighlightFill.png) 50% 50% repeat-x; height: 20px; top: 0px; } /* Sets the hovered list item text color for the submenus */ /*#navMenu li ul li:hover a { color: #FFFFFF; }*/ /* Sets the last-child of the list to have the border radius set to match the ul's border radius. */ #navMenu li ul li:last-child:hover { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }