#333f48

brand-01

#fc4c02

brand-02


#097c79

accent-01


#2E2E2E

text-01

#FFFFFF

inverse-01


#7a99ac

ui-01

#d9d9d6

ui-02

#F5F5F5

ui-03


#e80017

support-01

#00d868

support-02

#fef100

support-03

#01b0d8

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

Text Classes

text-giga

Giga Sample Text Line

text-mega

Mega Sample Text Line


text-alpha

Alpha Sample Text Line

text-beta

Beta Sample Text Line

text-gamma

Gamma Sample Text Line

text-delta

Delta Sample Text Line

text-epsilon

Epsilon Sample Text Line

text-zeta

Zeta Sample Text Line

text-omega

Omega Sample Text Line


text-caption

Cation Sample Text Line

text-legal p

Sample Text Line

Primary

Secondary

Tertiary

Danger

Button with left icon

Button Ghost

Button Add to cart

text input

Disabled text input

input input

text Area

Disabled text area


Checkbox



Disabled Checkbox

Radio Button



Disabled Checkbox


Date Input

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-add--outline
  • .icon-add
  • .icon-arrows
  • .icon-calendar
  • .icon-caret--down
  • .icon-caret--left
  • .icon-caret--right
  • .icon-caret--up
  • .icon-cart
  • .icon-checkmark--outline
  • .icon-checkmark
  • .icon-chevron--left
  • .icon-chevron--right
  • .icon-chevron--up
  • .icon-chevron--down
  • .icon-close--outline
  • .icon-close
  • .icon-copy
  • .icon-delete
  • .icon-download
  • .icon-edit
  • .icon-error
  • .icon-facebook
  • .icon-favorite
  • .icon-filter
  • .icon-grid
  • .icon-help
  • .icon-in
  • .icon-info
  • .icon-link
  • .icon-list
  • .icon-location
  • .icon-log--in
  • .icon-menu
  • .icon-message
  • .icon-minus
  • .icon-move
  • .icon-my--accound
  • .icon-pdf
  • .icon-phone
  • .icon-play
  • .icon-print
  • .icon-search
  • .icon-settings
  • .icon-share
  • .icon-twitter
  • .icon-instagram
  • .icon-users
  • .icon-warning
  • .icon-wishlist
  • .icon-youtube

Progress Indicator

  • First Step
  • Second Step
  • Third Step
  • Fourth Step

ToolTip

top tooltip upper Tooltip
bottom tooltip bottom Tooltip
right tooltip right Tooltip
left tooltip left Tooltip