devextreme/less/sources/widgets/material/gallery.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/gallery.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/
*/
.dx-size-default() {
    @MATERIAL_GALLERY_INDICATOR_SIZE: 8px;
    @MATERIAL_GALLERY_INDICATOR_SELECTED_SIZE: 12px;
    @MATERIAL_GALLERY_BUTTON_PADDING: 8px;
}

.dx-size-compact() {
    @MATERIAL_GALLERY_INDICATOR_SIZE: 8px;
    @MATERIAL_GALLERY_INDICATOR_SELECTED_SIZE: 12px;
    @MATERIAL_GALLERY_BUTTON_PADDING: 8px;
}

.dx-gallery {
    .dx-gallery-nav-button-prev,
    .dx-gallery-nav-button-next {
        position: absolute;
        top: 0;
        width: 34%;
        height: 100%;
        background: transparent;
        cursor: pointer;

        &.dx-state-hover:after {
            background-color: @gallery-navbutton-hover-color;
        }

        &.dx-state-active:after {
            background-color: @gallery-navbutton-active-color;
        }

        .dx-icon-font-centered-sizing(32px);

        &:after {
            content: '';
            position: absolute;
            width: 32px;
            height: 32px;
            background: @gallery-navbutton-color;
            border-radius: 50%;
            top: 50%;
            margin-top: -16px;
        }

        &:before {
            position: absolute;
            z-index: 10;
            clear: both;
            font-size: 32px;
            color: @gallery-nav-arrow-color;
        }
    }

    .dx-gallery-nav-button-prev {
        .dx-icon(chevronleft);

        &:after {
            left: @MATERIAL_GALLERY_BUTTON_PADDING;
        }

        &:before {
            left: @MATERIAL_GALLERY_BUTTON_PADDING - 1;
            right: auto;
            margin-left: 0;
        }
    }

    .dx-gallery-nav-button-next {
        .dx-icon(chevronright);

        &:after {
            right: @MATERIAL_GALLERY_BUTTON_PADDING;
        }

        &:before {
            right: @MATERIAL_GALLERY_BUTTON_PADDING - 1;
            left: auto;
        }
    }
}


.dx-gallery-indicator {
    pointer-events: none;
    text-align: center;
}

.dx-gallery-indicator-item {
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid @gallery-indicator-item-border-color;
    pointer-events: auto;
    margin: 5px - @MATERIAL_GALLERY_INDICATOR_SIZE/2 6px;
    width: @MATERIAL_GALLERY_INDICATOR_SIZE;
    height: @MATERIAL_GALLERY_INDICATOR_SIZE;
    background: @gallery-indicator-bg;
}

.dx-gallery-indicator-item-active,
.dx-gallery-indicator-item-selected {
    width: @MATERIAL_GALLERY_INDICATOR_SELECTED_SIZE;
    height: @MATERIAL_GALLERY_INDICATOR_SELECTED_SIZE;
    background: @gallery-indicator-item-selected-bg;
    border: 2px solid @gallery-indicator-selected-border-color;
    margin: 5px - @MATERIAL_GALLERY_INDICATOR_SELECTED_SIZE/2 6px;
}


.dx-state-focused.dx-gallery {
    .dx-gallery-indicator-item-selected {
        background: @gallery-indicator-focused-bg;
    }
}