Skip to content

Commit 948e2b5

Browse files
authored
Add background color custom css property for people list items (#503)
* Add background color custom css property for people list items * Update css var name * Change name for css var in people picker * Update css var in story and ts file
1 parent 6d919cb commit 948e2b5

File tree

3 files changed

+12
-7
lines changed

3 files changed

+12
-7
lines changed

src/components/mgt-people-picker/mgt-people-picker.scss

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ $input-hover-color: var(--input-hover-color, #323130);
2424
$input-focus-color: var(--input-focus-color, #0078d4);
2525
$input-background-color: var(--input-background-color, var(--people-list-background-color, white));
2626

27+
$selected-person-background-color: var(--selected-person-background-color, #f1f1f1);
28+
2729
$dropdown-background-color: var(--dropdown-background-color, white);
2830
$dropdown-item-hover-background: var(--dropdown-item-hover-background, rgba(241, 241, 241, 0.87));
2931

@@ -127,31 +129,31 @@ mgt-people-picker .overflow-gradient {
127129
to right,
128130
rgba(255, 255, 255, 0) 0%,
129131
rgba(255, 255, 255, 0) 60%,
130-
rgb(241, 241, 241) 100%
132+
$selected-person-background-color 100%
131133
);
132134
background-image: -moz-linear-gradient(
133135
left,
134136
rgba(255, 255, 255, 0) 0%,
135137
rgba(255, 255, 255, 0) 60%,
136-
rgb(241, 241, 241) 100%
138+
$selected-person-background-color 100%
137139
);
138140
background-image: -o-linear-gradient(
139141
left,
140142
rgba(255, 255, 255, 0) 0%,
141143
rgba(255, 255, 255, 0) 60%,
142-
rgb(241, 241, 241) 100%
144+
$selected-person-background-color 100%
143145
);
144146
background-image: -ms-linear-gradient(
145147
left,
146148
rgba(255, 255, 255, 0) 0%,
147149
rgba(255, 255, 255, 0) 60%,
148-
rgb(241, 241, 241) 100%
150+
$selected-person-background-color 100%
149151
);
150152
background-image: -webkit-linear-gradient(
151153
left,
152154
rgba(255, 255, 255, 0) 0%,
153155
rgba(255, 255, 255, 0) 60%,
154-
rgb(241, 241, 241) 100%
156+
$selected-person-background-color 100%
155157
);
156158
}
157159

@@ -163,7 +165,7 @@ mgt-people-picker .CloseIcon {
163165
margin-top: 0px;
164166
cursor: pointer;
165167
color: $font-color;
166-
background-color: rgb(241, 241, 241);
168+
background-color: $selected-person-background-color;
167169
right: 0px;
168170
}
169171

@@ -172,7 +174,7 @@ mgt-people-picker .people-person {
172174
display: flex;
173175
margin: 5px 5px 0px 0;
174176
align-items: center;
175-
background-color: rgba(196, 196, 196, 0.24);
177+
background-color: $selected-person-background-color;
176178
border-radius: 15px;
177179
height: 24px;
178180
white-space: nowrap;

src/components/mgt-people-picker/mgt-people-picker.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@ interface IFocusable {
5656
* @cssprop --input-hover-color - {Color} Input text hover color
5757
* @cssprop --input-focus-color - {Color} Input text focus color
5858
*
59+
* @cssprop --selected-person-background-color - {Color} Selected person background color
60+
*
5961
* @cssprop --dropdown-background-color - {Color} Background color of dropdown area
6062
* @cssprop --dropdown-item-hover-background - {Color} Background color of person during hover
6163
*

stories/components/peoplePicker.stories.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export const DarkMode = () => html`
4545
--input-focus-color: #0f78d4;
4646
--font-color: white;
4747
--placeholder-focus-color: rgba(255, 255, 255, 0.8);
48+
--selected-person-background-color: #474747;
4849
}
4950
</style>
5051
`;

0 commit comments

Comments
 (0)