Unverified Commit 88d83002 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3200644 by mherchel, cindytwilliams, Gauravmahlawat, imalabya,... 

Issue #3200644 by mherchel, cindytwilliams, Gauravmahlawat, imalabya, vikashsoni, BhumikaVarshney, kleiton_rodrigues: Olivero's autocomplete input does not have disabled styling
parent a6f06716

core/themes/olivero/css/components/autocomplete-loading.module.css

+18 −4
Original line number Diff line number Diff line
@@ -14,15 +14,22 @@ 
}



html[dir="ltr"].js .form-autocomplete {

  padding-right: 3.375rem

  padding-right: 3.375rem;

}



html[dir="rtl"].js .form-autocomplete {

  padding-left: 3.375rem

  padding-left: 3.375rem;

}



html.js .form-autocomplete {

  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e  %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e") no-repeat right 1.125rem center

  background-color: #fff;

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e  %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e");

  background-repeat: no-repeat;

  background-position: right 18px center  /* LTR */

}



html.js .form-autocomplete:disabled {

    background-color: #f1f4f7;

  }



html.js .form-autocomplete.ui-autocomplete-loading {
@@ -30,7 +37,14 @@ html.js .form-autocomplete.ui-autocomplete-loading { 
  }



html.js[dir="rtl"] .form-autocomplete {

  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e  %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e") no-repeat left 1.125rem center

  background-color: #fff;

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e  %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e");

  background-repeat: no-repeat;

  background-position: left 18px center

}



html.js[dir="rtl"] .form-autocomplete:disabled {

    background-color: #f1f4f7;

  }



html.js[dir="rtl"] .form-autocomplete.ui-autocomplete-loading {

core/themes/olivero/css/components/autocomplete-loading.module.pcss.css

+16 −2
Original line number Diff line number Diff line
@@ -15,7 +15,14 @@ 


html.js .form-autocomplete {

  padding-inline-end: var(--sp3);

  background: var(--autocomplete-search-icon-url) no-repeat right var(--autocomplete-icon-right-offset) center;

  background-color: var(--color--white);

  background-image: var(--autocomplete-search-icon-url);

  background-repeat: no-repeat;

  background-position: right var(--autocomplete-icon-right-offset) center;  /* LTR */



  &:disabled {

    background-color: var(--color--gray-90);

  }



  &.ui-autocomplete-loading {

    background: var(--autocomplete-throbber-icon-url) no-repeat right var(--autocomplete-icon-right-offset) center;
@@ -23,7 +30,14 @@ html.js .form-autocomplete { 
}



html.js[dir="rtl"] .form-autocomplete {

  background: var(--autocomplete-search-icon-url) no-repeat left var(--autocomplete-icon-right-offset) center;

  background-color: var(--color--white);

  background-image: var(--autocomplete-search-icon-url);

  background-repeat: no-repeat;

  background-position: left var(--autocomplete-icon-right-offset) center;



  &:disabled {

    background-color: var(--color--gray-90);

  }



  &.ui-autocomplete-loading {

    background: var(--autocomplete-throbber-icon-url) no-repeat left var(--autocomplete-icon-right-offset) center;