/* * 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); } }