courseware.scss

/* definitions */

$companion-types: (
    default: basic,
    unsure: unsure,
    special: special,
    alert: alert,
    sad: sad,
    happy: happy,
    pointing: pointing-right,
    curious: curious
);

$element-icons: (
    content: content2,
    draft: category-draft,
    task: category-task,
    template: category-template,
    oer: oer-campus,
    other: category-others,
    portfolio: category-portfolio
);

$tree-item-flag-icons: (
    date: date,
    write: edit,
    cant-read: lock-locked2
);

$tile-colors: (
    black: #000,
    charcoal: #3c454e,
    royal-purple: #8656a2,
    iguana-green: #66b570,
    queen-blue: #536d96,
    verdigris: #41afaa,
    mulberry: #bf5796,
    pumpkin: #f26e00,
    sunglow: #ffca5c,
    apple-green: #8bbd40,
    studip-blue: #28497c,
    studip-lightblue: #e7ebf1,
    studip-red: #d60000,
    studip-green: #008512,
    studip-yellow: #ffbd33,
    studip-gray: #636a71,
);

$icon-colors:(
    icon-red: #cb1800,
    icon-blue: #24437c,
    icon-green: #00962d,
    icon-gray: #6e6e6e,
    icon-yellow: #ffad00
);

$blockadder-items: (
    before-after: block-comparison,
    canvas: block-canvas,
    gallery: block-gallery,
    image-map: block-imagemap,
    audio: audio,
    chart: vote,
    code: computer,
    confirm: accept,
    date: date,
    dialog-cards: dialog-cards,
    document: file-text,
    download: download,
    embed: code,
    folder: folder-full,
    headline: block-eyecatcher,
    iframe: door-enter,
    key-point: exclaim-circle,
    link: link-extern,
    table-of-contents: table-of-contents,
    text: edit,
    timeline: date-cycle,
    typewriter: block-typewriter,
    video: video2,
    accordion: block-accordion,
    list: view-list,
    tabs: block-tabs,
    biography-achievements: medal,
    biography-career: ranking,
    biography-personal-information: own-license,
    biography-goals: radar
);

$achievement-types: (
    certificate: file-text,
    accreditation: vcard,
    award: medal,
    book: literature,
    publication: news,
    membership: group3,
);

$goals-types: (
    personal: person2,
    school: doctoral-cap,
    academic: doctoral-cap,
    professional: tools,
);

$media-buttons: (
    play: play,
    stop: stop,
    pause: pause,
    prev: arr_eol-left,
    next: arr_eol-right
);

$cw-wrapper-gap: 0.5em;

/* * * * * * * *
c o n t e n t s
* * * * * * * * */
.cw-content-overview {
    max-width: 1100px;
    h2 {
        margin: 0;
        font-weight: 400;
        padding: 5px 0;
        font-size: 1.4em;
    }
}

.cw-contents-overview-teaser {
    max-width: 782px;
    background-color: $content-color-20;
    background-image: url("#{$image-path}/courseware-keyvisual-negative.svg");
    background-repeat: no-repeat;
    background-size: 196px;
    background-position-y: 50%;
    background-position-x: 24px;
    padding: 24px;
    margin-bottom: 10px;

    .cw-contents-overview-teaser-content {
        padding-left: 220px;

        header{
            font-size: 1.5em;
            margin-bottom: 0.5em;
        }
    }
}
.responsive-display {
    .cw-contents-overview-teaser {
        max-width: 782px;
        background-size: 60%;
        background-position-y: 24px;
        background-position-x: 50%;
        padding: 24px;
        margin-bottom: 10px;

        .cw-contents-overview-teaser-content {
            padding-top: 28%;
            padding-left: 0;
            text-align: justify;

            header{
                font-size: 1.5em;
                margin: 1em 0 0.5em 0;
                text-align: center;
            }
        }
    }
}

