gin-admin-item.pcss.css

Same filename and directory in other branches
  1. main core/themes/default_admin/migration/css/base/gin-admin-item.pcss.css
.admin-list {
  padding: var(--gin-spacing-s) 0;
}

.admin-item {
  position: relative;
  padding-block: var(--gin-spacing-density-s);
  padding-inline: var(--gin-spacing-l) calc(var(--gin-spacing-xs) + var(--gin-spacing-xl));
  margin: var(--gin-spacing-l) var(--gin-spacing-s);

  &:not(:last-child) {
    border-block-end: 0 none;

    &::after {
      position: absolute;
      display: block;
      width: calc(100% + var(--gin-spacing-l));
      height: 1px;
      content: "";
      opacity: 0.75;
      border-block-end: 1px solid var(--gin-border-color-table);
      inset-inline-start: calc(var(--gin-spacing-s) * -1);
      inset-block-end: calc(var(--gin-spacing-s) * -1);
    }
  }

  &:first-child {
    margin-block-start: 0;
  }

  &:last-child {
    margin-block-end: 0;
  }
}

.admin-item--panel {
  margin-block: 0;
  margin-inline: calc(var(--gin-spacing-l) * -1);
}

.admin-item__title {
  font-size: var(--gin-font-size);
  font-weight: var(--gin-font-weight-semibold);
}

.admin-item__description {
  color: var(--gin-color-text-light);
  font-size: var(--gin-font-size-s);
}

.admin-item {
  .admin-item__link {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    text-indent: -999em;
    inset-block-start: 0;
    inset-inline-start: 0;

    &::before {
      transform: translateY(-50%);
      background-color: var(--gin-color-primary);
      background-image: none;
      inset-inline-end: var(--gin-spacing-m);
      inset-inline-start: auto;
      inset-block-start: 50%;
      mask-image: var(--admin-icon-handle);
      mask-size: 1em 1em;
      mask-repeat: no-repeat;
      mask-position: center center;

      &:dir(rtl) {
        transform: translateY(-50%) scaleX(-1);
      }

      @media (forced-colors: active) {
        background-color: linktext;
      }
    }

    &:hover,
    &:focus {
      border-radius: var(--gin-border-m);
      background: var(--gin-color-primary-light);

      ~ .admin-item__title,
      ~ .admin-item__description {
        color: var(--gin-color-primary);
      }
    }

    &:focus {
      box-shadow:
        inset 0 0 0 1px var(--gin-color-focus-border),
        inset 0 0 0 4px var(--gin-color-focus);
    }
  }
}

File

View on git.drupalcode.org

core/themes/default_admin/migration/css/base/gin-admin-item.pcss.css

View source 
  1. .admin-list {

  2.   padding: var(--gin-spacing-s) 0;

  3. }

  4. 

  5. .admin-item {

  6.   position: relative;

  7.   padding-block: var(--gin-spacing-density-s);

  8.   padding-inline: var(--gin-spacing-l) calc(var(--gin-spacing-xs) + var(--gin-spacing-xl));

  9.   margin: var(--gin-spacing-l) var(--gin-spacing-s);

  10. 

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

  12.     border-block-end: 0 none;

  13. 

  14.     &::after {

  15.       position: absolute;

  16.       display: block;

  17.       width: calc(100% + var(--gin-spacing-l));

  18.       height: 1px;

  19.       content: "";

  20.       opacity: 0.75;

  21.       border-block-end: 1px solid var(--gin-border-color-table);

  22.       inset-inline-start: calc(var(--gin-spacing-s) * -1);

  23.       inset-block-end: calc(var(--gin-spacing-s) * -1);

  24.     }

  25.   }

  26. 

  27.   &:first-child {

  28.     margin-block-start: 0;

  29.   }

  30. 

  31.   &:last-child {

  32.     margin-block-end: 0;

  33.   }

  34. }

  35. 

  36. .admin-item--panel {

  37.   margin-block: 0;

  38.   margin-inline: calc(var(--gin-spacing-l) * -1);

  39. }

  40. 

  41. .admin-item__title {

  42.   font-size: var(--gin-font-size);

  43.   font-weight: var(--gin-font-weight-semibold);

  44. }

  45. 

  46. .admin-item__description {

  47.   color: var(--gin-color-text-light);

  48.   font-size: var(--gin-font-size-s);

  49. }

  50. 

  51. .admin-item {

  52.   .admin-item__link {

  53.     position: absolute;

  54.     width: 100%;

  55.     height: 100%;

  56.     margin: 0;

  57.     padding: 0;

  58.     text-indent: -999em;

  59.     inset-block-start: 0;

  60.     inset-inline-start: 0;

  61. 

  62.     &::before {

  63.       transform: translateY(-50%);

  64.       background-color: var(--gin-color-primary);

  65.       background-image: none;

  66.       inset-inline-end: var(--gin-spacing-m);

  67.       inset-inline-start: auto;

  68.       inset-block-start: 50%;

  69.       mask-image: var(--admin-icon-handle);

  70.       mask-size: 1em 1em;

  71.       mask-repeat: no-repeat;

  72.       mask-position: center center;

  73. 

  74.       &:dir(rtl) {

  75.         transform: translateY(-50%) scaleX(-1);

  76.       }

  77. 

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

  79.         background-color: linktext;

  80.       }

  81.     }

  82. 

  83.     &:hover,

  84.     &:focus {

  85.       border-radius: var(--gin-border-m);

  86.       background: var(--gin-color-primary-light);

  87. 

  88.       ~ .admin-item__title,

  89.       ~ .admin-item__description {

  90.         color: var(--gin-color-primary);

  91.       }

  92.     }

  93. 

  94.     &:focus {

  95.       box-shadow:

  96.         inset 0 0 0 1px var(--gin-color-focus-border),

  97.         inset 0 0 0 4px var(--gin-color-focus);

  98.     }

  99.   }

  100. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.