Avenger Admin Theme

2
10
3

# Helpers

### Margin

The default base margin is set to 5px. Other margins are calculated as a multiple of the base margin, e.g. `m-md` is `@base-margin*4`. You can change the base margin from the Avenger-helpers.less file

Negative Margins: Add a class `.n` for the negative value of that margin. For example `.ml10.n` would produce `{margin-left: -10px}`

Margin Class | Alternate Class |
--- | --- | ---
.m-n | .m0 | `{margin: 0px !important}`
.m-xs | .m5 | `{margin: 5px !important}`
.m-sm | .m10 | `{margin: 10px !important}`
.m | .m15 | `{margin: 15px !important}`
.m-md | .m20 | `{margin: 20px !important}`
.m-lg | .m30 | `{margin: 30px !important}`
.m-xl | .m40 | `{margin: 40px !important}`
.m-xxl | .m50 | `{margin: 50px !important}`
.mb-n | .mb0 | `{margin-bottom: 0px !important}`
.mb-xs | .mb5 | `{margin-bottom: 5px !important}`
.mb-sm | .mb10 | `{margin-bottom: 10px !important}`
.mb | .mb15 | `{margin-bottom: 15px !important}`
.mb-md | .mb20 | `{margin-bottom: 20px !important}`
.mb-lg | .mb30 | `{margin-bottom: 30px !important}`
.mb-xl | .mb40 | `{margin-bottom: 40px !important}`
.mb-xxl | .mb50 | `{margin-bottom: 50px !important}`
.ml-n | .ml0 | `{margin-left: 0px !important}`
.ml-xs | .ml5 | `{margin-left: 5px !important}`
.ml-sm | .ml10 | `{margin-left: 10px !important}`
.ml | .ml15 | `{margin-left: 15px !important}`
.ml-md | .ml20 | `{margin-left: 20px !important}`
.ml-lg | .ml30 | `{margin-left: 30px !important}`
.ml-xl | .ml40 | `{margin-left: 40px !important}`
.ml-xxl | .ml50 | `{margin-left: 50px !important}`
.mr-n | .mr0 | `{margin-right: 0px !important}`
.mr-xs | .mr5 | `{margin-right: 5px !important}`
.mr-sm | .mr10 | `{margin-right: 10px !important}`
.mr | .mr15 | `{margin-right: 15px !important}`
.mr-md | .mr20 | `{margin-right: 20px !important}`
.mr-lg | .mr30 | `{margin-right: 30px !important}`
.mr-xl | .mr40 | `{margin-right: 40px !important}`
.mr-xxl | .mr50 | `{margin-right: 50px !important}`
.mt-n | .mt0 | `{margin-top: 0px !important}`
.mt-xs | .mt5 | `{margin-top: 5px !important}`
.mt-sm | .mt10 | `{margin-top: 10px !important}`
.mt | .mt15 | `{margin-top: 15px !important}`
.mt-md | .mt20 | `{margin-top: 20px !important}`
.mt-lg | .mt30 | `{margin-top: 30px !important}`
.mt-xl | .mt40 | `{margin-top: 40px !important}`
.mt-xxl | .mt50 | `{margin-top: 50px !important}`

### Padding

The default base padding is set to 5px. Other paddings are calculated as a multiple of the base padding, e.g. `p-md` is `@base-padding*4`. You can change the base padding from the Avenger-helpers.less file

Negative Paddings: Add a class `.n` for the negative value of that padding. For example `.pl10.n` would produce `{padding-left: -10px}`

