drupal/core/themes/olivero/css/components/ajax-progress.module.css

151 lines
2.6 KiB
CSS

/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Visual styles for ajax-progress throbber.
*/
.ajax-progress {
display: inline-block;
}
/**
* Throbber.
*/
[dir="ltr"] .ajax-progress-throbber {
margin-left: 9px;
}
[dir="rtl"] .ajax-progress-throbber {
margin-right: 9px;
}
[dir="ltr"] .ajax-progress-throbber {
margin-right: 9px;
}
[dir="rtl"] .ajax-progress-throbber {
margin-left: 9px;
}
.ajax-progress-throbber {
position: relative;
display: inline-flex;
align-content: center;
height: 1.125rem;
margin-top: -3px;
margin-bottom: 0;
vertical-align: middle;
white-space: nowrap;
line-height: 1.125rem;
}
.ajax-progress-throbber .throbber {
width: 1.125rem;
height: 1.125rem;
border-width: 2px;
border-color: #2494db transparent #2494db #2494db;
}
[dir="ltr"] .ajax-progress-throbber .message {
padding-left: 9px;
}
[dir="rtl"] .ajax-progress-throbber .message {
padding-right: 9px;
}
.ajax-progress-throbber .message {
display: inline-block;
font-size: 14px;
font-weight: 400;
}
/**
* Full screen throbber.
*/
[dir="ltr"] .ajax-progress-fullscreen {
left: 50%;
}
[dir="rtl"] .ajax-progress-fullscreen {
right: 50%;
}
.ajax-progress-fullscreen {
position: fixed;
z-index: 1000;
top: 50%;
width: 3.5rem;
height: 3.5rem;
margin: -1.75rem;
border: 1px solid #afb8be;
border-radius: 3.5rem;
background-color: #fff;
box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1) /* LTR */
}
[dir="ltr"] .ajax-progress-fullscreen:before {
left: 50%;
}
[dir="rtl"] .ajax-progress-fullscreen:before {
right: 50%;
}
.ajax-progress-fullscreen:before {
position: absolute;
top: 50%;
width: 1.75rem;
height: 1.75rem;
margin: -0.875rem;
content: "";
border-width: 3px;
}
[dir="rtl"] .ajax-progress-fullscreen {
box-shadow: 0 -0.25rem 0.625rem rgba(34, 35, 48, 0.1);
}
/**
* Common styles for all kinds of throbbers.
*/
.ajax-progress-throbber .throbber,
.ajax-progress-fullscreen:before {
animation: olivero-throbber 0.75s linear infinite;
border-style: solid dotted solid solid;
border-color: #2494db transparent #2494db #2494db;
border-radius: 50%;
}
/**
* Remove margin from ajax throbbers following buttons because buttons already
* have a large margin set.
*/
html[dir="ltr"].js .button:not(.js-hide) + .ajax-progress-throbber {
margin-left: 0;
}
html[dir="rtl"].js .button:not(.js-hide) + .ajax-progress-throbber {
margin-right: 0;
}
@keyframes olivero-throbber {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
}