LimitLess-admin-panel/assets/less/components/plugins/tables/datatables/datatable-buttons.less

/* ------------------------------------------------------------------------------
*
*  # Buttons extension
*
*  The Buttons extension for DataTables provides a common set of options, API
*  methods and styling to display buttons that will interact with a DataTable
*
*  Version: 1.2
*  Latest update: Jul 5, 2016
*
* ---------------------------------------------------------------------------- */


// Buttons base
// ------------------------------

// Full width buttons
.dt-buttons-full {

    // Container
    .dt-buttons {
        text-align: center;
        float: none;
        display: block;
        margin: 0;
        border-bottom: 1px solid @table-border-color;
        padding-top: @line-height-computed;
        padding-bottom: (@line-height-computed / 2);
        background-color: @table-bg-accent;

        > .btn {
            margin-bottom: (@line-height-computed / 2);
            float: none;
        }
    }
}

// Buttons. Default alignment is right
.dt-buttons {
    float: right;
    display: inline-block;
    margin: 0 0 @line-height-computed @content-padding-large;

    // Left display option
    .dt-buttons-left & {
        float: left;
    }

    // Inner buttons
    > .dt-button {
        display: inline-block;
    }

    // Default buttons
    > .btn {
        border-radius: 0;

        // First button
        &:first-child {
            .border-left-radius(@border-radius-base);
        }

        // Last button
        &:last-child {
            .border-right-radius(@border-radius-base);
        }

        // Add 1px spacing between buttons
        & + .btn {
            margin-left: -1px;
        }
    }

    // Mobile view
    @media screen and (max-width: 767px) {
        float: none;
        text-align: center;
        display: block;

        .btn {
            float: none;
        }
    }
}

// Dialog
.dt-button-info {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 400px;
    margin-top: -100px;
    margin-left: -200px;
    padding: @modal-inner-padding;
    background-color: #fff;
    border: 1px solid @dropdown-border;
    border-radius: @border-radius-base;
    text-align: center;
    z-index: @zindex-modal;
    .box-shadow(0 1px 3px rgba(0, 0, 0, 0.1));

    // Heading
    h2 {
        margin-top: 0;
        line-height: @modal-title-line-height;
        font-size: @font-size-h5;
    }
}

// Overlay
.dt-button-background {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #333;
    z-index: @zindex-dropdown - 1;
    .opacity(0.25);
}


// Button collection
// ------------------------------

.dt-button-collection {
    position: absolute;
    top: 0;
    left: 0;
    background-color: @dropdown-bg;
    display: block;
    z-index: @zindex-dropdown;
    padding: @list-spacing 0;
    overflow: hidden;
    min-width: 180px;
    border-radius: @border-radius-base;
    -webkit-column-gap: 2px;
    -moz-column-gap: 2px;
    -ms-column-gap: 2px;
    -o-column-gap: 2px;
    column-gap: 2px;
    .box-shadow(@shadow-depth2);

    // Inner buttons
    > .dt-button {
        padding: (@padding-base-vertical + 1) @content-padding-base;
        color: @dropdown-link-color;
        display: block;
        outline: 0;

        // Add 1px top spacing between buttons
        + .dt-button {
            margin-top: 1px;
        }

        // Hover state
        &:hover,
        &:focus {
            color: @dropdown-link-hover-color;
            background-color: @dropdown-link-hover-bg;
        }

        // Active state
        &.active {
            color: @dropdown-link-active-color;
            background-color: @dropdown-link-active-bg;
        }
    }

    // Fixed centered layout
    &.fixed {
        position: fixed;
        top: 50%;
        left: 50%;
        margin-left: -75px;
        padding-left: (@list-spacing - 2);
        padding-right: (@list-spacing - 2);

        // Two columns
        &.two-column {
            margin-left: -150px;
        }

        // Three columns
        &.three-column {
            margin-left: -225px;
        }

        // Four columns
        &.four-column {
            margin-left: -300px;
        }
    }

    // Inner content
    > * {
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
    }

    // Two columns
    &.two-column {
        width: 300px;
        -webkit-column-count: 2;
        -moz-column-count: 2;
        -ms-column-count: 2;
        -o-column-count: 2;
        column-count: 2;
    }

    // Three columns
    &.three-column {
        width: 450px;
        -webkit-column-count: 3;
        -moz-column-count: 3;
        -ms-column-count: 3;
        -o-column-count: 3;
        column-count: 3;
    }

    // Four columns
    &.four-column {
        width: 600px;
        -webkit-column-count: 4;
        -moz-column-count: 4;
        -ms-column-count: 4;
        -o-column-count: 4;
        column-count: 4;
    }
}