Elastic: Use Bootstrap's spinner (and spinner-border instead of custom fa-spin)

pull/6286/merge
Aleksander Machniak 6 years ago
parent 8337db6b53
commit 5d0a9a51e2

@ -66,30 +66,6 @@
url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-700italic.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-700italic.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
} }
/* E.g. for animated 'loading' icon */
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
/* Reset some Bootstrap style */ /* Reset some Bootstrap style */
body, button, input, optgroup, select, textarea, .popover { body, button, input, optgroup, select, textarea, .popover {

@ -32,9 +32,9 @@
} }
.animated-icon-class { .animated-icon-class {
// fa-spin is defined in styles.less // spinner-border is defined in Bootstrap
-webkit-animation: fa-spin 2s infinite linear; -webkit-animation: spinner-border 1.5s infinite linear;
animation: fa-spin 2s infinite linear; animation: spinner-border 1.5s infinite linear;
} }
.font-icon-solid(@icon) { .font-icon-solid(@icon) {

@ -224,19 +224,12 @@ fieldset.image-attachment {
justify-content: center; justify-content: center;
z-index: 3; z-index: 3;
.spinner { .spinner-border {
position: relative;
display: inline-block;
width: 7rem; width: 7rem;
height: 7rem; height: 7rem;
overflow: hidden;
text-indent: -999em;
color: @color-spinner-circle; color: @color-spinner-circle;
border: 1rem solid; border: 1rem solid;
border-color: currentColor @color-spinner-item currentColor currentColor; border-color: currentColor @color-spinner-item currentColor currentColor;
border-radius: 50%;
-webkit-animation: fa-spin 1s infinite linear;
animation: fa-spin 1s infinite linear;
} }
} }

@ -3278,8 +3278,9 @@ function rcube_elastic_ui()
frame = $(frame); frame = $(frame);
if (frame.length) { if (frame.length) {
var loader = $('<div>').attr('class', 'iframe-loader') var loader = $('<div class="iframe-loader">')
.append($('<div>').attr('class', 'spinner').text(rcmail.gettext('loading'))); .append($('<div class="spinner spinner-border" role="status">')
.append($('<span class="sr-only">').text(rcmail.gettext('loading'))));
// custom 'loaded' event is expected to be triggered by plugins // custom 'loaded' event is expected to be triggered by plugins
// when using the loader not on an iframe // when using the loader not on an iframe

Loading…
Cancel
Save