
// This program is free software; you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation; either version 2 of the License, or
// (at your option) any later version.

// system page

.system-main-content {
    display: flex;
    flex-flow: row nowrap;
    .system-nav {
        flex-grow: 0.25;
        flex-shrink: 0;
        padding-right: 3em;
    }
    .system-tabs {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 100%;
        overflow: visible;
    }
}
// disable flexbox stuff on narrow viewports
@media (max-width: 767px) {
    .system-main-content {
        display: block !important;
    }
}

// Nav list tweaks, suggested by HSS UX team based on user testing
// https://bugzilla.redhat.com/show_bug.cgi?id=1144190
.system-nav {
    text-align: right;
    li + .nav-header {
        margin-top: 1em;
    }
    // CSS right triangle, using position and pseudo-element hacks
    li {
        position: relative;
        // Bootstrap uses pixel line-height, but relative line-height lets us 
        // avoid issues with font scaling:
        // https://bugzilla.redhat.com/show_bug.cgi?id=1163721
        @navListLineHeight: 1.5em;
        @navListVerticalPadding: 0.25em;
        @navListItemHeight: (@navListLineHeight + 2*@navListVerticalPadding);
        line-height: @navListLineHeight;
        a:after {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            top: 0;
            right: 0;
            border-top: white @navListItemHeight/2 solid;
            border-bottom: white @navListItemHeight/2 solid;
            border-left: transparent @navListItemHeight/2 solid;
        }
        &.nav-header, a {
            margin-right: 0;
            // extra right padding to account for the triangle
            padding: @navListVerticalPadding 2em @navListVerticalPadding  1.5em;
        }
    }
}

.system-quick-info {
    .quick-info;
    .system-quick-usage {
        /* The quick usage box can be quite narrow in a lot of cases, so we 
         * force a minimum width on it to prevent it from being too 
         * disproportionate to the other quick info boxes. */
        min-width: 12em;
    }
}

.system-status-reason, .system-loan-comment {
    .well;
    .well-small;
    // reset bottom margin to match p
    margin-bottom: @baseLineHeight / 2;
}

#details section {
    padding-bottom: 1em;
    border-bottom: 1px solid @grayLighter;
    margin-bottom: 1.5em;
}

.system-provision {
    .install-options input {
        .input-xlarge;
    }
}

.system-notify-cc {
    .list-group-mixin()
}

#access-policy .table .btn {
    // Reset to default button padding
    padding: 4px 12px;
}

/* The data in these tables is often quite brief and so stretching them out to 
 * fill the entire width of the viewport hurts readability, since it causes the 
 * columns to be spaced very far apart. */
.system-pools-list {
    .list-group-mixin()
}

.active-access-policy-chooser {
   label.select-beside {
        display: inline-block;
    }
   select {
        margin: 0 0 0 4px;
   }
}

div.system-note + div.system-note,
form.add-system-note + div.system-note,
div.system-note + div.deleted-system-notes {
    padding-top: 1em;
    border-top: 1px solid @grayLighter;
    margin-top: 1em;
}
.system-note-metadata {
    .muted;
}
form.add-system-note,
div.system-note-text {
    max-width: 50em;
}
div.deleted-system-notes {
    .muted;
    font-style: italic;
}
