devextreme/less/sources/widgets/generic/button.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/button.generic.less)
* Version: 20.1.4
* Build date: Tue Jun 02 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
.dx-size-default() {
    @GENERIC_BUTTON_HORIZONTAL_PADDING: 18px;
    @GENERIC_BUTTON_ICON_HORIZONTAL_PADDING: 8px;
    @GENERIC_BUTTON_BOX_SHADOW_SIZE: 0 1px 3px;
}
.dx-size-compact() {
    @GENERIC_BUTTON_HORIZONTAL_PADDING: 10px;
    @GENERIC_BUTTON_ICON_HORIZONTAL_PADDING: 5px;
    @GENERIC_BUTTON_BOX_SHADOW_SIZE: 0 1px 2px;
}

@GENERIC_BUTTON_BORDER_WEIGHT: @GENERIC_BASE_BORDER_WIDTH;
@GENERIC_BUTTON_PADDING:
    @GENERIC_BASE_INLINE_WIDGET_TOP_PADDING - @GENERIC_BUTTON_BORDER_WEIGHT
    @GENERIC_BUTTON_HORIZONTAL_PADDING
    @GENERIC_BASE_INLINE_WIDGET_BOTTOM_PADDING - @GENERIC_BUTTON_BORDER_WEIGHT;
@GENERIC_BUTTON_ICONONLY_PADDING: @GENERIC_BUTTON_ICON_HORIZONTAL_PADDING;
@GENERIC_BUTTON_ICON_SIZE: @GENERIC_BASE_ICON_SIZE;
@GENERIC_EDITOR_CUSTOM_BUTTON_MARGIN: 1px;

.dx-button-content {
    line-height: 0;
}

.dx-button-text {
    line-height: normal;
}

.dx-button a {
    text-decoration: none;
}

.dx-button-sizing(@PADDING, @ICON_SIZE, @ICON_MARGIN) {
    .dx-button-content {
        padding: @PADDING;
    }

    .dx-icon {
        .dx-icon-sizing(@ICON_SIZE);
        .dx-icon-margin(@ICON_MARGIN);
    }
}

.dx-button-onlyicon-sizing() {
    .dx-button-sizing(@GENERIC_BUTTON_ICONONLY_PADDING, @GENERIC_BUTTON_ICON_SIZE, 0);
}

.dx-button-withtext-sizing() {
    .dx-button-sizing(@GENERIC_BUTTON_PADDING, @GENERIC_BUTTON_ICON_SIZE, @GENERIC_BUTTON_ICON_SIZE/2);
}

.dx-button {
    .dx-button-onlyicon-sizing();
}

.dx-button-has-icon {
    .dx-button-onlyicon-sizing();
}

.dx-button-has-text {
    .dx-button-withtext-sizing();
}

.dx-button-back {
    .dx-button-onlyicon-sizing();

    .dx-button-text {
        display: none;
    }
}

// NOTE: Button styles

.dx-button-styling-variant(
    @background-color, @border-color, @text-color,
    @hover-background-color, @hover-border-color,
    @focused-background-color, @focused-border-color,
    @active-background-color, @active-border-color, @active-text-color,
    @icon-color
) {
    background-color: @background-color;
    border-color: @border-color;
    color: @text-color;

    .dx-icon {
        color: @icon-color;
    }

    &.dx-state-hover {
        background-color: @hover-background-color;
        border-color: @hover-border-color;
    }

    &.dx-state-focused {
        background-color: @focused-background-color;
        border-color: @focused-border-color;
    }

    &.dx-state-active {
        background-color: @active-background-color;
        border-color: @active-border-color;
        color: @active-text-color;
    }
}

.dx-button-styling() {
    border-radius: @button-border-radius;
    border-width: @GENERIC_BUTTON_BORDER_WEIGHT;
    border-style: solid;

    .dx-state-disabled&,
    .dx-state-disabled & {
        .dx-icon {
            opacity: @button-disabled-icon-opacity;
        }

        .dx-button-text {
            opacity: @button-disabled-text-opacity;
        }
    }
}

.dx-button-special-hover(@hover: transparent) {
    &.dx-state-hover {
        .dx-button-content {
            background-color: @hover;
            border-radius: @button-border-radius;
        }
    }
}

.dx-button-styling-clear() {
    background: transparent;
    border-color: transparent;
}

.dx-button { // stylelint-disable-line no-duplicate-selectors
    .dx-button-styling();
}

