luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

ui: Fix loading icon size (adds a viewbox) (#12479)

This commit is contained in:
John Cowen 2022-03-07 10:13:56 +00:00 committed by GitHub
parent a563c121fc
commit b525389286
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.changelog/12479.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:bug
ui: Fixes a visual bug where our loading icon can look cut off
```

2
ui/packages/consul-ui/app/styles/base/icons/base-variables.scss
View File

@ -2303,7 +2303,7 @@
}
%loading-svg-prop {
--loading-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="structure-icon-loading"><style>.structure-icon-loading-base{opacity:.1}.structure-icon-loading-progress{animation:structure-icon-loading-fancy-spin 3s infinite linear;opacity:.25;stroke-dasharray:0 44;stroke-dashoffset:0;stroke-linecap:round;transform-origin:50% 50%}@keyframes structure-icon-loading-fancy-spin{0%{stroke-dasharray:0 44;stroke-dashoffset:0}25%{stroke-dasharray:33 11;stroke-dashoffset:-40}50%{stroke-dasharray:0 44;stroke-dashoffset:-110}75%{stroke-dasharray:33 11;stroke-dashoffset:-150}to{stroke-dasharray:0 44;stroke-dashoffset:-220}}@keyframes structure-icon-loading-simple-spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}</style><defs><path stroke="%23000" stroke-width="3" fill="none" id="a" d="M12 5l6 3v8l-6 3-6-3V8z"/></defs><use xlink:href="%23a" class="structure-icon-loading-base"/><use xlink:href="%23a" class="structure-icon-loading-progress"/></svg>');
--loading-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink" class="structure-icon-loading"><style>.structure-icon-loading-base{opacity:.1}.structure-icon-loading-progress{animation:structure-icon-loading-fancy-spin 3s infinite linear;opacity:.25;stroke-dasharray:0 44;stroke-dashoffset:0;stroke-linecap:round;transform-origin:50% 50%}@keyframes structure-icon-loading-fancy-spin{0%{stroke-dasharray:0 44;stroke-dashoffset:0}25%{stroke-dasharray:33 11;stroke-dashoffset:-40}50%{stroke-dasharray:0 44;stroke-dashoffset:-110}75%{stroke-dasharray:33 11;stroke-dashoffset:-150}to{stroke-dasharray:0 44;stroke-dashoffset:-220}}@keyframes structure-icon-loading-simple-spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}</style><defs><path stroke="%23000" stroke-width="3" fill="none" id="a" d="M12 5l6 3v8l-6 3-6-3V8z"/></defs><use xlink:href="%23a" class="structure-icon-loading-base"/><use xlink:href="%23a" class="structure-icon-loading-progress"/></svg>');
}
%lock-16-svg-prop {