devexpress-dashboard 19.2.2-beta → 19.2.3

package/scss/designer/data-source-browser/data-source-browser-view.scss

@@ -1 +1 @@
-@import "../../styles/_imports.scss";
    .dx-toolbar {
        padding: 38px;
    }
    .dx-popup-title {
        border-bottom: none;
        background: none;
        text-transform: uppercase;
        &.dx-toolbar {
            padding: 22px 38px;
        }
    }
    .dx-popup-bottom {
        &.dx-toolbar {
            padding: 30px 38px;
        }
    }
    .dx-popup-content {
        padding: 0 38px;
    }
    width: 100%;
    height: 100%;
    overflow: hidden;
    .dx-dashboard-datasource-list-action {
        text-decoration: underline;
        color: $dashboard-link-color;
        cursor: pointer;
        text-transform: none;
        font-size: 12px;
        line-height: 15px;
        font-weight: normal;
        float: right;
        margin-top: -3px;
        margin-right: 20px;
        margin-left: 2px;
        &:first-child {
            margin-right: 2px;
        }
    }
    .dx-dashboard-form-left-column {
        .dx-dashboard-form-row {
            height: 100%;
        }
    }
    .dx-dashboard-form-right-column {
        .dx-dashboard-datasource-tree-wrapper {
            background-color: $dashboard-widget-bg;
            @include dx-dashboard-properties-border;
            .dx-dashboard-datasource-browser-tree {
                .dx-treelist .dx-treelist-item {
                    font-size: 0;
                    min-width: 100px;
                    &.dx-treelist-item-selected {
                        background-color: $dashboard-data-sources-menu-field-list-selected-bg;
                        color: $dashboard-data-sources-menu-field-list-selected-color;
                        .dx-dashboard-datasource-field-icon-remove {
                            svg {
                                use {
                                    color: $dashboard-icon-danger-color;
                                }
                            }
                        }
                        .dx-dashboard-datasource-field-icon-remove:hover {
                            svg {
                                use {
                                    color: $dashboard-hover-icon-color;
                                }
                            }
                        }
                    }
                    &.dx-dashboard-treelist-item-disabled {
                        opacity: 0.5;
                    }
                    &:hover:not(.dx-dashboard-treelist-item-disabled) {
                        background-color: $dashboard-data-sources-menu-field-list-hover-bg;
                        color: $dashboard-data-sources-menu-field-list-hover-color;
                    }
                    &.dx-treelist-group-item {
                        &:not(.dx-treelist-item-collapsed) {
                            font-weight: bold;
                        }
                    }
                    .dx-collapsing-image {
                        font: 14px/1 DXIcons;
                        font-size: 14px;
                        background-image: none;
                        &:before {
                            content: "+";
                            line-height: $itemSize - 2px;
                        }
                        &.dx-image-expanded {
                            transform: none;
                            &:before {
                                content: "-";
                            }
                        }
                    }
                }
                .dx-dashboard-datasource-tree-item-column {
                    display: inline-block;
                    height: 100%;
                    width: 33%;
                    border-right: 1px solid $dashboard-border-color;
                    overflow: hidden;
                    line-height: $itemSize;
                    font-size: $smallFontSize + 1px;
                    vertical-align: top;
                    .dx-treelist-item-images {
                        width: 26px;
                        .dx-dashboard-datasource-field-icon > div {
                            width: 17px;
                        }
                    }
                    .dx-dashboard-datasource-field-icon {
                        display: inline-block;
                        vertical-align: middle;
                        padding: 0 5px;
                        cursor: pointer;
                        &.dx-dashboard-calculated-field {
                            padding: 0px;
                            float: left;
                            margin-top: 5px;
                        }
                        svg {
                            width: $dataSourceRowHeight - 2 * $dataSourceRowPadding;
                            height: $dataSourceRowHeight - 2 * $dataSourceRowPadding;
                            use {
                                color: $dashboard-icon-color;
                            }
                        }
                    }
                    .dx-dashboard-datasource-field-icon-remove {
                        svg {
                            use {
                                color: $dashboard-icon-danger-color;
                            }
                        }
                    }
                    .dx-dashboard-datasource-field-icon-edit:hover,
                    .dx-dashboard-datasource-field-icon-remove:hover {
                        svg {
                            use {
                                color: $dashboard-hover-icon-color;
                            }
                        }
                    }
                }
                transition: opacity linear 0.15s;
                transition-delay: 0s;
                &.dx-state-loading {
                    transition: opacity linear 0.5s;
                    transition-delay: 0.5s;
                    pointer-events: none;
                    opacity: 0.7
                }
            }
            .dx-dashboard-treelist-loading {
                opacity: 0;
                transition: opacity linear 0s;
                transition-delay: 0s;
                &.dx-state-active {
                    transition: opacity linear 0.5s;
                    transition-delay: 0.5s;
                    opacity: 1;
                    @include dx-dashboard-binding-header;
                    border: none;
                    color: $dashboard-designer-sub-header-color;
                    text-align: center;
                    position: absolute;
                    top: 50px;
                    left: 0;
                    right: 0;
                }
            }
        }
    }
    position: relative;
    height: 100%;
    .dx-dashboard-datasources-list-header {
        color: $dashboard-designer-header-color;
        font-size: 14px;
        text-transform: none;
        font-weight: normal;
        margin-bottom: 10px;
        .dx-dashboard-datasource-action {
            float: right;
            @include dx-dashboard-action;
        }
    }
    .dx-dashboard-datasources-list {
        position: absolute;
        left: 0;
        right: 0;
        top: 28px;
        height: calc(100% - 30px);
    }
    .dx-dashboard-datasources-content {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: $dashboard-widget-bg;
        @include dx-dashboard-properties-border;
    }
    .dx-dashboard-datasources-loading {
        color: $dashboard-toolbar-color;
        @include flex-v-container;
        align-self: center;
    }
    .dx-dashboard-datasources-error {
        padding: 35px 130px 0px 40px;
        .dx-dashboard-datasources-error-title {
            font-size: 14px;
            font-weight: bold;
            color: $dashboard-error;
            display: inline-block;
            padding-right: 70px;
        }
        .dx-dashboard-datasources-error-details {
            font-size: 11px;
        }
    }
    background-color: $dashboard-widget-bg;
    @include dx-dashboard-properties-border;
    @include dx-dashboard-properties-search;
    .dx-list-item {
        cursor: default;
        .dx-list-item-content {
            padding: 0;
        }
        .dx-dashboard-datasource-icon:not(.dx-state-disabled) {
            cursor: pointer;
        }
        .dx-state-disabled {
            opacity: 0.3;
        }
        &:hover, &.dx-state-focused {
            .dx-dashboard-datasource-icon-remove,
            .dx-dashboard-datasource-icon-embed,
            .dx-dashboard-datasource-icon-preview,
            .dx-dashboard-datasource-icon-link {
                visibility: visible;
            }
            .dx-dashboard-datasource-icon-remove {
                svg {
                    use {
                        color: $dashboard-icon-danger-color;
                    }
                }
            }
        }
    }
    .dx-dashboard-datasource-item {
        position: relative;
        .dx-dashboard-datasource-description {
            height: 40px;
            line-height: 40px;
            vertical-align: middle;
            padding-left: 10px;
            padding-right: 60px;
            font-size: $smallFontSize + 1px;
            overflow: hidden;
            white-space: nowrap;
        }
        .dx-dashboard-datasource-icons {
            position: absolute;
            right: 18px;
            top: 0;
        }
        .dx-dashboard-datasource-icon {
            @include dx-dashboard-icon-hovered-image($defaultSize, $defaultIconSize, $dashboard-icon-color);
            display: inline-block;
            visibility: hidden;
        }
    }
    &.dx-dashboard-datasources-box {
        .dx-dashboard-datasource-item {
            float: left;
            width: 250px;
            margin: 15px;
        }
    }
