ajax-progress.module.pcss.css

/**
 * @file
 * Throbber.
 */

.ajax-progress {
  display: inline-block;
}

/**
 * Progress bar.
 */

.ajax-progress-bar {
  width: 13em;
  padding: 0 0.3125rem; /* 0 5px */
}

/**
 * Throbber.
 */
.ajax-progress--throbber {
  position: relative;
  display: inline-flex;
  align-content: center;
  height: 1.125rem;
  margin: -3px var(--ajax-progress-margin-horizontal) 0;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.125rem;
}

/**
 * Remove margin from ajax throbbers following buttons because buttons already
 * have a large margin set.
 */
.js .action-link:not(.js-hide, .button--action) + .ajax-progress--throbber,
.js .button:not(.js-hide, .button--action) + .ajax-progress--throbber {
  margin-inline-start: 0;
}
/**
 * Restore start margin for ajax throbbers inside a managed file widget.
 */
.js .form-type--managed-file .button:not(.js-hide) + .ajax-progress--throbber,
.js .file-operations-cell .button:not(.js-hide) + .ajax-progress--throbber {
  margin-inline-start: var(--ajax-progress-margin-horizontal); /* LTR */
}

.ajax-progress__throbber {
  box-sizing: border-box;
  width: 1.125rem;
  height: 1.125rem;
  animation: throbber 0.75s linear infinite;
  border: 2px solid var(--admin-color-link);
  border-right: 2px dotted transparent;
  border-radius: 50%;
}

.ajax-progress__message {
  display: inline-block;
  padding-inline-start: var(--ajax-progress-margin-horizontal);
  font-size: var(--admin-font-size-label);
}

/**
 * Full screen throbber.
 */
.ajax-progress--fullscreen,
.ui-dialog .ajax-progress--throbber {
  position: fixed;
  z-index: 1261;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  box-sizing: border-box;
  width: 3.5rem; /* 56px */
  height: 3.5rem;
  margin: -1.75rem;
  border: var(--input-border-size) solid var(--jui-dropdown-border-color);
  border-radius: 3.5rem;
  background: var(--admin-color-bg-raised);
  box-shadow: 0 0.25rem 0.625rem var(--jui-dropdown-shadow-color);
}
.ajax-progress__throbber--fullscreen,
.ui-dialog .ajax-progress__throbber {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 1.75rem; /* 28px */
  height: 1.75rem; /* 28px */
  margin: -0.875rem;
  content: "";
  border: 3px solid var(--admin-color-link);
  border-right: 3px dotted transparent;
}

.ui-dialog .ajax-progress__message {
  display: none;
}

@keyframes 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(--admin-color-primary);
  border-inline-end: 3px dotted transparent;
}

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

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

  .ajax-progress__throbber,
  .ajax-progress__throbber--fullscreen {
    border: 3px solid var(--admin-color-bg);
    border-inline-end: 3px dotted transparent;
  }
}

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

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

  .dark-mode 

  &::before {
    position: absolute;
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    content: "";
    animation: throbber 0.75s linear infinite;
    border: 2px solid var(--admin-color-primary);
    border-inline-end: 2px dotted transparent;
    border-radius: 50%;
    inset-block-start: var(--admin-space-xs);
    inset-inline-start: var(--admin-space-xs);
  }
}

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

.contextual-links li {
  position: relative;
}

.contextual-links .ajax-progress-throbber {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: var(--admin-space-2xs);
  width: 24px;
  height: 24px;

  &::before {
    inset-block-start: 0;
    inset-inline-start: 0.25em;
  }
}