oh god

here-be-dragons.scss

@import "../mixins/typography.scss";

/// <reference path = "../variables.scss">
/// <reference path = "../elements/fonts">
/// <reference path = "../mixins.scss">

// TODO: remove
section.searchpage {
    $search-gutter-small: 25px;
    $search-gutter-mobile: 10px;
    $search-gutter-normal: 80px;
    background-color: $gray-10;

    $search-phrase-width: 720px;

    $column-width: 213px;
    $area-width: $column-width * 6;


    $filter-area-width: 1280px;
    flex: 1;

    @media(max-width: map-get($breakpoints, 'mobile')) {
        font-size: 16px;
    }

    section.block {
        &.white {
            background-color: $white;
        }

        &.header > .content {
            margin-left: auto;
            margin-right: auto;
            max-width: $search-phrase-width;
            display: flex;
            flex-direction: column;
            align-items: center;

            .title {
                @include typo-subtitle(1);
                color: $brown-dark;
                margin-top: 20px;
            }
        }
    }

    %term-font {
        font-family: $font-egyptian;
        font-size: 16px;
        font-weight: $medium;
        font-style: italic;
        margin-right: 20px;
        font-style: italic;
        cursor: pointer;

        @media(max-width: map-get($breakpoints, 'mobile')) {
            font-size: 22px;
        }
    }

    padding-bottom: $search-gutter-normal;

    @media(max-width: map-get($breakpoints, 'mobile')) {
        font-size: $search-gutter-mobile;
    }


    section#search-input {
        padding-top: 135px - 60px; // header is 60px in height;
        margin-left: auto;
        margin-right: auto;
        max-width: $search-phrase-width;

        @media(max-width: map-get($breakpoints, 'mobile')) {
            margin-left: $search-gutter-mobile;
            margin-right: $search-gutter-mobile;
        }
        // search phrase row
        > aside {
            border-bottom: 1px solid #d9dada; // unknown color;
            display: flex;
            height: 60px;
            color: $brown-dark;

            input {
                width: 100%;
                display: inline-block;
                vertical-align: top;
                border: none;
                background-color: transparent;
                outline: none;
                font-family: $font-sans;
                font-size: 56px;
                font-weight: 100;
                margin-right: 15px;

                &::-ms-clear {
                    width: 0;
                    height: 0;
                }
            }

            i.icon {
                cursor: pointer;
                line-height: 56px;
                font-size: 30px;
            }
        }
        // details text
        > span {
            color: $gray;
            margin-top: 20px;
            display: inline-block;
            font-family: $font-sans;
            font-size: 24px;
            font-weight: 100;

            &.count {
                font-weight: $semibold;
            }
        }
    }
    // terms
    section.block-facets {

        @media(max-width: map-get($breakpoints, 'mobile')) {
            background-color: $blue;
            color: $white;
        }

        .facet-selected {
            background-color: $white;
            padding-bottom: 35px;

            ul#search-facets-selected {
                display: flex;
                flex-wrap: wrap;
                padding-top: 15px;
                margin-left: auto;
                margin-right: auto;
                max-width: $search-phrase-width;

                @media(max-width: map-get($breakpoints, 'mobile')) {
                    margin-left: $search-gutter-mobile;
                    margin-right: $search-gutter-mobile;
                }

                li {
                    line-height: 30px;
                    @extend %term-font;
                    color: $blue;

                    &:after {
                        font-family: "icon";
                        text-transform: none;
                        font-style: normal;
                        font-size: 20px;
                        content: "o";
                        margin-left: 7px;
                        top: 4px;
                        position: relative;
                    }
                }
            }
        }

        .facet-termsets {
            margin-bottom: 20px;

            ul {
                display: flex;
                flex-wrap: wrap;
                cursor: pointer;
                margin-left: auto;
                margin-right: auto;
                width: $filter-area-width;

                @media(max-width: map-get($breakpoints, 'lg')) {
                    margin-left: 0;
                    margin-right: 0;
                    width: inherit;
                }

                li {

                    &.selected {
                        background-color: $brown-dark;
                        color: $white;

                        @media(max-width: map-get($breakpoints, 'mobile')) {
                            background-color: $blue;
                        }
                    }

                    background-color: $white;
                    color: $brown-dark;
                    text-transform: uppercase;
                    padding: 15px 30px 15px 30px;
                    text-align: center;
                    margin-right: 10px;
                    margin-top: 10px;
                    max-width: 300px;

                    @media(max-width: map-get($breakpoints, 'lg')) {
                        border: solid 1px #d9dada; // unknown color
                        &:first-child {
                            border-left: solid 1px #d9dada;
                        }

                        flex-grow: 1;
                        border-left: none;
                        margin-right: inherit;
                        margin-top: inherit;
                    }

                    @media(max-width: map-get($breakpoints, 'mobile')) {
                        color: $blue;
                        max-width: inherit;
                        border: solid 1px $blue;
                    }
                }
            }
        }

        .facet-alphabeth > ul {
            margin-bottom: 10px;

            &:empty {
                margin-bottom: 0;
            }
        }

        .facet-termitems, .facet-alphabeth {
            line-height: 30px;
            padding-left: $search-gutter-normal;
            padding-right: $search-gutter-normal;

            @media(max-width: map-get($breakpoints, 'lg')) {
                padding-left: $search-gutter-small;
                padding-right: $search-gutter-small;
            }

            ul {
                display: flex;
                flex-wrap: wrap;
                margin-left: auto;
                margin-right: auto;
                max-width: $filter-area-width;


                li {
                    &.selected {
                        color: $blue;

                        @media(max-width: map-get($breakpoints, 'mobile')) {
                            color: $blue-30;
                        }
                    }

                    &.disabled {
                        color: $gray-25;

                        &:hover {
                            cursor: auto;
                        }
                    }

                    color: $brown-dark;

                    @media(max-width: map-get($breakpoints, 'mobile')) {
                        color: $white;
                    }

                    @extend %term-font;
                }
            }
        }
    }

    .search-result-block {
        padding-top: 35px;
        /*   padding-left: $search-gutter-normal;
        padding-right: $search-gutter-normal;
        @media(max-width: map-get($breakpoints, 'lg')) {
            padding-left: $search-gutter-small;
            padding-right: $search-gutter-small;
        }
         */
        > section {
            /* max-width: $area-width;
            margin-left: auto;
            margin-right: auto;*/
            display: flex;
            flex-direction: column;
            align-items: center;

            > * {
                max-width: $area-width;
                width: 100%;
            }
        }

        h3.result-title {
            width: 100%;
            padding-left: 80px;
            color: $gray-dark;
            font-style: italic;
            font-weight: 500;
            font-family: $font-egyptian;
            cursor: pointer;
            font-size: 16px;
            line-height: 80px;
        }
    }

    .result-block-employees, .result-block-expertarea {
        ul.list > li {
            overflow: hidden;
            background: $white;
            color: $blue-dark;

            section.employee {
                > a {
                    display: flex;
                }
            }

            .employee-data {
                padding: 0 18px 0 18px;

                span.label {
                    font-size: 11.5px;
                    line-height: 14px;
                }

                a.title {
                    color: $blue-dark;
                    margin: 0;

                    &:active, &:visited, &:link {
                        color: $blue-dark;
                    }

                    &:hover {
                        text-decoration: none;
                    }

                    h2.title {
                        font-size: 15px;
                        line-height: 15px;
                        letter-spacing: 1.5px;
                        margin-bottom: 0;
                        margin-top: 10px;
                    }
                }

                .icon-line {
                    height: 1px;
                    margin: 10px 0;
                    width: 25px;
                }

                span.work-title, span.department {
                    font-size: 12px;
                    line-height: 14px;
                }

                ul.contact {
                    > li {
                        line-height: 12px;

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

                        span, a {
                            font-size: 12px;
                            line-height: 14px;
                        }
                    }
                }
            }
        }
    }

    .result-block-articles, .result-block-other {
        //background-color: #ECEDED; // undefined color
        /*                    @include light-block;*/
        ul {
            li {
                @include light-block;
                height: 380px;
                background: $white;
                text-align: center;
                overflow: hidden;

                span.label {
                    font-size: 15px;
                    margin-bottom: 10px;
                }

                i {
                    margin-left: auto;
                    margin-right: auto;
                    margin-top: 15px;
                    margin-bottom: 15px;
                }

                p {
                    @include typo-lead(2, 'small', 0.9);
                }

                h1 {
                    @include typo-subtitle(1, 0.9);
                    text-transform: none;
                    letter-spacing: 0.5px;
                    word-wrap: break-word;
                }

                &.odd {
                    background: $brown-dark;

                    a h1 {
                        color: $white;
                    }

                    a p {
                        color: $white;
                    }
                }

                figure {
                    height: 190px;
                }

                .content {
                    @include light-block;
                    display: flex;
                    flex-direction: column;
                    padding: 25px;
                }
            }
        }
    }

    .result-block-programmes {

        ul {
            margin-left: -5px;
            margin-right: 5px;
            margin-bottom: 35px;
            margin-bottom: 10px;

            > li {
                background-color: $gray-10;
                padding: 0 5px 0px 5px;
                margin-bottom: 10px;
                height: 570px;
                position: relative;
                overflow: hidden;

                > a > * {
                    background-color: white;
                }

                > a.image-above > .content {
                    display: block;
                }

                figure {
                    height: 220px;
                }

                .content {
                    text-align: center;
                    padding: 30px;
                    color: $blue-dark;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    flex-direction: column;

                    .label {
                        @include typo-label('small');
                    }

                    h1.title {
                        margin-top: 10px;
                        @include typo-subtitle(1, 0.9);
                        overflow: hidden;
                        word-wrap: break-word;
                    }

                    p.lead-text {
                        @include typo-lead(1, 'small', 0.9);
                        margin-top: 10px;
                    }
                }

                .icons {
                    position: absolute;
                    bottom: 18px;
                    padding: 0 10px;
                    color: $gray;

                    > .icon {
                        font-size: 16px;
                        width: 20px;
                        height: 15px;
                    }
                }
            }
        }
    }

    .result-block-articles > ul, .result-block-other > ul {
        li:nth-child(2n+1) {
            article.link-block {
                background: $white;

                a, p, h1, h2, h3 {
                    color: $blue-black;
                }
            }
        }

        li {
            article.link-block {
                //height: $row-small;
                background: $brown-dark;

                a, p, h1, h2, h3 {
                    color: $white;
                }
            }
        }
    }

    .result-block-studentweb {
        li.studentweb {
            background: white;
            margin-top: 1px;
            padding: 10px 30px;

            a {
                color: $blue;

                span {
                    display: block;

                    &.a-title-but-not-the-global-title-class {
                        @include typo-subtitle(2, 0.9);
                    }

                    &.lead {
                        @include typo-lead(2, null, 0.9);

                        em {
                            font-weight: 500;
                        }
                    }
                }
            }
        }
    }

    .result-block-librarydatabase {
        li.database {
            background: white;
            margin-top: 1px;
            padding: 10px 30px;
            color: $blue;

            &:first-child {
                margin-top: 0;
            }

            span.a-title-but-not-the-global-title-class {
                @include typo-subtitle(2, 0.9);
                display: block;
            }

            span.lead {
                @include typo-lead(2, null, 0.9);
                display: block;
            }

            section > a {
                @include typo-lead(2, null, 0.9);
                color: $link;
                font-style: italic;
                margin-right: 30px;
                text-decoration: underline;
            }
        }
    }

    .result-block-activities {
        background: $blue;
        padding-bottom: 80px;
        margin-top: 80px;
        
        h3.result-title {
            color: $white !important;
        }

        ul {
            > li {
                display: block;
                width: 100%;

                i.icon {
                    color: $gold;
                }

                &:hover {
                    a {
                        color: $white;

                        > section {
                            background-color: #336B99;
                        }

                        .activity-title {
                            color: $white;
                        }
                    }
                }
            }
        }
    }
}