tables.scss

/* --- Tabellen ------------------------------------------------------------- */

// normale Tabellenheader
table.header,
.table_header {
    background-color: var(--table-header-color);
    border-bottom: 1px solid var(--color--table-border);
    color: var(--black);
    padding: 4px;

}

// formerly known as topic(-header)
.table_header_bold {
    background-color: var(--color--table-header);
    border-color: var(--color--table-border);
    border-style: solid;
    border-width: 0 0 1px 0;
    color: var(--color--font-inverted);
    font-size: 12pt;
    padding: 3px 5px;

    img,
    svg {
        vertical-align: middle;
    }

    // for the topic-icons
}

@mixin gradient-bar($flow-content: true) {
    #gradient {
        @include vertical-three-colors(#cdd9ed, #e3eaf6, 40%, #e3eaf6);
    }

    border-top: 1px solid var(--color--table-border);
    line-height: 17pt;
    height: 25px;

    @if $flow-content {
        &:last-child {
            padding-right: 5px;
        }

        img,
        svg {
            padding: 0 2px;
            vertical-align: text-bottom;
        }
    }
}

table.toolbar {
    @include gradient-bar(false);
}

td.toolbar,
td.printhead {
    @include gradient-bar;
}

td {
    &.aufklapp {
        background-color: var(--dark-gray-color-5);
    }

    &.angemeldet {
        border: 1px solid var(--black);
    }

    &.nix {
        background-color: transparent;
    }

    &.quote {
        border: 1px solid var(--black);
        font-size: 8px;
    }
}

table.blank,
td.blank,
td.onlineinfo,
td.blanksmall {
    background-color: var(--color--global-background);
}

td.tree-indent {
    img, svg {
        vertical-align: bottom;
    }
}

td.tree-elbow-line {
    background: url("#{$image-path}/datatree_1.gif") repeat-y;
    vertical-align: bottom;
    width: 5px;
}

td.tree-elbow-end {
    vertical-align: top;
    white-space: nowrap;
    width: 5px;
}

td.tree-elbow-line, td.tree-elbow-end {
    img, svg {
        display: block;
    }
}

/* --- table.collapsable ---------------------------------------------------- */
// TODO: This is pretty hard to understand and should be replaced with an easier,
// better structured solution
.collapsable {
    .header-row > td {
        border-bottom: 0;
        padding-left: 0;
    }

    .toggle-indicator {
        color: var(--black);
        font-weight: bold;

        a {
            background: left center no-repeat;
            @include background-icon(arr_1down);
            color: var(--black);
            cursor: pointer;
            display: block;
        }

    }

    .empty .toggle-indicator a {
        @include background-icon(arr_1right, inactive);
    }

    .collapsed .toggle-indicator a {
        @include background-icon(arr_1right);
    }

    td.label-cell, .toggle-indicator a, .empty .toggle-indicator {
        padding-left: 20px;
    }

    > .collapsed {
        tr:not(.header-row) {
            display: none;
        }

        .toggle-indicator ~ *:not(.dont-hide) > * {
            opacity: 0;
            pointer-events: none;
        }
    }
}

* + html .collapsable .collapsed .header-row {
    display: inline-block !important;
}

// IE-Hack

/* --- Table details -------------------------------------------------------- */
.loaded-details {
    > td {
        padding: 0 0 5px 20px !important;
    }

    table {
        border-top: 0;
    }
}

/* --- Sonstige ------------------------------------------------------------- */
.gruppe0 {
    background-color: var(--group-color-0) !important;
}

.gruppe1 {
    background-color: var(--group-color-1) !important;
}

.gruppe2 {
    background-color: var(--group-color-2) !important;
}

.gruppe3 {
    background-color: var(--group-color-3) !important;
}

.gruppe4 {
    background-color: var(--group-color-4) !important;
}

.gruppe5 {
    background-color: var(--group-color-5) !important;
}

.gruppe6 {
    background-color: var(--group-color-6) !important;
}

.gruppe7 {
    background-color: var(--group-color-7) !important;
}

.gruppe8 {
    background-color: var(--group-color-8) !important;
}

#my_seminars, #settings-notifications {
    .gruppe0, .gruppe1, .gruppe2, .gruppe3, .gruppe4,
    .gruppe5, .gruppe6, .gruppe7, .gruppe9 {
        width: 1px;
    }

    .mycourse_elements > img {
        display: none;
    }

    .special_nav {
        float: right;
    }
}

.grey {
    background: var(--color--table-header) none;
}

.white {
    background: var(--color--global-background) none;
}

