ajax.css

Same filename and directory in other branches
  1. 11.x core/themes/admin/migration/css/components/ajax.css
@keyframes gin-throbber {
  0% {
    transform: rotateZ(0);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

.ajax-progress__throbber,
.ajax-progress__throbber--fullscreen,
.ui-dialog .ajax-progress__throbber,
.media-library-item .ajax-progress__throbber {
  border: 3px solid var(--gin-color-primary);
  border-inline-end: 3px dotted transparent;
}

.ajax-progress .ajax-progress__message {
  color: var(--gin-color-text);
}

[dir].gin--dark-mode .ajax-progress--fullscreen {
  border-color: transparent;
  background-color: var(--gin-color-primary);
  box-shadow: 0 2px 6px 0 var(--gin-bg-app);
}

[dir].gin--dark-mode .ajax-progress--fullscreen .ajax-progress__throbber,
[dir].gin--dark-mode .ajax-progress--fullscreen .ajax-progress__throbber--fullscreen {
  border: 3px solid var(--gin-bg-app);
  border-inline-end: 3px dotted transparent;
}

.media-library-widget .ajax-progress__throbber,
.media-library-widget .ajax-progress__throbber--fullscreen {
  border: 2px solid var(--gin-color-primary);
  border-inline-end: 2px dotted transparent;
}

.ui-dialog .ajax-progress-throbber {
  padding: var(--gin-spacing-xs);
  border: 1px solid rgb(216, 217, 224, 0.8);
  border-radius: 50%;
  background: var(--gin-bg-app);
  box-shadow: 0 2px 6px 0 rgb(34, 35, 48, 0.1);
}

.gin--dark-mode .ui-dialog .ajax-progress-throbber {
  border-color: transparent;
  background-color: var(--gin-color-primary);
  box-shadow: 0 2px 6px 0 var(--gin-bg-app);
}

.ui-dialog .ajax-progress-throbber::before,
.contextual-links .ajax-progress-throbber::before {
  position: absolute;
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  content: "";
  animation: gin-throbber 0.75s linear infinite;
  border: 2px solid var(--gin-color-primary);
  border-inline-end: 2px dotted transparent;
  border-radius: 50%;
  inset-block-start: var(--gin-spacing-xs);
  inset-inline-start: var(--gin-spacing-xs);
}

.gin--dark-mode .ui-dialog .ajax-progress,
.gin--dark-mode .media-library-item .ajax-progress.ajax-progress.ajax-progress {
  border-color: var(--gin-bg-app);
  background-color: var(--gin-bg-app);
}

.contextual-links li {
  position: relative;
}

.contextual-links .ajax-progress-throbber {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: var(--gin-spacing-xxs);
  width: 24px;
  height: 24px;
}

.contextual-links .ajax-progress-throbber::before {
  inset-block-start: 0;
  inset-inline-start: 0.25em;
}

.gin-autocomplete__message {
  color: var(--gin-color-primary);
}

File

View on git.drupalcode.org

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

View source 
  1. @keyframes gin-throbber {

  2.   0% {

  3.     transform: rotateZ(0);

  4.   }

  5. 

  6.   100% {

  7.     transform: rotateZ(360deg);

  8.   }

  9. }

  10. 

  11. .ajax-progress__throbber,

  12. .ajax-progress__throbber--fullscreen,

  13. .ui-dialog .ajax-progress__throbber,

  14. .media-library-item .ajax-progress__throbber {

  15.   border: 3px solid var(--gin-color-primary);

  16.   border-inline-end: 3px dotted transparent;

  17. }

  18. 

  19. .ajax-progress .ajax-progress__message {

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

  21. }

  22. 

  23. [dir].gin--dark-mode .ajax-progress--fullscreen {

  24.   border-color: transparent;

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

  26.   box-shadow: 0 2px 6px 0 var(--gin-bg-app);

  27. }

  28. 

  29. [dir].gin--dark-mode .ajax-progress--fullscreen .ajax-progress__throbber,

  30. [dir].gin--dark-mode .ajax-progress--fullscreen .ajax-progress__throbber--fullscreen {

  31.   border: 3px solid var(--gin-bg-app);

  32.   border-inline-end: 3px dotted transparent;

  33. }

  34. 

  35. .media-library-widget .ajax-progress__throbber,

  36. .media-library-widget .ajax-progress__throbber--fullscreen {

  37.   border: 2px solid var(--gin-color-primary);

  38.   border-inline-end: 2px dotted transparent;

  39. }

  40. 

  41. .ui-dialog .ajax-progress-throbber {

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

  43.   border: 1px solid rgb(216, 217, 224, 0.8);

  44.   border-radius: 50%;

  45.   background: var(--gin-bg-app);

  46.   box-shadow: 0 2px 6px 0 rgb(34, 35, 48, 0.1);

  47. }

  48. 

  49. .gin--dark-mode .ui-dialog .ajax-progress-throbber {

  50.   border-color: transparent;

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

  52.   box-shadow: 0 2px 6px 0 var(--gin-bg-app);

  53. }

  54. 

  55. .ui-dialog .ajax-progress-throbber::before,

  56. .contextual-links .ajax-progress-throbber::before {

  57.   position: absolute;

  58.   display: block;

  59.   width: 1.125rem;

  60.   height: 1.125rem;

  61.   content: "";

  62.   animation: gin-throbber 0.75s linear infinite;

  63.   border: 2px solid var(--gin-color-primary);

  64.   border-inline-end: 2px dotted transparent;

  65.   border-radius: 50%;

  66.   inset-block-start: var(--gin-spacing-xs);

  67.   inset-inline-start: var(--gin-spacing-xs);

  68. }

  69. 

  70. .gin--dark-mode .ui-dialog .ajax-progress,

  71. .gin--dark-mode .media-library-item .ajax-progress.ajax-progress.ajax-progress {

  72.   border-color: var(--gin-bg-app);

  73.   background-color: var(--gin-bg-app);

  74. }

  75. 

  76. .contextual-links li {

  77.   position: relative;

  78. }

  79. 

  80. .contextual-links .ajax-progress-throbber {

  81.   position: absolute;

  82.   inset-block-start: 0;

  83.   inset-inline-end: var(--gin-spacing-xxs);

  84.   width: 24px;

  85.   height: 24px;

  86. }

  87. 

  88. .contextual-links .ajax-progress-throbber::before {

  89.   inset-block-start: 0;

  90.   inset-inline-start: 0.25em;

  91. }

  92. 

  93. .gin-autocomplete__message {

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

  95. }

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