/* ------------------------------------------------------------------------------
*
*  # Footable
*
*  jQuery plugin that aims to make HTML tables on smaller devices look awesome.
*
*  Version: 1.0
*  Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */


// Basic styling
// ------------------------------

.footable {
    width: 100%;

    // Remove user select
    > thead > tr > th {
        -webkit-touch-callout: none;
        .user-select(none);
    }

    // Setup table styles
    &.breakpoint {
        > tbody {
            > tr {
                &.footable-detail-show > td {
                    border-bottom: 0;
                }

                // Remove background color from details row
                &.footable-row-detail:hover {
                    background-color: transparent;
                }

                // Add pointer
                &:hover:not(.footable-row-detail) {
                    cursor: pointer;
                }

                // Cell with details
                > .footable-cell-detail {
                    background-color: @gray-lighter;
                    border-top: 0;
                }

                // Add expand icon
                .footable-toggle:before {
                    content: "\e9e4";
                    display: inline-block;  
                    font-family: 'icomoon';
                    font-size: @icon-font-size;
                    vertical-align: middle;
                    position: relative;
                    top: -1px;
                    line-height: 1;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                    padding-right: 10px;
                }

                // Add collapse icon
                &.footable-detail-show .footable-toggle:before {
                    content: "\e9e7";       
                }
            }
        }
    }
}


// Row styling
// ------------------------------

.footable-row-detail-inner {
display: table;
table-layout: fixed;
width: 100%;
}
.footable-row-detail-row {
display: table-row;
}
.footable-row-detail-group {
display: block;
font-weight: 700;
margin-top: @line-height-computed;
margin-bottom: @padding-base-vertical;

&:first-child {
margin-top: @padding-base-vertical;
}
}
.footable-row-detail-name {
display: table-cell;
padding-right: 40px;
font-weight: 500;
}
.footable-row-detail-value {
display: table-cell;
padding: @padding-base-vertical 0;
}

// Make dropdown menus full width
@media (max-width: @screen-xs) {
.footable-row-detail-inner {
position: relative;
}

.footable-row-detail {
.dropdown,
.dropup,
.btn-group {
position: static;
}

.dropdown-menu {
left: 0;
right: 0;
}
}
}
