Commit 9a69d917 authored by Cristina Chumillas's avatar Cristina Chumillas
Browse files

Issue #3171728 by jasonfelix, katherined, mherchel, DyanneNova, tanubansal,... 

Issue #3171728 by jasonfelix, katherined, mherchel, DyanneNova, tanubansal, mgifford: Claro Select form element needs Windows High Contrast mode improvements
parent a1df00e4

core/themes/claro/css/components/form--select.css

+20 −1
Original line number Diff line number Diff line
@@ -21,7 +21,14 @@ 
[dir="rtl"] .form-element--type-select {

  padding-right: calc(1rem - var(--input-border-size));

  padding-left: calc(2rem - var(--input-border-size));

  background-position: 0 50%;

  background-position: 0 50%

}



@media (forced-colors: active) {



[dir="rtl"] .form-element--type-select {

    padding-left: var(--input-padding-horizontal)

}

  }



.no-touchevents .form-element--type-select.form-element--extrasmall,
@@ -51,3 +58,15 @@ 
.form-element--type-select[disabled] {

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%238e929c'/%3e%3c/svg%3e");

}



@media (forced-colors: active) {

  .form-element--type-select,

  .form-element--type-select:focus,

  .form-element--type-select[disabled] {

    padding-right: var(--input-padding-horizontal);

    background-image: none;

    -webkit-appearance: revert;

    -moz-appearance: revert;

    appearance: revert; /* Revert <select> appearance value for modern browsers. */

  }

}

core/themes/claro/css/components/form--select.pcss.css

+14 −0
Original line number Diff line number Diff line
@@ -14,6 +14,10 @@ 
  padding-right: calc(1rem - var(--input-border-size));

  padding-left: calc(2rem - var(--input-border-size));

  background-position: 0 50%;



  @media (forced-colors: active) {

    padding-left: var(--input-padding-horizontal);

  }

}



.no-touchevents .form-element--type-select.form-element--extrasmall,
@@ -40,3 +44,13 @@ 
.form-element--type-select[disabled] {

  background-image: url(../../images/icons/8e929c/chevron-down.svg);

}



@media (forced-colors: active) {

  .form-element--type-select,

  .form-element--type-select:focus,

  .form-element--type-select[disabled] {

    padding-right: var(--input-padding-horizontal);

    background-image: none;

    appearance: revert; /* Revert <select> appearance value for modern browsers. */

  }

}