Verified Commit 716c43f7 authored by Théodore Biadala's avatar Théodore Biadala
Browse files

task: #3520057 Clean up Claro tablesort CSS 

By: sandip
By: catch
By: smustgrave
By: snehal-chibde
By: nod_
By: godotislate
(cherry picked from commit 806d39ed)
parent 935757de

core/themes/claro/claro.libraries.yml

+1 −0
Original line number Diff line number Diff line
@@ -137,6 +137,7 @@ drupal.tablesort: 
  css:

    component:

      css/classy/components/tablesort.css: {}

      css/components/tablesort.css: {}

      css/components/tablesort-indicator.css: {}



media-form:

core/themes/claro/css/components/tables.css

+0 −81
Original line number Diff line number Diff line
@@ -35,87 +35,6 @@ th { 
  line-height: 1.25rem; /* 20px */

}



/* The actual sort link. */



.sortable-heading {

  padding: 0 var(--space-m);

  & > a {

    display: block;

    padding-block: var(--space-xs);

    padding-inline: 0 1.5rem;

    -webkit-text-decoration: none;

    text-decoration: none;

    color: inherit;



    &:focus,

    &:hover {

      -webkit-text-decoration: none;

      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("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%;

      background-size: contain;



      [dir="rtl"] & {

        /* 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) {

          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%;

        }

      }



      @media (forced-colors: active) {

        opacity: 1;

        background: linktext;

        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%;

      }

    }

  }



  &.is-active > a {

    color: var(--color-absolutezero);



    &::before {

      border-bottom: 0.1875rem solid var(--color-absolutezero);

    }



    &::after {

      content: none;

    }

  }

}



tr {

  border-bottom: 0.0625rem solid var(--color-gray-200);

  &:hover,

core/themes/claro/css/components/tables.pcss.css

+0 −78
Original line number Diff line number Diff line
@@ -28,84 +28,6 @@ th { 
  line-height: 1.25rem; /* 20px */

}



/* The actual sort link. */

.sortable-heading {

  padding: 0 var(--space-m);

  & > 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.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.svg) no-repeat 50% 50%;

      }

    }

  }



  &.is-active > a {

    color: var(--color-absolutezero);



    &::before {

      border-bottom: 0.1875rem solid var(--color-absolutezero);

    }



    &::after {

      content: none;

    }

  }

}



tr {

  border-bottom: 0.0625rem solid var(--color-gray-200);

  &:hover,

core/themes/claro/css/components/tablesort.css

0 → 100644
+90 −0
Original line number Diff line number Diff line 
/*

 * DO NOT EDIT THIS FILE.

 * See the following change record for more information,

 * https://www.drupal.org/node/3084859

 * @preserve

 */



/**

 * @file

 * The actual sort link.

 */



.sortable-heading {

  padding: 0 var(--space-m);

  & > a {

    display: block;

    padding-block: var(--space-xs);

    padding-inline: 0 1.5rem;

    -webkit-text-decoration: none;

    text-decoration: none;

    color: inherit;



    &:focus,

    &:hover {

      -webkit-text-decoration: none;

      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("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%;

      background-size: contain;



      [dir="rtl"] & {

        /* 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) {

          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%;

        }

      }



      @media (forced-colors: active) {

        opacity: 1;

        background: linktext;

        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%;

      }

    }

  }



  &.is-active > a {

    color: var(--color-absolutezero);



    &::before {

      border-bottom: 0.1875rem solid var(--color-absolutezero);

    }



    &::after {

      content: none;

    }

  }

}

core/themes/claro/css/components/tablesort.pcss.css

0 → 100644
+81 −0
Original line number Diff line number Diff line 
/**

 * @file

 * The actual sort link.

 */



.sortable-heading {

  padding: 0 var(--space-m);

  & > 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.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.svg) no-repeat 50% 50%;

      }

    }

  }



  &.is-active > a {

    color: var(--color-absolutezero);



    &::before {

      border-bottom: 0.1875rem solid var(--color-absolutezero);

    }



    &::after {

      content: none;

    }

  }

}