Bug 25434: Display selections-toolbar on small screens

[koha.git] / koha-tmpl / opac-tmpl / bootstrap / css / src / _responsive.scss

@import "mixins";

@media only screen and ( min-width: 0 ) and ( max-width: 304px ) {
    /* Screens bewteen 0 and 304 pixels wide */
    input,
    select,
    textarea {
        max-width: 11em;
        width: auto;
    }
}

@media only screen and ( min-width: 0 ) and ( max-width: 440px ){
    /* Screens bewteen 0 and 390 pixels wide */
    .ui-tabs .ui-tabs-nav li a,
    .statictabs li a {
        padding: .1em .5em;
    }

    .input-fluid {
        width: 90%;
    }

    #wrap {
        padding: 0;
    }
}

@media only screen and ( min-width: 342px ) and ( max-width: 479px ) {
    /* Screens bewteen 342 and 479 pixels wide */
    .input-fluid {
        width: 75%;
    }

    .searchsuggestion {
        display: block;
    }
}
/* Override Bootstrap Responsive CSS fixed navbar */
@media ( max-width: 979px ) {
    .navbar-fixed-top,
    .navbar-fixed-bottom {
        margin-left: 0;
        margin-right: 0;
        position: fixed;
    }
}

@media only screen and ( max-width: 608px ) {
    /* Screens below 608 pixels wide */
    fieldset {
        &.rows {
            label {
                display: block;
                float: none;
                text-align: left;
            }

            li {
                padding-bottom: .5em;
            }

            ol {
                margin-left: 0;
            }

            .hint {
                margin-left: 0;
            }
        }
    }

    body {
        padding: 0;
    }

    .tdlabel {
        display: inline;
    }

    .navbar-fixed-top,
    .navbar-static-top {
        margin: 0;
    }

    .navbar-inner {
        padding: 0;
    }

    .checkall,
    .clearall,
    .highlight_controls,
    .selectcol,
    .list-actions,
    #remove-selected {
        display: none;
    }

    .table td.bibliocol {
        padding-left: 1.3em;
    }

    .actions {
        display: block;

        a,
        #login4tags {
            @include border-radius-all( 4px );
            background-color: #F2F2EF;
            border: 1px solid #DDD;
            display: block;
            font-size: 120%;
            font-weight: bold;
            margin: 2px 0;
        }

        .label {
            display: block;
            font-weight: bold;
        }

        #login4tags {
            margin-right: 1em;
        }
    }

    #opac-main-search {
        button,
        input,
        select,
        .librarypulldown .transl1,
        .input-append {
            @include border-radius-all( 5px );
            box-sizing: border-box;
            display: block;
            height: 120%;
            margin: .5em 0;
            max-width: 100%;
            width: 97%;
        }

        .input-append {
            margin: 0;
            width: 100%;
        }

        .librarypulldown .transl1 {
            width: 94.5%;
        }
    }

    .toolbar {
        .resort {
            @include border-radius-all( 5px );
            font-size: 14px;
            max-width: 100%;
            padding: 4px 6px;
        }

        .pagination {
            li {
                a {
                    font-size: 105%;
                    padding: .3em .7em;
                }
            }
        }
    }

    .mastheadsearch {
        @include border-radius-all( 0 );
        margin: 0;

    }

    .main {
        @include border-radius-all( 0 );
        margin: .5em 0;
        padding: 15px;
    }

    .breadcrumb {
        margin: 10px 0;
    }

    #moresearches {
        text-align: center;
    }

    #searchsubmit {
        font-weight: bold;
    }

    .ui-tabs-panel,
    .tabs-container,
    #topissues,
    #usertags,
    #usersuggestions {
        .item-thumbnail {
            margin: .5em 0 0 .5em;
        }

        .table-bordered {
            border: 0;
        }

        .table {
            th,
            thead {
                display: none;
            }

            td {
                border-left: 1px solid #DDDDDD;
                border-right: 1px solid #DDDDDD;
                border-top: 0;
                display: block;
                padding: .2em;
            }

            p {
                margin-bottom: 2px;
            }
        }

        tr {
            display: block;
            margin-bottom: .6em;

            td:first-child {
                border-radius: 5px 5px 0 0;
                border-top: 1px solid #DDDDDD;
            }

            td:last-child {
                border-bottom: 2px solid #CACACA;
                border-radius: 0 0 5px 5px;
            }
        }
    }

    .no-image {
        display: none;
    }
}

@media only screen and ( max-width: 700px ) {
    /* Screens below 700 pixels wide */
    #opac-main-search {
        label {
            display: none;
        }
    }

    #logo {
        background: transparent url( "../lib/bootstrap/img/glyphicons-halflings.png" ) no-repeat;
        background-position: 0 -24px;
        margin: 14px 14px 0 14px;
        width: 14px;

        a {
            padding: 14px 0 0;
            width: 14px;
        }
    }

    #user-menu-trigger {
        display: inline;
        margin-right: 12px;
    }

    #members {

    }
}

