@everymatrix/player-account-gaming-limits-popup 0.0.256 → 0.0.259

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-account-gaming-limits-popup",
-  "version": "0.0.256",
+  "version": "0.0.259",
   "main": "dist/player-account-gaming-limits-popup.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "407c9b355e4c1cd5d9ca02b54bd3fb935ef17d2e"
+  "gitHead": "7e26e42bac250a646d98bd80910b234522350fd6"
 }

package/src/PlayerAccountGamingLimitsPopup.svelte

@@ -73,13 +73,6 @@
 
 
 <style lang="scss">
-  //This function does a multiplication
-  // in order to work with px the
-  // same way as working with em
-  @function ttp($value) {
-    $multiplicator: 16px;
-    @return $value * $multiplicator;
-  }
 
   :host {
     font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
@@ -101,12 +94,12 @@
     background: var(--emfe-w-color-gray-50, #F9F8F8);
   }
   .InfoCardPopupWrapper {
-    width: ttp(12.5);
-    padding: ttp(1.25);
+    width: 200px;
+    padding: 20px;
     color: var(--emfe-w-color-black, #000000);
     background: var(--emfe-w-color-white, #FFFFFF);
-    box-shadow: 0px ttp(0.25) ttp(0.75) var(--emfe-w-color-gray-100, #E6E6E6);
-    border-radius: 0.3125;
+    box-shadow: 0 4px 12px var(--emfe-w-color-gray-100, #E6E6E6);
+    border-radius: 5px;
     display: block;
     position: absolute;
     top: 32px;
@@ -115,10 +108,10 @@
     &:before {
       content: "";
       position: absolute;
-      top: - ttp(0.4375);
-      left: ttp(6.5);
+      top: -7px;
+      left: 104px;
       border-style: solid;
-      border-width: 0 ttp(0.4375) ttp(0.4375);
+      border-width: 0 7px 7px;
       border-color: var(--emfe-w-color-white, #FFFFFF) transparent;
       display: block;
       width: 0;
@@ -132,13 +125,13 @@
       transform: translate(-50%, -50%);
       z-index: 102;
       .InfoCardPopupTitle {
-        font-size: ttp(1.125);
+        font-size: 18px;
       }
       .InfoCardPopupCloseButton {
-        width: ttp(1.875);
+        width: 30px;
       }
       .InfoCardPopupContent {
-        font-size: ttp(1);
+        font-size: 16px;
       }
       &:before {
         content: none;
@@ -148,32 +141,32 @@
   .InfoCardPopupHeader {
     display: inline-flex;
     .InfoCardPopupTitle {
-      line-height: ttp(1.5);
-      font-size: ttp(1);
+      line-height: 24px;
+      font-size: 16px;
       font-weight: 400;
-      padding-left: ttp(0.625);
+      padding-left: 10px;
     }
   }
   .InfoCardPopupIcon {
     display: flex;
-    font-size: ttp(1.5);
-    width: ttp(1.5);
-    height: ttp(1.5);
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
     background: transparent;
     border: 1px solid var(--emfe-w-color-black, #000000);
     align-items: center;
     justify-content: center;
-    border-radius: ttp(1.875);
+    border-radius: 30px;
   }
   .InfoCardPopupContent {
-    font-size: ttp(0.875);
+    font-size: 14px;
     font-weight: 300;
   }
   .InfoCardPopupCloseButton {
-    width: ttp(1.25);
+    width: 20px;
     position: absolute;
-    right: ttp(0.625);
-    top: ttp(0.625);
+    right: 10px;
+    top: 10px;
     cursor: pointer;
     transition-duration: 0.3s;
     &:hover {
@@ -186,17 +179,17 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    top: ttp(2);
-    right: ttp(2);
-    padding: ttp(1);
+    top: 32px;
+    right: 32px;
+    padding: 16px;
     border-radius: 50%;
     color: var(--emfe-w-color-white, #FFFFFF);
     cursor: pointer;
     transition: all 150ms ease-in-out;
 
     svg {
-      width: ttp(2);
-      height: ttp(2);
+      width: 32px;
+      height: 32px;
       fill: var(--emfe-w-color-black, #000000);
     }
   }