+@import "../../styles/_imports.scss";
    .dx-toolbar {
        padding: 38px;
    }
    .dx-popup-title {
        border-bottom: none;
        background: none;
        text-transform: uppercase;
        &.dx-toolbar {
            padding: 22px 38px;
        }
    }
    .dx-popup-bottom {
        &.dx-toolbar {
            padding: 30px 38px;
        }
    }
    .dx-popup-content {
        padding: 0 38px;
    }
    width: 100%;
    height: 100%;
    overflow: hidden;
    .dx-dashboard-datasource-list-action {
        text-decoration: underline;
        color: $dashboard-link-color;
        cursor: pointer;
        text-transform: none;
        font-size: 12px;
        line-height: 15px;
        font-weight: normal;
        float: right;
        margin-top: -3px;
        margin-right: 2px;
        margin-left: 2px;
        @include dx-dashboard-truncated;
        min-width: 20px;
        &:first-child {
            margin-right: 2px;
        }
    }
    .dx-dashboard-form-left-column {
        .dx-dashboard-form-row {
            height: 100%;
        }
    }
    .dx-dashboard-form-right-column {
        .dx-dashboard-form-row-caption {
            justify-content: flex-end;
        }
        .dx-dashboard-datasource-list-action {
           margin-left: 20px;
        }
        .dx-dashboard-datasource-tree-wrapper {
            background-color: $dashboard-widget-bg;
            @include dx-dashboard-properties-border;
            .dx-dashboard-datasource-browser-tree {
                .dx-treelist .dx-treelist-item {
                    font-size: 0;
                    min-width: 100px;
                    &.dx-treelist-item-selected {
                        background-color: $dashboard-data-sources-menu-field-list-selected-bg;
                        color: $dashboard-data-sources-menu-field-list-selected-color;
                        .dx-dashboard-datasource-field-icon-remove {
                            svg {
                                use {
                                    color: $dashboard-icon-danger-color;
                                }
                            }
                        }
                        .dx-dashboard-datasource-field-icon-remove:hover {
                            svg {
                                use {
                                    color: $dashboard-hover-icon-color;
                                }
                            }
                        }
                    }
                    &.dx-dashboard-treelist-item-disabled {
                        opacity: 0.5;
                    }
                    &:hover:not(.dx-dashboard-treelist-item-disabled) {
                        background-color: $dashboard-data-sources-menu-field-list-hover-bg;
                        color: $dashboard-data-sources-menu-field-list-hover-color;
                    }
                    &.dx-treelist-group-item {
                        &:not(.dx-treelist-item-collapsed) {
                            font-weight: bold;
                        }
                    }
                    .dx-collapsing-image {
                        font: 14px/1 DXIcons;
                        font-size: 14px;
                        background-image: none;
                        &:before {
                            content: "+";
                            line-height: $itemSize - 2px;
                        }
                        &.dx-image-expanded {
                            transform: none;
                            &:before {
                                content: "-";
                            }
                        }
                    }
                }
                .dx-dashboard-datasource-tree-item-column {
                    display: inline-block;
                    height: 100%;
                    width: 33%;
                    border-right: 1px solid $dashboard-border-color;
                    overflow: hidden;
                    line-height: $itemSize;
                    font-size: $smallFontSize + 1px;
                    vertical-align: top;
                    .dx-treelist-item-images {
                        width: 26px;
                        .dx-dashboard-datasource-field-icon > div {
                            width: 17px;
                        }
                    }
                    .dx-dashboard-datasource-field-icon {
                        display: inline-block;
                        vertical-align: middle;
                        padding: 0 5px;
                        cursor: pointer;
                        &.dx-dashboard-calculated-field {
                            padding: 0px;
                            float: left;
                            margin-top: 5px;
                        }
                        svg {
                            width: $dataSourceRowHeight - 2 * $dataSourceRowPadding;
                            height: $dataSourceRowHeight - 2 * $dataSourceRowPadding;
                            use {
                                color: $dashboard-icon-color;
                            }
                        }
                    }
                    .dx-dashboard-datasource-field-icon-remove {
                        svg {
                            use {
                                color: $dashboard-icon-danger-color;
                            }
                        }
                    }
                    .dx-dashboard-datasource-field-icon-edit:hover,
                    .dx-dashboard-datasource-field-icon-remove:hover {
                        svg {
                            use {
                                color: $dashboard-hover-icon-color;
                            }
                        }
                    }
                }
                transition: opacity linear 0.15s;
                transition-delay: 0s;
                &.dx-state-loading {
                    transition: opacity linear 0.5s;
                    transition-delay: 0.5s;
                    pointer-events: none;
                    opacity: 0.7
                }
            }
            .dx-dashboard-treelist-loading {
                opacity: 0;
                transition: opacity linear 0s;
                transition-delay: 0s;
                &.dx-state-active {
                    transition: opacity linear 0.5s;
                    transition-delay: 0.5s;
                    opacity: 1;
                    @include dx-dashboard-binding-header;
                    border: none;
                    color: $dashboard-designer-sub-header-color;
                    text-align: center;
                    position: absolute;
                    top: 50px;
                    left: 0;
                    right: 0;
                }
            }
        }
    }
    position: relative;
    height: 100%;
    .dx-dashboard-datasources-list-header {
        color: $dashboard-designer-header-color;
        font-size: 14px;
        text-transform: none;
        font-weight: normal;
        margin-bottom: 10px;
        .dx-dashboard-datasource-action {
            float: right;
            @include dx-dashboard-action;
        }
    }
    .dx-dashboard-datasources-list {
        position: absolute;
        left: 0;
        right: 0;
        top: 28px;
        height: calc(100% - 30px);
    }
    .dx-dashboard-datasources-content {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: $dashboard-widget-bg;
        @include dx-dashboard-properties-border;
    }
    .dx-dashboard-datasources-loading {
        color: $dashboard-toolbar-color;
        @include flex-v-container;
        align-self: center;
    }
    .dx-dashboard-datasources-error {
        padding: 35px 130px 0px 40px;
        .dx-dashboard-datasources-error-title {
            font-size: 14px;
            font-weight: bold;
            color: $dashboard-error;
            display: inline-block;
            padding-right: 70px;
        }
        .dx-dashboard-datasources-error-details {
            font-size: 11px;
        }
    }
    background-color: $dashboard-widget-bg;
    @include dx-dashboard-properties-border;
    @include dx-dashboard-properties-search;
    .dx-list-item {
        cursor: default;
        .dx-list-item-content {
            padding: 0;
        }
        .dx-dashboard-datasource-icon:not(.dx-state-disabled) {
            cursor: pointer;
        }
        .dx-state-disabled {
            opacity: 0.3;
        }
        &:hover, &.dx-state-focused {
            .dx-dashboard-datasource-icon-remove,
            .dx-dashboard-datasource-icon-embed,
            .dx-dashboard-datasource-icon-preview,
            .dx-dashboard-datasource-icon-link {
                visibility: visible;
            }
            .dx-dashboard-datasource-icon-remove {
                svg {
                    use {
                        color: $dashboard-icon-danger-color;
                    }
                }
            }
        }
    }
    .dx-dashboard-datasource-item {
        position: relative;
        .dx-dashboard-datasource-description {
            height: 40px;
            line-height: 40px;
            vertical-align: middle;
            padding-left: 10px;
            padding-right: 60px;
            font-size: $smallFontSize + 1px;
            overflow: hidden;
            white-space: nowrap;
        }
        .dx-dashboard-datasource-icons {
            position: absolute;
            right: 18px;
            top: 0;
        }
        .dx-dashboard-datasource-icon {
            @include dx-dashboard-icon-hovered-image($defaultSize, $defaultIconSize, $dashboard-icon-color);
            display: inline-block;
            visibility: hidden;
        }
    }
    &.dx-dashboard-datasources-box {
        .dx-dashboard-datasource-item {
            float: left;
            width: 250px;
            margin: 15px;
        }
    }