devextreme/less/sources/widgets/material/button.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/button.material.less)
* Version: 20.1.7
* Build date: Tue Aug 25 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
.dx-size-default() {
    @MATERIAL_BUTTON_HORIZONTAL_PADDING: 16px;
    @MATERIAL_BUTTON_VERTICAL_PADDING: 6px;
    @MATERIAL_BUTTON_HEIGHT: 36px;
    @MATERIAL_BUTTON_MIN_WIDTH: 64px;
    @MATERIAL_BUTTON_BOX_SHADOW_SIZE: 0 1px 3px;
    @MATERIAL_BUTTON_ACTIVE_BOX_SHADOW_SIZE: 0 4px 6px;
}
.dx-size-compact() {
    @MATERIAL_BUTTON_HORIZONTAL_PADDING: 16px;
    @MATERIAL_BUTTON_VERTICAL_PADDING: 5px;
    @MATERIAL_BUTTON_HEIGHT: 28px;
    @MATERIAL_BUTTON_MIN_WIDTH: 48px;
    @MATERIAL_BUTTON_BOX_SHADOW_SIZE: 0 1px 3px;
    @MATERIAL_BUTTON_ACTIVE_BOX_SHADOW_SIZE: 0 4px 6px;
}

@MATERIAL_BUTTON_PADDING: @MATERIAL_BUTTON_VERTICAL_PADDING @MATERIAL_BUTTON_HORIZONTAL_PADDING;
@MATERIAL_BUTTON_ICONONLY_PADDING: @MATERIAL_BUTTON_VERTICAL_PADDING;
@MATERIAL_BUTTON_ICON_SIZE: @MATERIAL_BASE_ICON_SIZE;
@MATERIAL_NORMAL_BUTTON_SHADOW: @MATERIAL_BUTTON_BOX_SHADOW_SIZE @button-shadow-color;
@MATERIAL_NORMAL_BUTTON_ACTIVE_STATE_SHADOW: @MATERIAL_BUTTON_ACTIVE_BOX_SHADOW_SIZE @button-active-shadow-color;
@MATERIAL_NORMAL_BUTTON_HOVERED_STATE_SHADOW: @MATERIAL_BUTTON_BOX_SHADOW_SIZE @button-hover-shadow-color;
@MATERIAL_NORMAL_BUTTON_FOCUSED_STATE_SHADOW: @MATERIAL_BUTTON_BOX_SHADOW_SIZE @button-focused-shadow-color;

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

.dx-button-text {
    line-height: @MATERIAL_BUTTON_HEIGHT - 2 * @MATERIAL_BUTTON_VERTICAL_PADDING - 1;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.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() {
    min-width: @MATERIAL_BUTTON_HEIGHT;
    .dx-button-sizing(@MATERIAL_BUTTON_ICONONLY_PADDING, @MATERIAL_BUTTON_ICON_SIZE, 0);
}

.dx-button-withtext-sizing() {
    .dx-button-sizing(@MATERIAL_BUTTON_PADDING, @MATERIAL_BUTTON_ICON_SIZE - 6, @MATERIAL_BUTTON_ICON_SIZE/2);
}

.dx-button-text-and-icon-sizing() {
    .dx-button-sizing(@MATERIAL_BUTTON_PADDING, @MATERIAL_BUTTON_ICON_SIZE - 6, 8px);
}

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

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

.dx-button-has-text {
    min-width: @MATERIAL_BUTTON_MIN_WIDTH;
    .dx-button-withtext-sizing();
}

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

.dx-button { // stylelint-disable-line no-duplicate-selectors
    &.dx-button-has-icon:not(.dx-button-has-text) {
        &:not(.dx-shape-standard) {
            border-radius: 50%;
            box-shadow: none;
        }
    }
}

// NOTE: Button styles

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

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

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

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

    &.dx-state-active {
        background-color: @active-background-color;
        box-shadow: @active-shadow-color;
    }

    &.dx-state-disabled {
        background: @disabled-background-color;
        box-shadow: none;

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

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

    .dx-inkripple-wave {
        background-color: fade(@text-color, 20%);
    }
}

.dx-button-styling(
    @button-bg, @button-color, @button-hover-bg,
    @button-focused-bg, @button-active-bg, @button-icon-color
) {
    border-radius: @button-border-radius;

    .dx-button-styling-variant(
        @button-bg,
        @button-color,
        @MATERIAL_NORMAL_BUTTON_SHADOW,
        @button-hover-bg,
        @MATERIAL_NORMAL_BUTTON_HOVERED_STATE_SHADOW,
        @button-focused-bg,
        @MATERIAL_NORMAL_BUTTON_FOCUSED_STATE_SHADOW,
        @button-active-bg,
        @MATERIAL_NORMAL_BUTTON_ACTIVE_STATE_SHADOW,
        @button-disabled-background,
        @button-icon-color
    );
}

.dx-button-flat-color-styling(@button-color, @hover-bg, @focused-bg, @active-bg) {
    .dx-button-styling-variant(
        transparent,
        @button-color,
        none,
        @hover-bg,
        none,
        @focused-bg,
        none,
        @active-bg,
        none,
        transparent,
        @button-color
    );
}

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

    border: 1px solid @border-color;
}

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

.dx-button { // stylelint-disable-line no-duplicate-selectors
    height: @MATERIAL_BUTTON_HEIGHT;
    position: relative;
    overflow: hidden;

    .dx-button-content {
        position: relative;

        .dx-inkripple {
            overflow: hidden;
            display: block;
        }
    }

    .dx-button-styling(
        @button-normal-bg,
        @button-normal-color,
        @button-normal-hover-bg,
        @button-normal-focused-bg,
        @button-normal-active-bg,
        @button-normal-icon-color
    );

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

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

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

    &.dx-button-back {
        .dx-button-flat-color-styling(@button-normal-color, @button-normal-text-hover-bg, @button-normal-text-focused-bg, @button-normal-text-active-bg);

        border-radius: 50%;
        .dx-button-onlyicon-sizing();

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


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

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

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

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

.dx-button-mode-outlined {
    .dx-button-outlined-color-styling(@button-normal-color, fade(@button-normal-color, 24%), @button-normal-outlined-hover-bg, @button-normal-outlined-focused-bg, @button-normal-outlined-active-bg);

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

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

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

@keyframes focus {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.06);
    }
}