Skip to content
Snippets Groups Projects
Verified Commit 983e9e19 authored by Cristina Chumillas's avatar Cristina Chumillas
Browse files

Issue #3332685 by Gauravvvv, kostyashupenko, nod_, lauriii: Refactor Claro's tables stylesheet

parent 5aa9704c
Branches
Tags
36 merge requests!8528Issue #3456871 by Tim Bozeman: Support NULL services,!8323Fix source code editing and in place front page site studio editing.,!6278Issue #3187770 by godotislate, smustgrave, catch, quietone: Views Rendered...,!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),!3546refactored dialog.pcss file,!3531Issue #3336994: StringFormatter always displays links to entity even if the user in context does not have access,!3502Issue #3335308: Confusing behavior with FormState::setFormState and FormState::setMethod,!3452Issue #3332701: Refactor Claro's tablesort-indicator stylesheet,!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.,!3147Issue #3328457: Replace most substr($a, $i) where $i is negative with str_ends_with(),!3146Issue #3328456: Replace substr($a, 0, $i) with str_starts_with(),!3133core/modules/system/css/components/hidden.module.css,!2964Issue #2865710 : Dependencies from only one instance of a widget are used in display modes,!2812Issue #3312049: [Followup] Fix Drupal.Commenting.FunctionComment.MissingReturnType returns for NULL,!2614Issue #2981326: Replace non-test usages of \Drupal::logger() with IoC injection,!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,!844Resolve #3036010 "Updaters",!673Issue #3214208: FinishResponseSubscriber could create duplicate headers,!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 #64258 passed
Stage: 🏗️ Build
Stage: 🪄 Lint
Stage: 🗜️ Test
Pipeline: drupal

#64270

    Pipeline: drupal

    #64266

      Pipeline: drupal

      #64264

        +1
        Hide whitespace changes
        Inline Side-by-side
        core/themes/claro/css/components/tables.css
        + 43
        − 79
        View file @ 983e9e19
        ......@@ -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;
        }
        core/themes/claro/css/components/tables.pcss.css
        + 110
        − 125
        View file @ 983e9e19
        ......@@ -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;
        }
        }
        0% or .
        You are about to add 0 people to the discussion. Proceed with caution.
        Please register or to comment