Pullquote core block: Styles

_pullquote-mixins.scss

/* ------------------------------------------------------------ *\
    Mixins: Pullquote core block

    Included in frontend and admin styles.
\* ------------------------------------------------------------ */

@mixin wp-block-pullquote {
    @include blocks-core__margin-vertical__large;

    border: none; // core style reset

    font-weight: 400;
    line-height: 1.6;

    blockquote {
        background: lightgrey;
        border-radius: 70px;
        padding: 75px 130px 60px 130px;
    
        @include breakpoint-down(small-desktop){
            padding: 85px 55px 60px 55px;
            border-radius: 30px;
        }

        margin: 0 auto;
        position: relative;
        display: block;
        text-align: left;

        @include breakpoint-down(small-desktop){
            font-size: 18px;
            line-height: 1.3;
        }
    }

}

@mixin wp-block-pullquote__quote {

    margin-bottom: 0; // reset
    
    font-style: italic;
    position: relative;
    font-size: 30px;
    line-height: 1.4;

    &:before,
    &:after {
        position: absolute;
        font-size: 130px;
        line-height: 1;
        color: grey;
        font-style: italic;
    }

    &:before {
        content: '“';
        top: 0;
        right: 102%;
        transform: translateY(-36%);
        font-size: 130px;

        @include breakpoint-down(small-desktop) {
            transform: translate(-50%, -50%);
            right: auto;
            left: -8px;
        }
    }

    &:after {
        content: '“';
        position: absolute;
        bottom: 0;
        left: 102%;
        transform: translateY(36%) rotate(180deg);

        @include breakpoint-down(small-desktop) {
            left: auto;
            right: 0;
            transform: translate(50%, 45%) rotate(180deg);
        }
    }

}

@mixin wp-block-pullquote__cite {
    text-transform: none; // reset core style

    display: block; // needed for frontend
    font-size: 18px;
    margin-top: 35px;

    @include breakpoint-down(small-desktop) {
        margin-top: 50px;
    }
}



/**
 * Frontend styles.
 *
 * Don't edit here, edit mixins instead as they are used in the admin styles too.
 */
@mixin wp-block-pullquote__frontend {
    & > .wp-block-pullquote {

        @include wp-block-pullquote;

        p {
            @include wp-block-pullquote__quote;
        }
    
        cite {
            @include wp-block-pullquote__cite;
        }

    }
}

_pullquote.scss

/* ------------------------------------------------------------ *\
    Block: Pullquote

    Frontend selector: `.wp-block-pullquote p`
    Admin selection: `.wp-block-pullquote blockquote p`

    Frontend selector: `cite`
    Admin selection: `.wp-block-pullquote__citation`

    Editor styles only

\* ------------------------------------------------------------ */

.wp-block-pullquote {

    @include wp-block-pullquote;

    blockquote p {
        @include wp-block-pullquote__quote;
    }

    .wp-block-pullquote__citation {
        @include wp-block-pullquote__cite;
    }
    
}