Backups Created:
/home/japatmex/public_html/wp-content/edit-wolf.php

SavvyWolf - MANAGER

Edit File: _datatable-buttons.scss

/* ------------------------------------------------------------------------------
 *
 *  # 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
 *
 * ---------------------------------------------------------------------------- */

// Check if component is enabled
@if $enable-datatable-buttons {

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

// Container
        .dt-buttons {
            float: none;
            display: flex;
            justify-content: center;
            margin: 0;
            border-bottom: $table-border-width solid $table-border-color;
            padding-top: $dt-spacer-y;
            padding-bottom: ($dt-spacer-y / 2);
            background-color: $table-accent-bg;

// Button
            > .btn {
                margin-bottom: ($dt-spacer-y / 2);
                float: none;
            }
        }
    }

// Buttons. Default alignment is right
    .dt-buttons {
        position: relative;
        float: right;
        display: flex;
        flex-wrap: wrap;
        margin: 0 0 $dt-spacer-y $dt-spacer-x;

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

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

// First button
            &:first-child {
                @include border-left-radius($btn-border-radius);
            }

// Last button
            &:last-of-type {
                @include border-right-radius($btn-border-radius);
            }

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

// Mobile view
        @include media-breakpoint-down(sm) {
            float: none;
            text-align: center;
            display: block;

.btn {
                float: none;
            }
        }
    }

// Overlay
    .dt-button-background {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: $modal-backdrop-bg;
        z-index: $zindex-modal-backdrop;
        opacity: $modal-backdrop-opacity;
    }

// Button collection
    .dt-button-collection {
        position: absolute;
        background-color: $dropdown-bg;
        display: block;
        z-index: $zindex-modal;
        padding: $dropdown-padding-y 0;
        overflow: hidden;
        min-width: $dropdown-min-width;
        column-gap: 0.125rem;
        @include border-radius($dropdown-border-radius);
        @include box-shadow($dropdown-box-shadow);

// Force collection dropdown to be right aligned
        &:not(.fixed) {
            top: 100%!important;
            left: auto!important;
            right: 0!important;
        }

// Inner buttons
        > .dt-button {
            padding: $dropdown-item-padding-y $dropdown-item-padding-x;
            color: $dropdown-link-color;
            background-color: transparent;
            border: 0;
            display: block;
            outline: 0;
            width: 100%;
            text-align: left;
            cursor: pointer;
            @include transition(all ease-in-out $component-transition-timer);

// Add 1px top spacing between buttons
            + .dt-button {
                margin-top: $dropdown-item-spacer-y;
            }

// Hover state
            @include 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: -($dt-button-collection-2col-width / 4);
            padding-left: $dropdown-padding-y;
            padding-right: $dropdown-padding-y;

// Two columns
            &.two-column {
                margin-left: -($dt-button-collection-2col-width / 2);
            }

// Three columns
            &.three-column {
                margin-left: -($dt-button-collection-3col-width / 2);
            }

// Four columns
            &.four-column {
                margin-left: -($dt-button-collection-4col-width / 2);
            }
        }

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

// Two columns
        &.two-column {
            width: $dt-button-collection-2col-width;
            column-count: 2;
        }

// Three columns
        &.three-column {
            width: $dt-button-collection-3col-width;
            column-count: 3;
        }

// Four columns
        &.four-column {
            width: $dt-button-collection-4col-width;
            column-count: 4;
        }
    }

// Confirmation message
    div.dt-button-info {
        position: fixed;
        top: $notification-gutter-y;
        right: $notification-gutter-x;
        width: $notification-width;
        background-color: $notification-info-bg;
        color: $notification-info-color;
        border: $alert-border-width solid $notification-info-border-color;
        padding: $alert-padding-y $alert-padding-x;
        z-index: $zindex-tooltip;
        @include border-radius($alert-border-radius);
        @include box-shadow($notification-box-shadow);

// Title
        h2 {
            font-size: $h6-font-size;
            margin-bottom: map-get($spacers, 1);
            line-height: $headings-line-height;
            letter-spacing: $headings-letter-spacing;
        }
    }
}