Breadcrumbs
The Left Navigation Menu will display at all times. The menu can be minimized to allow more room to the user for data entry.
Main Page
Subsequent Pages
Title
color: #25282A; font-weight: normal; font-size: 18px; text-align: left; font-family: Open Sans;
Active Page - font-weight: 600
When subsequent pages display, the main page breadcrumbs will be hyperlinks.
Header
The Header will be present at all times.
Minimized Screen Header
General Characteristics
height: 50px; width: auto (edge to edge); Text-align: left; Background-color: #F4F6F7; Padding-top: 15px; Padding-left: 15px;
Logo
Black and White logo - width: 100px;
Icon
fa-expand - color: #0097A9; font-size: 16px;
Full Screen Header
Accounts Payable Invoice | Session
General Characteristics
height: 50px; width: auto (edge to edge); Text-align: left; Background-color: #E5E6E8; Padding-top: 15px; Padding-left: 15px;
Logo
Black and White logo - width: 50px;
Icon
fa-compress - color: #0097A9; font-size: 16px;
Flyout Submenu for Maximized Navigation
General Characteristics
background-color: #383B3F;
Category Headers
color: #0097A9; font-weight: 600; font-size: 13px; line-height: 1.4285; padding: 5px 15px;
Submenu Options
color: #FFFFFF; background-color: #383B3F; font-weight: 600; font-size: 13px; line-height: 1.4285;
Hover State - color: #FFFFFF; background-color: #25282A;
Minimized View
Menu Options
color: #FFFFFF; background-color: #383B3F; font-weight: 600; font-size: 13px; line-height: 1.4285; padding: 15px 25px; border: 1px solid transparent;
Hover State - color: #FFFFFF; background-color: #25282A;
Selected State - color: #FFFFFF; background-color: #25282A; border: 1px solid #0097A9;
Icons
height: 15px; width: 15px; text-align: right;
Key Icon Only - Include the class "fa-rotate-90" to rotate the icon 90 degrees
Flyout Submenu for Minimized Navigation
General Characteristics
background-color: #383B3F;
Submenu Title
font-weight: 600; font-size: 13px; padding: 5px; color: #FFFFFF; border-bottom: 1px solid #FFFFFF;
Category Headers
color: #0097A9; font-weight: 600; font-size: 13px; line-height: 1.4285; padding: 5px 15px;
Submenu Options
color: #FFFFFF; background-color: #383B3F; font-weight: 600; font-size: 13px; line-height: 1.4285;
Hover State - color: #FFFFFF; background-color: #25282A;
Restricted Access
In the event that a user can access a page that should not be viewed the user will see a message stating the restriction.
General Characteristics
background-color: #FFFFFF; font-family: Open Sans;
Icon
fa-smile-o - color: #25282A; font-size: 58px;
Main Text
Font-size: 24px; Color: #0097A9; font-family: Open Sans Semibold;
Secondary Text
Font-size: 14px; Font-family: Open Sans Semibold; color: #25282A;
Tertiary Text
Font-size: 12px; Font-family: Open Sans; color: #25282A;
Icon
fa-group (alias)
