From 983e9e19a565e364085c3ce4bc565815c5738447 Mon Sep 17 00:00:00 2001
From: Cristina Chumillas <ckrina@1206650.no-reply.drupal.org>
Date: Fri, 15 Dec 2023 11:13:12 +0100
Subject: [PATCH] Issue #3332685 by Gauravvvv, kostyashupenko, nod_, lauriii:
Refactor Claro's tables stylesheet
---
core/themes/claro/css/components/tables.css | 122 ++++-----
.../claro/css/components/tables.pcss.css | 235 ++++++++----------
2 files changed, 153 insertions(+), 204 deletions(-)
diff --git a/core/themes/claro/css/components/tables.css b/core/themes/claro/css/components/tables.css
index 36413d36bf12..b20d4bfce4be 100644
--- a/core/themes/claro/css/components/tables.css
+++ b/core/themes/claro/css/components/tables.css
@@ -12,8 +12,7 @@
table {
width: 100%;
- margin-top: var(--space-l);
- margin-bottom: var(--space-l);
+ margin-block: var(--space-l);
border-collapse: collapse;
}
@@ -22,11 +21,7 @@ table {
}
caption {
- text-align: left; /* LTR */
-}
-
-[dir="rtl"] caption {
- text-align: right;
+ text-align: start;
}
th {
@@ -34,48 +29,50 @@ th {
box-sizing: border-box;
height: var(--space-xl);
padding: var(--space-xs) var(--space-m);
- text-align: left; /* LTR */
+ text-align: start;
color: var(--color-text);
background: var(--color-gray-050);
line-height: 1.25rem; /* 20px */
}
-[dir="rtl"] th {
- text-align: right;
-}
-
-/**
- * Table sort.
- */
-
-/* Table head cell containing sort link. */
+/* The actual sort link. */
.sortable-heading {
padding: 0 var(--space-m);
}
-/* The actual sort link. */
-
.sortable-heading > a {
display: block;
- padding: var(--space-xs) 1.5rem var(--space-xs) 0; /* LTR */
+ padding-block: var(--space-xs);
+ padding-inline: 0 1.5rem;
-webkit-text-decoration: none;
text-decoration: none;
color: inherit;
}
-[dir="rtl"] .sortable-heading > a {
- padding-right: 0;
- padding-left: 1.5rem;
+.sortable-heading > a:focus,
+.sortable-heading > a:hover {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.sortable-heading > a:focus::before,
+.sortable-heading > a:hover::before {
+ border-color: inherit;
+}
+
+.sortable-heading > a:focus::after,
+.sortable-heading > a:hover::after {
+ opacity: 1;
}
.sortable-heading > a::before {
position: absolute;
z-index: 0;
- top: 0;
- right: 1rem;
- bottom: 0;
- left: 1rem;
+ inset-block-start: 0;
+ inset-inline-end: 1rem;
+ inset-block-end: 0;
+ inset-inline-start: 1rem;
display: block;
content: "";
border-bottom: 0.125rem solid transparent;
@@ -83,11 +80,11 @@ th {
.sortable-heading > a::after {
position: absolute;
- top: 50%;
- right: 1rem;
+ inset-block-start: 50%;
+ inset-inline-end: 1rem;
width: 0.875rem;
height: 1rem;
- margin-top: -0.5rem;
+ margin-block-start: -0.5rem;
content: "";
opacity: 0.5;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;
@@ -103,40 +100,17 @@ th {
}
}
-[dir="rtl"] .sortable-heading > a::after {
- right: auto;
- left: 1rem;
+[dir="rtl"] :is(.sortable-heading > a::after) {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
- [dir="rtl"] .sortable-heading > a::after {
- background: linktext;
+ [dir="rtl"] :is(.sortable-heading > a::after) {
-webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;
mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;
}
}
-/* Sortable cell's link focus/hover state. */
-
-.sortable-heading > a:focus,
-.sortable-heading > a:hover {
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.sortable-heading > a:focus::before,
-.sortable-heading > a:hover::before {
- border-color: inherit;
-}
-
-.sortable-heading > a:focus::after,
-.sortable-heading > a:hover::after {
- opacity: 1;
-}
-
-/* Sortable cell's active state. */
-
.sortable-heading.is-active > a {
color: var(--color-absolutezero);
}
@@ -153,16 +127,6 @@ tr {
border-bottom: 0.0625rem solid var(--color-gray-200);
}
-tr,
-.draggable-table.tabledrag-disabled tr {
- color: var(--color-text);
- background: var(--color-white);
-}
-
-thead tr {
- border: 0;
-}
-
tr:hover,
tr:focus {
color: var(--color-text);
@@ -181,27 +145,27 @@ tr.color-error:focus {
background: #fcf4f2;
}
+tr,
+.draggable-table.tabledrag-disabled tr {
+ color: var(--color-text);
+ background: var(--color-white);
+}
+
+thead tr {
+ border: 0;
+}
+
td {
box-sizing: border-box;
height: 4rem;
padding: var(--space-xs) var(--space-m);
- text-align: left; /* LTR */
-}
-
-[dir="rtl"] td {
- text-align: right;
+ text-align: start;
}
td .item-list ul {
margin: 0;
}
-/* This is required to win over specificity of [dir="rtl"] .item-list ul */
-
-[dir="rtl"] td .item-list ul {
- margin: 0;
-}
-
td.is-active {
background: none;
}
@@ -243,7 +207,7 @@ th.select-all {
*/
.caption {
- margin-bottom: 1.25rem; /* 20px */
+ margin-block-end: 1.25rem; /* 20px */
}
tfoot {
@@ -284,11 +248,11 @@ td.priority-medium {
}
.tabledrag-toggle-weight-wrapper {
- margin-top: var(--space-l);
+ margin-block-start: var(--space-l);
line-height: calc(28rem / 16);
}
.tabledrag-toggle-weight-wrapper + table,
.tabledrag-toggle-weight-wrapper + .tableresponsive-toggle-columns + table {
- margin-top: 0;
+ margin-block-start: 0;
}
diff --git a/core/themes/claro/css/components/tables.pcss.css b/core/themes/claro/css/components/tables.pcss.css
index 5275701f45b4..f7d29ceab73b 100644
--- a/core/themes/claro/css/components/tables.pcss.css
+++ b/core/themes/claro/css/components/tables.pcss.css
@@ -5,8 +5,7 @@
table {
width: 100%;
- margin-top: var(--space-l);
- margin-bottom: var(--space-l);
+ margin-block: var(--space-l);
border-collapse: collapse;
}
@@ -15,108 +14,113 @@ table {
}
caption {
- text-align: left; /* LTR */
-}
-[dir="rtl"] caption {
- text-align: right;
+ text-align: start;
}
+
th {
position: relative;
box-sizing: border-box;
height: var(--space-xl);
padding: var(--space-xs) var(--space-m);
- text-align: left; /* LTR */
+ text-align: start;
color: var(--color-text);
background: var(--color-gray-050);
line-height: 1.25rem; /* 20px */
}
-[dir="rtl"] th {
- text-align: right;
-}
-/**
- * Table sort.
- */
-/* Table head cell containing sort link. */
+/* The actual sort link. */
.sortable-heading {
padding: 0 var(--space-m);
-}
-/* The actual sort link. */
-.sortable-heading > a {
- display: block;
- padding: var(--space-xs) 1.5rem var(--space-xs) 0; /* LTR */
- text-decoration: none;
- color: inherit;
-}
-[dir="rtl"] .sortable-heading > a {
- padding-right: 0;
- padding-left: 1.5rem;
-}
-.sortable-heading > a::before {
- position: absolute;
- z-index: 0;
- top: 0;
- right: 1rem;
- bottom: 0;
- left: 1rem;
- display: block;
- content: "";
- border-bottom: 0.125rem solid transparent;
-}
-.sortable-heading > a::after {
- position: absolute;
- top: 50%;
- right: 1rem;
- width: 0.875rem;
- height: 1rem;
- margin-top: -0.5rem;
- content: "";
- opacity: 0.5;
- background: url(../../images/icons/000f33/sort--inactive--ltr.svg) no-repeat 50% 50%;
- background-size: contain;
-
- @media (forced-colors: active) {
- opacity: 1;
- background: linktext;
- mask: url(../../images/icons/000f33/sort--inactive--ltr.svg) no-repeat 50% 50%;
+ & > a {
+ display: block;
+ padding-block: var(--space-xs);
+ padding-inline: 0 1.5rem;
+ text-decoration: none;
+ color: inherit;
+
+ &:focus,
+ &:hover {
+ text-decoration: none;
+
+ &::before {
+ border-color: inherit;
+ }
+
+ &::after {
+ opacity: 1;
+ }
+ }
+
+ &::before {
+ position: absolute;
+ z-index: 0;
+ inset-block-start: 0;
+ inset-inline-end: 1rem;
+ inset-block-end: 0;
+ inset-inline-start: 1rem;
+ display: block;
+ content: "";
+ border-bottom: 0.125rem solid transparent;
+ }
+
+ &::after {
+ position: absolute;
+ inset-block-start: 50%;
+ inset-inline-end: 1rem;
+ width: 0.875rem;
+ height: 1rem;
+ margin-block-start: -0.5rem;
+ content: "";
+ opacity: 0.5;
+ background: url(../../images/icons/000f33/sort--inactive--ltr.svg) no-repeat 50% 50%;
+ background-size: contain;
+
+ @media (forced-colors: active) {
+ opacity: 1;
+ background: linktext;
+ mask: url(../../images/icons/000f33/sort--inactive--ltr.svg) no-repeat 50% 50%;
+ }
+
+ @nest [dir="rtl"] & {
+ background-image: url(../../images/icons/000f33/sort--inactive--rtl.svg);
+
+ @media (forced-colors: active) {
+ mask: url(../../images/icons/000f33/sort--inactive--rtl.svg) no-repeat 50% 50%;
+ }
+ }
+ }
}
-}
-[dir="rtl"] .sortable-heading > a::after {
- right: auto;
- left: 1rem;
- background-image: url(../../images/icons/000f33/sort--inactive--rtl.svg);
- @media (forced-colors: active) {
- background: linktext;
- mask: url(../../images/icons/000f33/sort--inactive--rtl.svg) no-repeat 50% 50%;
+ &.is-active > a {
+ color: var(--color-absolutezero);
+
+ &::before {
+ border-bottom: 0.1875rem solid var(--color-absolutezero);
+ }
+
+ &::after {
+ content: none;
+ }
}
}
-/* Sortable cell's link focus/hover state. */
-.sortable-heading > a:focus,
-.sortable-heading > a:hover {
- text-decoration: none;
-}
-.sortable-heading > a:focus::before,
-.sortable-heading > a:hover::before {
- border-color: inherit;
-}
-.sortable-heading > a:focus::after,
-.sortable-heading > a:hover::after {
- opacity: 1;
-}
-/* Sortable cell's active state. */
-.sortable-heading.is-active > a {
- color: var(--color-absolutezero);
-}
-.sortable-heading.is-active > a::before {
- border-bottom: 0.1875rem solid var(--color-absolutezero);
-}
-.sortable-heading.is-active > a::after {
- content: none;
-}
tr {
border-bottom: 0.0625rem solid var(--color-gray-200);
+ &:hover,
+ &:focus {
+ color: var(--color-text);
+ background: var(--color-bgblue-hover);
+ }
+ &.color-warning:hover,
+ &.color-warning:focus {
+ color: var(--color-text);
+ background: #fdf8ed;
+ }
+ &.color-error:hover,
+ &.color-error:focus {
+ color: var(--color-text);
+ background: #fcf4f2;
+ }
}
tr,
.draggable-table.tabledrag-disabled tr {
@@ -126,41 +130,20 @@ tr,
thead tr {
border: 0;
}
-tr:hover,
-tr:focus {
- color: var(--color-text);
- background: var(--color-bgblue-hover);
-}
-tr.color-warning:hover,
-tr.color-warning:focus {
- color: var(--color-text);
- background: #fdf8ed;
-}
-tr.color-error:hover,
-tr.color-error:focus {
- color: var(--color-text);
- background: #fcf4f2;
-}
td {
box-sizing: border-box;
height: 4rem;
padding: var(--space-xs) var(--space-m);
- text-align: left; /* LTR */
-}
-[dir="rtl"] td {
- text-align: right;
-}
+ text-align: start;
-td .item-list ul {
- margin: 0;
-}
-/* This is required to win over specificity of [dir="rtl"] .item-list ul */
-[dir="rtl"] td .item-list ul {
- margin: 0;
-}
-td.is-active {
- background: none;
+ @nest & .item-list ul {
+ margin: 0;
+ }
+
+ @nest &.is-active {
+ background: none;
+ }
}
/**
@@ -195,17 +178,19 @@ th.select-all {
* Captions.
*/
.caption {
- margin-bottom: 1.25rem; /* 20px */
+ margin-block-end: 1.25rem; /* 20px */
}
tfoot {
font-weight: bold;
-}
-tfoot tr:last-child {
- border-bottom: 0;
-}
-tfoot tr:first-child td {
- border-top: 0.0625rem solid var(--color-gray-500);
+ & tr {
+ &:last-child {
+ border-bottom: 0;
+ }
+ &:first-child td {
+ border-top: 0.0625rem solid var(--color-gray-500);
+ }
+ }
}
/**
@@ -233,11 +218,11 @@ td.priority-medium {
}
.tabledrag-toggle-weight-wrapper {
- margin-top: var(--space-l);
+ margin-block-start: var(--space-l);
line-height: calc(28rem / 16);
-}
-.tabledrag-toggle-weight-wrapper + table,
-.tabledrag-toggle-weight-wrapper + .tableresponsive-toggle-columns + table {
- margin-top: 0;
+ & + table,
+ & + .tableresponsive-toggle-columns + table {
+ margin-block-start: 0;
+ }
}
--
GitLab