ajax-progress.module.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/2815083
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Throbber.
  10. */
  11. .ajax-progress {
  12. display: inline-block;
  13. }
  14. /**
  15. * Progress bar.
  16. */
  17. .ajax-progress-bar {
  18. width: 13em;
  19. padding: 0 0.3125rem; /* 0 5px */
  20. }
  21. /**
  22. * Throbber.
  23. */
  24. .ajax-progress--throbber {
  25. position: relative;
  26. display: inline-flex;
  27. align-content: center;
  28. height: 1.125rem;
  29. margin: -3px 0.75rem 0;
  30. vertical-align: middle;
  31. white-space: nowrap;
  32. line-height: 1.125rem;
  33. }
  34. /**
  35. * Remove margin from ajax throbbers following buttons because buttons already
  36. * have a large margin set.
  37. */
  38. .js .button:not(.js-hide) + .ajax-progress--throbber {
  39. margin-left: 0; /* LTR */
  40. }
  41. [dir="rtl"].js .button:not(.js-hide) + .ajax-progress--throbber {
  42. margin-right: 0;
  43. margin-left: 0.75rem;
  44. }
  45. /**
  46. * Restore start margin for ajax throbbers inside a managed file widget.
  47. */
  48. .js .form-type--managed-file .button:not(.js-hide) + .ajax-progress--throbber,
  49. .js .file-operations-cell .button:not(.js-hide) + .ajax-progress--throbber {
  50. margin-left: 0.75rem; /* LTR */
  51. }
  52. [dir="rtl"].js .form-type--managed-file .button:not(.js-hide) + .ajax-progress--throbber,
  53. [dir="rtl"].js .file-operations-cell .button:not(.js-hide) + .ajax-progress--throbber {
  54. margin-right: 0.75rem;
  55. margin-left: 0.75rem;
  56. }
  57. .ajax-progress__throbber {
  58. box-sizing: border-box;
  59. width: 1.125rem;
  60. height: 1.125rem;
  61. animation: claro-throbber 0.75s linear infinite;
  62. border: 2px solid #003cc5;
  63. border-right: 2px dotted transparent;
  64. border-radius: 50%;
  65. }
  66. .ajax-progress__message {
  67. display: inline-block;
  68. padding-left: 0.75rem;
  69. font-size: 0.889rem;
  70. }
  71. [dir="rtl"] .ajax-progress__message {
  72. padding-right: 0.75rem;
  73. padding-left: 0;
  74. }
  75. /**
  76. * Full screen throbber.
  77. */
  78. .ajax-progress--fullscreen {
  79. position: fixed;
  80. z-index: 1000;
  81. top: 50%;
  82. left: 50%;
  83. box-sizing: border-box;
  84. width: 3.5rem; /* 56px */
  85. height: 3.5rem;
  86. margin: -1.75rem;
  87. border: 1px solid rgba(216, 217, 224, 0.8);
  88. border-radius: 3.5rem;
  89. background: #fff;
  90. box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1);
  91. }
  92. .ajax-progress__throbber--fullscreen {
  93. position: absolute;
  94. top: 50%;
  95. left: 50%;
  96. width: 1.75rem; /* 28px */
  97. height: 1.75rem; /* 28px */
  98. margin: -0.875rem;
  99. content: "";
  100. border: 3px solid #003cc5;
  101. border-right: 3px dotted transparent;
  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. }