#002F87

brand-01

#CE0E2D

brand-02

#6d7878

brand-03


#373636

text-01

#FFFFFF

inverse-01


#A3AAAA

ui-01

#CCD2D2

ui-02

#E1E7E7

ui-03


#A30627

support-01

#039B5D

support-02

#E4963E

support-03

#098DA2

support-04

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

Zeta Sample Text Line

text-omega

Omega Sample Text Line

p

Sample Text Line

Primary Buttons

Secondary Buttons

Buttons with left icon

Buttons with right icon

Brand Buttons

Text Inputs
Disabled Text Input
Textarea
Disabled Textarea
Checkbox
Disabled Checkbox
Radio Button
Disabled Radio button
Select
Disabled Select
Filtrable Dropdown

Unordered 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

Ordered List


  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>

Try to fire alert:


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
Sample Code: 
                                    <div id="transactionModal" class="reveal-modal" data-reveal data-reveal-init tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
	                                    <div class="modal-wrapper" role="document">
		                                    <div class="reveal-modal-bg"></div>
		                                    <div class="modal-wrap">
			                                    <div class="modal-label">
				                                <label class="form-heading">Optional Label</label>
			                                    </div>
			                                    <div class="modal-title">
				                                <h3 id="modalTitle">Transaction Modal</h3>
			                                    </div>
			                                    <div class="modal-body">
				                                <p>Content..</p>
			                                    </div>
			                                    <div class="modal-actions">
				                                <div class="button-group-left">
				                                    <button class="button primary small">Save</button>
				                                    <button type="button" class="button secondary small" onclick="$('.close-reveal-modal').click()">Close</button>
				                                </div>
			                                    </div>
			                                    <button class="close-reveal-modal" aria-label="Close"></button>
		                                    </div>
	                                    </div>
                                    </div>

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

Test content1

Test content2

Test content3

Test content4

Test content5

Test content6

Test content7

Test content8

Test content9

Test content1

Test content2

Test content3

Test content4

Test content5

Test content6

Test content7

Test content8

Test content9

Test content

Test content

Test content

Test content

Test content

Test content

Test content

Test content

Test content

Test content

Grid Size: Unknown

icon-Add
liga:
icon-Apply-to-All
liga:
icon-Arrow
liga:
icon-Auto-Reorder
liga:
icon-Barcode
liga:
icon-Bell
liga:
icon-Bullseye
liga:
icon-Buoy
liga:
icon-Calendar
liga:
icon-Caret-Down
liga:
icon-Caret-Left
liga:
icon-Caret-Right
liga:
icon-Caret-Up
liga:
icon-Cart
liga:
icon-Caution
liga:
icon-CC-Amex
liga:
icon-CC-Discover
liga:
icon-CC-Mastercard
liga:
icon-CC-Visa
liga:
icon-Cell-Phone
liga:
icon-Chart
liga:
icon-Checkmark
liga:
icon-Chevron-Bottom
liga:
icon-Chevron-Left
liga:
icon-Chevron-Right
liga:
icon-Chevron-Top
liga:
icon-Close
liga:
icon-Cloud
liga:
icon-Collapse
liga:
icon-Comment1
liga:
icon-Comment2
liga:
icon-Contextual-Help
liga:
icon-Copy
liga:
icon-Document
liga:
icon-Dollar
liga:
icon-Edit
liga:
icon-Email
liga:
icon-Exclamation
liga:
icon-Expand1
liga:
icon-Expand2
liga:
icon-External-Link
liga:
icon-Ghost-Button
liga:
icon-Grid
liga:
icon-Group-Products
liga:
icon-Hide
liga:
icon-Home
liga:
icon-Image
liga:
icon-In-Stock
liga:
icon-In-Warehouse
liga:
icon-iPad
liga:
icon-Key
liga:
icon-Laptop
liga:
icon-Lightbulb
liga:
icon-Link
liga:
icon-List
liga:
icon-Location
liga:
icon-Lock
liga:
icon-Megaphone
liga:
icon-Menu
liga:
icon-Minus
liga:
icon-More
liga:
icon-Network
liga:
icon-Open-Orders
liga:
icon-Order-Approval
liga:
icon-Order-History
liga:
icon-Out-of-Stock
liga:
icon-Paperclip
liga:
icon-Pay-Invoice
liga:
icon-Phone
liga:
icon-Pick-Up
liga:
icon-Print
liga:
icon-Question
liga:
icon-Quick-Order
liga:
icon-Quotes
liga:
icon-Refresh
liga:
icon-Reporting
liga:
icon-Requisition
liga:
icon-Sale
liga:
icon-Save-Cart
liga:
icon-Search
liga:
icon-Security
liga:
icon-Settings
liga:
icon-Share
liga:
icon-Shipping-Weight
liga:
icon-Social-FB
liga:
icon-Social-LI
liga:
icon-Social-Twitter
liga:
icon-Social-YouTube
liga:
icon-Special-Order
liga:
icon-Star
liga:
icon-Stopwatch
liga:
icon-Subtract
liga:
icon-Success
liga:
icon-Trash
liga:
icon-Truck1
liga:
icon-Truck2
liga:
icon-Update
liga:
icon-User
liga:
icon-Users
liga:
icon-View
liga:
icon-Map-Marker
liga:
  • Page {{$index}}
Tooltip
Top tooltip upper Tooltip
Bottom Tooltip bottom Tooltip
Right Tooltip right Tooltip
Left Tooltip left Tooltip