Skip to content

Commit 91208c3

Browse files
tongsonbarbstongsonbarbs
authored
CardView - change highlight color (DevExpress#29695)
1 parent 7c97ebd commit 91208c3

File tree

9 files changed

+75
-15
lines changed

9 files changed

+75
-15
lines changed

‎e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (fluent-blue-light).png‎

21.4 KB
Loading

‎e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (generic-light).png‎

21.7 KB
Loading

‎e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (material-blue-light).png‎

20.9 KB
Loading

‎e2e/testcafe-devextreme/tests/cardView/search/visual.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ test('highlighted search text', async (t) => {
5858
columns: COLUMNS,
5959
searchPanel: {
6060
visible: true,
61-
text: 'rt',
61+
text: 'da',
6262
},
6363
height: 600,
6464
}));

‎packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/content/_index.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,10 @@
4848
&--highlighted {
4949
color: $cardview-card-content-field-value-highlight-color;
5050
background: $cardview-card-content-field-value-highlight-background;
51+
border-radius: $cardview-card-content-field-value-highlight-border-radius;
52+
padding: $cardview-card-content-field-value-highlight-padding;
53+
font-weight: $cardview-card-content-field-value-highlight-font-weight;
54+
box-shadow: $cardview-card-content-field-value-highlight-box-shadow;
5155
}
5256
}
5357
}

‎packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/content/_variables.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,9 @@ $cardview-card-content-field-gap: null !default;
44
$cardview-card-content-cell-padding-vertical: null !default;
55
$cardview-card-content-cell-padding-horizontal: null !default;
66

7-
$cardview-card-content-field-value-highlight-color: null !default;
87
$cardview-card-content-field-value-highlight-background: null !default;
8+
$cardview-card-content-field-value-highlight-color: null !default;
9+
$cardview-card-content-field-value-highlight-border-radius: null !default;
10+
$cardview-card-content-field-value-highlight-padding: null !default;
11+
$cardview-card-content-field-value-highlight-font-weight: null !default;
12+
$cardview-card-content-field-value-highlight-box-shadow: null !default;

‎packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ $cardview-fluent-nodata-icon-container-background-color: null !default;
2929

3030
$cardview-fluent-card-content-field-value-highlight-color: null !default;
3131
$cardview-fluent-card-content-field-value-highlight-background: null !default;
32+
$cardview-fluent-card-content-field-value-highlight-border-radius: null !default;
33+
$cardview-fluent-card-content-field-value-highlight-padding: null !default;
34+
$cardview-fluent-card-content-field-value-highlight-font-weight: null !default;
35+
$cardview-fluent-card-content-field-value-highlight-box-shadow: null !default;
3236

3337
$cardview-fluent-card-cover-background-color: null !default;
3438

@@ -56,8 +60,12 @@ $cardview-fluent-card-background-color: null !default;
5660
$cardview-fluent-nodata-text-color: lighten($base-text-color, 23.92) !default;
5761
$cardview-fluent-nodata-icon-container-background-color: darken($base-bg, 9.80) !default;
5862

59-
$cardview-fluent-card-content-field-value-highlight-color: $base-inverted-text-color !default;
60-
$cardview-fluent-card-content-field-value-highlight-background: $base-accent !default;
63+
$cardview-fluent-card-content-field-value-highlight-color: $base-text-color !default;
64+
$cardview-fluent-card-content-field-value-highlight-background: $base-warning !default;
65+
$cardview-fluent-card-content-field-value-highlight-border-radius: 5px;
66+
$cardview-fluent-card-content-field-value-highlight-padding: .125em 0.2em;
67+
$cardview-fluent-card-content-field-value-highlight-font-weight: 500;
68+
$cardview-fluent-card-content-field-value-highlight-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
6169

6270
$cardview-fluent-card-cover-background-color: #FFF !default;
6371

@@ -86,8 +94,12 @@ $cardview-fluent-card-background-color: null !default;
8694
$cardview-fluent-nodata-text-color: darken($base-text-color, 32.16) !default;
8795
$cardview-fluent-nodata-icon-container-background-color: lighten($base-bg, 3.92) !default;
8896

89-
$cardview-fluent-card-content-field-value-highlight-color: $base-inverted-text-color !default;
90-
$cardview-fluent-card-content-field-value-highlight-background: $base-accent !default;
97+
$cardview-fluent-card-content-field-value-highlight-color: $base-text-color !default;
98+
$cardview-fluent-card-content-field-value-highlight-background: $base-warning !default;
99+
$cardview-fluent-card-content-field-value-highlight-border-radius: 5px;
100+
$cardview-fluent-card-content-field-value-highlight-padding: .125em 0.2em;
101+
$cardview-fluent-card-content-field-value-highlight-font-weight: 500;
102+
$cardview-fluent-card-content-field-value-highlight-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
91103

