devexpress-dashboard 19.1.13 → 19.2.3

package/scss/common/extensions/dashboard-panel-extension/dashboard-panel-extension.scss

@@ -0,0 +1 @@
+@import '../../../styles/_imports.scss';
    .dx-popup-content {
        padding: 0px;
    }
    &.dx-dashboard-card-view-panel {
        .dx-popup-title {
            border-bottom: 0;
        }
    }
    .dx-popup-title {
        .dx-toolbar-label {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
        }
    }
    .dx-overlay-content {
        box-shadow: none;
        border-radius: 0;
        border-left: 0;
        border-bottom: 0;
        border-top: 0;
    }
    .dx-dashboard-title-panel {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    .dx-dashboard-dashboard-list {
        margin: 0;
        padding: 0;
        .dx-list-item-content {
            padding-left: 20px;
            font-size: 12px;
            cursor: pointer;
        }
    }
    .dx-popup-title.dx-toolbar {
        padding-left: 20px;
    }
    .dx-dashboard-edit-in-designer-button {
        position: absolute;
        width: 100%;
        height: 110px;
        bottom: 0px;
        margin: 0;
        text-align: center;
        font-size: 12pt;
        border-radius: 0;
        svg {
            width: 32px;
            height: 32px;
            .editDashboardIcon {
                fill: currentColor;
            }
        }
        .designer-button-content {
            display: flex;
            align-items: center;
            justify-content: center;
            > div {
                line-height: initial;
                display: inline-table;
            }
        }
    }
    transition: left 500ms ease;
    width: 80px;
    height: 50px;
    border-radius: 0;
    .dx-button-content {
        padding: 0;
    }
    .dx-button-text {
        font-size: 10pt;
        letter-spacing: normal;
        text-transform: uppercase;
    }
    display: none;
    height: 50px;
    justify-content: center;
    display: flex;
    height: 150px;
    border-radius: 3px;
    margin: 10px 10px 0 10px;
    width: 100%;
    z-index: 1500;
    .dx-overlay-content {
        background-color: $dashboard-surface-bg;
    }
    border: none;
    border: none;
    .dx-dashboard-dashboard-list {
        position: absolute;
        top: 50px;
        width: 100%;
        height: initial;
        .dx-scrollview-content {
            padding-left: 12px;
            padding-right: 12px;
        }
        .dx-list-item-selected {
            .dx-dashboard-card-view {
                border: solid 3px $dashboard-item-menu-item-border-color;
            }
        }
        .dx-list-item {
            margin-top: 6px;
            margin-bottom: 6px;
            box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
        }
        .dx-list-item-content {
            padding: 0;
            text-align: initial;
            position: relative;
            overflow: hidden;
        }
    }
    .dx-list-item .dx-list-item-content:before {
        content: ''
    }
    .dx-dashboard-card-view, .dx-dashboard-preview {
        width: 100%;
        height: 200px;
        display: flex;
        -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
        border-radius: 2px;
        border: none;
        background-color: $dashboard-widget-bg;
    }
    .dx-dashboard-card-view {
        align-items: center;
        justify-content: center;
    }
    .dx-dashboard-preview {
        flex-direction: column;
    }
    margin: 0px 12px 12px 12px;
    height: 40px;
    -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    border: none;
    height: calc(100% - 48px);
    .dx-popup-title {
        .dx-toolbar-label { 
            text-transform: none;
            font-size: 18px;
        }
    }
    align-self: center;
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px 0 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px 0 10px;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);

package/scss/common/extensions/data-inspector-extension/data-inspector.scss

