.rl-strip-animation(@rgba, @stripOpacity) { background-image: -webkit-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); background-image: -moz-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); background-image: -ms-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); background-image: -o-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); 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); } } @-moz-keyframes highlight-folder-row { 0% { -moz-transform: scale(1); } 50% { -moz-transform: scale(1.1); } 100% { -moz-transform: scale(1); } } @-webkit-keyframes highlight-folder-row { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @-webkit-keyframes textLoadingAnimationKeyFrame { 0% { opacity: 1; } 33% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes textLoadingAnimationKeyFrame { 0% { opacity: 1; } 33% { opacity: 0; } 100% { opacity: 1; } } @keyframes textLoadingAnimationKeyFrame { 0% { opacity: 1; } 33% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes animate-stripes { 0% {background-position: 0 0;} 100% {background-position: 60px 0;} } @-moz-keyframes animate-stripes { 0% {background-position: 0 0;} 100% {background-position: 60px 0;} } @keyframes animate-stripes { 0% {background-position: 0 0;} 100% {background-position: 60px 0;} } .rl-anim { &.rgba.cssanimations.backgroundsize .e-strip-animation { -webkit-background-size: 60px 60px; -moz-background-size: 60px 60px; background-size: 60px 60px; .rl-strip-animation(0, 0.1); -webkit-animation: animate-stripes 2s linear infinite; -moz-animation: animate-stripes 2s linear infinite; animation: animate-stripes 2s linear infinite; } &.csstransitions .b-settings-folders { .folder-item { .button-delete { .transition(all 0.2s linear); } } } &.csstransitions .b-settings-accounts { .account-item { .button-delete { .transition(all 0.2s linear); } } } &.csstransitions .b-settings-identities { .identity-item { .button-delete { .transition(all 0.2s linear); } } } &.csstransitions .b-admin-domains { .e-item { .button-delete { .transition(all 0.2s linear); } } } &.csstransitions .b-compose { .button-delete { .transition(margin-left 0.2s linear); } } &.cssanimations .b-folders .e-item .anim-action-class { -webkit-animation: highlight-folder-row 0.5s linear; -moz-animation: highlight-folder-row 0.5s linear; animation: highlight-folder-row 0.5s linear; } &.csstransitions .messageList { .messageListItem { .transition(max-height 400ms ease); } .listDragOver { .transition(all 400ms ease); } } &.csstransitions .b-list-content { .e-contact-item { .transition(max-height 400ms ease); } } &.csstransitions .modal.b-domain-content { .modal-body { .transition(left 500ms ease); } } &.csstransitions .modal-open .popups .modal { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; .transition(~"0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940)"); .scale(0.9); } .modal-open .popups .popup-active.modal { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } &.cssanimations .b-compose.loading .b-header-toolbar { -webkit-background-size: 60px 60px; -moz-background-size: 60px 60px; background-size: 60px 60px; .rl-strip-animation(255, 0.2); -webkit-animation: animate-stripes 2s linear infinite; -moz-animation: animate-stripes 2s linear infinite; animation: animate-stripes 2s linear infinite; } } .textLoadingAnimationD1, .textLoadingAnimationD2, .textLoadingAnimationD3 { -webkit-animation: textLoadingAnimationKeyFrame 1s linear infinite 0s; -moz-animation: textLoadingAnimationKeyFrame 1s linear infinite 0s; animation: textLoadingAnimationKeyFrame 1s linear infinite 0s; } .textLoadingAnimationD2 { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s; } .textLoadingAnimationD3 { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s; }