generator-fe-kit/app/templates/felayout_bluemountain/dev/styles/main/custom/mosaic.less

Pixelant Front-End Starter Kit

.mosaic {
    @media (max-width: 991px) {
        & > .row > div {
            display: inline-block;
            width: 100%;
        }
    }
    @media (min-width: 992px) {
        & > .row {
            display: flex;
            // flex-flow: row wrap;
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            flex: 1;
        }
    }

    &.mosaic-gray {
        &:nth-child(even) {
            & > .row {
                & > div {
                    &:nth-child(odd) {
                        background-color: #fff;
                    }
                }
            }
        }
        
        &:nth-child(odd) {
            & > .row {
                & > div {
                    &:nth-child(even) {
                        background-color: #fff;
                    }
                }
            }
        }
    }

    &.mosaic-blue {
        color: #fff;

        h1, h2, h3, h4, h5, h6 {
            color: #fff;

        }

        &:nth-child(even) {
            & > .row {
                & > div {
                    &:nth-child(odd) {
                        background-color: #4cb4db;//@main-color;

                        .icon-text-btn__icon {
                            color: #2c7598;
                        }
                    }
                    &:nth-child(even) {
                        background-color: #2c7598;

                        .icon-text-btn__icon {
                            color: #4cb4db;
                        }
                    }
                }
            }
        }

        &:nth-child(odd) {
            & > .row {
                & > div {
                    &:nth-child(odd) {
                        background-color: #2c7598;

                        .icon-text-btn__icon {
                            color: #4cb4db;
                        }
                    }
                    &:nth-child(even) {
                        background-color: #4cb4db;//@main-color;

                        .icon-text-btn__icon {
                            color: #2c7598;
                        }
                    }
                }
            }
        }
    }

    .icon-right .icon-text-btn__icon {
        border: none;
        font-size: 40px;
    }
}