From 71c9b9f7cdaf3ac42d05450627dff82c2e847e1c Mon Sep 17 00:00:00 2001
From: nod_ <nod_@598310.no-reply.drupal.org>
Date: Mon, 19 Feb 2024 12:15:50 +0100
Subject: [PATCH] Issue #3294001 by Aditya4478, Gauravvvv, shivam-kumar,
smustgrave, bnjmnm: Refactor Claro's autocomplete-loading.module stylesheet
---
.../autocomplete-loading.module.css | 21 +++-----
.../autocomplete-loading.module.pcss.css | 50 ++++++++++---------
2 files changed, 35 insertions(+), 36 deletions(-)
diff --git a/core/themes/claro/css/components/autocomplete-loading.module.css b/core/themes/claro/css/components/autocomplete-loading.module.css
index 39e7fee32f48..65f713085beb 100644
--- a/core/themes/claro/css/components/autocomplete-loading.module.css
+++ b/core/themes/claro/css/components/autocomplete-loading.module.css
@@ -37,16 +37,16 @@
background-position: 100% 50%;
}
-.js[dir="rtl"] .form-autocomplete {
- background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 1c4.54-.173 8.188 4.787 6.687 9.068-1.176 4.384-6.993 6.417-10.637 3.7-.326-.39-.565.276-.846.442l-3.74 3.739-1.413-1.414 4.35-4.35C3.59 8.717 5.25 2.938 9.462 1.475A7.003 7.003 0 0112 1zm0 2c-3.242-.123-5.849 3.42-4.777 6.477.842 3.132 4.994 4.58 7.6 2.65 2.745-1.73 2.9-6.125.285-8.044A5.006 5.006 0 0012 3z' fill='%23868686'/%3e%3c/svg%3e");
- background-position: 0 50%;
-}
-
.js .form-autocomplete.is-autocompleting {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,0)%7d50%25%7btransform:rotate(430deg) translate(-50%25,0);stroke-dashoffset:20%7dto%7btransform:rotate(720deg) translate(-50%25,0)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23003ecc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite;transform-origin:left' r='4'/%3e%3c/svg%3e");
background-position: center right -10px;
}
+.js[dir="rtl"] .form-autocomplete {
+ background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 1c4.54-.173 8.188 4.787 6.687 9.068-1.176 4.384-6.993 6.417-10.637 3.7-.326-.39-.565.276-.846.442l-3.74 3.739-1.413-1.414 4.35-4.35C3.59 8.717 5.25 2.938 9.462 1.475A7.003 7.003 0 0112 1zm0 2c-3.242-.123-5.849 3.42-4.777 6.477.842 3.132 4.994 4.58 7.6 2.65 2.745-1.73 2.9-6.125.285-8.044A5.006 5.006 0 0012 3z' fill='%23868686'/%3e%3c/svg%3e");
+ background-position: 0 50%;
+}
+
.js[dir="rtl"] .form-autocomplete.is-autocompleting {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,0)%7d50%25%7btransform:rotate(-430deg) translate(-50%25,0);stroke-dashoffset:20%7dto%7btransform:rotate(-720deg) translate(-50%25,0)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23003ecc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite;transform-origin:left' r='4'/%3e%3c/svg%3e");
background-position: center left 10px;
@@ -64,17 +64,12 @@
.claro-autocomplete__message {
position: absolute;
- right: 0;
- bottom: 100%;
+ inset-inline-end: 0;
+ inset-block-end: 100%;
max-width: 100%;
- margin-bottom: 0.15rem;
+ margin-block-end: 0.15rem;
color: var(--color-link);
font-size: var(--font-size-xxs); /* ~11px */
font-weight: bold;
line-height: calc(18rem / 16); /* 18px */
}
-
-[dir="rtl"] .claro-autocomplete__message {
- right: auto;
- left: 0;
-}
diff --git a/core/themes/claro/css/components/autocomplete-loading.module.pcss.css b/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
index 900bf8d3682e..5cf8c80873e4 100644
--- a/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
+++ b/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
@@ -24,22 +24,29 @@
* feedback would be a usability/accessibility issue as well.
*/
-.js .form-autocomplete {
- background-image: url(../../images/icons/868686/magnifier.svg);
- background-repeat: no-repeat;
- background-position: 100% 50%;
-}
-.js[dir="rtl"] .form-autocomplete {
- background-image: url(../../images/icons/868686/magnifier-rtl.svg);
- background-position: 0 50%;
-}
-.js .form-autocomplete.is-autocompleting {
- background-image: url(../../images/icons/003ecc/spinner.svg);
- background-position: center right -10px;
-}
-.js[dir="rtl"] .form-autocomplete.is-autocompleting {
- background-image: url(../../images/icons/003ecc/spinner-rtl.svg);
- background-position: center left 10px;
+.js {
+ & .form-autocomplete {
+ background-image: url(../../images/icons/868686/magnifier.svg);
+ background-repeat: no-repeat;
+ background-position: 100% 50%;
+
+ &.is-autocompleting {
+ background-image: url(../../images/icons/003ecc/spinner.svg);
+ background-position: center right -10px;
+ }
+ }
+
+ &[dir="rtl"] {
+ & .form-autocomplete {
+ background-image: url(../../images/icons/868686/magnifier-rtl.svg);
+ background-position: 0 50%;
+
+ &.is-autocompleting {
+ background-image: url(../../images/icons/003ecc/spinner-rtl.svg);
+ background-position: center left 10px;
+ }
+ }
+ }
}
/**
@@ -50,18 +57,15 @@
display: inline-block;
max-width: 100%;
}
+
.claro-autocomplete__message {
position: absolute;
- right: 0;
- bottom: 100%;
+ inset-inline-end: 0;
+ inset-block-end: 100%;
max-width: 100%;
- margin-bottom: 0.15rem;
+ margin-block-end: 0.15rem;
color: var(--color-link);
font-size: var(--font-size-xxs); /* ~11px */
font-weight: bold;
line-height: calc(18rem / 16); /* 18px */
}
-[dir="rtl"] .claro-autocomplete__message {
- right: auto;
- left: 0;
-}
--
GitLab