noesya/osuny

View on GitHub
app/assets/stylesheets/admin/components/content-editor.sass

Summary

Maintainability
Test Coverage
.edit_communication_block
    #layouts
        .layout
            label
                cursor: pointer
            &:hover
                background: #EEEEEE
            &--selected
                background: $color-accent !important
                *
                    color: white
                .layout__image
                    border: $color-accent 1px solid !important

.content-editor
    &__offcanvas
        width: 95vw !important
        @include media-breakpoint-up(md)
            width: 80vw !important
        @include media-breakpoint-up(lg)
            width: 70vw !important
        @include media-breakpoint-up(xl)
            width: 60vw !important
        @include media-breakpoint-up(xxl)
            width: 50vw !important
        &__iframe
            height: 100%
            width: 100%
    &__elements
        &__element
            .draft
                opacity: 0.5
                transition: opacity 0.5s ease
                &:hover
                    opacity: 1
            .content-editor__elements__handle
                cursor: move
            &--hover
                opacity: 0
                transition: opacity 0.25s ease
            &:hover
                .content-editor__elements__element--hover
                    opacity: 1
        &__handle
            margin-left: 10px
            .fas
                font-size: pxToRem(13)
            .handle
                margin-right: 0
        &__preview
            p,
            dt
                font-family: $font-family-serif
            dt
                font-weight: bold
            &--datatable
                table
                    td,
                    th
                        background: white

            &--organizations
                .organizations-list
                    display: flex
                    flex-wrap: wrap
                    div
                        align-items: center
                        display: flex
                        height: 90px
                        justify-content: center
                        vertical-align: middle
                        width: 90px
                        img
                            display: block
                            height: 100%
                            mix-blend-mode: multiply
                            object-fit: contain
                            width: 100%
                        p
                            font-size: 10px
                            margin: 0
                            text-align: center

.sortable-ghost
    opacity: 0.3