From acd35e3a6a5234a5ebd5696d2c0c1e5fdb9093f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marker=20dao=20=C2=AE?= Date: Thu, 14 Sep 2023 01:55:06 +0400 Subject: [PATCH] fix(tabPanel): Update styles --- .../Overview/Angular/app/app.component.css | 30 ++++++++----------- .../Demos/TabPanel/Overview/React/styles.css | 30 ++++++++----------- JSDemos/Demos/TabPanel/Overview/Vue/App.vue | 14 +++++---- .../Demos/TabPanel/Overview/Vue/TaskItem.vue | 12 ++------ .../Demos/TabPanel/Overview/jQuery/styles.css | 30 ++++++++----------- .../Content/DemosStyles/TabPanel/Overview.css | 30 ++++++++----------- .../css/DemosStyles/TabPanel/Overview.css | 30 ++++++++----------- 7 files changed, 76 insertions(+), 100 deletions(-) diff --git a/JSDemos/Demos/TabPanel/Overview/Angular/app/app.component.css b/JSDemos/Demos/TabPanel/Overview/Angular/app/app.component.css index d3a2e5ab59f..16c18a6c5f0 100644 --- a/JSDemos/Demos/TabPanel/Overview/Angular/app/app.component.css +++ b/JSDemos/Demos/TabPanel/Overview/Angular/app/app.component.css @@ -136,14 +136,14 @@ bottom: -150%; } -::ng-deep .dx-color-scheme-lime-light, -::ng-deep .dx-color-scheme-blue-light, -::ng-deep .dx-color-scheme-orange-light, -::ng-deep .dx-color-scheme-purple-light, -::ng-deep .dx-color-scheme-teal-light { +::ng-deep .dx-theme-material .widget-container { background-color: rgba(191, 191, 191, 0.15); } +::ng-deep .dx-color-scheme-contrast .task-item { + border: 1px solid #dedede; +} + ::ng-deep .dx-color-scheme-teal-light .dx-tabpanel, ::ng-deep .dx-color-scheme-orange-light .dx-tabpanel, ::ng-deep .dx-color-scheme-lime-light .dx-tabpanel, @@ -152,6 +152,14 @@ background-color: #fff; } +::ng-deep .dx-color-scheme-teal-dark .dx-tabpanel, +::ng-deep .dx-color-scheme-purple-dark .dx-tabpanel, +::ng-deep .dx-color-scheme-orange-dark .dx-tabpanel, +::ng-deep .dx-color-scheme-lime-dark .dx-tabpanel, +::ng-deep .dx-color-scheme-blue-dark .dx-tabpanel { + background-color: #363640; +} + ::ng-deep .dx-color-scheme-teal-light .option-label, ::ng-deep .dx-color-scheme-purple-light .option-label, ::ng-deep .dx-color-scheme-orange-light .option-label, @@ -163,18 +171,6 @@ color: rgba(0, 0, 0, 0.6); } -::ng-deep .dx-color-scheme-teal-dark .task-item, -::ng-deep .dx-color-scheme-purple-dark .task-item, -::ng-deep .dx-color-scheme-orange-dark .task-item, -::ng-deep .dx-color-scheme-lime-dark .task-item, -::ng-deep .dx-color-scheme-blue-dark .task-item, -::ng-deep .dx-color-scheme-darkviolet .task-item, -::ng-deep .dx-color-scheme-darkmoon .task-item, -::ng-deep .dx-color-scheme-contrast .task-item, -::ng-deep .dx-color-scheme-dark .task-item { - box-shadow: 0 1px 4px 0 rgba(255, 255, 255, 0.1); -} - ::ng-deep .dx-color-scheme-teal-dark .task-item-info, ::ng-deep .dx-color-scheme-purple-dark .task-item-info, ::ng-deep .dx-color-scheme-orange-dark .task-item-info, diff --git a/JSDemos/Demos/TabPanel/Overview/React/styles.css b/JSDemos/Demos/TabPanel/Overview/React/styles.css index 973a256e923..99473c2c177 100644 --- a/JSDemos/Demos/TabPanel/Overview/React/styles.css +++ b/JSDemos/Demos/TabPanel/Overview/React/styles.css @@ -136,14 +136,14 @@ bottom: -150%; } -.dx-color-scheme-lime-light, -.dx-color-scheme-blue-light, -.dx-color-scheme-orange-light, -.dx-color-scheme-purple-light, -.dx-color-scheme-teal-light { +.dx-theme-material .widget-container { background-color: rgba(191, 191, 191, 0.15); } +.dx-color-scheme-contrast .task-item { + border: 1px solid #dedede; +} + .dx-color-scheme-teal-light .dx-tabpanel, .dx-color-scheme-orange-light .dx-tabpanel, .dx-color-scheme-lime-light .dx-tabpanel, @@ -152,6 +152,14 @@ background-color: #fff; } +.dx-color-scheme-teal-dark .dx-tabpanel, +.dx-color-scheme-purple-dark .dx-tabpanel, +.dx-color-scheme-orange-dark .dx-tabpanel, +.dx-color-scheme-lime-dark .dx-tabpanel, +.dx-color-scheme-blue-dark .dx-tabpanel { + background-color: #363640; +} + .dx-color-scheme-teal-light .option-label, .dx-color-scheme-purple-light .option-label, .dx-color-scheme-orange-light .option-label, @@ -163,18 +171,6 @@ color: rgba(0, 0, 0, 0.6); } -.dx-color-scheme-teal-dark .task-item, -.dx-color-scheme-purple-dark .task-item, -.dx-color-scheme-orange-dark .task-item, -.dx-color-scheme-lime-dark .task-item, -.dx-color-scheme-blue-dark .task-item, -.dx-color-scheme-darkviolet .task-item, -.dx-color-scheme-darkmoon .task-item, -.dx-color-scheme-contrast .task-item, -.dx-color-scheme-dark .task-item { - box-shadow: 0 1px 4px 0 rgba(255, 255, 255, 0.1); -} - .dx-color-scheme-teal-dark .task-item-info, .dx-color-scheme-purple-dark .task-item-info, .dx-color-scheme-orange-dark .task-item-info, diff --git a/JSDemos/Demos/TabPanel/Overview/Vue/App.vue b/JSDemos/Demos/TabPanel/Overview/Vue/App.vue index 323c5c2f7b2..de1a627b8e3 100644 --- a/JSDemos/Demos/TabPanel/Overview/Vue/App.vue +++ b/JSDemos/Demos/TabPanel/Overview/Vue/App.vue @@ -183,11 +183,7 @@ export default { margin-top: 20px; } -.dx-color-scheme-lime-light, -.dx-color-scheme-blue-light, -.dx-color-scheme-orange-light, -.dx-color-scheme-purple-light, -.dx-color-scheme-teal-light { +.dx-theme-material .widget-container { background-color: rgba(191, 191, 191, 0.15); } @@ -199,6 +195,14 @@ export default { background-color: #fff; } +.dx-color-scheme-teal-dark .dx-tabpanel, +.dx-color-scheme-purple-dark .dx-tabpanel, +.dx-color-scheme-orange-dark .dx-tabpanel, +.dx-color-scheme-lime-dark .dx-tabpanel, +.dx-color-scheme-blue-dark .dx-tabpanel { + background-color: #363640; +} + .dx-color-scheme-teal-light .option-label, .dx-color-scheme-purple-light .option-label, .dx-color-scheme-orange-light .option-label, diff --git a/JSDemos/Demos/TabPanel/Overview/Vue/TaskItem.vue b/JSDemos/Demos/TabPanel/Overview/Vue/TaskItem.vue index f4812a3e7f5..98da3f4729d 100644 --- a/JSDemos/Demos/TabPanel/Overview/Vue/TaskItem.vue +++ b/JSDemos/Demos/TabPanel/Overview/Vue/TaskItem.vue @@ -125,16 +125,8 @@ export default { bottom: -150%; } -.dx-color-scheme-teal-dark .task-item, -.dx-color-scheme-purple-dark .task-item, -.dx-color-scheme-orange-dark .task-item, -.dx-color-scheme-lime-dark .task-item, -.dx-color-scheme-blue-dark .task-item, -.dx-color-scheme-darkviolet .task-item, -.dx-color-scheme-darkmoon .task-item, -.dx-color-scheme-contrast .task-item, -.dx-color-scheme-dark .task-item { - box-shadow: 0 1px 4px 0 rgba(255, 255, 255, 0.1); +.dx-color-scheme-contrast .task-item { + border: 1px solid #dedede; } .dx-color-scheme-teal-dark .task-item-info, diff --git a/JSDemos/Demos/TabPanel/Overview/jQuery/styles.css b/JSDemos/Demos/TabPanel/Overview/jQuery/styles.css index 973a256e923..99473c2c177 100644 --- a/JSDemos/Demos/TabPanel/Overview/jQuery/styles.css +++ b/JSDemos/Demos/TabPanel/Overview/jQuery/styles.css @@ -136,14 +136,14 @@ bottom: -150%; } -.dx-color-scheme-lime-light, -.dx-color-scheme-blue-light, -.dx-color-scheme-orange-light, -.dx-color-scheme-purple-light, -.dx-color-scheme-teal-light { +.dx-theme-material .widget-container { background-color: rgba(191, 191, 191, 0.15); } +.dx-color-scheme-contrast .task-item { + border: 1px solid #dedede; +} + .dx-color-scheme-teal-light .dx-tabpanel, .dx-color-scheme-orange-light .dx-tabpanel, .dx-color-scheme-lime-light .dx-tabpanel, @@ -152,6 +152,14 @@ background-color: #fff; } +.dx-color-scheme-teal-dark .dx-tabpanel, +.dx-color-scheme-purple-dark .dx-tabpanel, +.dx-color-scheme-orange-dark .dx-tabpanel, +.dx-color-scheme-lime-dark .dx-tabpanel, +.dx-color-scheme-blue-dark .dx-tabpanel { + background-color: #363640; +} + .dx-color-scheme-teal-light .option-label, .dx-color-scheme-purple-light .option-label, .dx-color-scheme-orange-light .option-label, @@ -163,18 +171,6 @@ color: rgba(0, 0, 0, 0.6); } -.dx-color-scheme-teal-dark .task-item, -.dx-color-scheme-purple-dark .task-item, -.dx-color-scheme-orange-dark .task-item, -.dx-color-scheme-lime-dark .task-item, -.dx-color-scheme-blue-dark .task-item, -.dx-color-scheme-darkviolet .task-item, -.dx-color-scheme-darkmoon .task-item, -.dx-color-scheme-contrast .task-item, -.dx-color-scheme-dark .task-item { - box-shadow: 0 1px 4px 0 rgba(255, 255, 255, 0.1); -} - .dx-color-scheme-teal-dark .task-item-info, .dx-color-scheme-purple-dark .task-item-info, .dx-color-scheme-orange-dark .task-item-info, diff --git a/MVCDemos/Content/DemosStyles/TabPanel/Overview.css b/MVCDemos/Content/DemosStyles/TabPanel/Overview.css index 448280d20ea..76fb49ad29a 100644 --- a/MVCDemos/Content/DemosStyles/TabPanel/Overview.css +++ b/MVCDemos/Content/DemosStyles/TabPanel/Overview.css @@ -136,14 +136,14 @@ bottom: -150%; } -.dx-color-scheme-lime-light, -.dx-color-scheme-blue-light, -.dx-color-scheme-orange-light, -.dx-color-scheme-purple-light, -.dx-color-scheme-teal-light { +.dx-theme-material .widget-container { background-color: rgba(191, 191, 191, 0.15); } +.dx-color-scheme-contrast .task-item { + border: 1px solid #dedede; +} + .dx-color-scheme-teal-light .dx-tabpanel, .dx-color-scheme-orange-light .dx-tabpanel, .dx-color-scheme-lime-light .dx-tabpanel, @@ -152,6 +152,14 @@ background-color: #fff; } +.dx-color-scheme-teal-dark .dx-tabpanel, +.dx-color-scheme-purple-dark .dx-tabpanel, +.dx-color-scheme-orange-dark .dx-tabpanel, +.dx-color-scheme-lime-dark .dx-tabpanel, +.dx-color-scheme-blue-dark .dx-tabpanel { + background-color: #363640; +} + .dx-color-scheme-teal-light .option-label, .dx-color-scheme-purple-light .option-label, .dx-color-scheme-orange-light .option-label, @@ -163,18 +171,6 @@ color: rgba(0, 0, 0, 0.6); } -.dx-color-scheme-teal-dark .task-item, -.dx-color-scheme-purple-dark .task-item, -.dx-color-scheme-orange-dark .task-item, -.dx-color-scheme-lime-dark .task-item, -.dx-color-scheme-blue-dark .task-item, -.dx-color-scheme-darkviolet .task-item, -.dx-color-scheme-darkmoon .task-item, -.dx-color-scheme-contrast .task-item, -.dx-color-scheme-dark .task-item { - box-shadow: 0 1px 4px 0 rgba(255, 255, 255, 0.1); -} - .dx-color-scheme-teal-dark .task-item-info, .dx-color-scheme-purple-dark .task-item-info, .dx-color-scheme-orange-dark .task-item-info, diff --git a/NetCoreDemos/wwwroot/css/DemosStyles/TabPanel/Overview.css b/NetCoreDemos/wwwroot/css/DemosStyles/TabPanel/Overview.css index 448280d20ea..76fb49ad29a 100644 --- a/NetCoreDemos/wwwroot/css/DemosStyles/TabPanel/Overview.css +++ b/NetCoreDemos/wwwroot/css/DemosStyles/TabPanel/Overview.css @@ -136,14 +136,14 @@ bottom: -150%; } -.dx-color-scheme-lime-light, -.dx-color-scheme-blue-light, -.dx-color-scheme-orange-light, -.dx-color-scheme-purple-light, -.dx-color-scheme-teal-light { +.dx-theme-material .widget-container { background-color: rgba(191, 191, 191, 0.15); } +.dx-color-scheme-contrast .task-item { + border: 1px solid #dedede; +} + .dx-color-scheme-teal-light .dx-tabpanel, .dx-color-scheme-orange-light .dx-tabpanel, .dx-color-scheme-lime-light .dx-tabpanel, @@ -152,6 +152,14 @@ background-color: #fff; } +.dx-color-scheme-teal-dark .dx-tabpanel, +.dx-color-scheme-purple-dark .dx-tabpanel, +.dx-color-scheme-orange-dark .dx-tabpanel, +.dx-color-scheme-lime-dark .dx-tabpanel, +.dx-color-scheme-blue-dark .dx-tabpanel { + background-color: #363640; +} + .dx-color-scheme-teal-light .option-label, .dx-color-scheme-purple-light .option-label, .dx-color-scheme-orange-light .option-label, @@ -163,18 +171,6 @@ color: rgba(0, 0, 0, 0.6); } -.dx-color-scheme-teal-dark .task-item, -.dx-color-scheme-purple-dark .task-item, -.dx-color-scheme-orange-dark .task-item, -.dx-color-scheme-lime-dark .task-item, -.dx-color-scheme-blue-dark .task-item, -.dx-color-scheme-darkviolet .task-item, -.dx-color-scheme-darkmoon .task-item, -.dx-color-scheme-contrast .task-item, -.dx-color-scheme-dark .task-item { - box-shadow: 0 1px 4px 0 rgba(255, 255, 255, 0.1); -} - .dx-color-scheme-teal-dark .task-item-info, .dx-color-scheme-purple-dark .task-item-info, .dx-color-scheme-orange-dark .task-item-info,