Alert Messages
Lightbox modal alerts that prompt the user for confirmation. These alerts interrupt the user's task and require user interaction to dismiss.
Header
background-color: #E5E6E8; height: 40px; color: #25282A; font-weight: 700; font-size: 14px; font-family: Open Sans Bold;
Icon Options
Confirmation -
Error -
Warning -
Message
font-weight: 400; font-size: 13px; color: #25282A; line-height: 1.4285;
Buttons
Will follow the button standard styles.
Cards
Action Cards
Action Cards will display specific information and allow the user to take multiple different actions based on the presented information. A combination of buttons and hyperlinks can be used. If a hyperlink is used in the header of the card the styling will be different than the default hyperlinks in the application.
| Type: | Vendor Information List |
| Category: | Accounts Payable |
| Creator: | UserLastName, UserFirstName |
| Last Run: | 06/29/2016 9:28 AM |
| Last Saved: | 06/22/2016 9:20 AM |
General Characteristics
border: 1px solid #D4D8DA; border-radius: 3px; background-color: #FFFFFF; width: 450px; margin: 20px;
Hover State
border: none; box-shadow: 0 1px 5px 0 rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12);
Header/Top Section
border-bottom: 1px solid #D4D8DA; line-height: 38px; padding: 0 10px;
Title/Hyperlink
color: #1A5E66; text-decoration: none; font-weight: 700; font-size: 14px; font-family: "Open Sans";
Middle Section
This section may be different depending on the information that is presented. Special styling will be considered when this component is used.
Action/Bottom Section
border-top: 1px solid #D4D8DA; line-height: 38px; padding: 0 10px 10px 10px; text-align: right; background-color: #F4F6F7;
Navigation Cards
Navigation Cards will be used when a number of options are presented and the user can select where to navigate. The card will include a hyperlink section, which will be styled slightly differently from default hyperlinks in the application and a summary section to give the user additional information about the choice.
General Characteristics
border: 1px solid #D4D8DA; border-radius: 3px; background-color: #FFFFFF; margin: 20px; padding: 10px; width: 320px; height: 120px;
Title/Hyperlink
color: #1A5E66; text-decoration: none; font-weight: 700; font-size: 14px; font-family: "Open Sans";
Summary
margin: 5px 5px 0 5px; font-size: 13px; font-weight: 400;
Key Performance Indicators (KPIs)
KPIs will be included on the Dashboards to give the user specific values that demonstrates the current status of the organization. The values will always be rounded to the nearest dollar amount of hundreth of a percent. Each KPI box will be an Abila color defined in the Abila Standards.
Multiple Key Performance Indicators
Separate Boxes
min-height: 100px; padding-top: 20px; position: relative; overflow: hidden; width: 100%; text-align: center; border-radius: 4px; margin: 10px 10px 5px 0;
KPI Heading
font-weight: 500; font-size: 14px; font-family: "Open Sans"; margin: 0 0 10px;
KPI Value
font-weight: 700; font-size: 20px;
Lists
Lists will allow the user to select an option from one list to add to a different list. The user will be able to double click an option to move it or drag and drop the option.
Available List
Selected List
Available List
Background
background-color: #E5E6E8; border: 1px solid #A1A5AB;
Buttons
font-size: 13px; color: #0097A9; font-family: "Open Sans"; font-weight: 600; border-radius: 3px;
Hover State - no change
Active State - background-color: #1A5E66; cursor: move;
Focus State - background-color: #1A5E66; cursor: move;
Selected List
Background
background-color: transparent; border: none;
Buttons
font-size: 13px; color: #0097A9; font-family: "Open Sans"; font-weight: 600; border-radius: 3px;
Hover State - background-color: #1A5E66; cursor: move;
Active State - background-color: #1A5E66; cursor: move;
Focus State - background-color: #1A5E66; cursor: move;
Modals
A modal will be used to display data fields that require the user's immediate attention to complete. They will display on top of the existing page and will render that page disabled until the modal is closed.
General Characteristics
The width of the modal will be relative to the content that will display. A minimum of one button will be at the bottom right side of the modal and they will follow the button style rules.
background-color: #FFFFFF; margin: 30px auto; position: relative; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px;
Header
background-color: #0097a9; color: #FFFFFF; padding: 9px; height: 40px; border-bottom: 1px solid #E5E6E8; font-size: 14px; font-family: Open Sans Semibold;
Negative Space
In places where the area is blank prior to a selection fill in the white space with .
The text will be entered in the form of a sentence.
General Characteristics
background-color: #F4F6F7; border: 1px solid #D4D8DA; border-radius: 3px; width: 100%;
Icon
margin: 60px 0 0; width: 100%; text-align: center; font-size: 5em; color: #D4D8DA; position: relative;
The icon will be the same icon that is selected on the Left Navigation option that the page is related to.
Text
font-size: 30px; color: #D4D8DA; width: 100%; max-width: 700px; text-align: center; margin 30px auto 60px; position: relative;
Notifications
Temporary alerts to either show a confirmation/success message, or show some error to the user. These alerts are timed, do not require user interaction, and do not interrupt the user's task.
All Messages
width: 260px; height: 100px; text-align: center; font-family: Open Sans; font-size: 15px; font-weight: 600; padding: 20px 15px 15px 15px; border-radius: 3px;
Confirmation Message
background-color: #0097A9; color: #FFFFFF;
Icon - fa-circle-thin fa-stack-2x; fa-check fa-stack-1x
Warning Message
background-color: #CFB023; color: #FFFFFF;
Icon - fa-circle-thin fa-stack-2x; fa-exclaimation fa-stack-1x
Error Message
background-color: #963821; color: #FFFFFF;
Icon - fa-circle-thin fa-stack-2x; fa-close fa-stack-1x
Progress Queue
The Progress Queue appears when the user generates a document such as a report in a file format (as opposed to the HTML preview). It shows the status of the document as well as actions to take.
General Characteristics
A progress bar will display while the document is generating; once it is complete action options will be available.
position: fixed; bottom: 0; right: 0; margin-right: 15px; min-width: 160px; max-width: 350px; border-radius: 2px 2px 0 0; z-index: 10; box-shadow: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12); background-color: #25282A;
Title
height: 26px; padding: 3px 10px; color: #93D4DE; font-weight: 800; line-height: 20px; font-size: 13px; font-family: Open Sans;
Icons - float: right; color: #FFFFFF; () fa-minus to minimize the queue; () fa-plus to maximize the queue
Queue Content
The queue will expand to display all items within the queue.
max-height: 548px; overflow-y: auto; overflow-x: hidden; border-top: 1px solid #A1A5AB;
Queue Items
font-size: 13px; color: #FFFFFF; font-weight: 500; padding: 10px; border-bottom: 1px solid #A1A5AB (bottom border will not display on the last item); text-overflow: ellipsis; line-height: 20; height: 20px; width: 100%;
File Type - font-weight: 800;
Action
Any action options will display as hyperlinks with the following characteristics:
Primary Action - color: #93D4DE; font-weight: 800; font-size: 11px; cursor: pointer;
Secondary Action - color: #FFFFFF; font-weight: 800; font-size: 11px; cursor: pointer;
Divider - Each action option will be separated with a pipe "|". color: #FFFFFF; font-weight: 500; margin 0 3px; font-size: 11px;