@chief-editor/ui/css/components/Drawer/styles.less

UI Component for chief editor

@import "./var.less";
@import "./mixin.less";

@len: length(@sizeList);
@xs-size: 360px;
@sm-size: 360px;
@md-size: 600px;
@lg-size: 840px;
@xl-size: 980px;

.getSizeStyle(@dir: 'horizontal', @size: 'md') when (@dir = 'horizontal') {
    @realSize: "@{size}-size";
    width: @@realSize;
}

.getSizeStyle(@dir: 'horizontal', @size: @md-size) when (@dir = 'vertical') {
    @realSize: "@{size}-size";
    height: @@realSize;
}

.forDrawerSizeStyle(@dir, @sizeList, @i: 1) when (@i <= @len) {
    @size: extract(@sizeList, @i);
    &.@{prefixCls}-drawer-size-@{size} {
        .getSizeStyle(@dir, @size);
    }
    .forDrawerSizeStyle(@dir, @sizeList, (@i + 1));
}

.@{prefixCls}-drawer {
    background-color: @color-neutral8;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;

    &-mask {
        opacity: 0;
        background: rgba(0, 0, 0, .2);
        .transition(ease-in-out, @motion-duration-c);

        &-show {
            opacity: 1;
            .transition(ease-in-out, @motion-duration-c);
        }
    }

    &-content {
        &-header {
            .font-height(16px);
            padding: 24px;
        }

        &-inner {
            margin-bottom: auto;
            padding: 8px 24px;
        }

        &-footer {
            padding: 16px 24px;
        }
    }

    &-close-icon {
        z-index: 1;
        font-size: 12px;
        color: @color-text-grey2;
        cursor: pointer;
        position: absolute;
        top: 26px;
        right: 26px;
    }

    &-horizontal {
        .forDrawerSizeStyle('horizontal', @sizeList);
    }

    &-vertical {
        .forDrawerSizeStyle('vertical', @sizeList);
    }

    &-no-mask {
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
    }

    &-dialog {
        opacity: 0;
        width: 600px;
        .transition(ease-in, @motion-duration-c);

        &-placement-left {
            .transform(translate3d(-100%, 0, 0));
        }

        &-placement-right {
            .transform(translate3d(100%, 0, 0));
        }

        &-placement-top {
            .transform(translate3d(0, -100%, 0));
        }

        &-placement-bottom {
            .transform(translate3d(0, 100%, 0));
        }

        &-show {
            opacity: 1;
            .transform(translate3d(0, 0, 0));
            .transition(ease-out, @motion-duration-c);
        }
    }
}