Padding Class | Alternate Class |
--- | --- | ---
.p-n | .p0 | `{padding: 0px !important}`
.p-xs | .p5 | `{padding: 5px !important}`
.p-sm | .p10 | `{padding: 10px !important}`
.p | .p15 | `{padding: 15px !important}`
.p-md | .p20 | `{padding: 20px !important}`
.p-lg | .p30 | `{padding: 30px !important}`
.p-xl | .p40 | `{padding: 40px !important}`
.p-xxl | .p50 | `{padding: 50px !important}`
.pb-n | .pb0 | `{padding-bottom: 0px !important}`
.pb-xs | .pb5 | `{padding-bottom: 5px !important}`
.pb-sm | .pb10 | `{padding-bottom: 10px !important}`
.pb | .pb15 | `{padding-bottom: 15px !important}`
.pb-md | .pb20 | `{padding-bottom: 20px !important}`
.pb-lg | .pb30 | `{padding-bottom: 30px !important}`
.pb-xl | .pb40 | `{padding-bottom: 40px !important}`
.pb-xxl | .pb50 | `{padding-bottom: 50px !important}`
.pl-n | .pl0 | `{padding-left: 0px !important}`
.pl-xs | .pl5 | `{padding-left: 5px !important}`
.pl-sm | .pl10 | `{padding-left: 10px !important}`
.pl | .pl15 | `{padding-left: 15px !important}`
.pl-md | .pl20 | `{padding-left: 20px !important}`
.pl-lg | .pl30 | `{padding-left: 30px !important}`
.pl-xl | .pl40 | `{padding-left: 40px !important}`
.pl-xxl | .pl50 | `{padding-left: 50px !important}`
.pr-n | .pr0 | `{padding-right: 0px !important}`
.pr-xs | .pr5 | `{padding-right: 5px !important}`
.pr-sm | .pr10 | `{padding-right: 10px !important}`
.pr | .pr15 | `{padding-right: 15px !important}`
.pr-md | .pr20 | `{padding-right: 20px !important}`
.pr-lg | .pr30 | `{padding-right: 30px !important}`
.pr-xl | .pr40 | `{padding-right: 40px !important}`
.pr-xxl | .pr50 | `{padding-right: 50px !important}`
.pt-n | .pt0 | `{padding-top: 0px !important}`
.pt-xs | .pt5 | `{padding-top: 5px !important}`
.pt-sm | .pt10 | `{padding-top: 10px !important}`
.pt | .pt15 | `{padding-top: 15px !important}`
.pt-md | .pt20 | `{padding-top: 20px !important}`
.pt-lg | .pt30 | `{padding-top: 30px !important}`
.pt-xl | .pt40 | `{padding-top: 40px !important}`
.pt-xxl | .pt50 | `{padding-top: 50px !important}`

### Embed Responsively

The Embed Responsively class helps build responsive embed codes for embedding rich third-party media into responsive web pages. Simply wrap the media object in `embed-container` class.

Third Party | Code Sample
--- | ---
Youtube | `<div class='embed-container'><iframe src='http://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe></div`
Vimeo | `<div class='embed-container'><iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>`
DailyMotion | `<div class='embed-container'><iframe src='http://www.dailymotion.com/embed/video/xsr67x' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>`
Google Maps | `<div class='embed-container'><iframe src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387144.0075834208!2d-73.97800349999999!3d40.7056308!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY!5e0!3m2!1sen!2sus!4v1394298866288' width='600' height='450' frameborder='0' style='border:0'></iframe></div>`
Instagram | `<div class='embed-container'><iframe src='//instagram.com/p/dnQi4EGuZx/embed/' frameborder='0' scrolling='no' allowtransparency='true'></iframe></div>`
Vine | `<div class='embed-container'><iframe width='100%' src='https://vine.co/v/h9eAhKWzJlv/embed/simple' frameborder='0' scrolling='no' allowtransparency='true'></iframe><script async src='//platform.vine.co/static/scripts/embed.js' charset='utf-8'></script></div>;`

### Others

Class Functions | Description
--- | ---
Vertical Alignment | To vertically center a div, add `position:relative` to the parent and `vertical-align` class to the child.
Vertical Align For Tables | To vertical align contents in table, add classes `vat`, `vam` and `vab` to td to align contents top, middle and bottom respectively. Alternatively apply the classes `table-vat`, `table-vam` and `table-vab` to the `table` to align contents to all cells in the table
Avatar | Using `img.avatar` will style an image with Avenger standard for Avatar
iSelect | wrap `select` in `div.iSelect` for custom font-awesome icons

### + More to be added!

#### Sparkline Stats

- Earnings
  $22,500
- Orders
  4,750

More Sparklines

#### Recent Activity

- Jean Alanis invited 3 unconfirmed members 2 mins ago
- Anthony Ware is now following you 4 hours ago
- Bruce Ory commented on Dashboard UI 16 hours ago
- Roxann Hollingworthis now following you Feb 13, 2015

See all activities

#### Milestones

UI Design
12/16
UX Design
8/24
Frontend Development
8/40
Backend Development
24/48
See All

#### Contacts

- Jeremy Potter
- David Tennant
- Anna Johansson
- Alan Doyle
- Simon Corbett
- Polly Paton

See All
Demo Settings
Fixed Header
Boxed Layout
Collapse Leftbar
Collapse Rightbar
Horizontal Icons
Header Colors

Sidebar Colors
Boxed Layout Options