Design System
- Colors
- Typography
- Buttons
- Forms
- Links
- Lists
- Toastr
- Inline-Notifications
- Modals
- Tabs
- Tables
- Icons
- General
#1A3694
brand-01
#FFC711
brand-02
#6D6E71
brand-03
##2C2C2C
text-01
#FFFFFF
inverse-01
#9AA0A0
ui-01
#EDEDED
ui-02
#D62D2C
support-01
#3AA248
support-02
#E4963E
support-03
#369CD6
support-04
// Usage:
colors scss functions:
color('color-name')
color-alpha('color-name')
Example:
color('brand-01')
color-alpha('brand-01')
colors helper classes:
text-color-name
bg-color-name
Example:
text-brand-01
bg-brand-01
Headings
Heading 1 : Sample Heading Text
Heading 2 : Sample Heading Text
Heading 3 : Sample Heading Text
Heading 4 : Sample Heading Text
Heading 5 : Sample Heading Text
Heading 6 : Sample Heading Text
Primary Buttons
Secondary Buttons
Buttons with left icon
Buttons with right icon
Ghost Button
List
- Item One
-
Item Two
- Sub Item One
- Sub Item Two
-
Sub Item Three
- Sub Sub Item One
- Sub Sub Item Two
- Sub SubItem Three
- Item Three
- Item Four
- Item One
-
Item Two
- Sub Item One
- Sub Item Two
-
Sub Item Three
- Sub Sub Item One
- Sub Sub Item Two
- Sub SubItem Three
- Item Three
- Item Four
Toastrs
Use xng-toastr-service to display toastrs messages.
success( title?: string, message?: string );
info( title?: string, message?: string );
warning( title?: string, message?: string );
error( title?: string, message?: string );
<button class="button primary small"
onclick="iziToast.success({title: 'Success', message: 'Here we have a success message !!', icon: false})">
Fire a success alert
</button>
Inline Notifications
Usage Example:
Modals
Passive Modal
Passive modal notifications should only appear if there is an action the user needs to address immediately. Passive modal notifications are persistent on screen.
Important directions or information can be Bold.
Transaction Modal
Transactional modals are used to validate decisions or gain secondary confirmation from the user. Typically, the modal requests either a 'yes' or 'no' response.
Tabs & Accordians
Insite is using easy-responsive-tabs JQuery plugin.
You can use the following Attribute directive to initialize a set of tabs:
xng-tabs
These tabs will be displayed as accordians on small screens
Tables
Styled according to the following Structure in OOTB
Date | Invoice # | Due Date | Ship To | PO # | Terms | Total | Balance |
---|---|---|---|---|---|---|---|
15/6/2018 | #INV0001 | 18/6/2018 | st Company Name | #customerPO | invoice terms | $200.59 | $235.59 |
15/6/2018 | #INV0001 | 18/6/2018 | st Company Name | #customerPO | invoice terms | $200.59 | $235.59 |
15/6/2018 | #INV0001 | 18/6/2018 | st Company Name | #customerPO | invoice terms | $200.59 | $235.59 |
15/6/2018 | #INV0001 | 18/6/2018 | st Company Name | #customerPO | invoice terms | $200.59 | $235.59 |
15/6/2018 | #INV0001 | 18/6/2018 | st Company Name | #customerPO | invoice terms | $200.59 | $235.59 |
Icons
- .icon-Cart-CTAs
- .icon-Cart-Header
- .icon-Add
- .icon-Apply-to-All
- .icon-Arrow
- .icon-Bell
- .icon-Bullseye
- .icon-Buoy
- .icon-Calendar
- .icon-Caret-Down
- .icon-Caret-Left
- .icon-Caret-Right
- .icon-Caret-Up
- .icon-Caution
- .icon-CC-Amex
- .icon-CC-Discover
- .icon-CC-Mastercard
- .icon-CC-Visa
- .icon-Cell-Phone
- .icon-Chart
- .icon-Checkmark
- .icon-Chevron-Bottom
- .icon-Chevron-Left
- .icon-Chevron-Right
- .icon-Chevron-Top
- .icon-Clock
- .icon-Close
- .icon-Cloud
- .icon-Cogs
- .icon-Collapse
- .icon-Comment1
- .icon-Comment2
- .icon-Contextual-Help
- .icon-Copy
- .icon-Document
- .icon-Dollar
- .icon-Edit
- .icon-Email
- .icon-Exclamation
- .icon-Exit
- .icon-Expand1
- .icon-Expand2
- .icon-External-Link
- .icon-Ghost-Button
- .icon-Grid
- .icon-Hide
- .icon-Home
- .icon-Image
- .icon-In-Stock
- .icon-In-Warehouse
- .icon-iPad
- .icon-Key
- .icon-Laptop
- .icon-Lightbulb
- .icon-Line-Notes
- .icon-Link
- .icon-List-Add-Item
- .icon-List-Remove-Item
- .icon-List
- .icon-Location
- .icon-Lock
- .icon-Megaphone
- .icon-Menu
- .icon-Microphone
- .icon-Minus
- .icon-More
- .icon-My-Account
- .icon-Network
- .icon-Open-Orders
- .icon-Order-Approval
- .icon-Order-History
- .icon-Out-of-Stock
- .icon-Paperclip
- .icon-Pay-Invoice
- .icon-Phone-Filled
- .icon-Phone-Line
- .icon-Pick-Up
- .icon-Print
- .icon-Product-Data-Issues
- .icon-Product-List
- .icon-Puzzle
- .icon-Question
- .icon-Quick-Order
- .icon-Quotes
- .icon-Refresh
- .icon-Reporting
- .icon-Requisition
- .icon-Sale
- .icon-Save-Cart
- .icon-Search
- .icon-Security
- .icon-Settings
- .icon-Share
- .icon-Shipping-Weight
- .icon-Social-FB
- .icon-Social-Instagram
- .icon-Social-LI
- .icon-Social-Twitter
- .icon-Social-YouTube
- .icon-Special-Order
- .icon-Star
- .icon-Stopwatch
- .icon-Subtract
- .icon-Success1
- .icon-Success2
- .icon-Trash
- .icon-Truck1
- .icon-Truck2
- .icon-Update
- .icon-Users
- .icon-View
- .icon-Play-Button
- .icon-Reorder
- .icon-Back-to-Top
ToolTip
top tooltip
upper Tooltip
bottom tooltip
bottom Tooltip
right tooltip
right Tooltip
left tooltip
left Tooltip
Breakpoint Definition
xs: 480
sm: 768
md: 1024
lg: 1440