{"version":3,"file":"stylesheets/448.css?h=f710009e52333cc00c8d","mappings":"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","sources":["webpack://@studip/core/./resources/vue/components/courseware/structural-element/CoursewareTreeItemAdder.vue","webpack://@studip/core/./resources/vue/components/courseware/structural-element/CoursewareToolsContents.vue","webpack://@studip/core/./resources/vue/components/courseware/structural-element/CoursewareRootContent.vue","webpack://@studip/core/./resources/vue/components/courseware/structural-element/CoursewareFeedbackPopup.vue","webpack://@studip/core/VueSelect/src/css/global/variables.css","webpack://@studip/core/VueSelect/src/css/global/component.css","webpack://@studip/core/VueSelect/src/css/global/animations.css","webpack://@studip/core/VueSelect/src/css/global/states.css","webpack://@studip/core/VueSelect/src/css/modules/dropdown-toggle.css","webpack://@studip/core/VueSelect/src/css/modules/open-indicator.css","webpack://@studip/core/VueSelect/src/css/modules/clear.css","webpack://@studip/core/VueSelect/src/css/modules/dropdown-menu.css","webpack://@studip/core/VueSelect/src/css/modules/dropdown-option.css","webpack://@studip/core/VueSelect/src/css/modules/selected.css","webpack://@studip/core/VueSelect/src/css/modules/search-input.css","webpack://@studip/core/VueSelect/src/css/modules/spinner.css","webpack://@studip/core/./resources/vue/components/StudipSquareButton.vue","webpack://@studip/core/./resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogExportChooser.vue"],"sourcesContent":["\n.cw-tree-root-list > .cw-tree-item.cw-tree-item-adder > .cw-tree-item-wrapper {\n    border-bottom: none;\n}\n.cw-tree-item-adder {\n    .add-element {\n        border: none;\n        cursor: pointer;\n        background-color: transparent;\n        height: 28px;\n        img {\n            vertical-align: middle;\n        }\n    }\n}\n","\n.cw-tools-contents-header {\n    display: flex;\n    flex-direction: row;\n    height: 100px;\n    margin-top: 8px;\n    .cw-tools-contents-header-image {\n        height: 100px;\n        width: 150px;\n        min-width: 150px;\n        background-size: 100% auto;\n        background-repeat: no-repeat;\n        background-position: center;\n        background-color: var(--content-color-20);\n    }\n\n    .cw-tools-contents-header-details {\n        margin: 0 8px;\n        display: -webkit-box;\n        overflow: hidden;\n        height: 100px;\n        -webkit-line-clamp: 5;\n        -webkit-box-orient: vertical;\n        header {\n            margin: 0 0 6px 0;\n            font-size: 16px;\n            line-height: 16px;\n        }\n        p {\n            margin: 0;\n            color: var(--black);\n        }\n    }\n}\n.root-is-current {\n    .cw-tools-contents-header-details {\n        header {\n            color: var(--black);\n            font-weight: 600;\n        }\n    }\n}\n.root-is-hidden {\n    .cw-tools-contents-header-details {\n        header {\n            color: var(--black);\n        }\n    }\n}\n","\n.cw-root-content {\n    max-width: 1095px;\n    margin-bottom: 1em;\n    overflow: hidden;\n    .cw-root-content-img {\n        background-position: center;\n        background-size: cover;\n        background-repeat: no-repeat;\n    }\n    .cw-root-content-description {\n        display: flex;\n        position: relative;\n        flex-direction: column;\n        margin: 0 1em;\n        padding: 1em 4px 1em 1em;\n        top: 1em;\n        gap: 10px;\n\n        .cw-root-content-description-img {\n            min-width: 135px;\n            height: 90px;\n            background-color: #fff;\n            background-size: cover;\n            background-position: center;\n            margin-right: 1em;\n        }\n        .cw-root-content-description-text {\n            max-height: calc(480px - 18em);\n            overflow-y: auto;\n            &::-webkit-scrollbar {\n                width: 2px;\n            }\n\n            &::-webkit-scrollbar-track {\n                box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);\n            }\n\n            &::-webkit-scrollbar-thumb {\n                background-color: rgba(0, 0, 0, 0.4);\n            }\n            h1,\n            p {\n                color: #fff;\n                margin-right: 2em;\n            }\n        }\n    }\n}\n.cw-root-content-toc {\n    max-width: 1095px;\n    margin-bottom: 1em;\n    .cw-root-content-description {\n        height: calc(100% - 4em);\n        .cw-root-content-description-text {\n            max-height: calc(300px - 6em);\n        }\n    }\n    .cw-root-content-toc-tile-footer {\n        line-height: 4em;\n    }\n}\n.cw-root-content-hint {\n    max-width: 1095px;\n}\n\n.size-small {\n    .cw-root-content-description {\n        flex-direction: row;\n        padding: 1em 4px 1em 1em;\n\n        .cw-root-content-description-img {\n            min-width: 135px;\n            height: 90px;\n        }\n    }\n\n    .cw-root-content-default {\n        .cw-root-content-description {\n            margin: 0 4em;\n            top: 8em;\n        }\n    }\n    .cw-root-content-toc {\n        .cw-root-content-description {\n            height: calc(100% - 6em);\n            margin: 0 4em;\n            top: 1.5em;\n        }\n    }\n}\n\n.size-large {\n    .cw-root-content-description {\n        flex-direction: row;\n        padding: 2em 4px 2em 2em;\n\n        .cw-root-content-description-img {\n            min-width: 270px;\n            height: 180px;\n        }\n    }\n\n    .cw-root-content-default {\n        .cw-root-content-description {\n            margin: 0 8em;\n            top: 8em;\n        }\n    }\n    .cw-root-content-toc {\n        .cw-root-content-description {\n            height: calc(100% - 7em);\n            margin: 0 8em;\n            top: 1.5em;\n        }\n    }\n}\n","<template>\n    <studip-dialog\n        height=\"430\"\n        width=\"600\"\n        :title=\"$gettext('Feedback')\"\n        :confirmText=\"$gettext('Feedback abgeben')\"\n        confirmClass=\"accept\"\n        :closeText=\"$gettext('Schließen')\"\n        closeClass=\"cancel\"\n        @close=\"$emit('close')\"\n        @confirm=\"submitEntry\"\n    >\n        <template v-slot:dialogContent>\n            <h2>{{ $gettextInterpolate($gettext('Bewertung für %{title}'),  { title: structuralElement.attributes.title }) }}</h2>\n\n            <div class=\"feedback-entry-create\">\n                <studip-five-stars-input v-model=\"rating\" />\n                <label v-if=\"isCommentable\">\n                    {{ $gettext('Kommentar') }}\n                    <textarea v-model=\"comment\"></textarea>\n                </label>\n                <label v-if=\"anonymousEntriesEnabled\">\n                    <input type=\"checkbox\" v-model=\"anonymous\" />\n                    {{ $gettext('Feedback anonym abgeben') }}\n                </label>\n            </div>\n        </template>\n    </studip-dialog>\n</template>\n<script>\nimport StudipFiveStarsInput from '../../feedback/StudipFiveStarsInput.vue';\n\nimport { mapActions, mapGetters } from 'vuex';\n\nexport default {\n    name: 'courseware-feedback-popup',\n    components: {\n        StudipFiveStarsInput,\n    },\n    props: {\n        feedbackElement: {\n            type: Object,\n            required: true,\n        },\n    },\n    data() {\n        return {\n            rating: 0,\n            comment: '',\n            anonymous: false\n        };\n    },\n    computed: {\n        ...mapGetters({\n            currentUser: 'currentUser',\n            structuralElementById: 'courseware-structural-elements/byId',\n        }),\n        structuralElement() {\n            return this.structuralElementById({ id: this.feedbackElement.relationships.range.data.id });\n        },\n        anonymousEntriesEnabled() {\n            return this.feedbackElement.attributes['anonymous-entries'];\n        },\n        isCommentable() {\n            return this.feedbackElement.attributes['is-commentable'];\n        }\n    },\n    methods: {\n        ...mapActions({\n            createFeedbackEntries: 'feedback-entries/create',\n        }),\n        submitEntry() {\n            let data = {\n                attributes: {\n                    rating: this.rating,\n                },\n                relationships: {\n                    'feedback-element': {\n                        data: {\n                            type: 'feedback-elements',\n                            id: this.feedbackElement.id,\n                        },\n                    },\n                    author: {\n                        data: {\n                            id: this.currentUser.id,\n                            type: 'users',\n                        },\n                    },\n                },\n            };\n            if (this.isCommentable) {\n                data.attributes.comment = this.comment\n            }\n            if (this.anonymousEntriesEnabled) {\n                data.attributes.anonymous = this.anonymous;\n            }\n            this.createFeedbackEntries(data);\n            this.$emit('submit');\n        },\n    },\n};\n</script>\n<style scoped>\nh2 {\n    margin-top: 0;\n    margin-bottom: 20px;\n}\n</style>\n",":root {\n    --vs-colors--lightest: rgba(60, 60, 60, 0.26);\n    --vs-colors--light: rgba(60, 60, 60, 0.5);\n    --vs-colors--dark: #333;\n    --vs-colors--darkest: rgba(0, 0, 0, 0.15);\n\n    /* Search Input */\n    --vs-search-input-color: inherit;\n    --vs-search-input-bg: rgb(255, 255, 255);\n    --vs-search-input-placeholder-color: inherit;\n\n    /* Font */\n    --vs-font-size: 1rem;\n    --vs-line-height: 1.4;\n\n    /* Disabled State */\n    --vs-state-disabled-bg: rgb(248, 248, 248);\n    --vs-state-disabled-color: var(--vs-colors--light);\n    --vs-state-disabled-controls-color: var(--vs-colors--light);\n    --vs-state-disabled-cursor: not-allowed;\n\n    /* Borders */\n    --vs-border-color: var(--vs-colors--lightest);\n    --vs-border-width: 1px;\n    --vs-border-style: solid;\n    --vs-border-radius: 4px;\n\n    /* Actions: house the component controls */\n    --vs-actions-padding: 4px 6px 0 3px;\n\n    /* Component Controls: Clear, Open Indicator */\n    --vs-controls-color: var(--vs-colors--light);\n    --vs-controls-size: 1;\n    --vs-controls--deselect-text-shadow: 0 1px 0 #fff;\n\n    /* Selected */\n    --vs-selected-bg: #f0f0f0;\n    --vs-selected-color: var(--vs-colors--dark);\n    --vs-selected-border-color: var(--vs-border-color);\n    --vs-selected-border-style: var(--vs-border-style);\n    --vs-selected-border-width: var(--vs-border-width);\n\n    /* Dropdown */\n    --vs-dropdown-bg: #fff;\n    --vs-dropdown-color: inherit;\n    --vs-dropdown-z-index: 1000;\n    --vs-dropdown-min-width: 160px;\n    --vs-dropdown-max-height: 350px;\n    --vs-dropdown-box-shadow: 0px 3px 6px 0px var(--vs-colors--darkest);\n\n    /* Options */\n    --vs-dropdown-option-bg: #000;\n    --vs-dropdown-option-color: var(--vs-dropdown-color);\n    --vs-dropdown-option-padding: 3px 20px;\n\n    /* Active State */\n    --vs-dropdown-option--active-bg: #5897fb;\n    --vs-dropdown-option--active-color: #fff;\n\n    /* Deselect State */\n    --vs-dropdown-option--deselect-bg: #fb5858;\n    --vs-dropdown-option--deselect-color: #fff;\n\n    /* Transitions */\n    --vs-transition-timing-function: cubic-bezier(1, -0.115, 0.975, 0.855);\n    --vs-transition-duration: 150ms;\n}\n",".v-select {\n  position: relative;\n  font-family: inherit;\n}\n\n.v-select,\n.v-select * {\n  box-sizing: border-box;\n}\n",":root {\n    --vs-transition-timing-function: cubic-bezier(1, 0.5, 0.8, 1);\n    --vs-transition-duration: 0.15s;\n}\n\n/* KeyFrames */\n@-webkit-keyframes vSelectSpinner {\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n}\n\n@keyframes vSelectSpinner {\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n}\n\n/* Dropdown Default Transition */\n.vs__fade-enter-active,\n.vs__fade-leave-active {\n    pointer-events: none;\n    transition: opacity var(--vs-transition-duration)\n        var(--vs-transition-timing-function);\n}\n.vs__fade-enter,\n.vs__fade-leave-to {\n    opacity: 0;\n}\n","/** Component States */\n\n/*\n * Disabled\n *\n * When the component is disabled, all interaction\n * should be prevented. Here we modify the bg color,\n * and change the cursor displayed on the interactive\n * components.\n */\n\n:root {\n    --vs-disabled-bg: var(--vs-state-disabled-bg);\n    --vs-disabled-color: var(--vs-state-disabled-color);\n    --vs-disabled-cursor: var(--vs-state-disabled-cursor);\n}\n\n.vs--disabled {\n    .vs__dropdown-toggle,\n    .vs__clear,\n    .vs__search,\n    .vs__selected,\n    .vs__open-indicator {\n        cursor: var(--vs-disabled-cursor);\n        background-color: var(--vs-disabled-bg);\n    }\n}\n\n/*\n *  RTL - Right to Left Support\n *\n *  Because we're using a flexbox layout, the `dir=\"rtl\"`\n *  HTML attribute does most of the work for us by\n *  rearranging the child elements visually.\n */\n\n.v-select[dir='rtl'] {\n    .vs__actions {\n        padding: 0 3px 0 6px;\n    }\n\n    .vs__clear {\n        margin-left: 6px;\n        margin-right: 0;\n    }\n\n    .vs__deselect {\n        margin-left: 0;\n        margin-right: 2px;\n    }\n\n    .vs__dropdown-menu {\n        text-align: right;\n    }\n}\n","/**\n    Dropdown Toggle\n\n    The dropdown toggle is the primary wrapper of the component. It\n    has two direct descendants: .vs__selected-options, and .vs__actions.\n\n    .vs__selected-options holds the .vs__selected's as well as the\n    main search input.\n\n    .vs__actions holds the clear button and dropdown toggle.\n */\n\n.vs__dropdown-toggle {\n    appearance: none;\n    display: flex;\n    padding: 0 0 4px 0;\n    background: var(--vs-search-input-bg);\n    border: var(--vs-border-width) var(--vs-border-style) var(--vs-border-color);\n    border-radius: var(--vs-border-radius);\n    white-space: normal;\n}\n\n.vs__selected-options {\n    display: flex;\n    flex-basis: 100%;\n    flex-grow: 1;\n    flex-wrap: wrap;\n    padding: 0 2px;\n    position: relative;\n}\n\n.vs__actions {\n    display: flex;\n    align-items: center;\n    padding: var(--vs-actions-padding);\n}\n\n/* Dropdown Toggle States */\n.vs--searchable .vs__dropdown-toggle {\n    cursor: text;\n}\n.vs--unsearchable .vs__dropdown-toggle {\n    cursor: pointer;\n}\n.vs--open .vs__dropdown-toggle {\n    border-bottom-color: transparent;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n}\n","/* Open Indicator */\n\n/*\n  The open indicator appears as a down facing\n  caret on the right side of the select.\n */\n\n.vs__open-indicator {\n    fill: var(--vs-controls-color);\n    transform: scale(var(--vs-controls-size));\n    transition: transform var(--vs-transition-duration)\n        var(--vs-transition-timing-function);\n    transition-timing-function: var(--vs-transition-timing-function);\n}\n\n/* Open State */\n\n.vs--open .vs__open-indicator {\n    transform: rotate(180deg) scale(var(--vs-controls-size));\n}\n\n/* Loading State */\n\n.vs--loading .vs__open-indicator {\n    opacity: 0;\n}\n","/* Clear Button */\n\n.vs__clear {\n    fill: var(--vs-controls-color);\n    padding: 0;\n    border: 0;\n    background-color: transparent;\n    cursor: pointer;\n    margin-right: 8px;\n}\n","/* Dropdown Menu */\n\n.vs__dropdown-menu {\n    display: block;\n    box-sizing: border-box;\n    position: absolute;\n    /* calc to ensure the left and right borders of the dropdown appear flush with the toggle. */\n    top: calc(100% - var(--vs-border-width));\n    left: 0;\n    z-index: var(--vs-dropdown-z-index);\n    padding: 5px 0;\n    margin: 0;\n    width: 100%;\n    max-height: var(--vs-dropdown-max-height);\n    min-width: var(--vs-dropdown-min-width);\n    overflow-y: auto;\n    box-shadow: var(--vs-dropdown-box-shadow);\n    border: var(--vs-border-width) var(--vs-border-style) var(--vs-border-color);\n    border-top-style: none;\n    border-radius: 0 0 var(--vs-border-radius) var(--vs-border-radius);\n    text-align: left;\n    list-style: none;\n    background: var(--vs-dropdown-bg);\n    color: var(--vs-dropdown-color);\n}\n\n.vs__no-options {\n    text-align: center;\n}\n","/* List Items */\n.vs__dropdown-option {\n    line-height: 1.42857143; /* Normalize line height */\n    display: block;\n    padding: var(--vs-dropdown-option-padding);\n    clear: both;\n    color: var(--vs-dropdown-option-color); /* Overrides most CSS frameworks */\n    white-space: nowrap;\n    cursor: pointer;\n}\n\n.vs__dropdown-option--highlight {\n    background: var(--vs-dropdown-option--active-bg);\n    color: var(--vs-dropdown-option--active-color);\n}\n\n.vs__dropdown-option--deselect {\n    background: var(--vs-dropdown-option--deselect-bg);\n    color: var(--vs-dropdown-option--deselect-color);\n}\n\n.vs__dropdown-option--disabled {\n    background: var(--vs-state-disabled-bg);\n    color: var(--vs-state-disabled-color);\n    cursor: var(--vs-state-disabled-cursor);\n}\n","/* Selected Tags */\n.vs__selected {\n    display: flex;\n    align-items: center;\n    background-color: var(--vs-selected-bg);\n    border: var(--vs-selected-border-width) var(--vs-selected-border-style)\n        var(--vs-selected-border-color);\n    border-radius: var(--vs-border-radius);\n    color: var(--vs-selected-color);\n    line-height: var(--vs-line-height);\n    margin: 4px 2px 0px 2px;\n    padding: 0 0.25em;\n    z-index: 0;\n}\n\n.vs__deselect {\n    display: inline-flex;\n    appearance: none;\n    margin-left: 4px;\n    padding: 0;\n    border: 0;\n    cursor: pointer;\n    background: none;\n    fill: var(--vs-controls-color);\n    text-shadow: var(--vs-controls--deselect-text-shadow);\n}\n\n/* States */\n\n.vs--single {\n    .vs__selected {\n        background-color: transparent;\n        border-color: transparent;\n    }\n    &.vs--open .vs__selected,\n    &.vs--loading .vs__selected {\n        position: absolute;\n        opacity: 0.4;\n    }\n    &.vs--searching .vs__selected {\n        display: none;\n    }\n}\n","/* Search Input */\n\n/**\n * Super weird bug... If this declaration is grouped\n * below, the cancel button will still appear in chrome.\n * If it's up here on it's own, it'll hide it.\n */\n.vs__search::-webkit-search-cancel-button {\n    display: none;\n}\n\n.vs__search::-webkit-search-decoration,\n.vs__search::-webkit-search-results-button,\n.vs__search::-webkit-search-results-decoration,\n.vs__search::-ms-clear {\n    display: none;\n}\n\n.vs__search,\n.vs__search:focus {\n    color: var(--vs-search-input-color);\n    appearance: none;\n    line-height: var(--vs-line-height);\n    font-size: var(--vs-font-size);\n    border: 1px solid transparent;\n    border-left: none;\n    outline: none;\n    margin: 4px 0 0 0;\n    padding: 0 7px;\n    background: none;\n    box-shadow: none;\n    width: 0;\n    max-width: 100%;\n    flex-grow: 1;\n    z-index: 1;\n}\n\n.vs__search::placeholder {\n    color: var(--vs-search-input-placeholder-color);\n}\n\n/**\n    States\n */\n\n/* Unsearchable */\n.vs--unsearchable {\n    .vs__search {\n        opacity: 1;\n    }\n    &:not(.vs--disabled) .vs__search {\n        cursor: pointer;\n    }\n}\n\n/* Single, when searching but not loading or open */\n.vs--single.vs--searching:not(.vs--open):not(.vs--loading) {\n    .vs__search {\n        opacity: 0.2;\n    }\n}\n","/* Loading Spinner */\n.vs__spinner {\n    align-self: center;\n    opacity: 0;\n    font-size: 5px;\n    text-indent: -9999em;\n    overflow: hidden;\n    border-top: 0.9em solid rgba(100, 100, 100, 0.1);\n    border-right: 0.9em solid rgba(100, 100, 100, 0.1);\n    border-bottom: 0.9em solid rgba(100, 100, 100, 0.1);\n    border-left: 0.9em solid rgba(60, 60, 60, 0.45);\n    transform: translateZ(0)\n        scale(var(--vs-controls--spinner-size, var(--vs-controls-size)));\n    animation: vSelectSpinner 1.1s infinite linear;\n    transition: opacity 0.1s;\n}\n.vs__spinner,\n.vs__spinner:after {\n    border-radius: 50%;\n    width: 5em;\n    height: 5em;\n    transform: scale(var(--vs-controls--spinner-size, var(--vs-controls-size)));\n}\n\n/* Loading Spinner States */\n.vs--loading .vs__spinner {\n    opacity: 1;\n}\n","\n$size: 130px;\n.square-button {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    max-height: $size;\n    max-width: $size;\n    min-width: $size;\n    min-height: $size;\n    margin: 10px;\n    padding: 10px;\n    background-color: transparent;\n    border: solid thin var(--content-color-40);\n    cursor: pointer;\n\n    img {\n        width: 100%;\n        height: 50px;\n        margin-bottom: 8px;\n    }\n    span {\n        color: var(--base-color);\n        min-width: 110px;\n    }\n    &:hover span {\n        color: var(--red);\n    }\n}\n","\n.square-button-panel {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    width: 100%;\n    justify-content: center;\n}\n"],"names":[],"sourceRoot":""}