devexpress-dashboard 19.2.2-beta → 19.2.3

package/scss/designer/designer.scss

@@ -1 +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-surface-bg;
                opacity: 0.7;
            }
            &.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;
+@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;