LimitLess-admin-panel/assets/less/bootstrap-limitless/panels.less

/* ------------------------------------------------------------------------------
*
*  # Panels component
*
*  Overrides for panels bootstrap component
*
*  Version: 1.1
*  Latest update: Mar 10, 2016
*
* ---------------------------------------------------------------------------- */


// Base class
// -------------------------

.panel {
    margin-bottom: @line-height-computed;
    border-color: @panel-default-border;
    color: @text-color;
}


// Solid color panels
// -------------------------

.panel[class*=bg-] {

    // Panel heading
    > .panel-heading {
        border-color: fade(#fff, 20%);

        // Inherit bg color on mobile
        @media (max-width: @screen-xs-max) {
            background-color: inherit;
        }
    }

    // Panel heading in flat panel
    &.panel-flat > .panel-heading {
        border-bottom-color: transparent;
    }

    // Panel body inherits bg color
    > .panel-body {
        background-color: inherit;
    }

    // Apply white color to panel title
    .panel-title {
        color: #fff;
    }

    // Table border color
    .table {
        thead,
        tbody {
            td,
            th {
                border-color: fade(#fff, 10%);
            }
        }
    }

    // Inline elements color
    .text-muted,
    .help-block,
    .help-inline {
        color: fade(#fff, 80%);
    }
}


// Custom border colors
// -------------------------

.panel {
    &[class*=border-top-] {
        .border-top-radius(0);
    }

    &[class*=border-bottom-] {
        .border-bottom-radius(0);
    }

    &[class*=border-left-] {
        .border-left-radius(0);
    }

    &[class*=border-right-] {
        .border-right-radius(0);
    }
}


// Panel contents
// -------------------------

.panel-body {
    position: relative;

    .panel-flat > .panel-heading + & {
        padding-top: 0;
    }
}


// Panel heading
// -------------------------

// Base class
.panel-heading {
    position: relative;
    .border-top-radius(@border-radius-base);

    // Bordered panel
    .panel-bordered > & {
        margin: 0;
    }

    // In flat panel it is higher
    .panel-flat > & {
        padding-top: @content-padding-large;
        padding-bottom: @content-padding-large;
        background-color: @panel-bg;

        // Add extra vertical spacing for title
        > .panel-title {
            margin-top: 2px;
            margin-bottom: 2px;
        }
    }

    // Inherit bg color in solid color panel
    .panel-flat[class*=bg-] > & {
        background-color: inherit;
    }

    // Make it pixel perfect by emulating colored border
    &[class*=bg-],
    .panel-primary &,
    .panel-danger &,
    .panel-success &,
    .panel-warning &,
    .panel-info & {
        margin: -1px -1px 0 -1px;
        .border-top-radius(@border-radius-base);
    }

    // Inside white panel
    .panel-white > & {
        background-color: @panel-bg;
        border-bottom-color: @panel-default-border;
    }
}

// Panel heading title
.panel-title {
    position: relative;
    font-size: @font-size-base;

    // Display links as a block element
    a& {
        display: block;
    }

    // Title image
    img {
        max-height: @line-height-computed;
        display: inline-block;
        vertical-align: top;
    }

    // Add extra spacing between title and subtitle
    > small:not(.display-block),
    > .small:not(.display-block) {
        margin-left: 5px;
    }

    // Title sizing
    h1&,
    .h1& {
        font-size: @font-size-h1;
    }
    h2&,
    .h2& {
        font-size: @font-size-h2;
    }
    h3&,
    .h3& {
        font-size: @font-size-h3;
    }
    h4&,
    .h4& {
        font-size: @font-size-h4;
    }
    h5&,
    .h5& {
        font-size: @font-size-h5;
    }
    h6&,
    .h6& {
        font-size: @font-size-h6;
    }
}

// Control buttons
.icons-list {

    // Link base
    a[data-action] {
        vertical-align: middle;
        .transition(all ease-in-out 0.2s);

        // Icons base
        &:after {
            font-family: 'icomoon';
            font-size: @icon-font-size;
            min-width: @icon-font-size;
            text-align: center;
            display: inline-block;
            line-height: 1;
            vertical-align: middle;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    }

    // Collapse icon
    a[data-action="collapse"]:after {
        content: '\e9c1';
    }

    // Reload icon
    a[data-action="reload"]:after {
        content: '\e9fb';
    }

    // Close icon
    a[data-action="close"]:after {
        content: '\e9b6';
    }

    // Move icon
    a[data-action="move"]:after {
        content: '\e986';
    }

    // Open modal icon
    a[data-action="modal"]:after {
        content: '\e9eb';
    }
}


// Panel footer
// -------------------------

// Base styles
.panel-footer {
    position: relative;
    padding-left: 0;
    padding-right: 0;
    .border-bottom-radius(@border-radius-base);

    // Clearing floats
    &:after {
        content: '';
        display: table;
        clear: both;
    }
}

// Transparent panel footer
.panel-footer-transparent {
    background-color: transparent;
    border-top: 0;
    padding-top: 0;
    padding-bottom: @content-padding-large - ((@input-height-base - @line-height-computed) / 2);
}

// Condensed panel footer
.panel-footer-condensed {
    padding-top: 2px;
    padding-bottom: 2px;
}

// Bordered panel footer
.panel-footer-bordered {
    background-color: @panel-bg;
    padding-right: 0;
    margin-left: @content-padding-large;
    margin-right: @content-padding-large;
}


// Collapsable panels (aka, accordion)
// -------------------------

// Panel group controls
.panel-group-control {
    .panel-title > a {
        padding-left: (@icon-font-size + @content-padding-small);
        display: inline-block;

        // Collapsible icon
        &:before {
            content: '\e9b7';
            font-family: 'icomoon';
            position: absolute;
            top: 50%;
            margin-top: -(@icon-font-size / 2);
            left: 0;
            font-size: @icon-font-size;
            font-weight: 400;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        // Change icon if collapsed
        &.collapsed:before {
            content: '\e9b8';
        }
    }

    // Right controls position
    &.panel-group-control-right {
        .panel-title > a {
            padding-left: 0;
            padding-right: (@icon-font-size + @content-padding-small);

            // Re-position the icon
            &:before {
                left: auto;
                right: 0;
            }
        }
    }
}


// Contextual variation overrides
// -------------------------

// Primary
.panel-primary {
    border-color: @panel-default-border;

    &.panel-bordered {
        border-color: @panel-primary-border;
    }
}

// Success
.panel-success {
    border-color: @panel-default-border;

    &.panel-bordered {
        border-color: @panel-success-border;
    }
}

// Info
.panel-info {
    border-color: @panel-default-border;

    &.panel-bordered {
        border-color: @panel-info-border;
    }
}

// Warning
.panel-warning {
    border-color: @panel-default-border;

    &.panel-bordered {
        border-color: @panel-warning-border;
    }
}

// Danger
.panel-danger {
    border-color: @panel-default-border;

    &.panel-bordered {
        border-color: @panel-danger-border;
    }
}