@@ -0,0 +1 @@
+$popup-paddings: 30px;
    .dx-popup-content {
        padding: $popup-paddings;
    }
    .dx-popup-bottom.dx-toolbar {
        padding: $popup-paddings;
        padding-top: 0px;
    }
    .dx-dashboard-inspected-data-type-chooser {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        .dx-dashboard-inspected-data-type-text {
            padding-right: 15px;
            line-height: $devextreme-widget-height;
        }
        .dx-dashboard-inspected-data-radio-group {
            display: inline-block;
        }
    }
    .dx-dashboard-data-inspector-grid {
        height: calc(100% - #{$inspected-data-type-chooser-height});
        &:only-child {
            height: 100%;
        }
    }

package/scss/common/mobile-layout-extension/mobile-layout-extension.scss

@@ -0,0 +1 @@
+@import '../../styles/_imports.scss';
    @include dx-dashboard-grid;
    &.dx-overlay-shader {
        background-color: rgba(0, 0, 0, 0.5);
    }
    .dx-overlay-content {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        .master-filters-list-container {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 70px;
            top: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            > div {
                transition: flex 0.25s ease;
            }
        }
        .master-filters-list {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background-color: $dashboard-widget-bg;
            padding: 20px;
            .dx-dashboard-masters-preview-item {
                display: block;
                margin-bottom: 20px;
                cursor: pointer;
                .dx-dashboard-masters-preview-item-name {
                    font-size: 18px;
                    text-decoration-style: dashed;
                    color: $dashboard-link-color;
                    &:first-child {
                        padding-top: 0px;
                    }
                }
                .dx-dashboard-masters-preview-filtervalues {
                    font-size: $smallFontSize;
                }
            }
        }
        .dx-dashboard-standalone-item {
            position: relative;
            display: block;
            width: 100%;
            height: 200px;
        }
        .apply-buttons {
            height: 70px;
            padding: 20px;
            display: flex;
            background-color: $dashboard-widget-bg;
            align-items: stretch;
            align-content: stretch;
            flex-flow: row wrap;
            .dx-button {
                flex: 1;
                margin-left: 20px;
                &:first-child {
                    margin-left: 0px;
                }
            }
        }
    }
    .dx-list-group-header {
        background-color: $dashboard-surface-bg;
        border-bottom: none;
        border-top-width: 2px;
    }
    .dx-list-item {
        border: none;
        .dx-list-item-content {
            position: relative;
            padding-left: $mobileLayoutItemPadding;
            padding-right: $mobileLayoutItemPadding;
            padding-top: 0px;
            padding-bottom: $mobileLayoutItemPadding;
            text-align: initial;
            overflow: hidden;
            &:before {
                content: '' 
            }
        }
    }
    .dx-dashboard-mobile-layout-maximize-icon {
        position: absolute;
        z-index: $zeroZIndex;
        top: 50%;
        transform: translateY(-50%);
        left: $mobileLayoutItemPadding + 25px;
        width: $mobileLayoutMaximizeIconSize;
        height: $mobileLayoutMaximizeIconSize;
        opacity: 0;
        &.dx-dashboard-mobile-layout-maximize-icon-selected {
            background-color: $dashboard-item-selected-bg;
        }
        svg {
            width: $mobileLayoutMaximizeIconSize;
            height: $mobileLayoutMaximizeIconSize;
            pointer-events: none;
            use {
                fill: transparent;
            }
        }
    }
    .dx-dashboard-mobile-layout-item-shield {
        position: absolute;
        z-index: $mobileLayoutItemShieldZIndex;
        top: 0;
        left: $mobileLayoutItemPadding;
        bottom: $mobileLayoutItemPadding;
        right: $mobileLayoutItemPadding;
        background: $dashboard-item-selected-bg;
        opacity: 0;
        transition: opacity .2s;
        &.dx-dashboard-mobile-layout-item-selected {
            opacity: 0.5;
        }
    }
    .dx-state-disabled {
        .dx-dashboard-standalone-item {
            .dx-widget {
                opacity: 1; 
            }
        }
    }
    .dx-dashboard-standalone-item-container {
        width: 100%;
        height: $mobileLayoutItemHeight;
        display: block;
    }
    .dx-list-group-header {
        padding-left: 21px;
        padding-top: 10px;
        &.dx-dashboard-ungrouped-item, &.dx-dashboard-group-without-caption {
            padding: 0px;
            height: 12px;
        }
        &.dx-dashboard-display-none {
            display: none;
        }
    }
    .dx-toolbar-before .dx-toolbar-item:first-child {
        padding-left: 17px;
    }
    .dx-toolbar-after .dx-toolbar-item:last-child {
        padding-right: 6px;
    }
    .dx-dashboard-back-button {
        text-transform: uppercase;
        font-size: 16px;
        font-weight: bold;
        height: 24px;
        line-height: normal;
    }
    padding-top: 0px;
    padding-bottom: 0px;
    .dx-toolbar-before .dx-toolbar-item:first-child {
        padding-left: 9px;
    }
    .dx-toolbar-items-container {
        height: 34px;
    }
    .dx-toolbar-item, .dx-button {
        color: $dashboard-header-mobile-layout-color;
        font-size: 22px;
        font-weight: bold;
    }
    &.dx-dashboard-caption-toolbar {
        margin-top: 10px;
    }
    @include dx-dashboard-grid;
    .dx-dashboard-action-toolbar {
        .dx-toolbar-before .dx-toolbar-item:first-child {
            padding-left: 5px;
        }
        .dx-toolbar-after .dx-toolbar-item:last-child {
            padding-right: 5px;
        }
    }
    &.dx-popup-wrapper > .dx-overlay-content {
        background-color: $dashboard-surface-bg;
    }
    .dx-overlay-content {
        padding: 0;
    }

package/scss/common/notification-controller/notificator.scss

@@ -0,0 +1 @@
+@import "../../styles/_imports.scss";
    .dx-toast-custom {
        box-shadow: none;
    }
    .dx-toast-content {
        padding: 7px;
    }
    .dx-dashboard-notificator {
        opacity: 0.65;
        border-radius: 2px;
        padding: 7px 20px;
        line-height: normal;
        &.dx-dashboard-error {
            background-color: $dashboard-error;
            h1 {
                text-transform: none;
                font-size: $labelFontSize;
            }
        }
        &.dx-dashboard-success {
            background-color: $dashboard-success;
        }
        &.dx-dashboard-info {
            background-color: $dashboard-info-toast-bg;
            color: $dashboard-info-toast-color;
        }
        h1 {
            white-space: pre;
            margin-top: 10px;
            margin-bottom: 0;
            text-transform: uppercase;
            font-size: $labelFontSize;
            font-weight: bold;
        }
        h1:first-child {
            color: $dashboard-toast-color;
            margin-top: 0px;
        }
        span {
            font-size: $smallFontSize;
        }
    }

package/scss/common/viewer/layout/layoutItem.scss

@@ -0,0 +1 @@
+@import "../../../styles/_imports";
    @include dx-dashboard-noselect;
    display: table;
    border-spacing: 0px;
    display: table-row;
    display: table-cell;
    vertical-align: top;
    align-self: center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    @include dx-dashboard-noselect;
    position: relative;
    display: inline-block;
    vertical-align: top;
    pointer-events: none;
    .dx-layout-item-container {
        margin: ($splitterSize/2);
        &.dx-layout-item-container-transparent {
            background-color: transparent;
            box-shadow: none;
            border-radius: 0px;
        }
        .dx-dashboard-loading-indicator {
            top: ($splitterSize/2);
            left: ($splitterSize/2);
            bottom: ($splitterSize/2);
            right: ($splitterSize/2);
        }
    }
    .dx-layout-item-wrapper, .dx-layout-item-container, .dx-layout-item-cover {
        @include dx-dashboard-noselect;
        pointer-events: none;
    }
    @include dx-dashboard-noselect;
    position: absolute;
    top: $splitterSize/2;
    left: $splitterSize/2;
    right: $splitterSize/2;
    bottom: $splitterSize/2;
    background-color: azure;
    opacity: 0.6;
    pointer-events: auto;
    cursor: pointer;
    border: 1px solid lightblue;
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0.15;
    background-color: transparent;
    .dx-layout-item-cover.dx-drag-over-#{$location} {
        border-#{$location}: 10px solid blue;
        box-sizing: border-box;
    }
    position: absolute;
    top: 0px;
    right: -($splitterSize/2);
    width: $splitterSize;
    cursor: ew-resize;
    pointer-events: auto;
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom;
    position: absolute;
    left: 0px;
    bottom: -($splitterSize/2);
    height: $splitterSize;
    cursor: ns-resize;
    pointer-events: auto;
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom;
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom;
    pointer-events: auto;
    position: absolute;
    width: $splitterSize;
    cursor: ew-resize;
    background: $layoutResizerBackground;
    position: absolute;
    height: $splitterSize;
    cursor: ns-resize;
    background: $layoutResizerBackground;
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;

