Incorrect hex-input and rgb-input css?

[eholman]

Describe the bug
Given this HTML:

    <mat-form-field>
      <mat-label>Enter {{name}}</mat-label>
      <mcc-color-picker hideUsedColors matSuffix mccConnectedColorPicker [mccConnectedColorPickerOrigin]="trigger"></mcc-color-picker>
      <input matInput mccColorPickerOrigin="openOnFocus" #trigger="mccColorPickerOrigin" [formControlName]="controlName"  />
    </mat-form-field>

Results in:

When I override the CSS in styles.scss with this:

.rgb-input{
  margin-right: 1px !important;
  width: 47px !important;
}
.hex-input{
  margin-right: 10px !important;
}

.mcc-color-picker-selector-preview{
  height: 55px !important;
}

That results in:

Am I doing something wrong or is the default CSS not correct?

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[motabass]

The Inputs inside the Picker should be the veriant with underline only (appearance="legacy"). You maybe have configured the outline variant globaly which seems to leak into the color-picker component.

I made a fix for it: #178

[eholman]

You're good! 😎 I indeed have this in the app.module:

providers:[{provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline'}}]

Quickly fixed, thanks!