throbber.pcss.css

Styling of AJAX actions throbber in off-canvas dialog.

@internal

File

core/misc/dialog/off-canvas/css/throbber.pcss.css

View source 
  1. /**

  2.  * @file

  3.  * Styling of AJAX actions throbber in off-canvas dialog.

  4.  *

  5.  * @internal

  6.  */

  7. 

  8. #drupal-off-canvas-wrapper {

  9.   & .ajax-progress, /* This is the CSS class used in Claro. */

  10.   & .ajax-progress-throbber {

  11.     display: inline-block;

  12.     overflow: hidden;

  13.     width: 15px;

  14.     height: 15px;

  15.     margin: 0 10px;

  16.     animation: off-canvas-throbber-spin 1s linear infinite;

  17.     vertical-align: middle;

  18.     border: 2px solid var(--off-canvas-text-color);

  19.     border-top-color: transparent;

  20.     border-radius: 50%;

  21. 

  22.     @media (forced-colors: active) {

  23.       border-top-color: transparent;

  24.     }

  25.   }

  26. 

  27.   & .layout-selection,

  28.   & .inline-block-list {

  29.     & .ajax-progress,

  30.     & .ajax-progress-throbber {

  31.       position: absolute;

  32.       inset-block-start: 0;

  33.       inset-block-end: 0;

  34.       inset-inline-end: 0;

  35.       margin-block: auto;

  36.     }

  37.   }

  38. }

  39. 

  40. @keyframes off-canvas-throbber-spin {

  41.   to {

  42.     transform: rotate(360deg);

  43.   }

  44. }