devexpress-dashboard 19.1.13 → 19.2.3

package/scss/designer/designer.scss

@@ -0,0 +1 @@
+@import "../styles/_imports.scss";
    @include dx-dashboard-font-family;
    background-color: $dashboard-surface-bg;
    a {
        color: $dashboard-link-color;
    }
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 150px;
    min-width: 300px;
    overflow: hidden;
    .dx-dashboard-control-loading {
        text-transform: uppercase;
        color: $dashboard-toolbar-color;
        font-size: $labelFontSize;
        font-weight: bold;
    }
    * {
        box-sizing: border-box;
    }
    .dx-popup-wrapper {
        transition: background $menuAnimationDelay;
    }
    .dx-overlay-shader {
        background-color: $dashboard-overlay-shader-bg;
    }
    .dx-dashboard-no-visible-dashboard {
        @include dx-dashboard-vertical-align-container;
        width: 100%;
        height: 100%;
        text-align: center;
    }
    .dx-dashboard-popup.dx-popup-wrapper > .dx-overlay-content {
        $closebuttonSize: 25px;
        .dx-popup-title {
            .dx-toolbar-label {
                font-size: $smallFontSize;
                text-transform: uppercase;
                font-weight: 800;
            }
            .dx-closebutton {
                width: $closebuttonSize;
                height: $closebuttonSize;
                &.dx-state-hover, &.dx-state-focused, &.dx-state-active { 
                    background: inherit;
                    border-color: transparent;
                    box-shadow: inherit;
                }
                .dx-icon.dx-icon-close {
                    padding: 0;
                    &:before {
                        color: $dashboard-icon-color;
                    }
                    &:hover:before {
                        color: $dashboard-hover-icon-color;
                    }
                }
            }
        }
    }
    .dx-dashboard-designer-menu-header + .dx-popup-content, .dx-dashboard-property-grid .dx-popup-content {
        padding: 0px;
    }
    .dx-dashboard-surface {
        position: absolute;
        left: $toolItemSize*2;
        top: 0;
        right: 0;
        bottom: 0;
        .dx-layout-item-wrapper {
            .dx-layout-item-container {
                overflow: hidden;
            }
        }
        .dx-layout-item-cover {
            background-color: transparent;
            border: 2px solid transparent;
            opacity: 1;
            transition: border-color $fastAnimationLength;
            &.dx-layout-float-cover {
                z-index: $layoutItemCoverZIndex;
            }
            &:hover {
                border-color: $dashboard-item-menu-item-border-color;
            }
        }
        body:hover & dashboard-viewer .dx-layout-root,
        & dashboard-viewer.dx-dashboard-in-work .dx-layout-root {
            .dx-layout-selected {
                pointer-events: none;
                border-color: $dashboard-item-menu-item-border-color;
            }
            &.dx-state-underlying-selection .dx-layout-item-cover:not(.dx-layout-selected):not(:hover) {
                background-color: $dashboard-item-shadow;
            }
            &.dx-state-underlying-selection .dx-layout-item-wrapper:not(:hover) > .dx-layout-item-container:not(.dx-layout-item-selected) {
                filter: grayscale(1);
                -webkit-filter: grayscale(1);
            }
            @include dx-dashboard-item-drop-position-indicator
        }
        .dx-dashboard-layout-state {
            svg {
                width: 48px;
                height: 48px;
                min-width: 48px;
                min-height: 48px;
            }
            &.dx-dashboard-layout-state-large {
                .dx-dashboard-item-type-title {
                }
                .dx-dashboard-item-type-icon {
                }
                .dx-dashboard-layout-state-content {
                }
            }
            &.dx-dashboard-layout-state-medium {
                .dx-dashboard-item-type-title {
                }
                .dx-dashboard-item-type-icon {
                    display: none;
                }
                .dx-dashboard-layout-state-content {
                }
            }
            &.dx-dashboard-layout-state-small {
                .dx-dashboard-item-type-title {
                }
                .dx-dashboard-item-type-icon {
                    display: none;
                }
                .dx-dashboard-layout-state-content {
                    display: none;
                }
            }
            .dx-dashboard-item-type-title {
                font-size: $normalFontSize;
                margin-top: 3px;
            }
            .dx-dashboard-layout-text {
                font-size: $smallFontSize;
                max-width: 150px;
                margin-top: 14px;
                align-self: center;
            }
            .dx-dashboard-layout-link {
                display: inline-block;
                text-decoration: underline;
                color: $dashboard-link-color;
                cursor: pointer;
                text-transform: none;
                font-weight: normal;
            }
            &.dx-dashboard-layout-state-empty {
                svg {
                    use {
                        fill: $dashboard-icon-color;
                        color: $dashboard-icon-color;
                        opacity: 0.35;
                    }
                }
                div {
                    color: $dashboard-designer-sub-header-color;
                }
            }
            &.dx-dashboard-layout-state-error {
                svg {
                    use {
                        fill: $dashboard-error;
                        color: $dashboard-error;
                    }
                }
                div {
                    color: $dashboard-error;
                }
            }
        }
        .dx-layout-item-placeholder {
            @include flex-v-container;
            height: 100%;
            pointer-events: auto;
            text-align: center;
            overflow: hidden;
            padding: 15px;
        }
        @include dx-dashboard-item-drop-position-indicator
    }
    .dx-texteditor-buttons-container .dx-icon.dx-icon-clear {
        &:before {
            content: ' ';
            height: 100%;
            display: block;
            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLmR4LWRhc2hib2FyZC1pY29ue2ZpbGw6IzdCN0I3Qjt9DQo8L3N0eWxlPg0KPHBhdGggY2xhc3M9ImR4LWRhc2hib2FyZC1pY29uIiBmaWxsPSIjN0I3QjdCIiBkPSJNMTIsNWMtMy45LDAtNywzLjEtNyw3YzAsMy45LDMuMSw3LDcsN3M3LTMuMSw3LTdDMTksOC4xLDE1LjksNSwxMiw1eiBNMTYsMTVoLTJsLTItMmwtMiwySDhsMy0zTDgsOWgyDQoJbDIsMmwyLTJoMmwtMywzTDE2LDE1eiIvPg0KPC9zdmc+DQo=');
        }
    }
    .dx-dashboard-settings-form {
        @include dx-dropdown-sizes-patch;
        .dx-list-item {
            .dx-list-item-content {
                padding: 10px 10px;
            }
        }
    }
    .dx-texteditor-input {
        min-height: initial;
    }
    .dx-treelist-wrapper .dx-scrollable-container {
        max-height: 300px;
        cursor: default;
    }
    z-index: auto;
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    top: 16px;
    bottom: 16px;
    pointer-events: auto;

