fix(tabPanel): Update styles

DevExpress · Sep 13, 2023 · acd35e3 · acd35e3
1 parent 54f3269
commit acd35e3
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 100 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,