@media only screen and ( min-width: 480px ) and ( max-width: 608px ) {
    /* Screens between 480 and 608 pixels wide */
    .input-fluid {
        width: 75%;
    }
}

@media only screen and ( min-width: 608px ) {
    #views {
        border-bottom: 1px solid #D6D6D6;
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }

    .view {
        border-bottom-width: 0;
        border-radius: 0;
        border-right-width: 0;
        border-top-width: 0;
    }

    .current-view {
        border: 0;
        box-shadow: none;
    }
}

@media only screen and ( min-width: 608px ) and ( max-width: 767px ) {
    /* Screens between 608 and 767 pixels wide */
    .main {
        padding: .8em 20px;
    }

    .breadcrumb {
        margin: 10px 0;
    }

    .navbar-static-bottom {
        margin-left: -20px;
        margin-right: -20px;
    }

    .row-fluid input.span6 {
        width: 48.9362%;
    }
}

@media only screen and ( max-width: 767px ) {
    /* Screens below 767 pixels wide */
    a {
        &.title {
            font-size: 120%;
        }
    }

    #userresults {
        margin: 0 -20px;
    }

    .breadcrumb,
    .menu-collapse {
        display: none;
    }

    #search-facets,
    #menu {
        margin-bottom: .5em;

        h4 {
            display: block;
            margin: 0;
            padding: 0;

            a {
                border-bottom: 0;
                font-weight: normal;
                padding: .7em .2em;
            }
        }

        ul {
            padding: 0;
        }
    }

    #menu {
        li {
            a {
                @include border-radius-all( 0 );
                border: 0;
                border-bottom: 1px solid #D8D8D8;
                display: block;
                font-size: 120%;
                margin: 0;
                text-decoration: none;
            }

            &.active {
                a {
                    border-right-width: 1px;
                    border-top: 1px solid #D8D8D8;
                }
            }

            &:last-child {
                a {
                    border-radius: 0 0 7px 7px;
                }
            }
        }
    }

    #search-facets {
        li {
            padding: .4em;
        }

        h5 {
            margin: .2em;
        }
    }

    #menu h4 a.menu-open,
    #search-facets h4 a.menu-open {
        border-bottom: 1px solid #D8D8D8;
    }

    #loginModal {
        margin: 0;
        width: auto;
    }
}

@media only screen and ( max-width: 800px ) {
    /* Screens below 800 pixels wide */
    .cartlabel,
    .listslabel,
    .langlabel,
    .userlabel {
        display: none;
    }

    .navbar {
        .divider-vertical {
            margin: 0 2px;
        }
    }

    .toolbar {
        select {
            width: 220px;
        }
    }
}

@media only screen and ( min-width: 768px ) {
    /* Screens above 768 pixels wide */
    .main {
        margin-left: 20px;
        margin-right: 20px;
    }

    #menu {
        @include border-radius-all( 0 );
        border: 0;
        border-right: 1px solid #D8D8D8;

        h4 {
            display: none;
        }

        ul {
            padding: 1em 0 1em 0;
        }
    }

    #didyoumean {
        margin: .5em 0;
    }

    .searchsuggestion {
        white-space: nowrap;
    }

    .pagination {
        li {
            &.page-num {
                display: inline;
            }
        }
    }

    a {
        &.menu-collapse-toggle {
            &:link,
            &:visited,
            &:hover,
            &:active {
                color: #727272;
                cursor: default;

                &::before {
                    display: none;
                }
            }
        }
    }
}

@media only screen and ( min-width: 768px ) and ( max-width: 984px ) {
    /* Screens between 768 and 984 pixels wide */
    .librarypulldown .transl1 {
        width: 38%;
    }
}

@media only screen and ( min-width: 984px ) {
    /* Screens above 969 pixels wide */
    .librarypulldown .transl1 {
        width: 53%;
    }

    .pagination {
        li {
            &.page-first,
            &.page-last {
                display: inline;
            }

            &.page-first {
                a {
                    border-left: 1px solid #DDD;
                }
            }

            &.page-prev,
            &.page-next {
                a {
                    border-left: 0;
                    border-radius: 0;
                }
            }
        }
    }
}

@media only screen and ( max-width: 1040px ) {
    #a_listResults,
    #close_pagination {
        padding: 5px;
    }

    .pg_menu {
        li {
            a {
                display: block;
                float: none;
                text-align: left;
            }

            &.back_results {
                a {
                    border: 0;
                    border-bottom: 1px solid #DDD;
                    border-top: 1px solid #DDD;
                }
            }
        }
    }

    #ulactioncontainer {
        min-width: 0;
    }
}

@media only screen and ( max-width: 1100px ) {
    .cartlabel,
    .listslabel,
    .langlabel,
    .userlabel {
        display: none;
    }
}