Material Admin Extended Dark

## CSS

## Containers

Material Admin requires a containing element to wrap site contents in order to make it center aligned. There are 2 different variant of containers available in Material Admin. Note that, due to padding and more, neither container is nestable.

    <div id="content">
        <!-- contents -->
    </div>

Usage examples:

- `/index.html`
- `/typography.html`
- `/widgets.html`
- `/tables.html`
- etc.

    <div id="content" class="content--boxed">
        <!-- contents -->
    </div>

Usage examples:

- `/messages.html`
- `/calendar.html`
- `/pricing-table.html`

    <div id="content" class="content--boxed-sm">
        <!-- contents -->
    </div>

Usage examples:

- `/profile-timeline.html`
- `/profile-about.html`
- `/pricing-photos.html`
- `/wall.html`

Source LESS file: `/less/inc/base.less`

## Page Headers

Page header is a wrapper for page titles and optional page actions.

    <section id="content">
        <div class="content__header">
            <h2>This is a page header</h2>
        </div>
    </section>

    <div id="content">
        <div class="content__header">
            <h2>This is a page header <small>this is a sample page header sub text</small></h2>
        </div>
    </div>

    <div id="content">
        <div class="content__header">
            <h2>This is a page header <small>this is a sample page header sub text</small></h2>

            <div class="actions">
                <a href=""><i class="zmdi zmdi-search"></i></a>
                <a href=""><i class="zmdi zmdi-home"></i></a>
            </div>
        </div>
    </div>

You can also use the helper classes in order to align the title to right or center.

    <div id="content">
        <div class="content__header text-right"><!-- or .text-center -->
            <h2>This is a page header</h2>
        </div>
    </div>

Source LESS file: `/less/inc/misc.less`

## Action Icons

Action Icons are used to perform a certain list of actions within a title, list or in any element using icons.

    <div class="actions">
        <a href=""><i class="zmdi zmdi-favorite-outline"></i></a>
        <a href=""><i class="zmdi zmdi-print"></i></a>
        <a href=""><i class="zmdi zmdi-email"></i></a>
        <span class="dropdown">
            <a href="" data-toggle="dropdown"><i class="zmdi zmdi-share"></i></a>

            <ul class="dropdown-menu">
                <li></li>
            </ul>
        </span>
    </div>

To override position of the action-icons, you can simply add a modifier class on `.actions` and customize it as per your need.

e.g HTML

    <div class="actions actions--list">
       ...
    </div>

e.g CSS

    .actions--list {
        float: right;
        margin-top: 10px;
        ...
    }

Action Icons usage in template:

1. `/index.html`
2. `/widgets.html`
3. `/photos.html`
4. `/photo-timeline.html`
5. `/calendar.html`
6. `/list-view.html`
7. `/messages.html`
8. ...

Source LESS file: `/less/inc/misc.less`

## Cards

In Material Admin, a card is a sheet of material that serves as an entry point to more detailed information.

#### Basic example:

    <div class="card">
        <div class="card__header">
            <h1>Curabitur blandit tempus porttitor</h1>
            <small>by Sam Andersion on 17th July 2016</small>
        </div>

        <div class="card__body">
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
        </div>

        <div class="card__footer">
            <button class="btn btn-sm btn-link">Save</button>
            <button class="btn btn-sm btn-link">Cancel</button>
        </div>
    </div>

#### Card with image header:

    <div class="card">
        <a class="card__img" href="">
            <img src="img/demo/blog/2.jpg" alt="">
        </a>

        <div class="card__header">
            <h1>Curabitur blandit tempus porttitor</h1>
            <small>by Sam Andersion on 17th July 2016</small>
        </div>

        <div class="card__body">
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
        </div>

        <div class="card__footer">
            <button class="btn btn-sm btn-link">Save</button>
            <button class="btn btn-sm btn-link">Cancel</button>
        </div>
    </div>

#### Card with sub sections:

    <div class="card">
        <div class="card__body">
            <div class="card__sub">
                <h4>About Robert B. Osborne</h4>
                <p>Pellentesque vitae quam quis tellus dignissim faucibus. Suspendisse mattis felis at faucibus lobortis. Sed sit amet tellus dolor. Fusce quis sollicitudin velit. Praesent gravida ullamcorper lectus et tincidunt. Phasellus lectus quam, porta pharetra feugiat in, auctor eget dolor.</p>
            </div>

            <div class="card__sub">
                <h4>Specialties</h4>
                <p>Property Management, Buyer's Agent, Listing Agent</p>
            </div>

            <div class="card__sub">
                <h4>Education</h4>
                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctuso.</p>
            </div>
        </div>
    </div>

