//
// ModuleTemplate
// ======
// General component for backend modules.
//

//
// Variables
//
$module-bg: #fff;
$module-docheader-bg: #eee;
$module-docheader-border: #c3c3c3;
$module-docheader-zindex: 300;
$module-docheader-height: 65px;
$module-docheader-padding-vertical: 0;
$module-docheader-padding-horizontal: 24px;
$module-docheader-padding: $module-docheader-padding-vertical $module-docheader-padding-horizontal;
$module-docheader-bar-height: 26px;
$module-docheader-bar-margin-vertical: 4px;
$module-docheader-bar-margin-horizontal: 0;
$module-docheader-bar-margin: $module-docheader-bar-margin-vertical $module-docheader-bar-margin-horizontal;
$module-body-padding-vertical: 24px;
$module-body-padding-horizontal: 24px;
$module-body-padding: $module-body-padding-vertical $module-body-padding-horizontal;

//
// Template
//
.module {
    height: 100%;
    width: 100%;
    background-color: $module-bg;
}

//
// Loading indicator
//
.module-loading-indicator {
    position: fixed;
    min-height: 5px;
    width: 100%;
    z-index: 999999;

    &.nprogress-custom-parent {
        position: fixed;
        top: 0;
    }
}

//
// Docheader
//
.module-docheader {
    @extend .clearfix;

    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    min-height: $module-docheader-height;
    z-index: $module-docheader-zindex;
    background-color: $module-docheader-bg;
    border-bottom: 1px solid $module-docheader-border;
    padding: $module-docheader-padding;

    @include transition(margin-top 0.3s ease-in-out);

    .module-docheader-bar {
        @extend .clearfix;

        min-height: $module-docheader-bar-height;
        margin: $module-docheader-bar-margin;
        line-height: $module-docheader-bar-height;

        &.row {
            margin-left: -15px;
            margin-right: -15px;
        }

        label {
            margin-top: 0;
            margin-bottom: 0;
        }

        .form-group {
            vertical-align: top;
            margin: 0;
            display: inline-block;

            .form-control {
                vertical-align: top;
            }
        }

        .form-inline-spaced {
            margin: 0;
        }

        .panel {
            margin: 0;
            border-left: none;
            border-right: none;
            border-bottom: none;
            border-radius: 0;
            margin-left: -$module-docheader-padding-horizontal;
            margin-right: -$module-docheader-padding-horizontal;
            background-color: #fafafa;
            box-shadow: none;

            .panel-body {
                padding: ceil($module-docheader-padding-horizontal / 3) $module-docheader-padding-horizontal;
            }
        }

        @media (max-width: $screen-sm) {
            .text-right {
                text-align: left;
            }
        }
    }

    .module-docheader-bar-search {
        margin-bottom: 0;
    }

    .module-docheader-bar-column-left {
        float: left;
    }

    .module-docheader-bar-column-right {
        float: right;
    }
}

.module-docheader-bar-navigation {
    .module-docheader-bar-column-left {
        white-space: nowrap;

        @media (max-width: $screen-sm) {
            white-space: normal;
        }
    }

    .form-group select {
        width: 100%;
    }
}

//
// Body
//
.module-body {
    padding: $module-body-padding;
    height: 100%;
    // Use overflow-y: auto to ensure ckeditor dropdowns
    // do not conflict with height: 100% on <body>
    overflow-y: auto;

    > .callout:first-child {
        margin-top: 0;
    }

    > .container {
        padding-left: 0;
        padding-right: 0;
    }

    .container-small {
        max-width: 768px;
        margin: 0 auto;
    }
}

.module-docheader + .module-body {
    padding-top: $module-docheader-height + $module-body-padding-vertical;
}
