Time Picker - Ambiguous AM/PM Active state

[ghost]

In the timepicker, It's not obvious if AM or PM is selected. Because of the borders, either white or gray could be considered a highlight.

Was able to make it look more clear by doing something like this:

.mtx-time-ampm {
  .mtx-time-am, .mtx-time-pm {
    border: none!important;
    border-radius: 8px!important;
    --interaction-scale: 0.9;

    .mat-mdc-button-persistent-ripple.mdc-button__ripple, .mat-ripple {
      transform: scale(var(--interaction-scale));
      border-radius: 8px;
    }

    &.mtx-time-ampm-active {
      background: transparent;

      &:after {
        content: '';
        position: absolute;
        border-radius: 8px;
        inset: 0;
        background-color: rgba(101, 101, 112, 0.2);
        transform: scale(var(--interaction-scale));
      }
    }
  }
}

[nzbin]

Many thanks for your advice, the extensions time picker is based on Material Spec. https://m3.material.io/components/time-pickers/overview

I won't make changes besides the spec but you can customize it in your own project.

[ghost]

@nzbin I see, thanks for clarifying. The Material version looks less ambiguous. Might be some nuanced details in the spec that aren't quite right. https://m3.material.io/components/time-pickers/specs#2da4cfb6-d6df-4bc2-ba5a-ee7324c265cf

For example, the AM/PM items shouldn't be the same color. They're both black, but one should be less prominent. That would help make it more clear which one is active.

[nzbin]

For example, the AM/PM items shouldn't be the same color. They're both black, but one should be less prominent. That would help make it more clear which one is active.

Ok, I will improve it.

[nzbin]

The new version 15.1.1 has improved this issue.

[ghost]

Thank you! Really appreciate you taking the time to look into it.