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

UI Component for chief editor

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

.@{prefixCls}-btn {
    height: @component-height;
    line-height: @component-height;
    text-align: center;
    color: #fff;
    padding: 0 16px;
    outline: none;
    cursor: pointer;
    border-radius: @border-radius-base;
    border-width: 1px;
    border-style: solid;

    &-type-primary {
        border-color: @color-primary6;
        background: @color-primary6;

        &:hover {
            border-color: @color-primary5;
            background-color: @color-primary5;
        }

        // todo
        &:active,
        &.active {
            border-color: @color-primary7;
            background: @color-primary7;
        }

        &.@{prefixCls}-btn-disabled {
            border-color: @color-primary9;
            background: @color-primary9;
            color: @color-text-grey4;
            cursor: no-drop;
        }
    }

    &-type-default {
        background: @color-neutral2;
        border-color: @color-neutral2;

        &:hover {
            background: @color-neutral1;
            border-color: @color-neutral1;
        }

        &:active,
        &.active {
            background: @color-neutral3;
            border-color: @color-neutral3;
        }

        &.@{prefixCls}-btn-disabled {
            background: @color-neutral7;
            border-color: @color-neutral7;
            cursor: no-drop;
        }
    }

    &-type-text {
        background: none;
        border-color: transparent;

        &:hover {
            background: @color-neutral1;
        }

        &:active,
        &.active {
            background: @color-neutral3;
        }

        &.@{prefixCls}-btn-disabled {
            background: @color-neutral7;
            cursor: no-drop;
        }
    }

    &-type-default-plain {
        background: none;
        border-color: @color-neutral2;

        &:hover {
            border-color: @color-neutral1;
        }

        &:active,
        &.active {
            border-color: @color-neutral3;
        }

        &.@{prefixCls}-btn-disabled {
            border-color: @color-neutral7;
            cursor: no-drop;
        }
    }

    &-type-primary-plain {
        background: none;
        border-color: @color-primary6;
        color: @color-primary6;

        &:hover {
            border-color: @color-primary5;
            color: @color-primary5;
        }

        &:active,
        &.active {
            border-color: @color-primary7;
            color: @color-primary7;
        }

        &.@{prefixCls}-btn-disabled {
            background: @color-primary9;
            color: @color-primary9;
            cursor: no-drop;
        }
    }

    &-checked {
        background: @color-neutral4;
        border-radius: @border-radius-base;
        color: #fff;
    }

    &-group {
        display: inline-flex;
        align-items: center;

        & {
            z-index: 5;

            //& > :not(:first-child):not(:last-child) {
            //    border-radius: 0;
            //}
            //
            //& > :first-child:not(:last-child) {
            //    border-top-right-radius: 0;
            //    border-bottom-right-radius: 0;
            //}
            //
            //& > :last-child:not(:first-child) {
            //    border-top-left-radius: 0;
            //    border-bottom-left-radius: 0;
            //}

            & > .@{prefixCls}-btn {
                border-radius: 0;
            }

            & > :not(:first-child) {
                margin-left: -1px;
            }

            & > .@{prefixCls}-btn-checked,
            & > :hover,
            & > :active {
                position: relative;
                z-index: 10;
            }
        }
    }
}