/*
Cards

Card styles from trimble css

Markup:
<div class="row tile profile">
    <div class="col s12 m3 l2 xs12">
            <div class="profile-card-container">
                <div class="avatar-wrapper">
                    <div class="card-avatar">
                        <img src="../src/images/8.png" alt="">
                    </div>
                </div>
                <div><h4>Raman Babu</h4></div>
                <div class="name"><p>Raman</p></div>
                <div><p class="link">raman_babu@trimble.com</p></div>
                <div><p>Trimble</p></div>
                <div class="profile-card-footer">
                        <div class="profile-card-role">
                            <p>Admin</p>
                        </div>
                        <div class="profile-card-edit">
                            <ul>
                                <li class="dropdown-pane-container">
                                    <button class="clear dropdownpane-link"><i class="i32 icon_blue_overflow"></i></button>
                                    <div class="dropdown-pane is-open">
                                        <ul class="dropdown-list">
                                            <li>FORCE LOGOFF</li>
                                            <li>Remove</li>
                                            <li>Suspend</li>
                                        </ul>                                        
                                    </div>
                                </li>
                            </ul>       
                        </div>
                </div>
            </div>
    </div>
</div>

Styleguide UI Elements.cards
*/

@import 'colors.scss';
@import 'variables.scss';

.card{
    background-color:$col_gray_half;
    margin-left:1rem;
    margin-right:1rem;
    margin-bottom:1.5rem;
    @include shadow-medium;
    .card-title{
        padding:1rem; //have to create variable
        color:$col_gray_8;
    }
    .card-section{
        padding:0 1rem 1rem; //have to create variable
    }
    .avatar{
        margin:1rem auto 2rem auto;
    }
 }