lightspeeddevelopment/wetu-importer

View on GitHub
assets/css/scss/lsx-wetu-importer.scss

Summary

Maintainability
Test Coverage
/** LSX Importer for Wetu Styles */
body.tour-operator_page_lsx-wetu-importer {

    .tablenav.top {
        height:auto;
    }

    #posts-filter {
        .manage-column {
            cursor: pointer;
        }
    }

    .image-settings {
        td {
            line-height: 1.5;
        }
    }
    label[for="wetu_api_key"] {
        display: flex;
        align-items: center;
        #doc-tooltip {
            width: 25px;
        }
    }
    .tooltip {
        cursor: pointer;
        border: none;
        background: none;
        width: 100%;
        height: 100%;
        text-align: left;
        outline: none;
        .tooltip-inner {
            display: none;
            @media (max-width: 782px) {
                &.clicked {
                    display: block;
                    outline: none;
                    font-size: 14px;
                }
            }
        }

    }


    #posts-filter, #import-list {
        margin-top: 15px;

        .column-order {
            display: none;
        }

        .check-column {
            input {
                margin:0 0 0 8px;
            }
        }

        thead, tfoot {

            .sorting_asc , .sorting_desc {
                &::after {
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    font-size: 20px;
                    line-height: 1;
                    font-family: dashicons;
                    text-decoration: inherit;
                    font-weight: normal;
                    font-style: normal;
                    vertical-align: top;
                    text-align: center;
                    transition: color .1s ease-in 0;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                }
            }

            .sorting_asc::after {
                content: "\f140";
            }
            .sorting_desc::after {
                content: "\f142";
            }
        }

        td.post-title {
            font-weight: 600;
            font-size: 14px;
        }

        .dataTables_info, .dataTables_length {
            display:inline-block;
            width: 50%;
        }

        .top {
            margin-bottom: 10px;
        }
        .bottom {
            .dataTables_paginate {
                margin-top: 10px;
            }
        }

        .dataTables_paginate {
            display:inline-block;
            width: 50%;
            height: 28px;
            cursor: default;
            color: #555;
            text-align: right;
        }

        .paginate_button {
            height: 16px;
            display: inline-block;
            min-width: 17px;
            border: 1px solid #ccc;
            padding: 7px 4px 3px;
            background: #e5e5e5;
            font-size: 13px;
            line-height: 1;
            font-weight: 400;
            text-align: center;
            margin: 0px 2px;
            color: #0073aa;
            cursor: pointer;

            &.disabled {
                pointer-events: none;
                border-color: #ddd;
                background: #f7f7f7;
                color: #a0a5aa;
            }

            &:hover, &.current {
                border-color: #5b9dd9;
                color: #fff;
                background: #00a0d2;
                box-shadow: none;
                outline: none;
            }

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

    /* Home Screen */
    .row.section {
        margin-bottom:25px;

        h1 {
            padding: 0px 0 4px 0;
        }
    }

    .welcome-block-header, .welcome-block.postbox {
        margin-right: 1%;
        display: inline-block;
        vertical-align: top;
        min-width: unset;
        padding: 8px 12px;

        &:last-child {
            margin-right:0px;
        }
    }

    .welcome-block-header {
        color: #0073aa;
        text-align: center;
        width: calc(24% - 27px);
        position: relative;
        z-index: 2;

        a:focus {
            box-shadow:none;
        }
        .heading {
            a {
                text-decoration: none;
            }
        }
        .value {
            span {
                display:block;
                color: white;
                background-color: #0073aa;
                padding: 10px;
                border-radius: 25px 25px 25px 25px;
                width: 20px;
                height: 20px;
                display: inline-block;
            }
            a:hover {
                span {
                    background-color: #00a0d2;
                }
            }
        }
    }

    .spacer {
        box-sizing: border-box;
        width: 98%;
        border-top: 1px solid #979797;
        opacity: 0.33;
        margin: -43px auto 0 auto;
        position: absolute;
        bottom: 40px;
        left: 1%;
        z-index: 1;
    }

    .welcome-block.postbox {

        width: calc(24% - 25px);
        @media (max-width: 1670px) {
            width: calc(24% - 26px);
        }
        @media (max-width: 1272px) {
            width: calc(24% - 27px);
        }
        @media (max-width: 690px) {
            width: calc(48% - 27px);
        }

        h2.title {
            height: 2em;
            line-height: 28px;
            margin: 0 0 2em 0;

            @media (max-width: 910px) {
                height: 3em;
            }
        }

        .excerpt {
            min-height: 100px;
        }

        .button {
            width:100%;
            text-align: center;
        }

        .link-list {
            li {
                a {
                    font-size:14px;
                }
            }
        }
    }

    /* Tour / Accommodation / Destinations */
    .wetu-status {
        h3 {
            margin: 0px;
        }
    }
    .subsubsub {
        margin-bottom: 10px;
    }
    .documentation {
        list-style: none;
        margin: 11px 0 0;
        padding: 0;
        font-size: 13px;
        float: left;
        text-decoration: none;
        &:before {
            content: "|";
            color: #666;
            margin-right: 6px;
            margin-left: 6px;
        }
    }
    #lsx-wetu-importer-search-form {
        .normal-search {
            display: inline-block;
            input.keyword {
                height: 30px;
            }
        }
    }

    .advanced-search-toggle {
        display: inline-block;
        margin-top: 0;
    }

    .widefat {
        .check-column {
            padding: 6px 0 6px;
            vertical-align: middle;
        }
        #the-list {
            .check-column {
                vertical-align: top;
                padding: 10px 0 6px;
            }
        }
    }
    #import-list {
        .widefat {
            .check-column {
                vertical-align: top;
                padding: 10px 0 6px;
            }
        }
    }
}