- Colors
- Typography
- Buttons
- Forms
- Links
- Lists
- Toastr
- Inline-Notifications
- Modals
- Tables
- Accordion
- Icons
- Simplebar
- General
brand-01
brand-02
brand-03
text-01
inverse-01
ui-01
ui-02
ui-03
support-01
support-02
support-03
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
Anchor tag (a)
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
- 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
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:
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>
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.
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
- Page {{$index}}