drupal/core/themes/claro/css/components/ajax-progress.module.css

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

/**
 * @file
 * Throbber.
 */

:root {
  /*
   * Color Palette.
   */
  /* Secondary. */
  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
  /*
   * Base.
   */
  /*
   * Typography.
   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
  /**
   * Spaces.
   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
  /*
   * Common.
   */
  /*
   * Inputs.
   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
  /*
   * Details.
   */
  /**
   * Buttons.
   */
  /**
   * jQuery.UI dropdown.
   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
  /**
   * jQuery.UI dialog.
   */
  /**
   * Progress bar.
   */
  /**
   * Tabledrag icon size.
   */ /* 17px */
  /**
   * Ajax progress.
   */
  /**
   * Breadcrumb.
   */
}

.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 0.75rem 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 .button:not(.js-hide) + .ajax-progress--throbber {
  margin-left: 0; /* LTR */
}

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

/**
 * 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-left: 0.75rem; /* LTR */
}

[dir="rtl"].js .form-type--managed-file .button:not(.js-hide) + .ajax-progress--throbber,
[dir="rtl"].js .file-operations-cell .button:not(.js-hide) + .ajax-progress--throbber {
  margin-right: 0.75rem;
  margin-left: 0.75rem;
}

.ajax-progress__throbber {
  box-sizing: border-box;
  width: 1.125rem;
  height: 1.125rem;
  animation: claro-throbber 0.75s linear infinite;
  border: 2px solid #003cc5;
  border-right: 2px dotted transparent;
  border-radius: 50%;
}

.ajax-progress__message {
  display: inline-block;
  padding-left: 0.75rem;
  font-size: 0.889rem;
}

[dir="rtl"] .ajax-progress__message {
  padding-right: 0.75rem;
  padding-left: 0;
}

/**
 * Full screen throbber.
 */

.ajax-progress--fullscreen,
.ui-dialog .ajax-progress--throbber {
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 3.5rem; /* 56px */
  height: 3.5rem;
  margin: -1.75rem;
  border: 1px solid rgba(216, 217, 224, 0.8);
  border-radius: 3.5rem;
  background: #fff;
  box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1);
}

.ajax-progress__throbber--fullscreen,
.ui-dialog .ajax-progress__throbber {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.75rem; /* 28px */
  height: 1.75rem; /* 28px */
  margin: -0.875rem;
  content: "";
  border: 3px solid #003cc5;
  border-right: 3px dotted transparent;
}

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

@media screen and (-ms-high-contrast: active) {
  /**
   * Throbber animation is shaky on Edge RTL on high contrast for border width
   * less than 4px.
   */
  @supports (-ms-ime-align:auto) {
    [dir="rtl"] .ajax-progress__throbber {
      border-width: 4px;
    }
  }
}

@keyframes claro-throbber {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}