devextreme/less/sources/widgets/material/buttonGroup.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

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

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

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

.dx-button-mode-outlined {
    &.dx-buttongroup-item {
        border-left-width: 0;
    }

    &.dx-buttongroup-first-item {
        border-left-width: 1px;
    }
}

.dx-button-mode-text {
    &.dx-button.dx-buttongroup-item {
        border-radius: @button-border-radius;
    }

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

.dx-button-mode-outlined,
.dx-button-mode-contained {
    &.dx-button.dx-buttongroup-first-item {
        border-top-left-radius: @button-border-radius;
        border-bottom-left-radius: @button-border-radius;
    }

    &.dx-button.dx-buttongroup-last-item {
        border-top-right-radius: @button-border-radius;
        border-bottom-right-radius: @button-border-radius;
    }
}

.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-contained,
        &.dx-button-mode-outlined {
            &.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-hover-bg, @button-normal-focused-bg);

                &.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-success {
                    .dx-buttongroup-item-states(@button-group-success-contained-hover-bg, @button-group-success-contained-focused-bg);

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

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

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

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

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

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

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

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

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

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

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

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

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

        &.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-icon {
                        color: @button-group-normal-selected-color;
                    }
                }

                &.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-icon {
                        color: @button-group-success-selected-color;
                    }
                }

                &.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-icon {
                        color: @button-group-default-selected-color;
                    }
                }

                &.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-icon {
                        color: @button-group-danger-selected-color;
                    }
                }
            }
        }
    }
}

.dx-rtl {
    &.dx-button-mode-outlined,
    &.dx-button-mode-contained {
        &.dx-button.dx-buttongroup-first-item {
            border-radius: 0 @button-border-radius @button-border-radius 0;
        }

        &.dx-button.dx-buttongroup-last-item {
            border-radius: @button-border-radius 0 0 @button-border-radius;
        }

        &.dx-button.dx-buttongroup-first-item.dx-buttongroup-last-item {
            border-radius: @button-border-radius;
        }
    }

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

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

    &.dx-button-mode-outlined {
        &.dx-buttongroup-first-item {
            border-left-width: 0;
        }

        &.dx-buttongroup-last-item {
            border-left-width: 1px;
        }
    }
}