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

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