Fixing Case Progress SVG issues on Firefox

This commit is contained in:
Bruno Alves de Faria 2017-11-24 13:11:46 -02:00
parent 14b54a831b
commit 02349447d6
2 changed files with 27 additions and 23 deletions

View File

@ -26,14 +26,14 @@
</circle>
{{/unless}}
</svg>
<div class="progressText">
<div class="progressArea {{#if isLocked}}locked{{else}}{{#if progressComplete}}complete{{/if}}{{/if}}">
{{#if isLocked}}
<svg class="locked">
<svg>
<use xlink:href={{absoluteUrl "packages/ohif_viewerbase/assets/icons.svg#icon-status-lock"}}></use>
</svg>
{{else}}
{{#if progressComplete}}
<svg class="complete">
<svg>
<use xlink:href={{absoluteUrl "packages/ohif_viewerbase/assets/icons.svg#icon-status-complete"}}></use>
</svg>
{{else}}

View File

@ -20,29 +20,33 @@ $circleSize = 46px
vendorize(transform, rotate(270deg))
vendorize(transform-origin, center center)
.progressText
position: absolute
width: $circleSize
height: $circleSize
line-height: $circleSize
.progressArea
theme('color', '$activeColor')
display: table
font-weight: 700
font-size: 17px
text-align: center
theme('color', '$activeColor')
top: 0
height: $circleSize
line-height: $circleSize
left: 50%
position: absolute
top: 50%
transform(translate(-50%, -50%))
width: $circleSize
&.locked
line-height: 0
&, & svg
height: 21px
width: 16px
&.complete
line-height: 0
&, & svg
height: 27px
width: 27px
svg
theme('fill', '$activeColor')
left: 50%
position: absolute
theme('stroke', '$activeColor')
top: 50%
transform(translateX(-50%) translateY(-50%))
&.locked
width: 16px
height: 21px
&.complete
width: 27px
height: 27px