brand-01

#B50000

brand-02

#252525

accent-01

#FFB900

text-01

#2E2E2E

inverse-01

#FFFFFF

ui-01

#7A7A7A

ui-02

#CDCDCD

ui-03

#F5F5F5

support-01

#E0182C

support-02

#00D868

support-03

#FEF100

support-04

#01B0D8

                    // 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

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

Secondary

Tertiary

Danger

Button with 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

[% translate 'Date Input' %]

Select

Disabled Select

small select

Disabled small select

Dropdown

Disabled Dropdown

filterable Dropdown

Disabled filterable Dropdown

Just add xng-ul class on either a ul or ol element to get it styled as displayed below.
  • Unordered nested list level 1
    • Unordered Nested List Level
    • Unordered Nested List Level
    • Unordered Nested List Level
  • Unordered nested list level 1
  • Unordered nested list level 1
  1. Ordered nested list level 1
    1. Sub Item One
    2. Sub Item Two
  2. Ordered nested list level 1
  3. Ordered nested list level 1

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

Long Modal Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
×

Long Modal Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
×

Tabs & Accordians

Insite is using easy-responsive-tabs JQuery plugin. You can use the following Attribute directive to initialize a set of tabs:
xng-easy-responsive-tabs="CONDITION"
When the provided CONDITION evaluated to be True, then the initailization code will be triggered.
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
icon-add--outline
liga:
icon-add
liga:
icon-arrow--down
liga:
icon-arrow--left
liga:
icon-arrow--right
liga:
icon-arrow--up
liga:
icon-arrows
liga:
icon-calendar
liga:
icon-caret--down
liga:
icon-caret--left
liga:
icon-caret--right
liga:
icon-caret--up
liga:
icon-cart
liga:
icon-checkmark--outline
liga:
icon-checkmark
liga:
icon-chevron--down
liga:
icon-chevron--left
liga:
icon-chevron--right
liga:
icon-chevron--up
liga:
icon-close--outline
liga:
icon-close
liga:
icon-copy
liga:
icon-delete
liga:
icon-download
liga:
icon-edit
liga:
icon-error
liga:
icon-facebook
liga:
icon-favorite
liga:
icon-filter
liga:
icon-grid
liga:
icon-help
liga:
icon-in
liga:
icon-info
liga:
icon-link
liga:
icon-list
liga:
icon-location
liga:
icon-log--in
liga:
icon-menu
liga:
icon-message
liga:
icon-minus
liga:
icon-minus filled
liga:
icon-move
liga:
icon-my--account
liga:
icon-pdf
liga:
icon-phone
liga:
icon-play
liga:
icon-print
liga:
icon-search
liga:
icon-settings
liga:
icon-share
liga:
icon-twitter
liga:
icon-users
liga:
icon-warning
liga:
icon-wishlist
liga:
icon-youtube
liga:

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