92104
$cardview-fluent-card-cover-background-color: #FFF !default;
93105

@@ -117,6 +129,10 @@ $cardview-nodata-icon-container-background-color: $cardview-fluent-nodata-icon-c
117129

118130
$cardview-card-content-field-value-highlight-color: $cardview-fluent-card-content-field-value-highlight-color !default;
119131
$cardview-card-content-field-value-highlight-background: $cardview-fluent-card-content-field-value-highlight-background !default;
132+
$cardview-card-content-field-value-highlight-border-radius: $cardview-fluent-card-content-field-value-highlight-border-radius !default;
133+
$cardview-card-content-field-value-highlight-padding: $cardview-fluent-card-content-field-value-highlight-padding !default;
134+
$cardview-card-content-field-value-highlight-font-weight: $cardview-fluent-card-content-field-value-highlight-font-weight !default;
135+
$cardview-card-content-field-value-highlight-box-shadow: $cardview-fluent-card-content-field-value-highlight-box-shadow !default;
120136

121137
$cardview-card-cover-background-color: $cardview-fluent-card-cover-background-color !default;
122138

‎packages/devextreme-scss/scss/widgets/generic/cardView/_colors.scss‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ $cardview-generic-nodata-icon-container-background-color: null !default;
3131

3232
$cardview-generic-card-content-field-value-highlight-color: null !default;
3333
$cardview-generic-card-content-field-value-highlight-background: null !default;
34+
$cardview-generic-card-content-field-value-highlight-border-radius: null !default;
35+
$cardview-generic-card-content-field-value-highlight-padding: null !default;
36+
$cardview-generic-card-content-field-value-highlight-font-weight: null !default;
37+
$cardview-generic-card-content-field-value-highlight-box-shadow: null !default;
3438

3539
$cardview-generic-card-cover-background-color: null !default;
3640

@@ -58,8 +62,12 @@ $cardview-generic-card-background-color: null !default;
5862
$cardview-generic-nodata-text-color: $base-label-color !default;
5963
$cardview-generic-nodata-icon-container-background-color: darken($base-bg, 7.84) !default;
6064

61-
$cardview-generic-card-content-field-value-highlight-color: $base-inverted-text-color !default;
62-
$cardview-generic-card-content-field-value-highlight-background: $base-accent !default;
65+
$cardview-generic-card-content-field-value-highlight-color: $base-text-color !default;
66+
$cardview-generic-card-content-field-value-highlight-background: $base-warning !default;
67+
$cardview-generic-card-content-field-value-highlight-border-radius: 5px;
68+
$cardview-generic-card-content-field-value-highlight-padding: .125em 0.2em;
69+
$cardview-generic-card-content-field-value-highlight-font-weight: 500;
70+
$cardview-generic-card-content-field-value-highlight-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
6371

6472
$cardview-generic-card-cover-background-color: #FFF !default;
6573

@@ -88,8 +96,12 @@ $cardview-generic-card-background-color: null !default;
8896
$cardview-generic-nodata-text-color: $base-label-color !default;
8997
$cardview-generic-nodata-icon-container-background-color: lighten(desaturate($base-bg, 0.30), 8.04) !default;
9098

91-
$cardview-generic-card-content-field-value-highlight-color: $base-inverted-text-color !default;
92-
$cardview-generic-card-content-field-value-highlight-background: $base-accent !default;
99+
$cardview-generic-card-content-field-value-highlight-color: $base-text-color !default;
100+
$cardview-generic-card-content-field-value-highlight-background: $base-warning !default;
101+
$cardview-generic-card-content-field-value-highlight-border-radius: 5px;
102+
$cardview-generic-card-content-field-value-highlight-padding: .125em 0.2em;
103+
$cardview-generic-card-content-field-value-highlight-font-weight: 500;
104+
$cardview-generic-card-content-field-value-highlight-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
93105

94106
$cardview-generic-card-cover-background-color: #FFF !default;
95107

@@ -119,7 +131,11 @@ $cardview-generic-card-background-color: null !default;
119131
$cardview-generic-nodata-icon-container-background-color: $base-bg !default;
120132

121133
$cardview-generic-card-content-field-value-highlight-color: $base-inverted-text-color !default;
122-
$cardview-generic-card-content-field-value-highlight-background: $base-accent !default;
134+
$cardview-generic-card-content-field-value-highlight-background: $base-warning !default;
135+
$cardview-generic-card-content-field-value-highlight-border-radius: 5px;
136+
$cardview-generic-card-content-field-value-highlight-padding: .125em 0.2em;
137+
$cardview-generic-card-content-field-value-highlight-font-weight: 500;
138+
$cardview-generic-card-content-field-value-highlight-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
123139

