status.css

.gin-status,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-badge,
.views-field .marker,
.gin-beta-flag,
.gin-experimental-flag,
.gin-new-flag {
  display: inline-block;
  padding: 0.125em 0.75em;
  vertical-align: 0.125em;
  border: 1px solid transparent;
  border-radius: var(--gin-border-l);
  font-size: var(--gin-font-size-xxs);
  font-weight: var(--gin-font-weight-semibold);
  font-variation-settings: initial;
}

.gin-status,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-badge,
.views-field .marker,
.gin-beta-flag,
.gin-experimental-flag,
.pb-project-categories__item,
.pb-module-page__categories-list-item {
  color: var(--gin-status-text);
  background: var(--gin-status-bg);
}

.gin-status--success,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-badge--success,
.gin-new-flag,
.views-field .marker--published,
.pb-actions .project_status-indicator {
  color: var(--gin-status-success-text);
  background-color: var(--gin-status-success-bg);
}

.gin-status--success .gin-status-icon {
  background-color: currentColor;
  -webkit-mask-image: url("../../media/sprite.svg#status-view");
  mask-image: url("../../media/sprite.svg#status-view");
}

.gin-status--warning,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-badge--warning {
  color: var(--gin-status-warning-text);
  background: var(--gin-status-warning-bg);
}

.gin-status--warning .gin-status-icon,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-badge--warning .gin-status-icon {
  background-color: currentColor;
  -webkit-mask-image: url("../../media/sprite.svg#warning-view");
  mask-image: url("../../media/sprite.svg#warning-view");
}

.gin-status--danger,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-badge--danger {
  color: var(--gin-status-danger-text);
  background: var(--gin-status-danger-bg);
}

.gin-status--danger .gin-status-icon,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-badge--danger .gin-status-icon {
  background-color: currentColor;
  -webkit-mask-image: url("../../media/sprite.svg#error-view");
  mask-image: url("../../media/sprite.svg#error-view");
}

.gin-status {
  display: inline-flex;
  align-items: center;
  gap: var(--gin-spacing-xxs);
}

.gin-status-icon {
  margin-inline-start: -0.5em;
}

File

View on git.drupalcode.org

core/themes/admin/migration/css/components/status.css

View source 
  1. .gin-status,

  2. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-badge,

  3. .views-field .marker,

  4. .gin-beta-flag,

  5. .gin-experimental-flag,

  6. .gin-new-flag {

  7.   display: inline-block;

  8.   padding: 0.125em 0.75em;

  9.   vertical-align: 0.125em;

  10.   border: 1px solid transparent;

  11.   border-radius: var(--gin-border-l);

  12.   font-size: var(--gin-font-size-xxs);

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

  14.   font-variation-settings: initial;

  15. }

  16. 

  17. .gin-status,

  18. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-badge,

  19. .views-field .marker,

  20. .gin-beta-flag,

  21. .gin-experimental-flag,

  22. .pb-project-categories__item,

  23. .pb-module-page__categories-list-item {

  24.   color: var(--gin-status-text);

  25.   background: var(--gin-status-bg);

  26. }

  27. 

  28. .gin-status--success,

  29. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-badge--success,

  30. .gin-new-flag,

  31. .views-field .marker--published,

  32. .pb-actions .project_status-indicator {

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

  34.   background-color: var(--gin-status-success-bg);

  35. }

  36. 

  37. .gin-status--success .gin-status-icon {

  38.   background-color: currentColor;

  39.   -webkit-mask-image: url("../../media/sprite.svg#status-view");

  40.   mask-image: url("../../media/sprite.svg#status-view");

  41. }

  42. 

  43. .gin-status--warning,

  44. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-badge--warning {

  45.   color: var(--gin-status-warning-text);

  46.   background: var(--gin-status-warning-bg);

  47. }

  48. 

  49. .gin-status--warning .gin-status-icon,

  50. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-badge--warning .gin-status-icon {

  51.   background-color: currentColor;

  52.   -webkit-mask-image: url("../../media/sprite.svg#warning-view");

  53.   mask-image: url("../../media/sprite.svg#warning-view");

  54. }

  55. 

  56. .gin-status--danger,

  57. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-badge--danger {

  58.   color: var(--gin-status-danger-text);

  59.   background: var(--gin-status-danger-bg);

  60. }

  61. 

  62. .gin-status--danger .gin-status-icon,

  63. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-badge--danger .gin-status-icon {

  64.   background-color: currentColor;

  65.   -webkit-mask-image: url("../../media/sprite.svg#error-view");

  66.   mask-image: url("../../media/sprite.svg#error-view");

  67. }

  68. 

  69. .gin-status {

  70.   display: inline-flex;

  71.   align-items: center;

  72.   gap: var(--gin-spacing-xxs);

  73. }

  74. 

  75. .gin-status-icon {

  76.   margin-inline-start: -0.5em;

  77. }

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