package/scss/designer/extensions/convert.scss

@@ -0,0 +1 @@
+@import "../../styles/_imports.scss";
    .dx-dashboard-binding-panel-details {
        .dx-dashboard-toolbox {
            width: auto;
            top: 0;
            letter-spacing: 0;
            position: relative;
            .dx-dashboard-toolbox-item {
                &.dx-state-disabled {
                    opacity: 0.3;
                    pointer-events: none;
                    .dx-dashboard-toolbox-item-hover {
                        display: none;
                    }
                }
            }
        }
        .dx-dashboard-duplicate-action {
            text-decoration: underline;
            color: $dashboard-link-color;
            cursor: pointer;
            font-size: 11px;
            text-align: center;
            padding: 10px;
        }
    }

package/scss/designer/filtering/filter.scss

@@ -0,0 +1 @@
+@import "../../styles/_imports.scss";
    height: $filterHeight;
    .dx-treeview-loadindicator-wrapper {
        display: none;
    }
    @include dx-dashboard-vertical-align-container;
    top: 46px;
    left: 0;
    position: absolute;
    height: $filterHeight;
    width: 100%;
    text-align: center;
    color: $dashboard-toolbar-color;
    font-size: $smallFontSize;

package/scss/designer/items/container-type-selector/container-type-selector.scss

@@ -0,0 +1 @@
+@import '../../../styles/_imports.scss';
    cursor: default; 
    padding: 12px 0 6px;
    line-height: 0px;
    white-space: nowrap;
    max-width: $bindingPanelPanelPropertiesInnerWidth - 2 * $accordionPadding;
    .dx-dashboard-container-type {
        @include dx-dashboard-noselect;
        display: inline-block;
        & + .dx-dashboard-container-type {
            margin-left: 4px;
        }
    }

package/scss/designer/items/dashboard-item-menu.scss