.cw-loading-indicator-content {
    margin-top: 76px;
}
.cw-content-loading {
    /* Loading animation from activity feed */
    .loading-indicator {
        text-align: center;
        padding: 1em 0;
    }

    .loading-indicator span {
        background-color: #CCCCDD;
        border-radius: 50%;
        height: 10px;
        position: relative;
        width: 10px;
        display: inline-block;
    }

    .loading-indicator span.load-1 {
        animation: loading-animation-1 1s linear 20;
    }

    .loading-indicator span.load-2 {
        animation: loading-animation-2 1s linear 20;
    }

    .loading-indicator span.load-3 {
        animation: loading-animation-3 1s linear 20;
    }

    @keyframes loading-animation-1 {
      0%   { transform: scale(1); }
      16%  { transform: scale(1.3); }
      33%  { transform: scale(1); }
      100% { transform: scale(1); }
    }

    @keyframes loading-animation-2 {
      0%   { transform: scale(1); }
      33%  { transform: scale(1); }
      49%  { transform: scale(1.3); }
      65%  { transform: scale(1); }
      100% { transform: scale(1); }
    }

    @keyframes loading-animation-3 {
      0%   { transform: scale(1); }
      66%  { transform: scale(1); }
      81%  { transform: scale(1.3); }
      100% { transform: scale(1); }
    }
}

.cw-content-courses {
    h2 {
        margin: 0;
        font-weight: 400;
        padding: 5px 0;
        font-size: 1.4em;
    }
    ul.cw-tiles {
        margin-bottom: 20px;
    }
}

.cw-contents-overview-personal {
    margin-bottom: 2em;
}

/* * * * * * * * * * *
c o n t e n t s  e n d
* * * * * * * * * * */

/* * * * * *
r i b b o n
* * * * * */
$consum_ribbon_width: calc(100% - 58px);
#course-courseware-courseware,
#contents-courseware-courseware,
#contents-courseware-shared_content_courseware {
    &.consume {
        overflow: hidden;
    }
    #content-wrapper {
        position: relative;
    }
}

.cw-ribbon-wrapper-consume {
    position: fixed;
    padding: 15px;
    background-color: $white;
    width: $consum_ribbon_width;
    height: 46px;
    z-index: 42;
}
.cw-ribbon-consume-bottom {
    position: fixed;
    top: 75px;
    height: 15px;
    left: 0;
    width: calc(100% - 1em);
    background-color: $white;
    z-index: 40;
}

.cw-ribbon-sticky-top {
    position: fixed;
    top: 40px;
    height: 20px;
    width: calc(100% - 314px);
    background-color: $white;
    z-index: 40;
}
.cw-ribbon-sticky-bottom {
    position: fixed;
    top: 112px;
    height: 19px;
    width: calc(100% - 314px);
    background-color: $white;
    z-index: 39;
}
.cw-ribbon-sticky-spacer {
    height: 80px;
}
.cw-ribbon {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    min-height: 30px;
    border: solid thin $dark-gray-color-30;
    margin-bottom: 15px;
    padding: 1em;
    justify-content: space-between;
    background-color: $dark-gray-color-5;

    &.cw-ribbon-sticky {
        position: fixed;
        top: 56px;
        width: calc(100% - 346px);
        z-index: 40;
    }

    &.cw-ribbon-consume {
        width: $consum_ribbon_width;
        position: fixed;
        margin-bottom: 0;
    }

    .cw-ribbon-wrapper-left {
        display: flex;
        max-width: calc(100% - 106px);

        .cw-ribbon-nav {
            display: flex;
            min-width: 75px;

            &.single-icon {
                min-width: 45px;
            }
        }

        .cw-ribbon-breadcrumb {
            font-size: 1.25em;
            line-height: 1.5em;
            margin-right: 1em;
            min-width: 0;

            ul {
                display: flex;
                list-style: none;
                padding-left: 0;

                li+li:before {
                    padding: 0 0.25em;
                    content: '/';
                    background-repeat: no-repeat;
                    background-position: center;
                }

                .cw-ribbon-breadcrumb-item {
                    display: inline;
                    flex-shrink: 100000;
                    min-width: 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                    a {
                        color: $base-color;
                        text-decoration: none;
                        &:hover {
                            color: $active-color;
                        }
                    }

                    &.cw-ribbon-breadcrumb-item-current {
                        flex-shrink: 1;
                    }
                }
            }
        }
    }

    .cw-ribbon-wrapper-right {
        display: flex;

        button {
            border: none;
            background-color: transparent;
            cursor: pointer;
        }
    }

    .cw-ribbon-button {
        height: 24px;
        width: 24px;
        margin: 0 7px;
        padding: 1px 2px;
        border: none;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 24px;
        cursor: pointer;

        &.cw-ribbon-button-menu {
            @include background-icon(table-of-contents, clickable, 24);
        }

        &.cw-ribbon-button-prev {
            @include background-icon(arr_1left, clickable, 24);
            margin: 0 0.5em 0 0;
        }

        &.cw-ribbon-button-next {
            @include background-icon(arr_1right, clickable, 24);
            margin: 0 1em 0 0;
        }

        &.cw-ribbon-button-prev-disabled {
            @include background-icon(arr_1left, inactive, 24);
            margin: 0 0.5em 0 0;
            cursor: default;
        }

        &.cw-ribbon-button-next-disabled {
            @include background-icon(arr_1right, inactive, 24);
            margin: 0 1em 0 0;
            cursor: default;
        }
    }

    .cw-ribbon-action-menu {
        vertical-align: text-top;
        margin: 2px 0 0 2px;
        &.is-open {
            z-index: 32;
        }
    }
}

