diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 1d33e861b08..9bc015b65fc 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -158,12 +158,13 @@ a, img { white-space: nowrap; > div { - border-left: 1px solid rgba(0, 0, 0, 0.1); + &:not(.spinner) { + border-left: 1px solid rgba(0, 0, 0, 0.1); + } float: right; padding: 0 10px; } .spinner { // spinner is tiny & usually invisible; reduce margin so gap is less glaring - border: none; margin: 6px 10px; padding: 0; } @@ -173,15 +174,6 @@ a, img { } } -@-webkit-keyframes spinner-sprites-12 { - 0% { background-position: 0px 0px; } - 100% { background-position: -120px 0px; } -} -@-webkit-keyframes spinner-sprites-36 { - 0% { background-position: 0px 0px; } - 100% { background-position: -360px 0px; } -} - #status-indent > * { display: inline-block; } @@ -1369,42 +1361,66 @@ textarea.exclusions-editor { .spinner { display: inline-block; - vertical-align: middle; - margin-top: -2px; - width: 12px; - height: 12px; - background: url("images/spinner_small_sprites12.png") no-repeat; + box-sizing: border-box; + width: 14px; + height: 14px; + border-left: 3px solid #78B2F2; + border-right: 3px solid #78B2F2; + overflow: hidden; + position: relative; visibility: hidden; + &:before, + &:after { + border-left: 3px solid #78B2F2; + border-right: 3px solid #78B2F2; + box-sizing: border-box; + content: ""; + display: block; + position: absolute; + width: 100%; + height: 3px; + left: 0; + } + &:before { + top: 0; + } + &:after { + bottom: 0; + } + &.spin { - -webkit-animation: spinner-sprites-12 1.2s steps(10) infinite; + -webkit-animation: spinner-rotateplane 1.2s infinite ease-in-out; + animation: spinner-rotateplane 1.2s infinite ease-in-out; visibility: visible; } &.large { width: 36px; height: 36px; - margin-top: 0; - background: url("images/spinner_large_sprites36.png") no-repeat; - - &.spin { - -webkit-animation: spinner-sprites-36 1.2s steps(10) infinite; + border-left: 9px solid #78B2F2; + border-right: 9px solid #78B2F2; + + &:before, + &:after { + border-left: 7px solid #78B2F2; + border-right: 7px solid #78B2F2; + height: 9px; } } } -// Retina versions -@media only screen and (-webkit-min-device-pixel-ratio: 2), - only screen and (min-device-pixel-ratio: 2) { - .spinner { - background-image: url("images/spinner_small_sprites12@2x.png"); - background-size: 120px 12px; - &.large { - background: url("images/spinner_large_sprites36@2x.png") no-repeat; - background-size: 360px 36px; - } - } +@-webkit-keyframes spinner-rotateplane { + 0% { -webkit-transform: perspective(120px) } + 50% { -webkit-transform: perspective(120px) rotateY(180deg) } + 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } +@keyframes spinner-rotateplane { + 0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); } + 50% { -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } + 100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } +} + /* Problems panel & CodeInspection status bar indicator */ diff --git a/src/styles/images/spinner_large_sprites36.png b/src/styles/images/spinner_large_sprites36.png deleted file mode 100644 index b1ca8973cf9..00000000000 Binary files a/src/styles/images/spinner_large_sprites36.png and /dev/null differ diff --git a/src/styles/images/spinner_large_sprites36@2x.png b/src/styles/images/spinner_large_sprites36@2x.png deleted file mode 100644 index 0dc8dc6e48f..00000000000 Binary files a/src/styles/images/spinner_large_sprites36@2x.png and /dev/null differ diff --git a/src/styles/images/spinner_small_sprites12.png b/src/styles/images/spinner_small_sprites12.png deleted file mode 100644 index 3c8a1304d34..00000000000 Binary files a/src/styles/images/spinner_small_sprites12.png and /dev/null differ diff --git a/src/styles/images/spinner_small_sprites12@2x.png b/src/styles/images/spinner_small_sprites12@2x.png deleted file mode 100644 index 6daea73f98d..00000000000 Binary files a/src/styles/images/spinner_small_sprites12@2x.png and /dev/null differ