.rl-strip-animation(@rgba, @stripOpacity) { background-image: linear-gradient(135deg, rgba(@rgba, @rgba, @rgba, @stripOpacity) 25%, transparent 25%, transparent 50%, rgba(@rgba, @rgba, @rgba, @stripOpacity) 50%, rgba(@rgba, @rgba, @rgba, @stripOpacity) 75%, transparent 75%, transparent); } @keyframes highlight-folder-row { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes textLoadingAnimationKeyFrame { 0% { opacity: 1; } 33% { opacity: 0; } 100% { opacity: 1; } } @keyframes animate-stripes { 0% {background-position: 0 0;} 100% {background-position: 60px 0;} } html { .e-strip-animation { background-size: 60px 60px; .rl-strip-animation(0, 0.1); animation: animate-stripes 2s linear infinite; } } @media screen and (min-width: 1000px) { .button-delete-transitions { transition: all 0.2s linear; } .b-folders .e-item .anim-action-class { animation: highlight-folder-row 0.5s linear; } .b-folders .btn.buttonContacts { transition: margin 0.3s linear; } .b-folders .b-content.opacity-on-panel-disabled { transition: opacity 0.3s linear; } .messageList { .messageListItem { transition: max-height 400ms ease; } .listDragOver { transition: all 400ms ease; } } .b-list-content { .e-contact-item { transition: max-height 400ms ease; } } .b-compose.loading .b-header-toolbar { background-size: 60px 60px; .rl-strip-animation(255, 0.2); animation: animate-stripes 2s linear infinite; } } .textLoadingAnimationD1, .textLoadingAnimationD2, .textLoadingAnimationD3 { animation: textLoadingAnimationKeyFrame 1s linear infinite 0s; } .textLoadingAnimationD2 { animation-delay: 0.3s; } .textLoadingAnimationD3 { animation-delay: 0.6s; }