.cw-ribbon-tools {
    background-color: $white;
    border: solid thin $content-color-40;
    box-shadow: 2px 2px #ccc;
    position: absolute;
    right: -570px;
    top: 0;
    height: 100%;
    max-width: calc(100% - 28px);
    display: flex;
    flex-flow: row;
    transition: right 0.8s;
    z-index: 42;

    &.unfold {
        right: 0px;
    }

    &.cw-ribbon-tools-consume {
        position: fixed;
        &.unfold {
            right: 15px;
        }
    }

    &.cw-ribbon-tools-sticky {
        position: absolute;
        top: -1px;
    }

    .cw-ribbon-tool-content {
        height: 100%;
        width: 540px;
        background-color:$white;
        padding: 0;
        overflow: hidden;


        .cw-ribbon-tool-content-nav {
            position: sticky;
            height: 100%;
            top: 0;
            background-color: $white;
            margin: 0;
            padding: 0;
            color: $base-color;
            display: flex;
            z-index: 43;

            .cw-tools-hide-button {
                position: absolute;
                border: none;
                height: 36px;
                width: 24px;
                min-width: 24px;
                margin-right: 1em;
                padding: 0 4px;
                right: 0;
                top: 12px;
                cursor: pointer;

                @include background-icon(decline, clickable, 24);
                background-repeat: no-repeat;
                background-size: 24px;
                background-position: center right;
                background-color: #fff;
            }

            >.cw-ribbon-tool-content-tablist {
                width: 100%;
                height: 100%;
                >.cw-tabs-nav {
                    border: none;
                    width: calc(100% - 48px);

                    >button {
                        padding: 18px 8px 4px 8px;
                        margin-top: 2px;
                        max-width: unset;
                        flex-grow: 0.5;
                        &::after {
                            margin-top: 16px;
                        }
                    }

                }
                >.cw-tabs-content {
                    border: none;
                    border-top: solid thin $content-color-40;
                    padding: 0;
                    height: calc(100% - 58px);

                    >.cw-tab {
                        height: calc(100% - 22px);
                        padding: 14px 8px 8px 8px;
                        position: relative;
                        overflow-y: auto;
                        overflow-x: hidden;
                        scrollbar-width: thin;
                        scrollbar-color: $base-color $white;

                        &.cw-ribbon-tool-blockadder-tab {
                            height: 100%;
                            overflow: hidden;
                            padding: 0;
                        }
                    }
                }
            }
        }

        .cw-ribbon-tool {
            padding: 14px 8px 6px 8px;
            height: calc(100% - 64px);
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: thin;
            scrollbar-color: $base-color $white;
        }
    }
}

#courseware-public-index {
    .cw-ribbon-tools {
        top: 127px;

        &.cw-ribbon-tools-consume {
            top: 14px;
        }

        &.cw-ribbon-tools-sticky {
            top: 56px;
        }
    }
}

