Commit 9b0916b5 authored by Emily Jensen's avatar Emily Jensen

Check mark centered over qr scanner

parent 7d12cc3d
...@@ -4,13 +4,6 @@ ...@@ -4,13 +4,6 @@
<div class="account-column__inner account-column__inner--right"> <div class="account-column__inner account-column__inner--right">
<div class="account-column__right-heading"> <div class="account-column__right-heading">
<div class="check-circle-container">
<div class="verified-circle">
<div class="checkmark-icon" [inlineSVG]="'../../assets/svg/check.svg'"> </div>
</div>
</div>
<h1 class="heading-medium">Reset&nbsp;Password</h1> <h1 class="heading-medium">Reset&nbsp;Password</h1>
<div class="account-column__link"> <div class="account-column__link">
<a class="text-link text-link--caret text-link--large" id="btn-signin" [routerLink]="['/login']"> <a class="text-link text-link--caret text-link--large" id="btn-signin" [routerLink]="['/login']">
...@@ -45,8 +38,17 @@ ...@@ -45,8 +38,17 @@
<span class="text-next-to-button u-margin-l-20">or</span> <span class="text-next-to-button u-margin-l-20">or</span>
</div> </div>
<div [class.u-invisible]="!showScanner"> <div [class.u-invisible]="!showScanner" class="canvas-check-wrapper">
<canvas #canvas id="canvas"></canvas> <div class="canvas-check-wrapper">
<canvas #canvas id="canvas" class="canvas"></canvas>
<div class="check-wrapper">
<div class="verified-circle">
<div class="checkmark-icon" [inlineSVG]="'../../assets/svg/check.svg'">
</div>
</div>
</div>
</div>
</div> </div>
<form [ngrxFormState]="form" (submit)="onSubmit()"> <form [ngrxFormState]="form" (submit)="onSubmit()">
......
...@@ -8,50 +8,41 @@ ...@@ -8,50 +8,41 @@
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
.canvas-check-wrapper {
position: relative;
width: 100%;
}
.canvas {
position: relative;
width: 100%;
height: 100%;
z-index: -1;
}
.check-wrapper {
position: absolute;
top: 80px;
width: 75px;
height: 75px;
margin: 0 auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.checkmark-icon { .checkmark-icon {
display: block;
position: absolute; position: absolute;
fill: $color-white; fill: $color-white;
width: 51.45px; width: 88%;
height: 39.25px; margin: 0 auto;
top: 50%;
left: 50%;
transform: translate(-44%, -45%);
} }
.verified-circle { .verified-circle {
width: 75px; position: relative;
height: 75px; width: 100%;
height: 100%;
border-radius: 50%; border-radius: 50%;
background: $color-de-york; background: $color-de-york;
} }
.check-circle-container {
background: lightcoral;
width:100px;
height: 100px;
}
// #outer-circle {
// background: #385a94;
// border-radius: 50%;
// height: 500px;
// width: 500px;
// position: relative;
// /*
// Child elements with absolute positioning will be
// positioned relative to this div
// */
// }
// #inner-circle {
// position: absolute;
// background: #a9aaab;
// border-radius: 50%;
// height: 300px;
// width: 300px;
// /*
// Put top edge and left edge in the center
// */
// top: 50%;
// left: 50%;
// margin: -150px 0px 0px -150px;
// /*
// Offset the position correctly with
// minus half of the width and minus half of the height
// */
// }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment