Design System

#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

Text Input

Disabled Text Input

Number Input

Text Area

Disabled

Checkbox

Disabled Checkbox

Radio Button

Disabled Radio

Date Picker

Select

Disabled Select

Small Select

Disabled Small Select

Dropdown

Disabled Dropdown

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
  1. Item One
  2. Item Two
    1. Sub Item One
    2. Sub Item Two
    3. Sub Item Three
      1. Sub Sub Item One
      2. Sub Sub Item Two
      3. Sub SubItem Three
  3. Item Three
  4. 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:
Hello World! I am a success story Hello World! I am a error story Hello World! I am an Info story Hello World! I am an Info story

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