package/scss/common/viewer/viewer.scss

@@ -0,0 +1 @@
+@import '../../styles/_imports.scss';
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    background-color: initial;
    display: flex;
    align-items: center;
    .dx-layout-group {
        .dx-layout-item-container {
            padding: 0;
            &:not(.dx-layout-item-container-transparent) {
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                box-shadow: none;
                border: none;
            }
        }
    }
    box-shadow: 0px 1px 4px $dashboard-shadow;
    background-color: $dashboard-widget-bg;
    border-radius: 2px;
    box-sizing: border-box;
    pointer-events: visiblePainted; 
    pointer-events: auto;
    @include flex-v-container;
    .dx-layout-item-loading, .dx-layout-item-empty {
        @include flex-v-container;
        align-self: center;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        width: 100%;
        text-align: center;
        color: $dashboard-toolbar-color;
        font-size: $smallFontSize;
    }
    .dx-dashboard-standalone-item-container.dx-state-disabled {
        .dx-dashboard-item-container {
            pointer-events: none;
            &.dx-layout-item-container-transparent {
                background-color: transparent;
                box-shadow: none;
                border-radius: 0px;
            }
        }
    }
    .dx-layout-item-container.dx-layout-item-container-transparent {
        background-color: $dashboard-surface-bg;
    }
    display: none;
    width: 34px; 
    height: 34px; 
    padding: 5px;
    > div {
        @include dx-dashboard-icon-hovered-image(24px); 
    }
    display: block;
    @include dashboard-flex-parent;
    background-color: $dashboard-tab-inactive-bg;
    .dx-dashboard-item-container {
        background-color: $dashboard-tab-inactive-bg;
    }
    border-bottom: 1px solid $dashboard-border-color;
    &.dx-tabs-expanded {
        display: flex;
    }
    .dx-tabs-wrapper {
        display: flex;
    }
    .dx-tab-content {
        display: block;
    }
    .dx-toolbar {
        background-color: transparent;
    }
    &.dx-tabs {
        border: 0;
        .dx-dashboard-item-container {
            box-shadow: none;
            border: none;
        }
        .dx-dashboard-standalone-item:not(.dx-dashboard-hidden-element) {
            border-right: 1px solid $dashboard-border-color;
            &.dx-dashboard-ignore-border {
                border-right: none;
            }
        }
        .dx-tab {
            padding: 0;
            display: block;
            &:not(.dx-tab-selected) {
                .dx-dashboard-standalone-item:not(.dx-dashboard-hidden-element) {
                    border-bottom: 1px solid $dashboard-border-color;
                }
                &.dx-state-hover {
                    .dx-dashboard-item-container {
                        background-color: $dashboard-tab-hover-bg;
                    }
                }
            }
            &.dx-tab-selected {
                .dx-dashboard-cover {
                    pointer-events: none;
                }
                &:after {
                    border: none;
                }
                .dx-dashboard-item-container {
                    background-color: $dashboard-widget-bg;
                }
            }
        }
        .dx-tab-content {
            .dx-dashboard-group-item {
                padding: 0;
            }
        }
    }

