From 88d830026490d779ba69baed9d0f45eb3803fa7b Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Fri, 30 Apr 2021 15:03:20 +0300
Subject: [PATCH] Issue #3200644 by mherchel, cindytwilliams, Gauravmahlawat,
imalabya, vikashsoni, BhumikaVarshney, kleiton_rodrigues: Olivero's
autocomplete input does not have disabled styling
---
.../autocomplete-loading.module.css | 22 +++++++++++++++----
.../autocomplete-loading.module.pcss.css | 18 +++++++++++++--
2 files changed, 34 insertions(+), 6 deletions(-)
diff --git a/core/themes/olivero/css/components/autocomplete-loading.module.css b/core/themes/olivero/css/components/autocomplete-loading.module.css
index 343e54a7cc44..4ba078a729ba 100644
--- a/core/themes/olivero/css/components/autocomplete-loading.module.css
+++ b/core/themes/olivero/css/components/autocomplete-loading.module.css
@@ -14,25 +14,39 @@
}
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 {
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e %3cg transform='translate(5 5)'%3e %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e %3c/g%3e%3c/svg%3e") no-repeat right 1.125rem center;
}
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 {
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e %3cg transform='translate(5 5)'%3e %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e %3c/g%3e%3c/svg%3e") no-repeat left 1.125rem center;
}
diff --git a/core/themes/olivero/css/components/autocomplete-loading.module.pcss.css b/core/themes/olivero/css/components/autocomplete-loading.module.pcss.css
index 8769ef6626fc..9dacf6696df4 100644
--- a/core/themes/olivero/css/components/autocomplete-loading.module.pcss.css
+++ b/core/themes/olivero/css/components/autocomplete-loading.module.pcss.css
@@ -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;
--
GitLab