SASS bug WA: tree list outlines

VasilyStrelyaev · VasilyStrelyaev · commit da734de1a0c3 · 2025-10-06T18:03:22.000+03:00
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss
@@ -18,7 +18,8 @@
   }
 
   &:focus-visible {
-    outline: 2px $cardview-card--focused-outline-color solid;
+    outline: 2px solid;
+    outline-color: $cardview-card--focused-outline-color;
     outline-offset: -2px;
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss
@@ -52,7 +52,8 @@
   }
 
   &:focus-visible {
-    outline: 2px $cardview-header-panel__item--focused-outline-color solid;
+    outline: 2px solid;
+    outline-color: $cardview-header-panel__item--focused-outline-color;
     outline-offset: -2px;
   }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss b/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss
@@ -144,7 +144,8 @@ $treelist-row-error-color: $datagrid-row-error-color;
     &.dx-state-focused .dx-header-row {
       td:focus,
       td .dx-header-filter:focus {
-        outline: 2px solid $treelist-focused-border-color;
+        outline: 2px solid;
+        outline-color: $treelist-focused-border-color;
       }
 
       td:focus {
@@ -268,7 +269,8 @@ $treelist-row-error-color: $datagrid-row-error-color;
     .dx-icon-filter:focus,
     .dx-treelist-filter-panel-text:focus,
     .dx-treelist-filter-panel-clear-filter:focus {
-      outline: 2px solid $treelist-focused-border-color;
+      outline: 2px solid;
+      outline-color: $treelist-focused-border-color;
     }
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/pagination/_index.scss b/packages/devextreme-scss/scss/widgets/generic/pagination/_index.scss
@@ -25,7 +25,8 @@
     .dx-page:focus,
     .dx-page-size:focus,
     .dx-navigate-button:focus {
-      outline: 2px solid $pagination-outline-color;
+      outline: 2px solid;
+      outline-color: $pagination-outline-color;
       outline-offset: -2px;
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,8 @@`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`&:focus-visible {`
`21`		`- outline: 2px $cardview-card--focused-outline-color solid;`
	`21`	`+ outline: 2px solid;`
	`22`	`+ outline-color: $cardview-card--focused-outline-color;`
`22`	`23`	`outline-offset: -2px;`
`23`	`24`	`}`
`24`	`25`	`}`
Original file line number	Diff line number	Diff line change
`@@ -52,7 +52,8 @@`
`52`	`52`	`}`
`53`	`53`
`54`	`54`	`&:focus-visible {`
`55`		`- outline: 2px $cardview-header-panel__item--focused-outline-color solid;`
	`55`	`+ outline: 2px solid;`
	`56`	`+ outline-color: $cardview-header-panel__item--focused-outline-color;`
`56`	`57`	`outline-offset: -2px;`
`57`	`58`	`}`
`58`	`59`
Original file line number	Diff line number	Diff line change
`@@ -144,7 +144,8 @@ $treelist-row-error-color: $datagrid-row-error-color;`
`144`	`144`	`&.dx-state-focused .dx-header-row {`
`145`	`145`	`td:focus,`
`146`	`146`	`td .dx-header-filter:focus {`
`147`		`- outline: 2px solid $treelist-focused-border-color;`
	`147`	`+ outline: 2px solid;`
	`148`	`+ outline-color: $treelist-focused-border-color;`
`148`	`149`	`}`
`149`	`150`
`150`	`151`	`td:focus {`
`@@ -268,7 +269,8 @@ $treelist-row-error-color: $datagrid-row-error-color;`
`268`	`269`	`.dx-icon-filter:focus,`
`269`	`270`	`.dx-treelist-filter-panel-text:focus,`
`270`	`271`	`.dx-treelist-filter-panel-clear-filter:focus {`
`271`		`- outline: 2px solid $treelist-focused-border-color;`
	`272`	`+ outline: 2px solid;`
	`273`	`+ outline-color: $treelist-focused-border-color;`
`272`	`274`	`}`
`273`	`275`	`}`
`274`	`276`	`}`
Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,8 @@`
`25`	`25`	`.dx-page:focus,`
`26`	`26`	`.dx-page-size:focus,`
`27`	`27`	`.dx-navigate-button:focus {`
`28`		`- outline: 2px solid $pagination-outline-color;`
	`28`	`+ outline: 2px solid;`
	`29`	`+ outline-color: $pagination-outline-color;`
`29`	`30`	`outline-offset: -2px;`
`30`	`31`	`}`
`31`	`32`	`}`