package/scss/designer/button-group.scss

@@ -0,0 +1 @@
+@import '../styles/_imports.scss';
    .dx-buttongroup {
        width: 100%;
        height: $dataItemHeight;
        .dx-buttongroup-wrapper {
            height: 100%;
        }
        &.dx-dashboard-button-with-icon {
            @include dx-dashboard-icon-image($itemSize, $defaultIconSize, $dashboard-type-icon-color);
            .dx-buttongroup-item {
                padding: 0px;
                .dx-button-content {
                    padding: 0px;
                }
            }
            svg {
                pointer-events: none;
                margin: ($itemSize - $defaultIconSize)/2-1px ($itemSize - $defaultIconSize)/2-1px;
                use {
                    fill: $dashboard-type-icon-sub-color;
                }
            }
            .dx-item-selected {
                svg {
                    use {
                        color: $dashboard-type-selected-icon-color;
                fill: $dashboard-type-selected-icon-sub-color;
                    }
                }
            }
        }
        .dx-buttongroup-item {
            margin: 0;
            text-align: center;
            padding-left: 5px;
            padding-right: 5px;
            font-size: $bindingPanelEditorValueFontSize;
            .dx-button-content {
                padding-right: 0;
                padding-left: 0;
                .dx-button-text {
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
            &.dx-buttongroup-item-has-width {
                flex: 1 1 0;
                @include dx-dashboard-text-overflow;
                min-width: 0
            }
        }
    }