@@ -0,0 +1 @@
+@import "../../styles/_imports.scss";
    visibility: hidden;
    opacity: 0;
    &.dx-dashboard-item-top {
        top: 0;
        transform: none;
    }
    &.dx-dashboard-item-bottom {
        top: auto;
        transform: none;
        bottom: 0;
    }
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: $itemMenuHorizontalOffset;
    padding-left: 0;
    @include dx-dashboard-noselect;
    @include menu-cover-animation;
    body:hover dashboard-viewer .dx-layout-root .dx-state-selected > &,
    dashboard-viewer.dx-dashboard-in-work .dx-state-selected > & {
        opacity: 1;
        visibility: visible;
    }
    background-color: $dashboard-item-menu-bg;
    border-radius: 0 2px 2px 0;
    overflow: hidden;
    .dx-dashboard-designer-menu-item {
        @include dx-dashboard-icon-image($itemMenuElementSize, $defaultIconSize, $dashboard-item-menu-icon-color);
        margin: 2px;
        border-radius: 2px;
        &:hover {
            background-color: rgba(255,255,255,0.15);
        }
        &.dx-state-selected {
            opacity: 0.25;
            background-color: inherit;
            svg use {
                color: $dashboard-item-menu-icon-color;
            }
        }
        &.dx-dashboard-remove-item-button {
            svg use {
                color: $dashboard-item-menu-remove-icon-color;
            }
        }
        svg {
            pointer-events: none;
            use {
                fill: $dashboard-item-menu-icon-sub-color;
            }
        }
    }
    .dx-dashboard-designer-menu-separator {
        width: 32px;
        height: 2px;
        border-top: 1px solid $dashboard-item-menu-separator-color;
        margin: 0 4px;
    }
    z-index: $dashboardItemMenuZIndex;
    &.dx-position-left {
        left: $itemMenuHorizontalOffset;
        right: auto;
        border-radius: 2px 0 0 2px;
    }
    pointer-events: auto;
    position: absolute;
    top: $itemPlateVerticalOffset;
    left: calc(50% - #{$itemPlateSize/2});
    @include menu-cover-animation;
    body:hover dashboard-viewer .dx-layout-root &.dx-state-selected,
    dashboard-viewer.dx-dashboard-in-work &.dx-state-selected {
        opacity: 1;
        visibility: visible;
    }
    cursor: move;
    background: none;
    background-color: $dashboard-item-menu-bg;
    border-radius: 2px;
    z-index: $dashboardItemMenuZIndex;
    @include dx-dashboard-icon-image($itemPlateSize, $defaultIconSize, $dashboard-item-menu-icon-color);

package/scss/designer/items/item-overlays.scss

@@ -0,0 +1 @@
+@import "../../styles/_imports.scss";
    transition-property: left, right;
    transition-duration: $bindingPanelAnimationLength;
    transition-timing-function: ease;
    width: 11px;
    height: 11px;
    .dx-dashboard-context-menu-panel {
        @include dx-dashboard-noselect;
        position: relative;
        height: 100%;
        visibility: visible;
        border-left: none;
        border-radius: 3px;
        overflow: hidden;
        transition: margin-left $bindingPanelAnimationLength ease, width $bindingPanelAnimationLength ease;
        .dx-position-left & {
            margin-left: $bindingPanelPanelPropertiesWidth;
            &.dx-visible-properties {
                margin-left: 0;
            }
        }  
    }  
    &.dx-position-left .dx-dashboard-context-menu-panel {
            margin-left: $bindingPanelPanelPropertiesWidth + 3px;
            &.dx-visible-properties {
                margin-left: 3px;
            }
        }    
    &.dx-dashboard-binding-panel .dx-dashboard-context-menu-panel {
        border: $itemBorderSize solid rgba(0,0,0,0.25);
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
    }
    &.dx-popup-wrapper {
        & > .dx-overlay-content { 
            border-radius: 3px;
        }
        &.dx-dashboard-binding-panel > .dx-overlay-content { 
            border: none;
            box-shadow: none;
        }
    }
    position: relative;
    height: $headerPanelHeight;
    background-color: $dashboard-item-binding-menu-bg;
    .dx-dashboard-panel-header-title {
        position: absolute;
        top: 0;
        left: 0;
        line-height: $headerPanelHeight;
        text-transform: uppercase;
        padding: 0 20px;
        font-weight: bold;
        font-size: 11px;
    }
    .dx-dashboard-close-panel {        
        position: absolute;
        right: 7px;
        svg {            
            pointer-events: none;
        }
        @include dx-dashboard-icon-hovered-image();
    }
    .dx-popup-content {
        position: relative;
    }
    &.dx-popup-wrapper > .dx-overlay-content {
        visibility: hidden;
    }
    &.dx-popover-wrapper.dx-popover-without-title {
        &.dx-position-left {
            .dx-popover-arrow {
                right: -9px !important;
                visibility: visible;
            }
        }
        &.dx-position-right {
            .dx-popover-arrow {
                left: -9px !important;
                visibility: visible;
            }
        }
    }
    .dx-dashboard-binding-panel-content {
        left: 0;
        width: $bindingPanelPanelWidth - $itemBorderSize * 2;
        background-color: $dashboard-item-binding-menu-bg;
        height: 100%;
        padding: 14px 20px 20px;
        visibility: visible;
    }
    .dx-dashboard-binding-panel-options {
        background-color: $dashboard-item-binding-menu-bg;
        width: 100%;
        height: 100%;
        .dx-dashboard-binding-panel-details {
            width: $bindingPanelPanelPropertiesWidth;
        }
    }
    width: $bindingPanelPanelWidth;
    position: absolute;
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: $bindingPanelDataBindingZIndex;
    @include binding-panel-transitions;
    .dx-dashboard-close-panel {
        position: absolute;
        right: 10px;
        @include dx-dashboard-icon-hovered-image();
        svg {
            float: right;
            pointer-events: none;
        }
    }
    .dx-dashboard-data-binding-panel {
        position: absolute;
        top: 0;
        width: $bindingPanelPanelWidth - $itemBorderSize * 2;
        bottom: $dataSourcePanelHeaderHeight + $dataSourcePanelBodyHeight;
        background-color: $dashboard-item-binding-menu-bg;
    }
    .dx-dashboard-data-source-panel {
        position: absolute;
        width: $bindingPanelPanelWidth - $itemBorderSize * 2;
        height: $dataSourcePanelHeaderHeight + $dataSourcePanelBodyHeight;
        bottom: 0;
        background-color: $dashboard-item-binding-menu-bg;
        cursor: default;
        -moz-transition: height .5s ease;
        -webkit-transition: height .5s ease;
        -o-transition: height .5s ease;
        transition: height .5s ease;
        .dx-dashboard-data-source-header {
            height: $dataSourcePanelHeaderHeight;
            text-align: center;
            border-bottom: 1px solid $dashboard-border-color;
            cursor: pointer;
            @include dx-dashboard-centered-parent;
            padding-left: 20px;
            padding-right: 20px;
            & > div {
                color: $dashboard-designer-header-color;
                display: inline-block;
                line-height: $dataSourcePanelHeaderHeight;
                vertical-align: bottom;
                font-size: $bindingHeadersFontSize;
                font-weight: 700;
                text-transform: uppercase;
            }
            .dx-dashboard-data-source-options {
                vertical-align: top;
                @include dx-dashboard-icon-hovered-image(24px, 24px, $dashboard-icon-accent-color, $dashboard-hover-icon-color);
                &.dx-dashboard-data-source-options-active {
                    @include dx-dashboard-icon-hovered-image(24px, 24px, $dashboard-hover-icon-color, $dashboard-hover-icon-color);
                    @include dx-dashboard-fixed;
                }
            }
        }
        .dx-dashboard-data-source-body {
            background-color: $dashboard-item-binding-menu-filter-section-bg;
            .dx-dashboard-data-source-info {
                height: $dataSourcePanelBodyHeight;
                line-height: $dataSourcePanelBodyHeight;
                transition: height 0.5s ease;
                font-size: 12px;
                text-align: center;
                vertical-align: middle;
                padding: 0 17px;
                cursor: pointer;
                @include dx-dashboard-text-overflow;
            }
            .dx-dashboard-data-source-info-alert {
                color: $dashboard-error;
                font-weight: bold;
            }
            .dx-dashboard-data-source-options-panel {
                height: 374px;
                overflow: hidden;
                transition: height 0.5s ease;
                & > div {
                    padding: 20px;
                    & > div {
                        width: 100%;
                    }
                    & > div > span, & > span > span {
                        margin: 0 5px;
                        display: inline-block;
                        color: $dashboard-link-color;
                        font-size: 12px;
                        text-decoration: underline;
                        cursor: pointer;
                    }
                }
                .dx-dashboard-data-source-chooser {
                    height: 234px;
                    overflow: hidden;
                }
                .dx-dashboard-data-item-filter {
                    @include dx-dashboard-centered-parent;
                    height: 60px;
                    line-height: 60px;
                    text-align: center;
                    margin: 10px 0;
                    background-color: $dashboard-widget-bg;
                    @include dx-dashboard-properties-border;
                }
                .dx-dashboard-data-source-options-control {
                    display: flex;
                    justify-content: flex-end;
                }
            }
        }
        &:hover {
            .dx-dashboard-data-source-header .dx-dashboard-data-source-options svg use {
                color: $dashboard-hover-icon-color;
            }
        }
    }
    @include dx-dashboard-text-overflow;
    @include binding-panel-transitions;
    z-index: $bindingPanelPropertiesZIndex;
    left: $bindingPanelPanelWidth - 2px;
    right: 0;
    visibility: visible;
    background-color: $dashboard-widget-bg;
    border-left: $itemBorderSize solid $dashboard-border-color;
    height: 100%;
    position: absolute;
    padding: 0;
    .dx-dashboard-binding-panel-header-container {
        height: $headerPanelHeight;
        width: 100%;
        display: flex;
        justify-content: space-between;
        > h5 {
            font-size: $secondaryModelHeaderFontSize;
            color: $dashboard-designer-sub-header-color;
            font-weight: 400;
            margin: 0;
            padding-right: $accordionPadding;
            height: $headerPanelHeight;
            line-height: $headerPanelHeight;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }
    visibility: hidden;
    &.dx-visible-properties {
        visibility: visible;
    }
    float: left;
    @include dx-dashboard-icon-hovered-image();
    svg {
        pointer-events: none;
        margin-left: 14px;
        margin-top: 9px;
    }
    overflow-x:hidden; 
    position: relative; 
    height: 100%;
    width: $bindingPanelPanelPropertiesInnerWidth;
    &>div {
        width: $bindingPanelPanelPropertiesInnerWidth;
        position: absolute;
        transition: left 0.5s;
        top: 0;
        bottom: 55px;
    }
    &>div:first-child {
        left: 0;
    }
    &>div:last-child {
        left: $bindingPanelPanelPropertiesWidth;
        visibility: hidden;
    }
    .dx-dashboard-secondary-header-container {
        position:absolute;
        top: -($headerPanelHeight + 1px);
        right: 0;
        width: $bindingPanelPanelPropertiesWidth;
        height: $headerPanelHeight;
        background-color: $dashboard-widget-bg;
        display: flex;
        justify-content: space-between;
        h5 {
            font-size: $secondaryModelHeaderFontSize;
            color: $dashboard-designer-sub-header-color;
            font-weight: 400;
            margin: 0;            
            height: $headerPanelHeight;
            line-height: $headerPanelHeight;
            padding-right: $accordionPadding;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }
    &>div:first-child {
        left: -$bindingPanelPanelPropertiesWidth;
    }
    &>div:last-child {
        left: 0;
        visibility: visible;
    }
    &>.dx-overlay-content {
        opacity: 1;
        transition-property: opacity, text-shadow, color;
        transition-duration: 0.15s;
        transition-timing-function: ease;
        &.dx-target-widget-hovered {            
           opacity: 0.35;
           color: transparent;
           text-shadow: 0 0 10px rgba(0,0,0,0.5);
           filter:blur($blurRadius);
           .dx-dashboard-data-item,
           .dx-widget,
           .dx-editors .dx-fieldset .dx-field .dx-field-label,
           .dx-tab-selected,
           .dx-texteditor-input,
           .dx-list-item-content,
           .dx-editors .dx-group-header-font,
           .dx-dashboard-data-binding-surface .dx-dashboard-data-source-panel .dx-dashboard-data-source-change,
           .dx-buttongroup,
           .dx-placeholder::before,
           h4, 
           h5,
           .dx-accordion-item-title h5,
           h6 {
               color: transparent;
           }
           svg use {
               opacity: 0.3;
           }
         }
    }