tao-test/app/tao/views/scss/layout.scss

@import "inc/bootstrap";

/*
 * 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; under version 2
 * of the License (non-upgradable).
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 *
 * Copyright (c) 2008-2010 (original work) Deutsche Institut für Internationale Pädagogische Forschung (under the project TAO-TRANSFER);
 *               2009-2012 (update and modification) Public Research Centre Henri Tudor (under the project TAO-SUSTAIN & TAO-DEV);
 *
 */

//@TODO in the long run all icons need to be changed to vectors!

.no-js {
    .content-wrap, footer {
        display:none;
    }
}

html, body, .content-wrap, #footer {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding : 0;
}

html {
    height: 100%;
}

html body {
    height: 100%;
    position: relative;
}


/* Main containers */
.container-title {
    padding: 4px;
    font-size: 1em;
}

.container-content {
    font-size: 1em;
    overflow-y: auto;
    min-height: 200px;
    max-height: 400px;

    .elt-info {
        display: block;
        padding: 0 5px
    }
}

#authoring-container {
    left: 0px;
    width: 100%;
    height: 600px;
}

.ext-home-container {
    padding: 1%;
    font-size: 1.1em;
}

.form-help {
    display: block;
    font-size: 10px;
    margin: 5px 0 5px 30%;
    font-style: italic;
}



/* Metadata */
#section-meta {
    position: absolute;
    bottom: 0%;
    right: 0.25%;
    width: 33%;
}

#meta-title {
    padding: 3px;
}

#meta-content table {
    border-collapse: collapse;

    th, td {
        border: solid 1px #ccc;
        font-size: 0.9em;
        color: #444;
        padding: 3px;
        margin: 0;
        width: 20%;
    }

    td {
        font-weight: normal;
    }

    .first {
        width: 30%;
    }

    .last {
        width: 50%;
    }
}

/* Results Manual Scoring Conciliation */
#coding_scoreconcil {
    #selectors {
        width: 19.5%;
        float: left;
    }

    #evalitems {
        width: 80%;
        float: right;
    }

    #navigation {
        float: left;
    }
}

.containerDisplay {
    border: 1px solid #999;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-bottom: 10px;
    position: relative;

    & > .title {
        border-bottom: 1px solid #999;
        padding: 5px 7px;
        font-weight: bold;
        background-color: #ccc;
        display: block;
        font-size: 14px;
    }

    .title a {
        font-size: 10px;
    }
}

ul.group-list, ul.group-list ul {
    padding: 0;
    margin: 0;
    border: 0;
    width: 100%;
}

ul.group-list {
    .group-title {
        padding-left: 7px;
        font-weight: bold;

        &:hover {
            background-color: #ddd;
        }
    }

    li span.label, .group-title .title {
        padding: 5px 0;
        display: inline-block;
    }

    li span.selector, .group-title .selector {
        width: 10%;
        height: 26px;
        vertical-align: top;
        display: inline-block;
        position: absolute;
        right: 0;
    }

    li {
        padding-left: 7px;
        position: relative;

        & > .checkable, .group-title > .checkable {
            background-image: url(../img/checkbox.png);
        }

        span.has-inherited {
            background-image: url(../img/checkbox_locked.png);
        }

        &.group, &.selectable {
            list-style: none;
            border-bottom: 1px solid #999;
        }

        ul.actions {
            list-style: none;
            display: inline-block;
            min-width: 8px;
            padding-right: 5px;
            width: auto;
            vertical-align: top;

            li {
                display: inline-block;
                margin: 5px 0;
                padding: 0;
                width: 16px;
                height: 16px;
            }
        }

        &:last-child {
            border-bottom: 0;
            list-style: none;
        }

        &:hover:not(.group) {
            background-color: #ccc
        }

        &.selected {
            background-color: #9f9;

            &:hover {
                background-color: #9c9;
            }
        }

        .group-title {
            background-color: rgb(240, 240, 240);
            cursor: pointer;
        }

        span.title {
            background-color: inherit;
        }

        &.expendable.closed {
            margin-bottom: 1px;

            &:last-child {
                margin-bottom: 0;
            }

            ul {
                display: none;
            }
        }

        &.group {
            padding: 0;
        }

        &.selectable {
            cursor: pointer;
        }
    }

    .selector {
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .has-access {
        & > .selector, .group-title > .selector, &:hover > .selector, &:hover .group-title > .selector {
            background-image: url(../img/checkbox_partial.png);
        }
    }

    .has-allaccess {
        & > .selector, .group-title > .selector, &:hover > .selector, &:hover .group-title > .selector {
            background-image: url(../img/checkbox_checked.png);
        }
    }

    .autoadd {
        & > .selector, .group-title > .selector, &:hover > .selector, &:hover .group-title > .selector {
            background-image: url(../img/autoadd.png);
        }

        &.checked {
            & > .selector, .group-title > .selector, &:hover > .selector, &:hover .group-title > .selector {
                background-image: url(../img/autoadd_checked.png);
            }
        }
    }
}

.selector.checkable {
    cursor: pointer
}

.group-title {
    span.ui-icon {
        display: inline-block;
        position: relative;
        top: 3px;
        left: -2px;
    }

    &.open {
        border-bottom: 1px solid #999;
    }

    .label {
        font-size: 11px;
    }
}


.tileBox {
    margin-top: 20px;
    margin-left: 20px;
    float: left;
    padding: 5px;
    background-color: #efefef;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    width: 60%;

    .boxHeader {
        font-weight: bold;
        margin: 10px;
    }

    .boxLogo {
        float: left;
        width: 30%;
        height: 100%;
    }

    .boxContent {
        float: left;
        width: 70%;
        height: 100%;
    }

    .button {
        float: right;
        margin-right: 5px;
        margin-bottom: 5px;
        padding: 5px;
        cursor: pointer;
        background-color: #aaa;
        color: #fff;
        border-width: 1px;
        border-collapse: collapse;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
    }
}

// TODO: move to tao-core-ui-fe
.secondary-props-list {
    position: relative;
    padding-left: 30px;

    > li {
        position: relative;
        list-style-type: none;
        margin-top: 10px;

        &:first-child {
            &::after {
                top: -10px;
            }
        }

        &:last-child {
            &::after {
                bottom: 50%;
            }
        }

        &::marker {
            color: #8C8C8C;
        }

        &::before {
            content: '';
            position: absolute;
            border-top: 1px solid #8C8C8C;
            top: 50%;
            left: -26px;
            width: 10px;
            margin-top: -1px;
        }

        &::after {
            content: '';
            position: absolute;
            border-left: 1px solid #8C8C8C;
            bottom: -5px;
            top: -5px;
            left: -26px;
        }

        > div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;

            &.disabled {
                background: transparent!important;
            }

            &::before {
                content: '';
                width: 6px;
                height: 6px;
                border-radius: 50%;
                border: 1px solid #8C8C8C;
                position: absolute;
                left: -16px;
            }

            label {
                margin: 0;
            }

            select, .form_radlst {
                width: calc(65% + 20px);
            }

            .form_desc {
                width: calc(35% - 20px);
            }

            .form-error {
                width: 100%;
            }
        }
    }
}