.cw-structural-element-consumemode {
    .cw-ribbon-tools {
        top: 14px;
    }
}

.responsive-display {
    .cw-ribbon-sticky-top,
    .cw-ribbon-sticky-bottom,
    .cw-ribbon-wrapper-consume,
    .cw-ribbon-consume-bottom {
        width: 100%;
    }
    .cw-ribbon {
        &.cw-ribbon-sticky {
            width: calc(100% - 62px);
        }
    }
    .cw-ribbon-sticky-spacer {
        height: 75px;
    }
}

/* * * * * *
ribbon end
* * * * * */


/* * * * * * * * *
 structual element
* * * * * * * * * */

.cw-structural-element {

    &.cw-structural-element-consumemode {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        padding: 0;
        background-color: $white;
        z-index: 1004;
        overflow-y: scroll;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: $base-color #f5f5f5;
    }

    .cw-welcome-screen {
        .cw-welcome-screen-keyvisual {
            margin: 14px 0 42px 0;
            width: 100%;
            height: 400px;
            background-image: url('../../assets/images/courseware-keyvisual.svg');
            background-repeat: no-repeat;
            background-position: center center;
        }
        header {
            padding: 0.5em 0;
            text-align: center;
            font-size: 2.25em;
        }
        .cw-welcome-screen-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

    }

    .cw-structural-element-discussion {
        max-width: 1606px;
        width: 100%;
        margin-bottom: 1em;
    }

    .cw-container-wrapper {
        max-width: $max-content-width;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: space-between;

        &.cw-container-wrapper-consume {
            margin: 0 auto;
            padding: 91px 15px 15px 15px;
        }

        &.cw-container-wrapper-discuss {
            max-width: 1606px;
        }
    }

    .cw-structural-element-description {
        width: 400px;
        height: 200px;
        overflow-y: auto;
        resize: none;
    }
    .cw-structural-element-color {
        color: $white;
        &.black {
            background-color: map-get($tile-colors, "black");
        }
        &.charcoal {
            background-color: map-get($tile-colors, "charcoal");
        }
        &.royal-purple {
            background-color: map-get($tile-colors, "royal-purple");
        }
        &.iguana-green {
            background-color: map-get($tile-colors, "iguana-green");
        }
        &.queen-blue {
            background-color: map-get($tile-colors, "queen-blue");
        }
        &.verdigris {
            background-color: map-get($tile-colors, "verdigris");
        }
        &.mulberry {
            background-color: map-get($tile-colors, "mulberry");
        }
        &.pumpkin {
            background-color: map-get($tile-colors, "pumpkin");
        }
        &.sunglow {
            background-color: map-get($tile-colors, "sunglow");
        }
        &.apple-green {
            background-color: map-get($tile-colors, "apple-green");
        }

        &.studip-blue {
            background-color: map-get($tile-colors, "studip-blue");
        }
        &.studip-lightblue {
            background-color: map-get($tile-colors, "studip-lightblue");
        }
        &.studip-red {
            background-color: map-get($tile-colors, "studip-red");
        }
        &.studip-green {
            background-color: map-get($tile-colors, "studip-green");
        }
        &.studip-yellow {
            background-color: map-get($tile-colors, "studip-yellow");
        }
        &.studip-gray {
            background-color: map-get($tile-colors, "studip-gray");
        }
    }

    .cw-structural-element-info {
        width: 600px;
        tr:first-child {
            width: 12em;
            vertical-align: top;
        }
    }
}

.cw-structural-element-dialog {
    input[type=text] {
        width: 20em;
    }
}

.cw-structural-element-image-preview {
    display: block;
    max-width: 300px;
    max-height: 256px;
    width: auto;
    height: auto;
    margin: 0 auto;
}

.cw-structural-element-image-preview-placeholder {
    width: 400px;
    height: 225px;
    background-color: $black;
}

.cw-element-permissions {
    label {
        display: block;
        padding: 6px 0;
    }
    table.default {
        > caption {
            padding: 0;
            font-size: 1.25em;
        }
        td.perm {
            input.right, input.date {
                cursor: pointer !important;
            }
        }
    }
    button.cw-add-persons {
        margin-left: 4px;
    }
    button.cw-permission-delete {
        width: 24px;
        height: 24px;
        border: none;
        background-color: transparent;
        @include background-icon(trash, clickable);
        background-repeat: no-repeat;
        cursor: pointer;
    }
}

