ajax-progress.module.pcss.css

Same filename in this branch
  1. 9 core/themes/olivero/css/components/ajax-progress.module.pcss.css
Same filename in other branches
  1. 8.9.x core/themes/claro/css/components/ajax-progress.module.pcss.css
  2. 10 core/themes/olivero/css/components/ajax-progress.module.pcss.css
  3. 10 core/themes/claro/css/components/ajax-progress.module.pcss.css
  4. 11.x core/themes/olivero/css/components/ajax-progress.module.pcss.css
  5. 11.x core/themes/claro/css/components/ajax-progress.module.pcss.css

Throbber.

File

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

View source
  1. /**
  2. * @file
  3. * Throbber.
  4. */
  5. @import "../base/variables.pcss.css";
  6. .ajax-progress {
  7. display: inline-block;
  8. }
  9. /**
  10. * Progress bar.
  11. */
  12. .ajax-progress-bar {
  13. width: 13em;
  14. padding: 0 0.3125rem; /* 0 5px */
  15. }
  16. /**
  17. * Throbber.
  18. */
  19. .ajax-progress--throbber {
  20. position: relative;
  21. display: inline-flex;
  22. align-content: center;
  23. height: 1.125rem;
  24. margin: -3px var(--ajax-progress-margin-horizontal) 0;
  25. vertical-align: middle;
  26. white-space: nowrap;
  27. line-height: 1.125rem;
  28. }
  29. /**
  30. * Remove margin from ajax throbbers following buttons because buttons already
  31. * have a large margin set.
  32. */
  33. .js .button:not(.js-hide) + .ajax-progress--throbber {
  34. margin-left: 0; /* LTR */
  35. }
  36. [dir="rtl"].js .button:not(.js-hide) + .ajax-progress--throbber {
  37. margin-right: 0;
  38. margin-left: var(--ajax-progress-margin-horizontal);
  39. }
  40. /**
  41. * Restore start margin for ajax throbbers inside a managed file widget.
  42. */
  43. .js .form-type--managed-file .button:not(.js-hide) + .ajax-progress--throbber,
  44. .js .file-operations-cell .button:not(.js-hide) + .ajax-progress--throbber {
  45. margin-left: var(--ajax-progress-margin-horizontal); /* LTR */
  46. }
  47. [dir="rtl"].js .form-type--managed-file .button:not(.js-hide) + .ajax-progress--throbber,
  48. [dir="rtl"].js .file-operations-cell .button:not(.js-hide) + .ajax-progress--throbber {
  49. margin-right: var(--ajax-progress-margin-horizontal);
  50. margin-left: var(--ajax-progress-margin-horizontal);
  51. }
  52. .ajax-progress__throbber {
  53. box-sizing: border-box;
  54. width: 1.125rem;
  55. height: 1.125rem;
  56. animation: claro-throbber 0.75s linear infinite;
  57. border: 2px solid var(--color-absolutezero);
  58. border-right: 2px dotted transparent;
  59. border-radius: 50%;
  60. }
  61. .ajax-progress__message {
  62. display: inline-block;
  63. padding-left: var(--ajax-progress-margin-horizontal);
  64. font-size: var(--font-size-label);
  65. }
  66. [dir="rtl"] .ajax-progress__message {
  67. padding-right: var(--ajax-progress-margin-horizontal);
  68. padding-left: 0;
  69. }
  70. /**
  71. * Full screen throbber.
  72. */
  73. .ajax-progress--fullscreen,
  74. .ui-dialog .ajax-progress--throbber {
  75. position: fixed;
  76. z-index: 1000;
  77. top: 50%;
  78. left: 50%;
  79. box-sizing: border-box;
  80. width: 3.5rem; /* 56px */
  81. height: 3.5rem;
  82. margin: -1.75rem;
  83. border: var(--input-border-size) solid var(--jui-dropdown-border-color);
  84. border-radius: 3.5rem;
  85. background: var(--color-white);
  86. box-shadow: 0 0.25rem 0.625rem var(--jui-dropdown-shadow-color);
  87. }
  88. .ajax-progress__throbber--fullscreen,
  89. .ui-dialog .ajax-progress__throbber {
  90. position: absolute;
  91. top: 50%;
  92. left: 50%;
  93. width: 1.75rem; /* 28px */
  94. height: 1.75rem; /* 28px */
  95. margin: -0.875rem;
  96. content: "";
  97. border: 3px solid var(--color-absolutezero);
  98. border-right: 3px dotted transparent;
  99. }
  100. .ui-dialog .ajax-progress__message {
  101. display: none;
  102. }
  103. @media screen and (-ms-high-contrast: active) {
  104. /**
  105. * Throbber animation is shaky on Edge RTL on high contrast for border width
  106. * less than 4px.
  107. */
  108. @supports (-ms-ime-align:auto) {
  109. [dir="rtl"] .ajax-progress__throbber {
  110. border-width: 4px;
  111. }
  112. }
  113. }
  114. @keyframes claro-throbber {
  115. 0% {
  116. transform: rotateZ(0);
  117. }
  118. 100% {
  119. transform: rotateZ(360deg);
  120. }
  121. }

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