Buttons
Default buttons are the most common buttons that will display on most every page and modal.
Primary, Secondary and Tertiary Buttons
Disabled State
General Characteristics
border-radius: 5px; font-size: 1em; padding: 4px 12px; font-family: Open Sans Semibold; height: 38px; border-style: solid; border-width: 1px; margin-right: 10px; min-width: 100px;
Disabled State
background-color: #F4F6F7; border-color: #EEEEEE; color: #A1A5AB;
Primary Button
Primary buttons are used for confirmation/committing actions.
Default State - background-color: #0097A9; border-color: #0097A9; color: #FFFFFF;
Hover State - background-color: #007B8B; border-color: #007B8B; color: #FFFFFF;
Focus State - background-color: #0097A9; border-color: #1A5E66; color: #FFFFFF;
Active State - background-color: #1A5E66; border-color: #1A5E66; color: #FFFFFF;
Secondary Button
Secondary buttons are used for non-permanent actions (such as closing a modal or dismissing an alert).
Default State - background-color: #FFFFFF; border-color: #A1A5AB; color: #4B4F54;
Hover State - background-color: #E5E6E8; border-color: #E5E6E8; color: #4B4F54;
Focus State - background-color: #FFFFFF; border-color: #A1A5AB; color: #4B4F54;
Active State - background-color: #A1A5AB; border-color: #A1A5AB; color: #FFFFFF;
Tertiary Button
Tertiary buttons are used for permanent actions that require a warning (such as deleting an item).
Default State - background-color: #963821; border-color: #963821; color: #FFFFFF;
Hover State - background-color: #712A19; border-color: #712A19; color: #FFFFFF;
Focus State - background-color: #4B1C11; border-color: #4B1C11; color: #FFFFFF;
Active State - background-color: #4B1C11; border-color: #4B1C11; color: #FFFFFF;
Buttons with Dropdowns
The icon will be (fa-caret-down) or (fa-caret-up) depending on if the additional button options will be displayed above the original button or below. The icon will be located on the right side of the button and the same color as the font.
Default, Hover, Focus, and Active States
Will follow the rules for the Primary, Secondary, and Tertiary buttons above.
Disabled Option
background-color: #0097A9; color: #A1A5AB;
Option Divider
height: 1px; overflow: hidden; background-color: #E5E5E5;
Icons or
The color will match the font color of the button and current state combination.
Buttons Groups
A button group can be used to filter an area or grid between two or three options. If more than three options are needed, this component should not be used.
General Characteristics
display: inline-block; vertical-align: middle; font-size: 1em; font-weight: 600; padding: 4px 12px; font-family: Open Sans Semibold; height: 38px; border-style: solid; border-width: 1px; border-color: #1A5E66; background-color: #FFFFFF; color: #333333;
Hover State
No hover state on the selected option. background-color: #FFFFFF; color: #1A5E66; font-weight: 800;
Focus State
background-color: #FFFFFF; color: #A1A5AB;
Active State
background-color: #1A5E66; color: #FFFFFF;
Buttons within Grids
When a button is displayed within a grid the styling will be slighly different, not including a background color and border so that it is cohesive with the other grid cells.
| Action |
|---|
|
|
| Action |
|---|
|
|
General Characteristics
font-size: .875em; padding: 4px 3px; font-family: Open Sans; line-height: 1.25em; text-decoration: none; cursor: pointer;
Disabled State
color: #A1A5AB;
Delete
Default State - color: #963821;
Hover State - color: #712A19;
Focus State - color: #4B1C11;
Active State - color: #4B1C11;
All Other Actions
Default State - color: #0097A9;
Hover State - color: #007B8B;
Focus State - color: #1A5E66;
Active State - color: #1A5E66;
Icon Button
An icon may be used as a button to represent a simple action such as the autoincrement feature on sessions. There will only be a single icon button used in these instances and the button will follow the color style of the primary buttons above.
General Characteristics
background-color: #0097A9; border-color: #0097A9; color: #FFFFFF; border-radius: 5px; padding: 4px 12px; height: 38px; border-style: solid; border-width: 1px;
Disabled State
background-color: #F4F6F7; border-color: #EEEEEE; color: #A1A5AB;
Checkboxes
All checkboxes will utilize the default browser functionality which may cause slightly different view and behavior between different browsers. The label will always appear in-line and to the right of the checkbox.
Colors
Aero blue and Soapstone are the primary colors for Abila and will be the predominant colors in MIP Advance. All other colors will be used conservatively.
Aero Blue
Ghost Tint #F3FEFD
White Text
Aero Text ¨
Soapstone Text ©
Black Text ©
Light Tint #D5F1F5
White Text
Aero Text ¨
Soapstone ©
Black Text ©
Medium Tint - #93D4DE
White Text
Aero Text
Soapstone ©
Black Text ©
Core - #0097A9
White Text ¨
Aero Text
Soapstone
Black Text ©
Medium Shade - #007B8B
White Text ©
Aero Text
Soapstone Text
Black Text ¨
Dark Shade - #1A5E66
White Text ©
Aero Text
Soapstone Text
Black Text ¨
Soapstone
Ghost Tint #FAFDFC
White Text
Aero Text
Soapstone Text ©
Black Text ©
Light Tint #E5E6E8
White Text
Aero Text
Soapstone ©
Black Text ©
Medium Tint - #A1A5AB
White Text
Aero Text
Soapstone ¨
Black Text ©
Core - #4B4F54
White Text ©
Aero Text
Soapstone
Black Text
Medium Shade - #383B3F
White Text ©
Aero Text
Soapstone Text
Black Text
Dark Shade - #25282A
White Text ©
Aero Text
Soapstone Text
Black Text
C3PO
Ghost Tint #FCFDF5
White Text
C3PO Dark Text ©
Soapstone Text ©
Black Text ©
Light Tint #FAF7E3
White Text
C3PO Text
Soapstone ©
Black Text ©
Medium Tint - #F1E3AB
White Text
C3PO Text
Soapstone ©
Black Text ©
Core - #CFB023
White Text
C3PO Text
Soapstone ¨
Black Text ©
Medium Shade - #A28629
White Text ¨
C3PO Text
Soapstone Text
Black Text ©
Dark Shade - #685812
White Text ©
C3PO Text ¨
Soapstone Text
Black Text ¨
Crimson
Ghost Tint #FFFBF9
White Text
Crimson Text ©
Soapstone Text ©
Black Text ©
Light Tint #F4E3D8
White Text
Crimson Text ©
Soapstone ©
Black Text ©
Medium Tint - #D39C82
White Text
Crimson Text ¨
Soapstone ¨
Black Text ©
Core - #963821
White Text ©
Crimson Text
Soapstone
Black Text
Medium Shade - #712A19
White Text ©
Crimson Text
Soapstone Text
Black Text
Dark Shade - #4B1C11
White Text ©
Crimson Text
Soapstone Text
Black Text
Yerba Maté
Ghost Tint #F9FEF7
White Text
Yerba Maté Dark Text ¨
Soapstone Text ©
Black Text ©
Light Tint #EFF6D8
White Text
Yerba Maté Text
Soapstone ©
Black Text ©
Medium Tint - #E6E9AA
White Text
Yerba Maté Text
Soapstone ©
Black Text ©
Core - #BABC16
White Text
Yerba Maté Text
Soapstone ¨
Black Text ©
Medium Shade - #999933
White Text ¨
Yerba Maté Text
Soapstone Text
Black Text ©
Dark Shade - #7D8036
White Text ©
Yerba Maté Text
Soapstone Text
Black Text ©
Additional Colors for MIP Advance
Grid Titles #5A9CA5
White Text ¨
Aero Text
Soapstone Text
Black Text ©
Grid Header Background #D5EAED
White Text
Aero Text
Soapstone ©
Black Text ©
Peach - #F6A01A
White Text
Aero Text
Soapstone ¨
Black Text ©
Purple - #4E2683
White Text ©
Aero Text ¨
Soapstone
Black Text
Background - #E1E4E6
White Text
Aero Text
Soapstone Text ©
Black Text ©
Accessibility
© - indicates it passes WCAG 2.0 AA luminosity ratios at all text sizes.
¨ - indicates it passes WCAG 2.0 AA luminosity ratios for large text sizes only.
Combo Boxes
Combo Boxes are used when a specific number of options are available, normally more than three. Combo Boxes can be the traditional non-editable or editable which allows the user to type new options that are not already included in the drop down and that option will be available for future users.
General Characteristics
height: 38px; border-radius: 3px; font-size: 13px; font-family: Open Sans; padding: 0 10px; margin: 0 10px 10px 0; width: 100%;
General Characteristics
background-color: #FFFFFF; border-color: #A1A5AB; color: #25282A;
Focus State
background-color: #FFFFFF; border-color: #0097A9; color: #25282A;
Active State
background-color: #FFFFFF; border-color: #0097A9; color: #25282A;
Disabled State
background-color: #F4F6F7; border-color: #EEEEEE; color: #A1A5AB;
Icons or
The color will match the font color of the current state.
Drop Down List
| Code | Description |
|---|---|
| BP | Batch To Post |
| BS | Batch To Suspend |
Header Row
text-align: left; font-size: 11px; font-weight: 700; background-color: #D5EAED; color: #5A9CA5; padding: 4px;
Row
background-color: #FFFFFF; border-bottom: 1px solid #D4D8DA;
Row (first column)
font-size: 13px; color: #25282A; font-weight: normal;
Row (subsequent columns)
font-size: 12px; color: #A1A5AB; font-weight: normal;
Selected Row
background-color: #F0F1F1;
Selected Row (first column)
font-weight: bold; font-size: 13px; color: #25282A;
Selected Row (subsequent columns)
font-weight: normal; font-size: 12px; color: #A1A5AB;
Hover Row
background: #F5F4F4;
Hover Row (first column)
font-weight: 400; font-size: 13px; color: #4B4F54;
Hover Row (subsequent columns)
font-weight: 400; font-size: 12px; color: #A1A5AB;
Currency Fields
Fields in which the user can input monetary value. Any number entered in a currency field will be automatically converted to the $0.00 format once the field loses focus. The calculator icon and functionality also appears in all currency fields, and allows the user to perform arithmetic calculations within the field.
Currency fields shall have a maximum and minimum value (typically $99,999,999,999.99 or ($99,999,999,999.99)). If the user types in a value that is greater than or less than either of these values, the field will automatically display the maximum/minimum value when the user leaves/tabs out of the field.
General Characteristics
height: 38px; border-style: solid; border-width: 1px; border-radius: 3px; font-size: 13px; font-family: "Open Sans"; padding: 10px; margin: 10px 10px 10px 0; width: 100%;
Default State
background-color: #FFFFFF; border-color: #A1A5AB; color: #25282A;
Active State
border-color: #0097A9; box-shadow: 0 0 5px #0097A9; outline: none;
Disabled State
background-color: #F4F6F7; border-color: #EEEEEE; color: #A1A5AB; cursor: not-allowed;
Icon
color: #25282A; font-size: 16px; padding-top: 11px; padding-right: 27px; border: none;
The icon will display at all times; When selected the calculator will display. The user will be able to manually enter any numeric value by clicking in the data field space.
Currency Fields within a Grid
| Debit | Credit |
|---|---|
|
|
|
General Characteristics
height: 38px; border-style: solid; border-width: 1px; border-radius: 3px; font-size: 13px; font-family: "Open Sans"; padding: 10px; margin: 10px 10px 10px 0; width: 100%;
Default State
background-color: #FFFFFF; border-color: #A1A5AB; color: #25282A;
Active State
border-color: #0097A9; box-shadow: 0 0 5px #0097A9; outline: none;
Disabled State
background-color: #F4F6F7; border-color: #EEEEEE; color: #A1A5AB; cursor: not-allowed;
Icon
color: #4B4F54; font-size: 16px; padding-top: 11px; padding-right: 27px; border: none;
The calculator icon will only display when the row is active or hovered over.
Calculator
0
General Characteristics
font-family: "Open Sans", sans-serif; font-size: 14px; color: #25282A; font-style: normal; font-weight: normal; background-color: #FFFFFF; border: 1px solid #383B3F; border-radius: 3px; z-index: 1500;
Results
margin: 2px; padding:0px 2px; background-color: #F5F5F5; color: #007B8B; border: 1px solid #A1A5AB; padding-right: 10px; line-height: 2; font-weight: 700; border-radius: 4px; text-align: right;
Buttons
width: 29px; height: 29px; padding: 1px; background-color: #FFFFFF; border: 1px solid #A1A5AB; color: #25282A; border-radius: 4px;
Enter Button
width: 45px;
Date Fields
Displays and allows entry of dates. Click the calendar icon to open a date picker or manually enter a date by typing in the data field. These fields are masked and include watermark (__/__/____) to indicate to the user the accepted date format which is MM/dd/yyyy.
Default
height: 38px; background-color: #FFFFFF; border: 1px solid #A1A5AB; border-radius: 3px; font-size: 13px; color: #25282A; font-family: "Open Sans"; padding: 10px; margin: 0 10px 10px 0; width: 100%;
Disbled State
background-color: #F4F7F8; border-top: 1px solid #F4F7F8; border-bottom: 1px solid #F4F7F8; border-right: 1px solid #EEEEEE; border-left: 1px solid #F4F7F8; color: #4B4F54; cursor: not-allowed; box-shadow: 0 0 0 0;
Focused State
outline: none; border-color: #F4F7F8; box-shadow: 0 0 0 0;
Icon
color: #4B4F54; font-size: 16px; padding-top: 11px; padding-right: 27px; border: none;
The icon will display at all times. When selected the calendar will display. The user will be able to manually enter a date by clicking in the data field space.
Calendar
Calendar Popup
float: left; border-spacing: 0; width: auto; height: 15.55em; margin: 5px; outline: 0; padding: 3px; border: 1px solid #F4F6F7; background-color: #F4F6F7; border-radius: 3px;
Calendar Body
background-color: #FFFFFF;
Calendar Header
text-align: center; font-size: 14px; position: relative; text-align: center; zoom: 1; background-color: #F4F6F7; background-position: 50% 50%; color: #25282A; border-bottom: 1px solid #E5E6E8; padding: .4em .45em .4em .1em;
Dates
border-radius: 4px; padding: 0 .45em 0 .1em; color: #25282A;
Today's Date
background-color: #0097A9; color: white;
Days in other Months
color: #A1A5AB;
File Picker
The File Picker will allow the user to access saved files and select one. The component will allow the user to select the button and a File Modal will open, or the user may have the File Modal avaialble and drag and drop a file into the data field.
Button
background-color: #1A5E66; color: #FFFFFF; font-weight: 700; display: inline-block;
Icon
(fa-download); color: #FFFFFF;
File Drop Zone
background-color: #FFFFFF; border: 1px solid #1A5E66; border-radius: 3px; height: 38px;
Hyperlinks
Hyperlinks are used for navigation between pages, to access popup modals, or to display information.
General Characteristics
The Font Size, Font-Weight, and Font Color will vary. These characteristics will be dependent on the location and use of the specific hyperlink.
Default State
color: #0097A9; text-decoration: none; font-weight: normal; font-family: "Open Sans";
Hover State
color: #0097A9; text-decoration: underline; cursor: pointer; font-weight: 700;
Active State
color: #0097A9; text-decoration: none; font-weight: 600;
Visited State
color: #1A5E66; text-decoration: none;
Disabled State
color: #0097A9; text-decoration: none; cursor: not-allowed;
Labels
Labels for Text Fields, Date Fields, Currency Fields and Combo Box
The label will be positioned above the data field and aligned on the left. The label will always end with a colon ":" and will follow the title capitalization rules.
General Characteristics
font-size: 13px; color: #25282A; font-family: "Open Sans"; font-weight: 600; display: block;
Labels for Checkboxes and Radio Buttons
The label will be positioned to the right of the data field. The label will follow the title capitalization rules.
General Characteristics
font-size: 13px; color: #25282A; font-family: "Open Sans"; font-weight: 600;
Loaders
Each loader will represent a different action.
Dotted Spinner
Loading...Solid Spinner
Loading...Refresh Spinner
Loading...Dotted Spinner
fa-spinner used with fa-pulse - Used for loading the Tableau Charts on the Dashboard.
Solid Spinner
fa-circle-o-notch used with fa-spin - Indicates a process is loading to the page.
Refresh Spinner
fa-refresh used with fa-spin - Indicates a refresh process has been triggered and is in progress.
MIP Advance Logo
White Logo on Transparent Background
This MIP Advance Logo will display centered on the screen on the Login Screen and in the top left corner of the screen once the user has successfully logged into the application.
White on Transparent Background
vertical-align: middle; display: block; margin-left: auto; margin-right: auto; padding-bottom: 20px; width: 120px; height: auto;
Full Color Logo
The full color MIP Advance Logo be visible on the About MIP Advance page only.
Full Color Logo
width: 130px; vertical-align: middle; border: 0; float: left;
Progress Bar
Progress bars will display the amount of work completed or the amount of information that has been downloaded.
Cancel
Background Bar
background-color: #D5EAED; border-color: #D5EAED; border-radius: 1px; width: 285px; height: 20px; display: inline-block;
Progress Indicator
background-color: #0097A9; border-color: #0097A9; border-radius: 1px 0 0 1px;
Percentage
color: #FFFFFF; font-size: 14px; font-weight: 700; display: inline-block;
Action Button
color: #FFFFFF; font-size: 12px; float: right; font-weight: 700;
Radio Buttons
All radio buttons will utilize the default browser functionality which may cause slighly different view and behavior between different browsers. The label will always appear inline and to the right of the radio button.
Search Boxes
Search Boxes will always be enabled so a disabled state is not needed. An icon on the left side of the Search Box which will always be visible. When text is typed within the Search Box, an "X" will appear on the right that will clear the Search Box when it is selected; this icon will be hidden when the Search Box is empty.
General Characteristics
height: 38px; background-color: #FFFFFF; border-top: 1px solid #A1A5AB; border-bottom: 1px solid #A1A5AB; border-right: none; border-left: none; border-radius: 3px; font-size: 13px; color: #25282A; font-family: "Open Sans"; margin: 0 10px 10px 0; width: 100%; box-shadow: none;
Focus State
border-color: #0097A9; box-shadow: 0 0 5px #0097A9; outline: none;
Magnify Glass Icon
(fa-search) background-color: #FFFFFF; color: #A1A5AB; border-top: 1px solid #A1A5AB; border-bottom: 1px solid #A1A5AB; border-left: 1px solid #A1A5AB; font-size: 14px;
Clear Icon
(fa-close) background-color: #FFFFFF; color: #A1A5AB; border-top: 1px solid #A1A5AB; border-bottom: 1px solid #A1A5AB; border-right: 1px solid #A1A5AB; font-size: 14px;
Table and Grid Layout
Tables and Grids will utilize the Kendo Controls via Telerik.
General Layout
Grid General Styling
background-color: #FFFFFF; color: #E5E6E8; line-height: 1.6em; border: 1px solid #D4D8DA;
Title
Title
Subtitle (Number of Records)
Header Row
background-color: #D5EAED; border-bottom: 1px solid #D4D8DA; color: #5A9CA5; font-weight: 700; font-size: 11px; text-align: left; vertical-align: middle;
Rows
height: 40px;
Row Count Column
color: #0097A9; text-align: center; font-weight: 700;
Grid Cells
border: 1px solid #D4D8DA; text-align: left; (currency firelds - text-align: right;) text-overflow: ellipsis;
Highlighted Row
background-color: #F0F1F1;
Pagination
The grid pagination will display in the left lower corner below the grid. A maximum of 9 options will display, which will allow a minimum of 5 sequential pages to display as any given time. Ellipses (...) will signify additional pages if more are available prior to or after the first/last sequential page listed. When the grid loads, the first page will display by default.
Previous/Next/Go to Page
font-size: 12px; color: #0097A9; cursor: pointer;
Disabled - color: #A1A5AB; cursor: not-allowed;
Go to Page Number - width: 40px; text-align: center; padding: 0 3px; border-radius: 3px; border: 1px solid #D4D8DA; height: 28px; font-size: 12px;
Page Numbers
color: #A1A5AB; font-size: 12px; text-align: center;
Active Page
background-color: #5A9CA5; border-radius: 3px; font-weight: 800; color: #FFFFFF; height: 25px; min-width: 15px;
Records per Page
The records per page drop down will display above the grid on the right side. By default the option will be set to 10 records per page; additional options will include 20 records per page, 50 records per page, and 100 records per page.
Count of Records Per Page
font-size: 11px; color: #A1A5AB;
Combobox of Options
This should follow the standards set in the Combobox section.
Tabs
Used to organize complex pages, forms, or workflows into smaller chunks. Tabs do not necessarily imply performing actions in a certain order; the user can choose any tab to work in first. When the size of the screen is minimzed the tabs will collapse to an accordion.
General Characteristics
border-top: 1px solid #D4D8DA; border-bottom: 1px solid #D4D8DA; width: 100%; display: table; height: 50px; vertical-align: top; text-align: center; color: #0097A9; padding: 15px 25px; font-weight: 600;
Hover Tab
background-color: #FFFFFF; cursor: pointer;
Active Tab
border-bottom: 5px solid #0097A9; font-weight: 800;
Accordion
border: 1px solid #0097A9; display: block;
Text Fields
Sign In Page Text Fields
Labels will not be included with these two text fields, instead placeholder text will be included to represent the data field purpose.. Icons will display at the right side of the data fields to represent the data field purpose.
Alert if Fields are Blank
Disabled after Clicking Sign In Button
General Characteristics
height: 38px; border-style: solid; border-width: 1px; border-radius: 3px; font-size: 13px; font-family: "Open Sans"; padding: 10px; margin: 10px 10px 10px 0; width: 100%;
Default State
background-color: #383B3F; border-color: #383B3F; color: #FFFFFF;
Active State
border-color: #0097A9; box-shadow: 0 0 5px #0097A9; outline: none;
Disabled State
cursor: not allowed;
Icons and
(fa-user & fa-lock) color: #FFFFFF; left: 265px; top: 12px;
Error Messages
color: #F05050; font-weight: bold; border: 1px solid #D74F4F;
Text Fields
The user will not be able to enter or tab into a disabled or read only text field
Text Field - General Characteristics
height: 38px; border-style: solid; border-width: 1px; border-radius: 3px; font-size: 13px; font-family: "Open Sans"; padding: 10px; margin: 10px 10px 10px 0; width: 100%; max-width: 325px;
Textarea - General Characteristics
border-radius: 3px; font-size: 13px; font-family: "Open Sans"; padding: 10px; margin: 0 10px 10px 0; width: 100%; height: 100%; resize: none;
The height and width of the text area will depend upon the character limit and the surrounding available space. Each text area field should extend to the greatest height and width that is allowed for the area it displays within.
Default State
background-color: #FFFFFF; border-color: #A1A5AB; color: #25282A;
Active State
background-color: #FFFFFF; border-color: #0097A9;
Disabled State
background-color: #F4F6F7; border-color: #EEEEEE; color: #A1A5AB; cursor: not-allowed;
External User Interface Options
The below third party frameworks are used within MIP Advance.