1/* 2 * DO NOT EDIT THIS FILE. 3 * See the following change record for more information, 4 * https://www.drupal.org/node/3084859 5 * @preserve 6 */ 7 8/** 9 * @file 10 * Visual styles for ajax-progress throbber. 11 */ 12 13.ajax-progress { 14 display: inline-block; 15} 16 17/** 18 * Throbber. 19 */ 20 21[dir="ltr"] .ajax-progress-throbber { 22 margin-left: 0.5625rem; 23} 24 25[dir="rtl"] .ajax-progress-throbber { 26 margin-right: 0.5625rem; 27} 28 29[dir="ltr"] .ajax-progress-throbber { 30 margin-right: 0.5625rem; 31} 32 33[dir="rtl"] .ajax-progress-throbber { 34 margin-left: 0.5625rem; 35} 36 37.ajax-progress-throbber { 38 position: relative; 39 display: inline-flex; 40 align-content: center; 41 height: 1.125rem; 42 margin-top: -0.1875rem; 43 margin-bottom: 0; 44 vertical-align: middle; 45 white-space: nowrap; 46 line-height: 1.125rem; 47} 48 49.ajax-progress-throbber .throbber { 50 width: 1.125rem; 51 height: 1.125rem; 52 border-width: 2px; 53 border-color: #2494db transparent #2494db #2494db; 54} 55 56[dir="ltr"] .ajax-progress-throbber .message { 57 padding-left: 0.5625rem; 58} 59 60[dir="rtl"] .ajax-progress-throbber .message { 61 padding-right: 0.5625rem; 62} 63 64.ajax-progress-throbber .message { 65 display: inline-block; 66 font-size: 0.875rem; 67 font-weight: 400; 68} 69 70/** 71 * Full screen throbber. 72 */ 73 74[dir="ltr"] .ajax-progress-fullscreen { 75 left: 50%; 76} 77 78[dir="rtl"] .ajax-progress-fullscreen { 79 right: 50%; 80} 81 82.ajax-progress-fullscreen { 83 position: fixed; 84 z-index: 1000; 85 top: 50%; 86 width: 3.5rem; 87 height: 3.5rem; 88 margin: -1.75rem; 89 border: 1px solid #afb8be; 90 border-radius: 3.5rem; 91 background-color: #fff; 92 box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1) /* LTR */ 93} 94 95[dir="ltr"] .ajax-progress-fullscreen:before { 96 left: 50%; 97} 98 99[dir="rtl"] .ajax-progress-fullscreen:before { 100 right: 50%; 101} 102 103.ajax-progress-fullscreen:before { 104 position: absolute; 105 top: 50%; 106 width: 1.75rem; 107 height: 1.75rem; 108 margin: -0.875rem; 109 content: ""; 110 border-width: 3px; 111 } 112 113[dir="rtl"] .ajax-progress-fullscreen { 114 box-shadow: 0 -0.25rem 0.625rem rgba(34, 35, 48, 0.1); 115} 116 117/** 118 * Common styles for all kinds of throbbers. 119 */ 120 121.ajax-progress-throbber .throbber, 122.ajax-progress-fullscreen:before { 123 animation: olivero-throbber 0.75s linear infinite; 124 border-style: solid dotted solid solid; 125 border-color: #2494db transparent #2494db #2494db; 126 border-radius: 50%; 127} 128 129/** 130 * Remove margin from ajax throbbers following buttons because buttons already 131 * have a large margin set. 132 */ 133 134html[dir="ltr"].js .button:not(.js-hide) + .ajax-progress-throbber { 135 margin-left: 0; 136} 137 138html[dir="rtl"].js .button:not(.js-hide) + .ajax-progress-throbber { 139 margin-right: 0; 140} 141 142@keyframes olivero-throbber { 143 0% { 144 transform: rotateZ(0); 145 } 146 147 100% { 148 transform: rotateZ(360deg); 149 } 150} 151