.cw-element-export {
    label {
        input {
            vertical-align: middle;
        }

        span {
            vertical-align: middle;
        }
    }
}



/* * * * * * * * * * * *
 structual element end
* * * * * * * * * * * */

/* * * * *
 container
* * * * */
.cw-container {
    margin-bottom: 1em;

    &.cw-container-colspan-full {
        max-width: $max-content-width;
        width: 100%;
    }
    &.cw-container-colspan-half {
        max-width: 540px;
        width: 100%;
    }
    &.cw-container-colspan-half-center {
        width: $max-content-width;
        .cw-container-content {
            max-width: 540px;
            margin: auto;
        }
    }

    .cw-container-header {
        background-color: $content-color-20;
        max-height: 30px;
        padding: 4px 10px 4px 22px;

        .cw-container-header-toggle {
            display: inline-block;
            width: calc(100% - 40px);
        }

        span {
            color: $base-color;
            font-weight: 700;
            line-height: 2em;
            font-size: 1.1em;

            &.cw-default-container-blocker-warning {
                font-weight: 400;
            }
        }

        img {
            vertical-align: text-bottom;
        }

        .cw-container-actions {
            position: relative;
            float: right;
            margin-top: 4px;
            // z-index: 31;
            .is-open {
                z-index: 31;
            }
        }
    }

    &.cw-container-active {
        .cw-container-content {
            border: solid thin $content-color-40;
        }
    }


    .cw-block-wrapper {
        padding: 0;
        margin: 0;
        list-style: none;

        &.cw-block-wrapper-active {
            padding: 14px 10px;
        }

        .cw-block-item {
            padding: 0;
            margin: 0 0 1em 0;
        }
    }

    .cw-container-list-block-list {
        padding: 0;
        list-style: none;
    }

    .cw-container-tabs-block-list {
        list-style: none;
        padding: 1em 1em 0 1em;
    }

    .cw-container-accordion-block-list {
        list-style: none;
        padding: 0 1em;
    }
}

.cw-container-section-delete {
    img {
        cursor: pointer;
    }
}

form.cw-container-dialog-edit-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    fieldset {
        max-width: 200px;
    }
}

.cw-container-wrapper-discuss {
    flex-direction: column;

    .cw-container-colspan-full {
        max-width: unset;
    }
    .cw-container-colspan-half-center,
    .cw-container-colspan-half {
        max-width: 1050px;
    }
    .cw-container-colspan-half-center {
        width: 100%;
        .cw-container-content {
            width: 1050px;
        }
    }
}

/* * * * * * *
 container end
* * * * * * */

/* * *
 block
* * */
.cw-default-block {
    display: flex;
    flex-flow: row;
    .cw-default-block-invisible-info {
        img {
            vertical-align: text-bottom;
        }
    }

}
.cw-content-wrapper {
    display: flex;
    flex-flow: column;
    width: 100%;
    .cw-block-content {
        overflow: auto;
        position: relative;
    }
}
.cw-content-wrapper-active {
    border: solid thin $content-color-40;
    .cw-block-content {
        padding: $cw-wrapper-gap;
    }
}
.cw-container-wrapper-discuss {
    .cw-container-colspan-full {
        .cw-content-wrapper {
            max-width: $max-content-width;
        }
    }
    .cw-container-colspan-half,
    .cw-container-colspan-half-center {
        .cw-content-wrapper {
            max-width: 540px;
        }
    }
}
.cw-block-header {
    background-color: $content-color-20;
    max-height: 30px;
    padding: 4px 10px 4px 22px;

    .cw-block-header-toggle {
        display: inline-block;
        width: calc(100% - 50px);
    }

    span {
        color: $base-color;
        font-weight: 700;
        line-height: 2em;
        font-size: 1.1em;

        &.cw-default-block-invisible-info,
        &.cw-default-block-blocker-warning {
            font-weight: 400;
        }
    }