Значок мат-псевдо-флажка не по центру и меньше обычного - PullRequest
Новая
       27

Значок мат-псевдо-флажка не по центру и меньше обычного

0 голосов
/ 03 марта 2020

При реализации списка флажков мое внимание привлекло то, что отметка, когда флажок установлен, не стилизована так, как это должно быть. Когда я сравниваю это с документацией, я замечаю, что это намного меньше и далеко от центра. Я начинаю задумываться, не связано ли это с моим другим css, или я что-то упускаю.

HTML

<div class="general-wrapper">
  <h3>Users ({{participants.length}})</h3>
  <div class="wrapper">
    <div class="filterbar">
      <mat-icon>search</mat-icon>
      <div class="form-wrapper">
        <mat-form-field>
          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
        </mat-form-field>
      </div>
    </div>

    <div>
      <mat-form-field>
        <mat-label>Columns</mat-label>
        <mat-select [formControl]="columns" multiple>
          <mat-select-trigger>
            {{columns.value ? columns.value[0] : ''}}
            <span *ngIf="columns.value?.length > 1" class="additional-selection">
              (+{{columns.value.length - 1}} {{columns.value?.length === 2 ? 'other' : 'others'}})
            </span>
          </mat-select-trigger>
          <mat-option *ngFor="let column of selectedColumns" [value]="column">{{column}}</mat-option>
        </mat-select>
      </mat-form-field>
    </div>
  </div>
... rest of page
</div>

CSS

::ng-deep .mat-focused .mat-form-field-label {
  /*change color of label*/
  color: #f59225 !important;
}

::ng-deep.mat-form-field-underline {
  /*change color of underline*/
  background-color: #f59225 !important;
}

::ng-deep.mat-form-field-ripple {
  /*change color of underline when focused*/
  background-color: #f59225 !important;
  ;
}

::ng-deep .mat-primary .mat-pseudo-checkbox-checked {
  background: #f59225;
}

.download-btn {
  background-color: #f59225;
  color: #f9f9f9;
}

.additional-selection {
  opacity: 0.75;
  font-size: 0.75em;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

}

.form-wrapper {
  width: 100%;
}

.filterbar {
  display: flex;
  align-items: center;
  width: 50%;
}

mat-form-field {
  width: 100%;
}

mat-table {
  margin: 5px;
  width: 100%
}

.mat-row:hover {
  cursor: pointer;
  background-color: gainsboro;
}

.spinner-card {
  display: flex;
  justify-content: center;
  align-items: center;
}

.general-wrapper {
  width: 90%;
  margin: 0 auto;
}

body,
html {
  width: 100%;
}

mat-cell:last-of-type {
  margin-right: 0px;
}

mat-cell {
  word-wrap: break-word;
  word-break: normal;
  margin-right: 8px;
}

.status ::ng-deep .mat-progress-spinner circle,
.mat-spinner circle {
  stroke: #f59225 !important;
}

Вот так выглядят мои флажки:
Checkboxes

...