_panel.scss

//
// Panel
// ======
// Additions and enhancements of the bootstrap panel component. This file
// needs to be included directly after the bootstrap panel definitions.
//
//
// Normal Usage
// ------------
//
// <div class="panel panel-default">
//   <div class="panel-heading">
//     <div class="panel-heading-right">
//       <a href="#panelContentId" class="panel-heading-collapse" role="button" data-bs-toggle="collapse" aria-expanded="true">
//         <span class="t3js-icon icon icon-size-small icon-state-default icon-actions-view-list-collapse" data-identifier="actions-view-list-collapse">
//           ... IconAPI ...
//         </span>
//       </a>
//     </div>
//     <div class="panel-heading-left">
//       <a href="#" class="panel-title">
//         ... Title ...
//       </a>
//     </div>
//   </div>
//   <div id="panelContentId" class="panel-collapse collapse show" aria-expanded="true">
//     <div class="panel-body">
//       ... Content ...
//     </div>
//   </div>
// </div>
//
//

//
// Variables
//
$panel-active-text: #fff;
$panel-active-border: #444;
$panel-active-heading-bg: #666;
$panel-progress-bg: #eee;
$panel-progress-bar: #444;

//
// Panel
//
.panel {
    display: block;

    &:hover,
    &:focus {
        text-decoration: none;
    }
}

//
// Heading
//
.panel-heading {
    @extend .clearfix;

    a,
    a:hover,
    a:focus,
    a:active {
        text-decoration: none;
        color: inherit;
    }
}

.panel-heading-left {
    float: left;
}

.panel-heading-right {
    float: right;
}

//
// Title
//
.panel-title {
    font-size: $font-size-base;
}

.panel-title-icon,
.panel-title-name {
    display: inline-block;
    vertical-align: middle;
}

//
// Body
//
.panel-body {
    > *:first-child {
        margin-top: 0;
    }

    > *:last-child {
        margin-bottom: 0;
    }
}

// $TODO workaround to make links visible
.panel-body-highlightlinks {
    > p > a {
        text-decoration: underline;
    }
}

//
// Table
//
.panel-table {
    th:first-child,
    td:first-child {
        padding-left: $card-spacer-x;
    }

    th:last-child,
    td:last-child {
        padding-right: $card-spacer-x;
    }
}

//
// Progress
//
.panel-progress {
    background-color: $panel-progress-bg;
    height: 3px;
    position: relative;
    width: 100%;

    .panel-progress-bar {
        display: block;
        height: 100%;
        background-color: $panel-progress-bar;
    }
}

//
// Additional Variations
//
.panel-active {
    @include panel-variant($panel-active-border, $panel-active-text, $panel-active-heading-bg, $panel-active-border);
}

//
// Tab
//
.panel-body {
    padding: 0.75rem;
}