Browse Source

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

pull/12531/head
John Cowen 3 years ago committed by GitHub
parent
commit
bac6c00906
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 3
      .changelog/12479.txt
  2. 2
      ui/packages/consul-ui/app/styles/base/icons/base-variables.scss

3
.changelog/12479.txt

@ -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

@ -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 {

Loading…
Cancel
Save