work around the SASS shorthand serializer bug for mixed colors

Author: VasilyStrelyaev

packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss

@@ -97,7 +97,8 @@ $datagrid-text-stub-background-image-path: null !default;
     &.dx-state-focused .dx-datagrid-group-panel {
       .dx-group-panel-item:focus,
       .dx-header-filter:focus {
-        outline: 2px solid $datagrid-focused-border-color;
+        outline: 2px solid;
+        outline-color: $datagrid-focused-border-color;
         outline-offset: -2px;
       }
 
@@ -116,7 +117,8 @@ $datagrid-text-stub-background-image-path: null !default;
     &.dx-state-focused .dx-header-row {
       td:focus,
       td .dx-header-filter:focus {
-        outline: 2px solid $datagrid-focused-border-color;
+        outline: 2px solid;
+        outline-color: $datagrid-focused-border-color;
         outline-offset: 2px;
       }
 
@@ -172,7 +174,8 @@ $datagrid-text-stub-background-image-path: null !default;
 
   .dx-datagrid-rowsview.dx-state-focused .dx-data-row {
     & > td.dx-command-edit > a.dx-link:focus {
-      outline: 2px solid $datagrid-focused-border-color;
+      outline: 2px solid;
+      outline-color: $datagrid-focused-border-color;
       outline-offset: 2px;
     }
 
@@ -301,7 +304,8 @@ $datagrid-text-stub-background-image-path: null !default;
     .dx-icon-filter:focus,
     .dx-datagrid-filter-panel-text:focus,
     .dx-datagrid-filter-panel-clear-filter:focus {
-      outline: 2px solid $datagrid-focused-border-color;
+      outline: 2px solid;
+      outline-color: $datagrid-focused-border-color;
       outline-offset: 3px;
     }
   }
@@ -453,7 +457,8 @@ $datagrid-text-stub-background-image-path: null !default;
   }
 
   &:focus-within {
-    outline: 2px solid $datagrid-focused-border-color;
+    outline: 2px solid;
+    outline-color: $datagrid-focused-border-color;
     outline-offset: -2px;
   }
 }

packages/devextreme-scss/scss/widgets/base/treeList/_index.scss

@@ -203,7 +203,8 @@ $treelist-row-error-color: $datagrid-row-error-color;
 
   .dx-treelist-rowsview.dx-state-focused .dx-data-row {
     & > td.dx-command-edit > a.dx-link:focus {
-      outline: 2px solid $datagrid-focused-border-color;
+      outline: 2px solid;
+      outline-color: $datagrid-focused-border-color;
       outline-offset: 2px;
     }
 

packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss

@@ -420,7 +420,8 @@ $generic-grid-base-cell-input-height: math.round($generic-base-line-height * $ge
   }
 
   .dx-#{$widget-name}-focus-overlay {
-    border: 2px solid $datagrid-focused-border-color;
+    border: 2px solid;
+    border-color: $datagrid-focused-border-color;
   }
 
   .dx-#{$widget-name}-table {
@@ -524,7 +525,8 @@ $generic-grid-base-cell-input-height: math.round($generic-base-line-height * $ge
         color: $datagrid-menu-icon-color;
 
         &::after {
-          border: 2px solid $datagrid-focused-border-color;
+          border: 2px solid;
+          border-color: $datagrid-focused-border-color;
         }
 
         &.dx-menu-item-expanded {
@@ -589,7 +591,8 @@ $generic-grid-base-cell-input-height: math.round($generic-base-line-height * $ge
         }
 
         &.dx-state-focused::after {
-          border: 2px solid $datagrid-focused-border-color;
+          border: 2px solid;
+          border-color: $datagrid-focused-border-color;
         }
       }
     }
@@ -836,7 +839,8 @@ $generic-grid-base-cell-input-height: math.round($generic-base-line-height * $ge
 
         & > td,
         & > tr:last-child > td {
-          border-bottom: 1px solid $datagrid-focused-border-color;
+          border-bottom: 1px solid;
+          border-bottom-color: $datagrid-focused-border-color;
         }
 
         &:not(.dx-row-lines) {

packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss

@@ -1037,8 +1037,10 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
         &:not(.dx-row-lines) {
           & > td,
           & > tr:first-child > td {
-            border-top: 1px solid $datagrid-focused-border-color;
-            border-bottom: 1px solid $datagrid-focused-border-color;
+            border-top: 1px solid;
+            border-bottom: 1px solid;
+            border-top-color: $datagrid-focused-border-color;
+            border-bottom-color: $datagrid-focused-border-color;
           }
         }
       }