.red_gradient {
    #gradient {
        @include vertical-three-colors(#e3969a, #e8b6b9, 60%, #e8b6b9);
    }

    border-top: 2px solid var(--brown);
}

/* --- Styles fuer printhead und printcontent ------------------------------- */
table {
    td.printcontent {
        background-color: var(--dark-gray-color-5);
        text-align: left;
    }

    td.printcontent:hover {
        background-color: var(--dark-gray-color-5);
    }

    td.printhead2 {
        background-image: url("#{$image-path}/content_object_arr-right.png");
        border-top: 1px solid var(--color--table-border);
        padding: 0;
    }

    td.printhead3 {
        background-image: url("#{$image-path}/content_object_arr-down.png");
        border-top: 1px solid var(--color--table-border);
        padding: 0;
    }
}

/* classes for sortable table headers --------------------------------------- */
tr.sortable {
    th.sortasc,
    th.sortdesc {
        .tablesorter-header-inner {
            display: inline-block;
        }
    }

    th.sortasc {
        @include icon('after', 'arr_1up', 'clickable', $icon-size-inline);
    }

    th.sortdesc {
        @include icon('after', 'arr_1down', 'clickable', $icon-size-inline);
    }
}

.tablesorter .filtered {
    display: none;
}

.tablesorter .tablesorter-errorRow td {
    text-align: center;
    cursor: pointer;
}

/* styles for settings tables */
.settings {
    border-collapse: collapse;
    margin-bottom: 2em;
    width: 100%;

    thead th, tbody th {
        @extend .table_header_bold;
        text-align: center;
    }

    td, th {
        padding: 8px;
        vertical-align: top;
    }

    tbody {
        &.maxed {
            input[type=email], input[type=password], input[type=tel], input[type=text], input[type=url], select, textarea {
                &:first-child {
                    box-sizing: border-box;
                    width: 100%;
                }
            }

            td[colspan]:first-child {
                input[type=email], input[type=password], input[type=tel], input[type=text], input[type=url], select, textarea {
                    width: 200px;
                }
            }
        }

        &.privacy td:first-child ~ td {
            font-style: italic;
            text-align: center;
        }

        td:first-child label {
            display: block;
            font-weight: bold;
        }
    }

    td:first-child[colspan], .divider > th, .divider > td {
        background-color: lighten($brand-color-lighter, 20%);
        border-bottom: 1px solid var(--color--table-border);
        border-top: 1px solid var(--color--table-border);
        color: var(--black);
        font-weight: bold;
        text-align: center;
    }

    dfn, small {
        display: block;
        font-weight: normal;
    }

    dfn {
        font-size: 0.8em;
        font-style: italic;
        padding-top: 0.5em;
    }

    tfoot {
        td {
            background: var(--table-footer-color);
            text-align: center;
        }

        tr:first-child td {
            border-top: 1px solid var(--dark-gray-color-80);
        }
    }

    label.required:after {
        color: var(--red);
        content: '*';
        font-size: 1.5em;
        padding-left: 5px;
        vertical-align: middle;
    }

    &.notification tbody td {
        text-align: center;

        &:first-child:not([colspan]) {
            padding-left: 0;
            padding-right: 0;
            font-size: small;
        }

        &:nth-child(-n+2) {
            text-align: left;
        }
    }

    .bordered {
        &.left {
            border-left: 1px solid var(--color--table-border);
        }

        &.right {
            border-right: 1px solid var(--color--table-border);
        }
    }
}

table.tree {
    .header > td {
        @include gradient-bar;

        a.link {
            padding-left: 5px;

            &.open {
                @include background-icon(arr_1down);
                background-position: left center;
                background-repeat: no-repeat;
                padding-left: 20px;
            }

            &.closed {
                @include background-icon(arr_1right);
                background-position: left center;
                background-repeat: no-repeat;
                padding-left: 20px;
            }
        }
    }

    td.blank {
        background: var(--color--global-background);
        border: 0;
    }

    td.in-between {
        background: var(--color--global-background) url("#{$image-path}/tree-line.gif") center repeat-y;
        border: 0;
    }

    td.leaf {
        background: var(--color--global-background) url("#{$image-path}/tree-leaf.gif") center no-repeat;
        border: 0;
    }

    td.end {
        background: var(--color--global-background) url("#{$image-path}/tree-end.gif") center no-repeat;
        border: 0;
    }

    .centered {
        text-align: center;

        table {
            margin: auto;
            text-align: left;
        }
    }
}

.table_footer, .table_footer td {
    background-color: var(--color--table-header);
    border-top: 1px solid var(--color--table-border);
}

