devextreme/less/sources/widgets/generic/buttonGroup.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/buttonGroup.generic.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/
*/
@import (once) "./button.generic.less";

.dx-button-mode-outlined,
.dx-button-mode-contained {
    &.dx-buttongroup-item {
        padding-left: 1px;
        padding-right: 1px;

        &.dx-state-hover .dx-button-content {
            border-radius: 0;
        }
    }

    &.dx-buttongroup-first-item {
        padding-left: 0;
        border-left-width: @GENERIC_BUTTON_BORDER_WEIGHT;

        &.dx-button,
        &.dx-state-hover .dx-button-content {
            border-top-left-radius: @button-border-radius;
            border-bottom-left-radius: @button-border-radius;
        }
    }

    &.dx-buttongroup-last-item {
        padding-right: 0;

        &.dx-button,
        &.dx-state-hover .dx-button-content {
            border-top-right-radius: @button-border-radius;
            border-bottom-right-radius: @button-border-radius;
        }
    }
}

.dx-button-mode-text {
    &.dx-buttongroup-first-item {
        margin-left: 0;
    }
}

.dx-buttongroup-item-states(@hover-color, @focused-color) {
    &.dx-state-hover {
        background-color: @hover-color;
    }

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

.dx-buttongroup-item {
    &.dx-button {
        &.dx-button-mode-outlined,
        &.dx-button-mode-contained {
            &.dx-state-disabled {
                opacity: 1;

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

        &.dx-button-mode-contained {
            &.dx-button-normal {
                background-color: @button-normal-bg;

                .dx-buttongroup-item-states(@button-normal-contained-bg-hover, @button-normal-contained-bg-focused);

                &.dx-item-selected {
                    background-color: @button-group-normal-contained-selected-bg;

                    .dx-buttongroup-item-states(@button-group-normal-contained-selected-bg-hover, @button-group-normal-contained-selected-bg-focused);

                    &,
                    & .dx-icon {
                        color: @button-group-normal-selected-color;
                    }
                }
            }

            &:not(.dx-item-selected) {
                background-color: @button-normal-bg;

                &.dx-button-default {
                    border-color: @button-default-border-color;

                    .dx-buttongroup-item-states(@button-normal-contained-bg-hover, @button-normal-contained-bg-focused);

                    &,
                    & .dx-icon {
                        color: @button-default-border-color;
                    }
                }

                &.dx-button-success {
                    border-color: @button-success-border-color;

                    .dx-buttongroup-item-states(@button-normal-contained-bg-hover, @button-normal-contained-bg-focused);

                    &,
                    & .dx-icon {
                        color: @button-success-border-color;
                    }
                }

                &.dx-button-danger {
                    border-color: @button-danger-border-color;

                    .dx-buttongroup-item-states(@button-normal-contained-bg-hover, @button-normal-contained-bg-focused);

                    &,
                    & .dx-icon {
                        color: @button-danger-border-color;
                    }
                }
            }
        }

        &.dx-button-mode-outlined {
            .dx-buttongroup-item-states(@button-normal-outlined-bg-hover, @button-normal-outlined-bg-focused);

            &.dx-button-default {
                .dx-buttongroup-item-states(@button-default-outlined-bg-hover, @button-default-outlined-bg-focused);
            }

            &.dx-button-success {
                .dx-buttongroup-item-states(@button-success-outlined-bg-hover, @button-success-outlined-bg-focused);
            }

            &.dx-button-danger {
                .dx-buttongroup-item-states(@button-danger-outlined-bg-hover, @button-danger-outlined-bg-focused);
            }
        }

        &.dx-button-mode-text {
            .dx-buttongroup-item-states(@button-normal-text-bg-hover, @button-normal-text-bg-focused);

            &.dx-button-default {
                .dx-buttongroup-item-states(@button-default-text-bg-hover, @button-default-text-bg-focused);
            }

            &.dx-button-success {
                .dx-buttongroup-item-states(@button-success-text-bg-hover, @button-success-text-bg-focused);
            }

            &.dx-button-danger {
                .dx-buttongroup-item-states(@button-danger-text-bg-hover, @button-danger-text-bg-focused);
            }
        }

        &.dx-button-mode-outlined,
        &.dx-button-mode-text {
            &.dx-item-selected {
                &.dx-button-normal {
                    background-color: @button-group-normal-selected-bg;

                    .dx-buttongroup-item-states(@button-group-normal-selected-bg-hover, @button-group-normal-selected-bg-focused);
                }

                &.dx-button-success {
                    background-color: @button-group-success-selected-bg;

                    .dx-buttongroup-item-states(@button-group-success-selected-bg-hover, @button-group-success-selected-bg-focused);
                }

                &.dx-button-default {
                    background-color: @button-group-default-selected-bg;

                    .dx-buttongroup-item-states(@button-group-default-selected-bg-hover, @button-group-default-selected-bg-focused);
                }

                &.dx-button-danger {
                    background-color: @button-group-danger-selected-bg;

                    .dx-buttongroup-item-states(@button-group-danger-selected-bg-hover, @button-group-danger-selected-bg-focused);
                }

                &.dx-button-success,
                &.dx-button-success .dx-icon {
                    color: @button-group-success-selected-color;
                }

                &.dx-button-default,
                &.dx-button-default .dx-icon {
                    color: @button-group-default-selected-color;
                }

                &.dx-button-danger,
                &.dx-button-danger .dx-icon {
                    color: @button-group-danger-selected-color;
                }
            }
        }
    }
}

.dx-rtl {
    &.dx-button-mode-outlined,
    &.dx-button-mode-contained {
        &.dx-buttongroup-first-item {
            border-left-width: 0;
            padding-left: 1px;
            padding-right: 0;

            &.dx-button,
            &.dx-state-hover .dx-button-content {
                border-radius: 0 @button-border-radius @button-border-radius 0;
            }
        }

        &.dx-buttongroup-last-item {
            border-left-width: @GENERIC_BUTTON_BORDER_WEIGHT;
            padding-right: 1px;
            padding-left: 0;

            &.dx-button,
            &.dx-state-hover .dx-button-content {
                border-radius: @button-border-radius 0 0 @button-border-radius;
            }

            &.dx-buttongroup-first-item {
                &.dx-button,
                &.dx-state-hover .dx-button-content {
                    border-radius: @button-border-radius;
                }
            }
        }
    }

    &.dx-button-mode-text {
        &.dx-buttongroup-first-item {
            margin-left: 1px;
        }

        &.dx-buttongroup-last-item {
            margin-left: 0;
        }
    }
}