gin-admin-item.css

Same filename and directory in other branches
  1. main core/themes/default_admin/migration/css/base/gin-admin-item.css
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

.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.css

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

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

  5.  * @preserve

  6.  */

  7. 

  8. .admin-list {

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

  10. }

  11. 

  12. .admin-item {

  13.   position: relative;

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

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

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

  17. 

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

  19.     border-block-end: 0 none;

  20. 

  21.     &::after {

  22.       position: absolute;

  23.       display: block;

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

  25.       height: 1px;

  26.       content: "";

  27.       opacity: 0.75;

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

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

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

  31.     }

  32.   }

  33. 

  34.   &:first-child {

  35.     margin-block-start: 0;

  36.   }

  37. 

  38.   &:last-child {

  39.     margin-block-end: 0;

  40.   }

  41. }

  42. 

  43. .admin-item--panel {

  44.   margin-block: 0;

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

  46. }

  47. 

  48. .admin-item__title {

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

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

  51. }

  52. 

  53. .admin-item__description {

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

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

  56. }

  57. 

  58. .admin-item {

  59.   .admin-item__link {

  60.     position: absolute;

  61.     width: 100%;

  62.     height: 100%;

  63.     margin: 0;

  64.     padding: 0;

  65.     text-indent: -999em;

  66.     inset-block-start: 0;

  67.     inset-inline-start: 0;

  68. 

  69.     &::before {

  70.       transform: translateY(-50%);

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

  72.       background-image: none;

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

  74.       inset-inline-start: auto;

  75.       inset-block-start: 50%;

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

  77.       mask-size: 1em 1em;

  78.       mask-repeat: no-repeat;

  79.       mask-position: center center;

  80. 

  81.       &:dir(rtl) {

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

  83.       }

  84. 

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

  86.         background-color: linktext;

  87.       }

  88.     }

  89. 

  90.     &:hover,

  91.     &:focus {

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

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

  94. 

  95.       ~ .admin-item__title,

  96.       ~ .admin-item__description {

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

  98.       }

  99.     }

  100. 

  101.     &:focus {

  102.       box-shadow:

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

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

  105.     }

  106.   }

  107. }

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