lightspeeddevelopment/lsx-customizer

View on GitHub
assets/css/scss/templates/_common.scss

Summary

Maintainability
Test Coverage
.page.using-gutenberg:not(.page-has-banner),
.lsx.page-has-banner:not(.single-post) {
    .archive-header-wrapper {
        display: none !important;
    }
}
.page.page-template-template-sitemap {
    &.home {
        .entry-content {
            padding-top: $lsx-medium-gap;
            padding-bottom: $lsx-medium-gap;
        }
    }
    .entry-content {
        .sitemap-wrapper {
            .sitemap-child {
                position: relative;
                left: $lsx-gap;
            }
        }
    }
}
.archive-header-wrapper {
    .lsx.page-has-banner:not(.single-post) & { display: none; }

    .lsx.single-post & {
        float: none;
        padding: 0;
    }

    .archive-header {
        .lsx:not(.single-post):not(.page-has-banner) & {
            align-items: center;
            display: flex;
            flex-flow: column wrap;
            justify-content: center;
            margin: 0 -9999rem;
            padding: 10px 9999rem;
            text-align: center;

            @include media('>=phone') { padding: 100px 9999rem 50px; }
            @include media('<=tablet') { padding: 50px 9999rem 50px;     margin-top: 50px; }

            & > p {
                color: #FFF;
                margin: $lsx-gap 0 0;
            }

            .archive-title,
            & > p {
                @include media('>=tablet') { max-width: 70%; }
            }
        }

        .archive-title { margin: 0; }
    }
}

.content-area,
.widget-area {
    margin-bottom: $lsx-large-gap;
    margin-top: $lsx-large-gap;
    // @include media('<=tablet') {
    //     margin-top: $lsx-large-gap * 2;
    // }
    .home &,
    .page.siteorigin-panels:not(.woocommerce-page) & {
        margin-bottom: 0;
        margin-top: 0;
    }
}
.banner-global {
    + .content-area {
        @include media('<=tablet') {
            margin-top: $lsx-large-gap * 2;
        }
    }
}
.single-product {
    .content >.content-area {
        margin-top: $lsx-large-gap + $lsx-gap;
        @include media('<=tablet') {
            margin-top: $lsx-large-gap * 2;
        }
    }
}

.single-post:not(.using-gutenberg), .archive {
    .content-area,
    .widget-area {
        margin-top: $lsx-medium-gap;
    }
}

.single-post:not(.using-gutenberg) {
    &.page-has-no-banner {
        .content-area,
        .widget-area {
            margin-top: $lsx-medium-gap;
        }
    }
    &:not(.page-has-banner) {
        .content-area,
        .widget-area {
            margin-top: $lsx-large-gap;
        }
    }
    &.page-has-banner {
        &:not(.page-has-no-banner) {
            .content-area,
            .widget-area {
                margin-top: $lsx-medium-gap;
            }
        }
        &.page-has-no-banner {
            .content-area,
            .widget-area {
                margin-top: $lsx-large-gap;
            }
        }
    }
}

.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account {
    .content-area,
    .widget-area {
        margin-top: $lsx-medium-gap;
    }
}

.content-area { z-index: 4; }
.widget-area { z-index: 5; }

article.page,
article.post,
article.lsx-slot {
    .entry-content {
        .wp-audio-shortcode { margin-bottom: $lsx-gap; }

        .wp-caption {
            margin-bottom: $lsx-gap;

            & > .wp-caption-text {
                font-size: 13px;
                font-style: italic;
                font-weight: 700;
                margin-top: 5px;
                font-family: 'Noto Sans Bold',sans-serif;
            }
        }

        p img[class*="wp-image-"] {
            &.alignleft,
            &.alignright {
                padding-bottom: $lsx-gap;
            }
        }

        .wp-caption,
        p img[class*="wp-image-"] {
            max-width: 100%;

            &.aligncenter {
                display: block;
                margin-left: auto;
                margin-right: auto;
            }

            &.alignleft {
                float: left;
                padding-right: $lsx-gap;
            }

            &.alignright {
                float: right;
                padding-left: $lsx-gap;
            }

            &.alignnone {
                @include media('>=tablet') {
                    margin-left: -10rem;
                    margin-right: -10rem;
                    max-width: calc(100% + 20rem);
                }
            }
        }

        .sticky {
            padding:5px;
        }
    }

    .has-sidebar & {
        .entry-content {
            .wp-caption,
            p img[class*="wp-image-"] {
                &.alignnone {
                    margin-left: 0;
                    margin-right: 0;
                    max-width: 100%;
                }
            }
        }
    }
}

.widget-area {
    h1, h2, h3, h4, h5, h6, .widget-title { text-align: center; }

    & > .widget {
        & + .widget { margin-top: $lsx-large-gap / 2; }

        .textwidget {
            & > p {
                margin-bottom: 0;

                & + p { margin-top: $lsx-gap; }
            }
        }

        &.widget_rss {
            & > .widget-title {
                & > .rsswidget {
                    &:first-child { display: none; }

                    &:last-child {
                        &:before {
                            @include fa-icon();

                            content: $fa-var-rss;
                            display: inline-block;
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
    }
}

.error-404 { text-align: center; }

.no-results {
    text-align: center;

    .search.search-no-results:not(.has-sidebar) & {
        @include media ('>=tablet') {
            margin: 0 auto;
            width: 83.33333%;
        }

        @include media ('>=desktop') { width: 66.66667%; }
    }
    .page-content {
        p {
            padding: 10px;
        }
    }
}

.search-form {
    .submit-button {
        .search-submit {
            font-size: 0;
            &:before {
                content: "\f002";
                font-family: FontAwesome;
                font-size: 14px;
                text-align: center;
            }
        }
    }
}

.search {
    .facetwp-template {
        .entry-layout {
            .woocommerce_info {
                display: none;
            }
        }
    }
}

#facetwp-top, .facetwp-sidebar {
    background-color: #ffffff;
    border: 1px solid #E4E4E4;
}
#facetwp-top {
    padding: 5px;
}

.facetwp-per-page:after, .facetwp-sort:after {
    content: '\f0d7';
    color: #919191;
    position: relative;
    right: 20px;
    font-family: FontAwesome;
    font-size: 20px;
    top: 3px;
}

.facetwp-sidebar {
    padding: 15px;
    .facetwp-type-search .facetwp-search-wrap .facetwp-search {
        width: 160px;
    }
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    white-space: nowrap;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    border-radius: 3px;
    clip: auto !important;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000; /* Above WP toolbar. */
}

.lsx-shadow {
    box-shadow: 1px 1px 5px rgba(155,155,155,0.7);
}