Skip to content
Snippets Groups Projects
Verified Commit 9e0ed313 authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3332701 by Gauravvvv, shmy, royalpinto007, Meeni_Dhobale, mherchel,... 

Issue #3332701 by Gauravvvv, shmy, royalpinto007, Meeni_Dhobale, mherchel, smustgrave: Refactor Claro's tablesort-indicator stylesheet
parent 6db12006
No related branches found
No related tags found
25 merge requests!8528Issue #3456871 by Tim Bozeman: Support NULL services,!3878Removed unused condition head title for views,!38582585169-10.1.x,!3818Issue #2140179: $entity->original gets stale between updates,!3742Issue #3328429: Create item list field formatter for displaying ordered and unordered lists,!3731Claro: role=button on status report items,!3668Resolve #3347842 "Deprecate the trusted",!3651Issue #3347736: Create new SDC component for Olivero (header-search),!3531Issue #3336994: StringFormatter always displays links to entity even if the user in context does not have access,!3355Issue #3209129: Scrolling problems when adding a block via layout builder,!3226Issue #2987537: Custom menu link entity type should not declare "bundle" entity key,!3154Fixes #2987987 - CSRF token validation broken on routes with optional parameters.,!3133core/modules/system/css/components/hidden.module.css,!2812Issue #3312049: [Followup] Fix Drupal.Commenting.FunctionComment.MissingReturnType returns for NULL,!2378Issue #2875033: Optimize joins and table selection in SQL entity query implementation,!2334Issue #3228209: Add hasRole() method to AccountInterface,!2062Issue #3246454: Add weekly granularity to views date sort,!1105Issue #3025039: New non translatable field on translatable content throws error,!1073issue #3191727: Focus states on mobile second level navigation items fixed,!10223132456: Fix issue where views instances are emptied before an ajax request is complete,!877Issue #2708101: Default value for link text is not saved,!617Issue #3043725: Provide a Entity Handler for user cancelation,!579Issue #2230909: Simple decimals fail to pass validation,!560Move callback classRemove outside of the loop,!555Issue #3202493
Pipeline #98578 canceled
Stage: 🏗️ Build
Stage: 🪄 Lint
Stage: 🗜️ Test
Pipeline: drupal