.dx-button-mode-contained {
    .dx-button-styling-variant(
        @button-normal-bg, @button-normal-border-color, @button-normal-color,
        @button-normal-contained-bg-hover, @button-normal-border-color,
        @button-normal-contained-bg-focused, @button-normal-border-color,
        @button-normal-contained-bg-active, @button-normal-border-color, @button-normal-color,
        @button-normal-color
    );

    &.dx-button-danger {
        .dx-button-styling-variant(
            @button-danger-bg, transparent, @button-danger-color,
            @button-danger-contained-bg-hover, transparent,
            @button-danger-contained-bg-focused, transparent,
            @button-danger-contained-bg-active, transparent, @button-danger-color,
            @button-danger-color
        );
    }

    &.dx-button-success {
        .dx-button-styling-variant(
            @button-success-bg, transparent, @button-success-color,
            @button-success-contained-bg-hover, transparent,
            @button-success-contained-bg-focused, transparent,
            @button-success-contained-bg-active, transparent, @button-success-color,
            @button-success-color
        );
    }

    &.dx-button-default {
        .dx-button-styling-variant(
            @button-default-bg, transparent, @button-default-color,
            @button-default-contained-bg-hover, transparent,
            @button-default-contained-bg-focused, transparent,
            @button-default-contained-bg-active, transparent, @button-default-color,
            @button-default-color
        );
    }
}

.dx-button-mode-outlined {
    .dx-button-styling-variant(
        transparent, @button-normal-border-color, @button-normal-color,
        @button-normal-outlined-bg-hover, @button-normal-border-color,
        @button-normal-outlined-bg-focused, @button-normal-border-color,
        @button-normal-outlined-bg-active, @button-normal-border-color, @button-normal-color,
        @button-normal-color
    );

    &.dx-button-danger {
        .dx-button-styling-variant(
            transparent, @button-danger-border-color, @button-danger-border-color,
            @button-danger-outlined-bg-hover, @button-danger-border-color,
            @button-danger-outlined-bg-focused, @button-danger-border-color,
            @button-danger-outlined-bg-active, @button-danger-border-color, @button-danger-border-color,
            @button-danger-border-color
        );
    }

    &.dx-button-success {
        .dx-button-styling-variant(
            transparent, @button-success-border-color, @button-success-border-color,
            @button-success-outlined-bg-hover, @button-success-border-color,
            @button-success-outlined-bg-focused, @button-success-border-color,
            @button-success-outlined-bg-active, @button-success-border-color, @button-success-border-color,
            @button-success-border-color
        );
    }

    &.dx-button-default {
        .dx-button-styling-variant(
            transparent, @button-default-border-color, @button-default-border-color,
            @button-default-outlined-bg-hover, @button-default-border-color,
            @button-default-outlined-bg-focused, @button-default-border-color,
            @button-default-outlined-bg-active, @button-default-border-color, @button-default-border-color,
            @button-default-border-color
        );
    }
}

.dx-button-mode-text {
    .dx-button-styling-variant(
        transparent, transparent, @button-normal-color,
        @button-normal-text-bg-hover, transparent,
        @button-normal-text-bg-focused, transparent,
        @button-normal-text-bg-active, transparent, @button-normal-color,
        @button-normal-color
    );

    &.dx-button-danger {
        .dx-button-styling-variant(
            transparent, transparent, @button-danger-border-color,
            @button-danger-text-bg-hover, transparent,
            @button-danger-text-bg-focused, transparent,
            @button-danger-text-bg-active, transparent, @button-danger-border-color,
            @button-danger-border-color
        );
    }

    &.dx-button-success {
        .dx-button-styling-variant(
            transparent, transparent, @button-success-border-color,
            @button-success-text-bg-hover, transparent,
            @button-success-text-bg-focused, transparent,
            @button-success-text-bg-active, transparent, @button-success-border-color,
            @button-success-border-color
        );
    }

    &.dx-button-default {
        .dx-button-styling-variant(
            transparent, transparent, @button-default-border-color,
            @button-default-text-bg-hover, transparent,
            @button-default-text-bg-focused, transparent,
            @button-default-text-bg-active, transparent, @button-default-border-color,
            @button-default-border-color
        );
    }
}

.dx-button-normal,
.dx-button-back {
    .dx-button-special-hover(@button-special-hover);
}

.dx-texteditor-buttons-container {
    > .dx-button {
        margin: 1px @GENERIC_EDITOR_CUSTOM_BUTTON_MARGIN;

        > .dx-button-content {
            padding-top: @GENERIC_BASE_INLINE_WIDGET_TOP_PADDING - @GENERIC_BUTTON_BORDER_WEIGHT - 2px;
            padding-bottom: @GENERIC_BASE_INLINE_WIDGET_BOTTOM_PADDING - @GENERIC_BUTTON_BORDER_WEIGHT - 2px;
        }
    }
}