lightspeeddevelopment/lsx

View on GitHub
assets/css/admin/gutenberg-admin.scss

Summary

Maintainability
Test Coverage
@import "../scss/global/variables";
@import "../scss/global/mixins";

/*! Body Typography */
body.block-editor-page {
    font-family: "Noto Sans", sans-serif;
    font-weight: normal;
    .editor-styles-wrapper,
    input,
    select,
    textarea,
    button {
        font-family: "Noto Sans", sans-serif;
        font-weight: normal;
    }
    /*! Headings - <h1> through </h6> */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Lora", serif;
        font-weight: normal;
    }
}

@include custom-buttons-colours-admin();

.wp-admin.gutenberg-editor-page {
    .wp-block-button {
        .wp-block-button__link {
            border: 0 none;
            border-radius: 3px;
            font-size: 14px;
            font-weight: 700;
            height: 48px;
            letter-spacing: 0.6px;
            line-height: 1.25;
            padding: 15px;
            text-transform: uppercase;
        }
    }
}
#editor {
    .wp-block-cover {
        .wp-block-cover__inner-container {
            .block-editor-block-list__layout {
                .block-editor-block-list__block[data-align="full"] {
                    margin: 0;
                }
            }
        }
    }
    .wp-block-cover .block-editor-block-list__block {
        color: #444444;
    }

    .lsx-title {
        &:after {
            content: "";
            display: block;
            height: 2px;
            margin: 2.4rem auto 0;
            width: 80px;
            background-color: #777;
        }

        & > small {
            color: inherit;
            display: block;
            line-height: inherit;
            margin-top: 8px;
        }
    }
    .lsx-subheading {
        h2 {
            font-size: 48px;
            color: #333;
            line-height: 50px;
        }
        p {
            font-size: 26px;
            color: #777;
            line-height: 30px;
            &:last-child {
                &:after {
                    content: "";
                    display: block;
                    height: 2px;
                    margin: 2.4rem auto 0;
                    width: 80px;
                    background-color: #dadddf;
                }
            }
            &:not(.has-text-align-center) {
                text-align: initial;
                &:after {
                    margin-left: 0;
                }
            }
            &.has-text-align-left {
                &:after {
                    margin-left: 0;
                }
            }
            &.has-text-align-right {
                text-align: right;
                &:after {
                    margin-right: 0;
                    margin-left: auto;
                }
            }
        }
    }
}