#98581

    Hide whitespace changes
    Inline Side-by-side
    Showing
    with 72 additions and 85 deletions
    core/themes/claro/css/components/tables.css
    + 12
    − 10
    View file @ 9e0ed313
    ......@@ -91,23 +91,25 @@ th {
    background-size: contain;
    }
    [dir="rtl"] :is(.sortable-heading > a::after) {
    /* Horizontally flip the element. */
    transform: scaleX(-1);
    background-image: 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");
    }
    @media (forced-colors: active) {
    .sortable-heading > a::after {
    opacity: 1;
    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='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%;
    mask: 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%;
    }
    }
    [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"] :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-heading > a::after {
    opacity: 1;
    background: linktext;
    -webkit-mask: 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%;
    mask: 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%;
    }
    }
    ......
    core/themes/claro/css/components/tables.pcss.css
    + 28
    − 23
    View file @ 9e0ed313
    ......@@ -72,22 +72,25 @@ th {
    margin-block-start: -0.5rem;
    content: "";
    opacity: 0.5;
    background: url(../../images/icons/000f33/sort--inactive--ltr.svg) no-repeat 50% 50%;
    background: url(../../images/icons/000f33/sort--inactive.svg) no-repeat 50% 50%;
    background-size: contain;
    [dir="rtl"] & {
    /* Horizontally flip the element. */
    transform: scaleX(-1);
    background-image: url(../../images/icons/000f33/sort--inactive.svg);
    @media (forced-colors: active) {
    mask: url(../../images/icons/000f33/sort--inactive.svg) no-repeat 50% 50%;
    }
    }
    @media (forced-colors: active) {
    opacity: 1;
    background: linktext;
    mask: url(../../images/icons/000f33/sort--inactive--ltr.svg) no-repeat 50% 50%;
    mask: url(../../images/icons/000f33/sort--inactive.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%;
    }
    }
    }
    }
    ......@@ -137,11 +140,11 @@ td {
    padding: var(--space-xs) var(--space-m);
    text-align: start;
    @nest & .item-list ul {
    & .item-list ul {
    margin: 0;
    }
    @nest &.is-active {
    &.is-active {
    background: none;
    }
    }
    ......@@ -150,19 +153,21 @@ td {
    * Target every .form-element input that parent is a form-item of a table cell.
    * This ignores the filter format select of the textarea editor.
    */
    td > .form-item > .form-element,
    td > .ajax-new-content > .form-item > .form-element,
    td > .form-item > .claro-autocomplete,
    td > .form-item > .claro-autocomplete > .form-element,
    td > .ajax-new-content > .form-item > .claro-autocomplete,
    td > .ajax-new-content > .form-item > .claro-autocomplete > .form-element {
    width: 100%;
    }
    td {
    & > .form-item > .form-element,
    & > .ajax-new-content > .form-item > .form-element,
    & > .form-item > .claro-autocomplete,
    & > .form-item > .claro-autocomplete > .form-element,
    & > .ajax-new-content > .form-item > .claro-autocomplete,
    & > .ajax-new-content > .form-item > .claro-autocomplete > .form-element {
    width: 100%;
    }
    td > .form-item > .form-element--type-select,
    td > .ajax-new-content > .form-item > .form-element--type-select {
    width: max-content;
    min-width: 100%;
    & > .form-item > .form-element--type-select,
    & > .ajax-new-content > .form-item > .form-element--type-select {
    width: max-content;
    min-width: 100%;
    }
    }
    /* Win over table-file-multiple-widget. */
    ......
    core/themes/claro/css/components/tablesort-indicator.css
    + 16
    − 31
    View file @ 9e0ed313
    ......@@ -13,38 +13,27 @@
    .tablesort {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 0.875rem; /* 14px */
    height: 1rem; /* 16px */
    margin-top: -0.5rem; /* -8px */
    inset-inline-end: 1rem;
    width: 0.875rem;
    height: var(--space-m);
    margin-block-start: -0.5rem;
    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 0 50%;
    background-image: 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");
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: auto;
    }
    @media (forced-colors: active) {
    .tablesort {
    background: linktext;
    -webkit-mask-image: 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");
    mask-image: 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");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 50%;
    mask-position: 0 50%;
    }
    }
    [dir="rtl"] .tablesort {
    right: auto;
    left: 1rem; /* 16px */
    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");
    /* Horizontally flip the element. */
    transform: scaleX(-1);
    }
    @media (forced-colors: active) {
    [dir="rtl"] .tablesort {
    .tablesort {
    background: linktext;
    -webkit-mask-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");
    mask-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");
    -webkit-mask-image: 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");
    mask-image: 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");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 50%;
    ......@@ -52,30 +41,26 @@
    }
    }
    .tablesort--asc,
    [dir="rtl"] .tablesort--asc {
    .tablesort--asc {
    opacity: 1;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M5 .44L.719 4.718 1.78 5.78 4.25 3.313v7.937h1.5V3.312l2.469 2.47L9.28 4.718 5 .439z' fill='%23003ecc'/%3e%3c/svg%3e");
    }
    @media (forced-colors: active) {
    .tablesort--asc,
    [dir="rtl"] .tablesort--asc {
    .tablesort--asc {
    background: linktext;
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M5 .44L.719 4.718 1.78 5.78 4.25 3.313v7.937h1.5V3.312l2.469 2.47L9.28 4.718 5 .439z' fill='%23003ecc'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M5 .44L.719 4.718 1.78 5.78 4.25 3.313v7.937h1.5V3.312l2.469 2.47L9.28 4.718 5 .439z' fill='%23003ecc'/%3e%3c/svg%3e");
    }
    }
    .tablesort--desc,
    [dir="rtl"] .tablesort--desc {
    .tablesort--desc {
    opacity: 1;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M4.25.75v7.938l-2.469-2.47L.72 7.282 5 11.561l4.281-4.28L8.22 6.22 5.75 8.687V.75h-1.5z' fill='%23003ecc'/%3e%3c/svg%3e");
    }
    @media (forced-colors: active) {
    .tablesort--desc,
    [dir="rtl"] .tablesort--desc {
    .tablesort--desc {
    background: linktext;
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M4.25.75v7.938l-2.469-2.47L.72 7.282 5 11.561l4.281-4.28L8.22 6.22 5.75 8.687V.75h-1.5z' fill='%23003ecc'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M4.25.75v7.938l-2.469-2.47L.72 7.282 5 11.561l4.281-4.28L8.22 6.22 5.75 8.687V.75h-1.5z' fill='%23003ecc'/%3e%3c/svg%3e");
    ......
    core/themes/claro/css/components/tablesort-indicator.pcss.css
    + 16
    − 20
    View file @ 9e0ed313
    ......@@ -6,35 +6,31 @@
    .tablesort {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 0.875rem; /* 14px */
    height: 1rem; /* 16px */
    margin-top: -0.5rem; /* -8px */
    inset-inline-end: 1rem;
    width: 14px;
    height: var(--space-m);
    margin-block-start: -8px;
    opacity: 0.5;
    background: url(../../images/icons/000f33/sort--inactive--ltr.svg) no-repeat 0 50%;
    background-image: url(../../images/icons/000f33/sort--inactive.svg);
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: auto;
    @media (forced-colors: active) {
    background: linktext;
    mask-image: url(../../images/icons/000f33/sort--inactive--ltr.svg);
    mask-repeat: no-repeat;
    mask-position: 0 50%;
    [dir="rtl"] & {
    /* Horizontally flip the element. */
    transform: scaleX(-1);
    }
    }
    [dir="rtl"] .tablesort {
    right: auto;
    left: 1rem; /* 16px */
    background-image: url(../../images/icons/000f33/sort--inactive--rtl.svg);
    @media (forced-colors: active) {
    background: linktext;
    mask-image: url(../../images/icons/000f33/sort--inactive--rtl.svg);
    mask-image: url(../../images/icons/000f33/sort--inactive.svg);
    mask-repeat: no-repeat;
    mask-position: 0 50%;
    }
    }
    .tablesort--asc,
    [dir="rtl"] .tablesort--asc {
    .tablesort--asc {
    opacity: 1;
    background-image: url(../../images/icons/003ecc/sort--asc.svg);
    ......@@ -43,8 +39,8 @@
    mask-image: url(../../images/icons/003ecc/sort--asc.svg);
    }
    }
    .tablesort--desc,
    [dir="rtl"] .tablesort--desc {
    .tablesort--desc {
    opacity: 1;
    background-image: url(../../images/icons/003ecc/sort--desc.svg);
    ......
    core/themes/claro/images/icons/000f33/sort--inactive--rtl.svg deleted 100644 → 0
    + 0
    − 1
    View file @ 6db12006
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="8"><path d="M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z" fill="#000f33"/></svg>
    \ No newline at end of file
    0% or .
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment