Merge pull request #512 from topcoder-platform/TCA-1030_safari-fix-for-cert-view

TCA-1030 - fix ios safari issue with certif view -> dev

Author: vas3a

src-ts/lib/styles/variables/_constants.scss

@@ -0,0 +1 @@
+$tca-certif-aspect-ratio: 1.25715;

src-ts/lib/styles/variables/index.scss

@@ -1,3 +1,4 @@
+@import './constants';
 @import './breakpoints';
 @import './fonts';
 @import './layouts';

src-ts/tools/learn/course-certificate/certificate-view/CertificateView.module.scss

@@ -44,7 +44,7 @@
 }
 
 .certificate-wrap {
-    aspect-ratio: 1.25715;
+    aspect-ratio: $tca-certif-aspect-ratio;
     width: 100%;
     max-width: 880px;
     position: relative;
@@ -65,7 +65,7 @@
     top: 0;
     left: 0;
     width: 880px;
-    aspect-ratio: inherit;
+    aspect-ratio: $tca-certif-aspect-ratio;
 
     background: #fff;
     box-shadow: 0 20px 36px rgba($tc-black, 0.22);

src-ts/tools/learn/learn-lib/tca-certificate-preview/TCACertificatePreview.module.scss

@@ -1,6 +1,8 @@
+@import '../../../../lib/styles/includes';
+
 .wrap {
     flex: 1 1 auto;
-    aspect-ratio: 1.25715;
+    aspect-ratio: $tca-certif-aspect-ratio;
     position: relative;
 
     body:global(.canvas-clone) & {
@@ -13,7 +15,7 @@
     top: 0;
     left: 0;
     width: 880px;
-    aspect-ratio: inherit;
+    aspect-ratio: $tca-certif-aspect-ratio;
 
     > * {
         position: absolute;