From ce6c553085f607de3d77485bc535575469a73294 Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Sat, 18 Feb 2023 10:08:36 +0200
Subject: [PATCH] Issue #3332461 by Gauravvv, smustgrave: Refactor Claro's
system-admin--status-report stylesheet
---
.../system-admin--status-report.css | 20 +++----
.../system-admin--status-report.pcss.css | 60 ++++++++++---------
2 files changed, 41 insertions(+), 39 deletions(-)
diff --git a/core/themes/claro/css/components/system-admin--status-report.css b/core/themes/claro/css/components/system-admin--status-report.css
index eb0e8fae3f45..a8b01919bee0 100644
--- a/core/themes/claro/css/components/system-admin--status-report.css
+++ b/core/themes/claro/css/components/system-admin--status-report.css
@@ -17,6 +17,10 @@
* - system-status-report-counters.css
*/
+:root {
+ --system-admin-status-report-border-color: var(--color-gray-200);
+}
+
.system-status-report {
position: relative;
padding-top: var(--space-m);
@@ -32,20 +36,17 @@
position: relative;
box-sizing: border-box;
width: 100%;
- padding: 0.625rem 0.375rem 0.625rem 2.5rem; /* LTR */
+ padding-block: 0.625em;
+ padding-inline: 2.5em 0.375em;
vertical-align: top;
background-color: transparent;
font-weight: normal;
}
-[dir="rtl"] .system-status-report__status-title {
- padding: 0.625rem 2.5rem 0.625rem 0.375rem;
-}
-
.system-status-report__status-icon:before {
position: absolute;
top: 0.75rem;
- left: 0.75rem; /* LTR */
+ inset-inline-start: 0.75rem;
display: block;
width: 1rem;
height: 1rem;
@@ -53,11 +54,6 @@
background-repeat: no-repeat;
}
-[dir="rtl"] .system-status-report__status-icon:before {
- right: 0.75rem;
- left: auto;
-}
-
.system-status-report__status-icon--error:before {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc2323'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");
}
@@ -80,7 +76,7 @@
.system-status-report__row {
display: flex;
- border-bottom: 1px solid #d3d4d9;
+ border-bottom: 1px solid var(--system-admin-status-report-border-color);
}
.system-status-report__row:last-of-type {
diff --git a/core/themes/claro/css/components/system-admin--status-report.pcss.css b/core/themes/claro/css/components/system-admin--status-report.pcss.css
index 792487411969..709302264a2e 100644
--- a/core/themes/claro/css/components/system-admin--status-report.pcss.css
+++ b/core/themes/claro/css/components/system-admin--status-report.pcss.css
@@ -10,6 +10,9 @@
* - system-status-report-counters.css
*/
+:root {
+ --system-admin-status-report-border-color: var(--color-gray-200);
+}
.system-status-report {
position: relative;
padding-top: var(--space-m);
@@ -25,33 +28,33 @@
position: relative;
box-sizing: border-box;
width: 100%;
- padding: 10px 6px 10px 40px; /* LTR */
+ padding-block: 0.625em;
+ padding-inline: 2.5em 0.375em;
vertical-align: top;
background-color: transparent;
font-weight: normal;
}
-[dir="rtl"] .system-status-report__status-title {
- padding: 10px 40px 10px 6px;
-}
-.system-status-report__status-icon:before {
- position: absolute;
- top: 12px;
- left: 12px; /* LTR */
- display: block;
- width: 16px;
- height: 16px;
- content: "";
- background-repeat: no-repeat;
-}
-[dir="rtl"] .system-status-report__status-icon:before {
- right: 12px;
- left: auto;
+.system-status-report__status-icon {
+ &:before {
+ position: absolute;
+ top: 12px;
+ inset-inline-start: 12px;
+ display: block;
+ width: 16px;
+ height: 16px;
+ content: "";
+ background-repeat: no-repeat;
+ }
}
-.system-status-report__status-icon--error:before {
- background-image: url(../../../../misc/icons/dc2323/error.svg);
+.system-status-report__status-icon--error {
+ &:before {
+ background-image: url(../../../../misc/icons/dc2323/error.svg);
+ }
}
-.system-status-report__status-icon--warning:before {
- background-image: url(../../images/core/e29700/warning.svg);
+.system-status-report__status-icon--warning {
+ &:before {
+ background-image: url(../../images/core/e29700/warning.svg);
+ }
}
.system-status-report__entry__value {
padding: 1em 0.5em;
@@ -61,14 +64,17 @@
display: block;
}
-.claro-details__wrapper.claro-details__wrapper--system-status-report {
- margin: 0;
+.claro-details__wrapper {
+ &.claro-details__wrapper--system-status-report {
+ margin: 0;
+ }
}
.system-status-report__row {
display: flex;
- border-bottom: 1px solid #d3d4d9;
-}
-.system-status-report__row:last-of-type {
- border-bottom: none;
+ border-bottom: 1px solid var(--system-admin-status-report-border-color);
+
+ &:last-of-type {
+ border-bottom: none;
+ }
}
--
GitLab