// New table definition
table.default {
    border-collapse: collapse;
    margin-bottom: 2em;
    width: 100%;

    .wrap-content {
        word-break: break-all;
    }

    .font-size-adjusted {
        font-size: 1.1em;
    }

    th, td {
        &.nowrap {
            white-space: nowrap;
        }

        padding: 10px 5px;
        text-align: left;

        &:first-child {
            padding-left: 10px;
        }
        &:last-child {
            padding-right: 10px;
        }
    }

    > caption {
        background-color: transparent;
        padding: 0 5px 5px 5px;
        color: var(--headings-color);
        font-size: $font-size-caption;
        line-height: $font-size-caption;
        text-align: left;

        &.nowrap {
            white-space: nowrap;
        }

        header {
            > h2 {
                border: 0;
                font-size: inherit;
                font-weight: normal;
                margin: 0;
                padding: 0;
            }

            > p {
                font-size: 0.7em;
                font-weight: normal;
                margin: 0;
                padding: 0;
            }
        }
    }

    > thead {
        > tr > th {
            background-color: var(--color--table-header);
            border-bottom: 2px solid var(--color--global-background);
            font-size: 1.0em;
        }
    }

    > tbody {
        > tr {
            > th {
                background-color: var(--color--table-header);
                text-align: left;
            }

            > td {
                border-bottom: 1px solid var(--color--table-border);
                transition: background-color 0.3s;
            }

            &.dragover > td {
                background-color: var(--color--table-header);
            }
        }
    }

    > tbody > tr.selected > td {
        background-color: var(--color--table-header);

        &:first-child {
            position: relative;

            &::before {
                display: block;
                content: '';
                position: absolute;

                top: 0;
                bottom: 0;
                left: 0;
                width: 2px;
                background-color: color--table-header;
            }
        }
    }

    > tbody > tr.new > td {
        font-weight: bold;

        &:first-child {
            position: relative;

            &::before {
                display: block;
                content: '';
                position: absolute;

                top: 0;
                bottom: 0;
                left: 0;
                width: 2px;
                background-color: var(--red);
            }
        }

        .action-menu {
            font-weight: normal;
        }
    }

    > tbody:last-of-type > tr:last-child > td {
        border-bottom: 1px solid var(--color--table-border);
    }

    // Hover effect
    &:not(.nohover) > tbody:not(.nohover) > tr:not(.nohover):hover > td:not(.nohover) {
        background-color: var(--color--table-header);
    }

    > tfoot {
        > tr > td {
            background-color: var(--color--table-header);
            border-top: 2px solid var(--color--global-background);
            padding-top: 5px;
            padding-bottom: 5px;
        }
    }

    td.avatar, th.avatar {
        padding: 5px;
    }

    .actions {
        float: right;
        text-align: right;
        white-space: nowrap;

        img, svg, input[type="image"] {
            vertical-align: middle;
        }
    }

    > caption .actions {
        font-size: $font-size-base;
        border-left: 1px solid var(--color--table-border);
        margin-bottom: -2px;
        min-height: 26px;
        padding-bottom: 3px;
        padding-left: 0.5em;
        padding-top: 4px;
    }

    td.actions, th.actions {
        float: none;
    }

    > caption {
        .caption-container {
            display: flex;
            align-items: stretch;
            justify-content: space-between;
            margin-bottom: 5px;

            img.text-bottom {
                vertical-align: middle;
            }
        }

        .caption-content {
            flex-grow: 1;
            border-right: 1px solid var(--color--table-border);
            padding-bottom: 5px;
            padding-right: 0.5em;
            margin-right: 0.5em;
        }

        .caption-actions {
            align-self: flex-end;
        }
    }

    > tbody.toggleable {
        &.toggled {
            .toggle-switch {
                @include background-icon(arr_1right);
            }

            tr:not(:first-child) {
                display: none;
            }
        }

        .toggle-switch {
            @include hide-text;
            @include background-icon(arr_1down);
            display: inline-block;
            height: $icon-size-inline;
            text-align: center;
            vertical-align: top;
            width: $icon-size-inline;
        }
    }

    dfn, small {
        display: block;
        font-weight: normal;
    }

    dfn {
        font-size: 0.8em;
        font-style: italic;
        padding-top: 0.5em;
    }

    label.required:after {
        color: red;
        content: '*';
        font-size: 1.5em;
        padding-left: 5px;
        vertical-align: middle;
    }

    &.has-form {
        input[type=text], textarea {
            box-sizing: border-box;
            min-width: 200px;
            width: 100%;
        }

        textarea {
            min-height: 100px;
        }
    }

    tfoot {
        // Fix button and select alignment
        select {
            vertical-align: middle;
            min-width: 24em;
        }

        // Adjust button margins
        .button {
            margin-bottom: 0;
            margin-top: 0;
        }
    }

    colgroup {
        col.checkbox {
            width: 24px;
        }
    }
}


