Input color and font-weight stylig is not applied about angular-code-input HOT 7 OPEN

@MikolajKaminski Hi. What the version of the code-input component do you use?

from angular-code-input.

@MikolajKaminski Hi. What the version of the code-input component do you use?

@AlexMiniApps Lastest release - v1.6.0

from angular-code-input.

@MikolajKaminski it looks like you have incorrect styled the component, the styles have the different css paths:

from angular-code-input.

That is because the style variables are applied to the code-input component, which then contains the input fields. As you can see on the bottom screenshot, the other variables are applied to the input, it's just the --color and --input-font-weight which are not passed through.

from angular-code-input.

@AlexMiniApps As you can see, the --item-background styling works well, so I do not expect this to be an issue with how I apply the styling.

from angular-code-input.

@MikolajKaminski ok. Please provide the SCSS source sample where you are styling the component for further research.

from angular-code-input.

@AlexMiniApps Below is the styling I use for updating the code-input component

:host {
    --light-gray: #F4F4F4;
  
    --border-light-gray: 1px solid var(--light-gray);
    --border-gray: 1px solid #CAD4DA;
    --border-purple: 1px solid #5950ec;
}

code-input {
    --color: #0B2242;
    --item-font-weight: 500;
    --item-spacing: 1rem;
    --item-background: var(--light-gray);
    --item-height: 3.5rem;
    --item-border: var(--border-light-gray);
    --item-border-bottom: var(--border-light-gray);
    --item-border-has-value: var(--border-gray);
    --item-border-bottom-has-value: var(--border-gray);
    --item-border-focused: var(--border-purple);
    --item-border-bottom-focused: var(--border-purple);
    --item-shadow-focused: none;
    --item-border-radius: 0.625rem;
}

from angular-code-input.