124140
$cardview-generic-card-cover-background-color: #FFF !default;
125141

@@ -150,6 +166,10 @@ $cardview-nodata-icon-container-background-color: $cardview-generic-nodata-icon-
150166

151167
$cardview-card-content-field-value-highlight-color: $cardview-generic-card-content-field-value-highlight-color !default;
152168
$cardview-card-content-field-value-highlight-background: $cardview-generic-card-content-field-value-highlight-background !default;
169+
$cardview-card-content-field-value-highlight-border-radius: $cardview-generic-card-content-field-value-highlight-border-radius !default;
170+
$cardview-card-content-field-value-highlight-padding: $cardview-generic-card-content-field-value-highlight-padding !default;
171+
$cardview-card-content-field-value-highlight-font-weight: $cardview-generic-card-content-field-value-highlight-font-weight !default;
172+
$cardview-card-content-field-value-highlight-box-shadow: $cardview-generic-card-content-field-value-highlight-box-shadow !default;
153173

154174
$cardview-card-cover-background-color: $cardview-generic-card-cover-background-color !default;
155175

‎packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ $cardview-material-nodata-icon-container-background-color: null !default;
3131

3232
$cardview-material-card-content-field-value-highlight-color: null !default;
3333
$cardview-material-card-content-field-value-highlight-background: null !default;
34+
$cardview-material-card-content-field-value-highlight-border-radius: null !default;
35+
$cardview-material-card-content-field-value-highlight-padding: null !default;
36+
$cardview-material-card-content-field-value-highlight-font-weight: null !default;
37+
$cardview-material-card-content-field-value-highlight-box-shadow: null !default;
3438

3539
$cardview-material-card-cover-background-color: null !default;
3640

@@ -58,8 +62,12 @@ $cardview-material-card-background-color: null !default;
5862
$cardview-material-nodata-text-color: $base-label-color !default;
5963
$cardview-material-nodata-icon-container-background-color: darken($base-bg, 7.84) !default;
6064

61-
$cardview-material-card-content-field-value-highlight-color: $base-inverted-text-color !default;
62-
$cardview-material-card-content-field-value-highlight-background: $base-accent !default;
65+
$cardview-material-card-content-field-value-highlight-color: $base-text-color !default;
66+
$cardview-material-card-content-field-value-highlight-background: $base-warning !default;
67+
$cardview-material-card-content-field-value-highlight-border-radius: 5px;
68+
$cardview-material-card-content-field-value-highlight-padding: .125em 0.2em;
69+
$cardview-material-card-content-field-value-highlight-font-weight: 500;
70+
$cardview-material-card-content-field-value-highlight-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
6371

6472
$cardview-material-card-cover-background-color: #FFF !default;
6573

@@ -88,8 +96,12 @@ $cardview-material-card-background-color: null !default;
8896
$cardview-material-nodata-text-color: $base-label-color !default;
8997
$cardview-material-nodata-icon-container-background-color: lighten(desaturate($base-bg, 0.30), 8.04) !default;
9098

91-
$cardview-material-card-content-field-value-highlight-color: $base-inverted-text-color !default;
92-
$cardview-material-card-content-field-value-highlight-background: $base-accent !default;
99+
$cardview-material-card-content-field-value-highlight-color: $base-text-color !default;
100+
$cardview-material-card-content-field-value-highlight-background: $base-warning !default;
101+
$cardview-material-card-content-field-value-highlight-border-radius: 5px;
102+
$cardview-material-card-content-field-value-highlight-padding: .125em 0.2em;
103+
$cardview-material-card-content-field-value-highlight-font-weight: 500;
104+
$cardview-material-card-content-field-value-highlight-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
93105

94106
$cardview-material-card-cover-background-color: #FFF !default;
95107

@@ -120,6 +132,10 @@ $cardview-nodata-icon-container-background-color: $cardview-material-nodata-icon
120132

121133
$cardview-card-content-field-value-highlight-color: $cardview-material-card-content-field-value-highlight-color !default;
122134
$cardview-card-content-field-value-highlight-background: $cardview-material-card-content-field-value-highlight-background !default;
135+
$cardview-card-content-field-value-highlight-border-radius: $cardview-material-card-content-field-value-highlight-border-radius !default;
136+
$cardview-card-content-field-value-highlight-padding: $cardview-material-card-content-field-value-highlight-padding !default;
137+
$cardview-card-content-field-value-highlight-font-weight: $cardview-material-card-content-field-value-highlight-font-weight !default;
138+
$cardview-card-content-field-value-highlight-box-shadow: $cardview-material-card-content-field-value-highlight-box-shadow !default;
123139

124140
$cardview-card-cover-background-color: $cardview-material-card-cover-background-color !default;
125141

0 commit comments

Comments
 (0)