// Remove trailing border and margin in content boxes if table is last element
article.studip > section > table.default:last-child {
    margin-bottom: 0;

    > tbody:last-child > tr:last-child > td {
        border-bottom: 0;
    }
}

table.withdetails {
    > tbody > tr:not(.details) > td:first-child {
        @include background-icon(arr_1right);
        background-repeat: no-repeat;
        background-position: 2px center;
        padding-left: 20px;

        > a {
            margin-left: -20px;
            padding-left: 20px;
        }
    }

    > tbody > tr.open > td {
        background-color: var(--color--table-header);
    }

    > tbody > tr.open > td:first-child {
        @include background-icon(arr_1down);
    }

    tr.details {
        display: none;
        max-height: 0px;
        overflow: hidden;
        transition: max-height 0.8s;
    }

    tr.open + tr.details {
        display: table-row;
        max-height: 200px;
        overflow: hidden;
        transition: max-height 0.8s;
        background-color: transparent !important;

        > td {
            padding-top: 0px;
            padding-bottom: 10px;

            > .detailscontainer {
                padding: 5px;
                border: 1px solid var(--color--table-border);
                margin-top: -1px;
                border-top-color: var(--color--global-background);
            }
        }
    }
}

.no-js table.withdetails tr.details {
    display: table-row;
}

@mixin sortable-dreieck($direction) {
    &::after {
        background-repeat: no-repeat;
        content: ' ';
        display: inline-block;
        height: $icon-size-inline;
        margin-left: 0;
        @include background-icon('arr_1#{$direction}', clickable, $icon-size-inline);
        vertical-align: text-bottom;
        width: $icon-size-inline;
    }
}

.sortable-table {
    .header,
    .tablesorter-header:not(.sorter-false) {
        white-space: nowrap;

        color: var(--base-color);

        &:hover {
            color: var(--active-color);
            cursor: pointer;
        }

        &.tablesorter-headerDesc:hover .tablesorter-header-inner::after {
            @include background-icon(arr_1down, status-red, $icon-size-inline);
        }

        &.tablesorter-headerAsc:hover .tablesorter-header-inner::after {
            @include background-icon(arr_1up, status-red, $icon-size-inline);
        }
    }

    .headerSortUp,
    .tablesorter-headerDesc .tablesorter-header-inner {
        @include sortable-dreieck('down');
    }

    .headerSortDown,
    .tablesorter-headerAsc .tablesorter-header-inner {
        @include sortable-dreieck('up');
    }

    .tablesorter-headerUnSorted:not(.sorter-false) .tablesorter-header-inner {
        margin-right: 15px;
    }
}

// Responsive helper
.table-scrollbox-horizontal {
    @include scrollbox-horizontal;
}

// New table form for Course Search
table.course-search {
    $max-width-s: 8em;
    $max-width-m: 48em;
    $max-width-l: 100%;
    border: 1px solid var(--color--table-border);
    padding: 0;
    border-top: 0;

    caption.legend {
        box-sizing: border-box;
        background-color: var(--color--table-header);
        border: 1px solid var(--color--table-border);
        border-bottom: 0;
        color: var(--brand-color-dark);
        font-size: 12pt;
        font-weight: bold;
        line-height: 2em;
        padding: 0;
        text-align: left;
        text-indent: 15px;
    }
}

// Show Tree Table
table.show-tree {
    width: 100%;
    padding: 0 10px 10px 10px;

    td.b-top-va-center {
        border-top: 1px solid var(--color--table-border);
        padding-top: 10px;
        vertical-align: middle;
    }

    img[role=root-icon] {
        position: relative;
        top: 1px;
    }

    div.sem-root-icon {
        display: inline-block;
        vertical-align: top;
    }

    div.sem-path {
        display: inline-block;
        padding-left: 5px;
        div.sem_path_info {
            padding-top: 10px;

            div.sem_path_title {
                font-weight: bold;
                font-size: 1.4em;
                margin: 3px 0 5px 0;
            }

            div.sem_path_text {
                padding-top: 2px;
            }
        }
    }

    table.show-tree-kids {
        width: 100%;

        td.kids-tree-row {
            width: 50%;
        }

        ul.semtree {
            padding-left: 0 !important;

            a {
                padding-top: 5px !important;
                padding-bottom: 3px !important;
                padding-left: 14px !important;
                margin-left: -4px !important;
                display: block;
            }

            a:hover {
                background-color: var(--color--table-header) !important;
                color: var(--base-color) !important;
            }
        }

    }
}