system-admin--admin-list.pcss.css

Admin list and admin item modules.

File

core/themes/claro/css/components/system-admin--admin-list.pcss.css

View source 
  1. /**

  2.  * @file

  3.  * Admin list and admin item modules.

  4.  */

  5. 

  6. /**

  7.  * Admin list (wrapper of admin items).

  8.  */

  9. .admin-list {

  10.   margin-block: 1em 2em;

  11.   padding: 0;

  12. }

  13. .admin-list--panel {

  14.   margin: -1em -1.5em;

  15. }

  16. 

  17. /**

  18.  * Admin item.

  19.  */

  20. .admin-item {

  21.   padding-block: 0.75em;

  22.   padding-inline: 3em 1.5em;

  23.   &:not(:last-child) {

  24.     border-bottom: calc(1em / 16) solid var(--color-gray-200);

  25.   }

  26. }

  27. 

  28. .admin-item__title {

  29.   font-weight: bold;

  30. }

  31. 

  32. .admin-item__link {

  33.   position: relative;

  34.   display: inline-block;

  35.   margin-inline-start: -1.5em;

  36.   padding-inline-start: 1.5em;

  37.   text-decoration: none;

  38. }

  39. 

  40. /**

  41.  * Admin item link icon.

  42.  */

  43. .admin-item__link::before {

  44.   position: absolute;

  45.   inset-block-start: 0;

  46.   inset-inline-start: 0;

  47.   display: block;

  48.   width: 1em;

  49.   height: 1.5em;

  50.   content: "";

  51.   background: transparent no-repeat 50% 50%;

  52.   background-image: url(../../images/icons/003ecc/arrow-right.svg);

  53. 

  54.   @nest [dir="rtl"] 
  55. 

  56.   @media (forced-colors: active) {

  57.     mask-image: url(../../images/icons/003ecc/arrow-right.svg);

  58.     mask-repeat: no-repeat;

  59.     mask-position: center center;

  60.     background-color: linktext;

  61.     background-image: none;

  62.   }

  63. }

  64. 

  65. .admin-item__description {

  66.   margin-block: 0.5em 0.25em;

  67.   margin-inline: 0;

  68.   color: var(--color-gray-800);

  69. }