ajax-progress.module.css in Drupal 10

Visual styles for ajax-progress throbber.

File

core/themes/olivero/css/components/ajax-progress.module.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Visual styles for ajax-progress throbber.
 */

/*
 * Media query breakpoints.
 * Processed by postcss/postcss-custom-media.
 */

/* Navigation related breakpoints */

/* Grid related breakpoints */

/* Grid shifts from 6 to 14 columns. */

/* Width of the entire grid maxes out. */

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

/**
 * Throbber.
 */

[dir="ltr"] .ajax-progress-throbber {
  margin-left: var(--sp0-5);
}

[dir="rtl"] .ajax-progress-throbber {
  margin-right: var(--sp0-5);
}

[dir="ltr"] .ajax-progress-throbber {
  margin-right: var(--sp0-5);
}

[dir="rtl"] .ajax-progress-throbber {
  margin-left: var(--sp0-5);
}

.ajax-progress-throbber {
  position: relative;
  display: inline-flex;
  align-content: center;
  height: 1.125rem;
  margin-top: -0.1875rem;
  margin-bottom: 0;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.125rem;
}

.ajax-progress-throbber .throbber {
  width: 1.125rem;
  height: 1.125rem;
  border-width: 2px;
  border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-50);
}

[dir="ltr"] .ajax-progress-throbber .message {
  padding-left: var(--sp0-5);
}

[dir="rtl"] .ajax-progress-throbber .message {
  padding-right: var(--sp0-5);
}

.ajax-progress-throbber .message {
  display: inline-block;
  font-size: var(--font-size-s);
  font-weight: 400;
}

/**
 * Full screen throbber.
 */

[dir="ltr"] .ajax-progress-fullscreen {
  left: 50%;
}

[dir="rtl"] .ajax-progress-fullscreen {
  right: 50%;
}

.ajax-progress-fullscreen {
  position: fixed;
  z-index: 1000;
  top: 50%;
  width: 3.5rem;
  height: 3.5rem;
  margin: -1.75rem;
  border: 1px solid var(--color--gray-70);
  border-radius: 3.5rem;
  background-color: var(--color--white);
  box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1) /* LTR */
}

[dir="ltr"] .ajax-progress-fullscreen:before {
    left: 50%;
}

[dir="rtl"] .ajax-progress-fullscreen:before {
    right: 50%;
}

.ajax-progress-fullscreen:before {
    position: absolute;
    top: 50%;
    width: 1.75rem;
    height: 1.75rem;
    margin: -0.875rem;
    content: "";
    border-width: 3px;
  }

[dir="rtl"] .ajax-progress-fullscreen {
  box-shadow: 0 -0.25rem 0.625rem rgba(34, 35, 48, 0.1);
}

/**
 * Common styles for all kinds of throbbers.
 */

.ajax-progress-throbber .throbber,
.ajax-progress-fullscreen:before {
  animation: olivero-throbber 0.75s linear infinite;
  border-style: solid dotted solid solid;
  border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-50);
  border-radius: 50%;
}

/**
 * Remove margin from ajax throbbers following buttons because buttons already
 * have a large margin set.
 */

html[dir="ltr"].js .button:not(.js-hide) + .ajax-progress-throbber {
  margin-left: 0;
}

html[dir="rtl"].js .button:not(.js-hide) + .ajax-progress-throbber {
  margin-right: 0;
}

@keyframes olivero-throbber {
  0% {
    transform: rotateZ(0);
  }

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