Skip to content

Commit 7a1ea63

Browse files
Andrei CaleniucAndrei Caleniuc
Andrei Caleniuc
authored and
Andrei Caleniuc
committed
fix: ui-suggest styles
1 parent 5cb9d71 commit 7a1ea63

File tree

5 files changed

+117
-184
lines changed

5 files changed

+117
-184
lines changed

‎projects/angular/components/ui-suggest/src/_ui-suggest.theme.scss‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,6 @@
1111
$componentName: "ui-suggest";
1212

1313
.mat-toolbar #{$componentName} {
14-
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
15-
.mat-focused .mat-form-field-ripple,
16-
.mat-form-field-ripple {
17-
background-color: map-get($primary-palette, "default");
18-
}
19-
2014
.mat-mdc-input-element {
2115
color: map-get($foreground, "text");
2216
}
@@ -51,21 +45,10 @@
5145
color: map-get($warn-palette, "default");
5246
}
5347
}
54-
/* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
55-
/* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
56-
.mat-chip-list {
57-
.mat-mdc-chip button {
58-
position: relative;
59-
background-color: unset;
60-
border: unset;
61-
}
62-
}
6348
}
6449

6550
mat-form-field.mat-form-field-hide-placeholder #{$componentName} {
66-
/* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
67-
/* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
68-
.mat-chip-list {
51+
.mat-chip-grid {
6952
.mat-mdc-input-element::placeholder {
7053
color: currentColor !important;
7154
-webkit-text-fill-color: currentColor !important;

‎projects/angular/components/ui-suggest/src/ui-suggest.component.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -123,12 +123,11 @@
123123
</button>
124124
</mat-chip-row>
125125

126-
<ng-container *ngIf="searchable">
127-
<input #searchInput
126+
<input #searchInput
128127
[uiAutofocus]="isOpen"
129128
[refocus]="isOpen"
130129
[placeholder]="(isFormControl && !empty) ? '' : defaultValue"
131-
[readonly]="readonly"
130+
[readonly]="readonly || !searchable"
132131
[formControl]="inputControl"
133132
[matChipInputFor]="chipList"
134133
[attr.maxlength]="maxLength"
@@ -137,7 +136,6 @@
137136
autocomplete="off"
138137
aria-autocomplete="list"
139138
matInput>
140-
</ng-container>
141139

142140
</mat-chip-grid>
143141
</ng-template>

‎projects/angular/components/ui-suggest/src/ui-suggest.component.scss‎

Lines changed: 26 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,8 @@ $componentName: "ui-suggest";
7676
}
7777

7878
.mat-mdc-chip {
79+
box-sizing: border-box;
80+
7981
max-width: calc(100% - #{$chips-container-padding * 2});
8082

8183
.chip-selectable-icon {
@@ -91,9 +93,8 @@ $componentName: "ui-suggest";
9193
#{$componentName}:not(.form-control) {
9294
$searchUpDown: 3px;
9395
$searchLeft: -1px;
94-
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
9596
.display,
96-
.mat-form-field-label {
97+
.mat-mdc-form-field-label {
9798
font-size: 0.8rem;
9899
}
99100

@@ -110,8 +111,7 @@ $componentName: "ui-suggest";
110111
}
111112

112113
#{$componentName}.form-control {
113-
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
114-
.mat-form-field-flex {
114+
.mat-mdc-form-field-flex {
115115
padding: 0;
116116
background: inherit;
117117
}
@@ -139,13 +139,11 @@ $componentName: "ui-suggest";
139139
&-item {
140140
height: $item-height;
141141
font-size: 14px;
142-
/* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
143142
&.text-ellipsis .mat-list-item-content {
144143
line-height: $item-height;
145144
}
146145
}
147-
/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
148-
.mat-checkbox-ripple.mat-ripple {
146+
.mat-mdc-checkbox-ripple.mat-ripple {
149147
height: 33px;
150148
width: 33px;
151149
left: -7px;
@@ -158,12 +156,10 @@ $componentName: "ui-suggest";
158156
.mat-mdc-list {
159157
&-item {
160158
height: $height;
161-
/* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
162-
&.text-ellipsis .mat-list-item-content {
159+
&.text-ellipsis .mdc-list-item__content {
163160
line-height: $height;
164161
}
165-
/* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
166-
&.no-results-text .mat-list-item-content {
162+
&.no-results-text .mdc-list-item__content {
167163
font-size: 14px;
168164
}
169165
}
@@ -196,7 +192,7 @@ $componentName: "ui-suggest";
196192

197193
padding: 0 $field-padding;
198194
width: calc(100% - #{$field-padding * 2}) !important;
199-
margin-bottom: 0 !important;
195+
margin: 0 !important;
200196
height: $height;
201197
&-infix {
202198
border: 7px solid transparent;
@@ -205,27 +201,37 @@ $componentName: "ui-suggest";
205201
border-left: 0;
206202
border-right: 0;
207203
}
208-
&-suffix {
204+
205+
&-icon-suffix {
209206
align-self: center;
210207

211208
mat-icon {
212209
font-size: 24px;
210+
padding: 0;
213211
}
214212
}
215-
&-wrapper {
216-
padding-bottom: 0;
217-
}
213+
218214
&-underline {
219215
bottom: 7px;
220216
}
217+
218+
&-subscript-wrapper {
219+
display: none;
220+
}
221+
222+
.mat-mdc-text-field-wrapper {
223+
align-items: center;
224+
}
221225
}
222226

223227
.mat-mdc-list {
224228
overflow-y: auto;
225-
padding-top: 0;
229+
padding: 0;
226230

227231
&-item {
228-
cursor: pointer;
232+
&:not(.mat-mdc-list-item-interactive) {
233+
cursor: pointer;
234+
}
229235

230236
.readonly,
231237
&.disabled {
@@ -235,14 +241,12 @@ $componentName: "ui-suggest";
235241
font-style: italic;
236242
opacity: 0.8;
237243
}
238-
/* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
239-
&.text-ellipsis:not(.custom-value-template) .mat-list-item-content {
244+
&.text-ellipsis:not(.custom-value-template) .mdc-list-item__content {
240245
display: block;
241246
}
242247

243248
&.is-expandable {
244-
/* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
245-
.mat-list-item-content {
249+
.mdc-list-item__content {
246250
padding-right: 30px;
247251
}
248252
}
@@ -287,52 +291,3 @@ $componentName: "ui-suggest";
287291
}
288292
}
289293
}
290-
291-
.mat-form-field-appearance-outline {
292-
ui-suggest {
293-
margin-top: -1px;
294-
295-
.display {
296-
> mat-icon.arrow-down {
297-
margin-top: -6px;
298-
}
299-
}
300-
301-
.mat-mdc-form-field {
302-
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
303-
.mat-form-field-suffix {
304-
height: 36px;
305-
}
306-
}
307-
}
308-
}
309-
310-
.mat-form-field-appearance-fill {
311-
ui-suggest {
312-
margin-top: -2px;
313-
314-
.display {
315-
> mat-icon.arrow-down {
316-
margin-top: -12px;
317-
}
318-
}
319-
320-
.mat-mdc-form-field {
321-
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
322-
.mat-form-field-suffix {
323-
height: 32px;
324-
}
325-
}
326-
}
327-
}
328-
329-
.mat-form-field-appearance-standard {
330-
ui-suggest {
331-
.mat-mdc-form-field {
332-
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
333-
.mat-form-field-suffix {
334-
height: 32px;
335-
}
336-
}
337-
}
338-
}

0 commit comments

Comments
 (0)