#### Card with form inputs:

    <form class="card">
        <div class="card__header card__header--highlight">
            <h2>Ask a Question</h2>
            <small>Aeneanquam ellentesque ornare lacinia venenatis</small>
        </div>

        <div class="card__body">
            <div class="form-group form-group--float">
                <input type="text" class="form-control">
                <i class="form-group__bar"></i>
                <label>Name</label>
            </div>
            <div class="form-group form-group--float">
                <input type="text" class="form-control">
                <i class="form-group__bar"></i>
                <label>Email Address</label>
            </div>

            <div class="form-group form-group--float">
                <textarea class="form-control textarea-autoheight"></textarea>
                <i class="form-group__bar"></i>
                <label>Message</label>
            </div>

            <small class="text-muted">By sending us your information, you agree to Root’s Terms of Use & Privacy Policy.</small>
        </div>

        <div class="card__footer">
            <button class="btn btn-default">Submit</button>
            <button class="btn btn-link">Reset</button>
        </div>
    </form>

Likewise, UI possibilities of cards are endless. Cards are also useful to wrap content and show as widgets. This can be used in main content, sidebars, widgets, dropdown-menu, etc.

Some usage examples in the template:

1. `index.html`
2. `widgets.html`
3. `tables.html`
4. And in pretty much all the pages used in Material Admin...

Source LESS file: `/less/inc/card.less`

## List Groups

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content. In Roost, default Bootstrap list group is highly customized to fit more contents rather than just headings and texts.

#### Basic example:

    <div class="list-group">
        <a href="" class="list-group-item">
            <div class="list-group__heading">David Villa Jacobs</div>
            <small class="list-group__text">Sorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis lobortis sapien non posuere</small>
        </a>

        <a href="" class="list-group-item">
            <div class="list-group__heading">Candice Barnes</div>
            <small class="list-group__text">Quisque non tortor ultricies, posuere elit id, lacinia purus curabitur.</small>
        </a>
        ...
    </div>

#### With card and media-object integrated:

    <div class="card">
            <div class="card__header">
                <h2>You may also like...</h2>
                <small>Morbi risus porta consectetur vestibulum ateros</small>
            </div>

            <div class="list-group">
                <a href="" class="list-group-item media">
                    <div class="pull-left">
                        <img src="img/demo/listing/thumbs/2.jpg" alt="" class="avatar-img">
                    </div>
                    <div class="media-body list-group__text">
                        <div class="list-group__heading">Candice Barnes</div>
                        <small class="list-group__text">Quisque non tortor ultricies, posuere elit id, lacinia purus curabitur.</small>
                    </div>
                </a>

                <a href="" class="list-group-item media">
                    <div class="pull-left">
                        <img src="img/demo/listing/thumbs/3.jpg" alt="" class="avatar-img">
                    </div>
                    <div class="media-body list-group__text">
                        <div class="list-group__heading">David Villa Jacobs</div>
                        <small class="list-group__text">Sorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis lobortis sapien non posuere</small>
                    </div>
                </a>
                ...
            </div>
        </div>

#### With action icons integrated:

    ...
            <div class="list-group-item">
                <div class="list-group__text">
                    <div class="list-group__heading">David Villa Jacobs</div>
                    <small class="list-group__text">Sorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis lobortis sapien non posuere</small>
                </div>

                <div class="actions list-group__actions">
                    <span class="dropdown">
                        <a href="" data-toggle="dropdown"><i class="zmdi zmdi-more-vert"></i></a>

                        <ul class="dropdown-menu pull-right">
                            <li><a href="">Mark as done</a></li>
                            <li><a href="">Edit</a></li>
                            <li><a href="" data-demo-action="delete-listing">Delete</a></li>
                        </ul>
                    </span>
                </div>
            </div>
        ...

#### With list group attributes:

    ...
        <a href="" class="list-group-item">
            <div class="list-group__text">
                <div class="list-group__heading">David Villa Jacobs</div>
                <small class="list-group__text">Sorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis lobortis sapien non posuere</small>
            </div>

            <div class="list-group__attrs">
                <div>Date Created: 09/06/1988</div>
                <div>Members: 78954</div>
                <div>Published: No</div>
            </div>
        </a>
    ...

#### List Group modifier classes

1. `.list-group--striped`: Adds zebra-striping to all even list group items within list group.

       <div class="list-group list-group--striped">
           ...
       </div>

2. `.list-group--light`: Transforms default list-group in to a light colored theme.

       <div class="list-group list-group--light">
           ...
       </div>

#### Other List Group helper classes

1. `.list-group__checkbox`: Aligns main checkboxes inside `list-group-item`
2. `.list-group__empty`: Adds empty space end of `list-group`

Usage examples:

1. `/messages.html`
2. `/list-view.html.html`
3. ...

Source LESS file : `/less/bootstrap-overrides/list-group.less`