gin-title.pcss.css

Same filename and directory in other branches
  1. main core/themes/default_admin/migration/css/base/gin-title.pcss.css
@import "media-queries.pcss.css";

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

.page-title {
  overflow: hidden;
  max-width: 90%;
  padding-inline-end: 0.25em;
  white-space: nowrap;
  letter-spacing: -0.05em;
  text-overflow: ellipsis;
  color: var(--gin-color-title);
  font-size: var(--gin-font-size-h1);
  font-weight: var(--gin-font-weight-bold);
  line-height: normal;

  @media (prefers-reduced-motion: no-preference) {
    transition: font-size 0.25s ease;
  }

  @media (--admin-large) {
    .region-sticky--is-sticky & {
      font-size: var(--gin-font-size-h3);
    }
  }
}

.page-title__language {
  display: block;
  letter-spacing: normal;
  color: var(--gin-color-text);
  font-size: var(--gin-font-size-xs);
  font-weight: var(--gin-font-weight-normal);
}

.page-title--is-translation + .shortcut-action .shortcut-action__icon {
  inset-block-start: -3px;
}

.shortcut-action {
  position: relative;
  align-self: center;
  margin-inline-start: 0;
  border-radius: var(--gin-border-m);
}

.shortcut-action__icon {
  position: relative;
  inset-block-start: 3px;
  background: var(--gin-icon-color);
  mask-image: var(--admin-icon-shortcut);
  mask-size: 75% 75%;
  mask-position: center center;
  mask-repeat: no-repeat;

  .gin--edit-form & {
    inset-block-start: 3px;
  }

  @media (--admin-large) {
    inset-block-start: var(--gin-spacing-xxs);
    mask-size: 85% 85%;
  }
}

.shortcut-action:hover .shortcut-action__icon {
  opacity: 1;
  background: var(--gin-color-primary);
}

.shortcut-action--remove {
  .shortcut-action__icon {
    mask-image: var(--admin-icon-shortcut-filled);
    background: var(--gin-color-primary);
  }

  &:hover .shortcut-action__icon {
    opacity: 1;
    background: var(--gin-color-disabled);
  }
}

.shortcut-action__message {
  position: absolute;
  z-index: 2;
  min-width: 120px;
  margin-block-start: calc(var(--gin-spacing-xxs) * -1);
  padding: var(--gin-spacing-xs);
  white-space: nowrap;
  pointer-events: none;
  color: var(--gin-color-contextual-text);
  border-radius: var(--gin-border-xs);
  background: var(--gin-color-contextual);
  inset-block-start: 0;
  inset-inline-start: 100%;
}

File

View on git.drupalcode.org

core/themes/default_admin/migration/css/base/gin-title.pcss.css

View source 
  1. @import "media-queries.pcss.css";

  2. 

  3. .block-page-title-block {

  4.   &:last-child {

  5.     margin-block-end: 0;

  6.   }

  7. }

  8. 

  9. .page-title {

  10.   overflow: hidden;

  11.   max-width: 90%;

  12.   padding-inline-end: 0.25em;

  13.   white-space: nowrap;

  14.   letter-spacing: -0.05em;

  15.   text-overflow: ellipsis;

  16.   color: var(--gin-color-title);

  17.   font-size: var(--gin-font-size-h1);

  18.   font-weight: var(--gin-font-weight-bold);

  19.   line-height: normal;

  20. 

  21.   @media (prefers-reduced-motion: no-preference) {

  22.     transition: font-size 0.25s ease;

  23.   }

  24. 

  25.   @media (--admin-large) {

  26.     .region-sticky--is-sticky 
  27.   }

  28. }

  29. 

  30. .page-title__language {

  31.   display: block;

  32.   letter-spacing: normal;

  33.   color: var(--gin-color-text);

  34.   font-size: var(--gin-font-size-xs);

  35.   font-weight: var(--gin-font-weight-normal);

  36. }

  37. 

  38. .page-title--is-translation + .shortcut-action .shortcut-action__icon {

  39.   inset-block-start: -3px;

  40. }

  41. 

  42. .shortcut-action {

  43.   position: relative;

  44.   align-self: center;

  45.   margin-inline-start: 0;

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

  47. }

  48. 

  49. .shortcut-action__icon {

  50.   position: relative;

  51.   inset-block-start: 3px;

  52.   background: var(--gin-icon-color);

  53.   mask-image: var(--admin-icon-shortcut);

  54.   mask-size: 75% 75%;

  55.   mask-position: center center;

  56.   mask-repeat: no-repeat;

  57. 

  58.   .gin--edit-form 
  59. 

  60.   @media (--admin-large) {

  61.     inset-block-start: var(--gin-spacing-xxs);

  62.     mask-size: 85% 85%;

  63.   }

  64. }

  65. 

  66. .shortcut-action:hover .shortcut-action__icon {

  67.   opacity: 1;

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

  69. }

  70. 

  71. .shortcut-action--remove {

  72.   .shortcut-action__icon {

  73.     mask-image: var(--admin-icon-shortcut-filled);

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

  75.   }

  76. 

  77.   &:hover .shortcut-action__icon {

  78.     opacity: 1;

  79.     background: var(--gin-color-disabled);

  80.   }

  81. }

  82. 

  83. .shortcut-action__message {

  84.   position: absolute;

  85.   z-index: 2;

  86.   min-width: 120px;

  87.   margin-block-start: calc(var(--gin-spacing-xxs) * -1);

  88.   padding: var(--gin-spacing-xs);

  89.   white-space: nowrap;

  90.   pointer-events: none;

  91.   color: var(--gin-color-contextual-text);

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

  93.   background: var(--gin-color-contextual);

  94.   inset-block-start: 0;

  95.   inset-inline-start: 100%;

  96. }

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