@everymatrix/player-account-self-exclusion 0.0.258 → 0.0.261

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-account-self-exclusion",
-  "version": "0.0.258",
+  "version": "0.0.261",
   "main": "dist/player-account-self-exclusion",
   "svelte": "src/index.ts",
   "scripts": {
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "29d9cee256c6fbdf17d95ed82bc3ebcc62241704"
+  "gitHead": "a93c0ae8104c039af7d54949a0889c11bca83acb"
 }

package/src/PlayerAccountSelfExclusion.svelte

@@ -135,13 +135,6 @@
 </div>
 
 <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';
@@ -193,10 +186,10 @@
 
   .SelfExclusionDescription {
     color: var(--emfe-w-color-gray-300, #58586B);
-    line-height: ttp(1.5);
+    line-height: 24px;
     &.SelfExclusionDescriptionMobile {
       font-size: 12px;
-      line-height: ttp(1.2);
+      line-height: 19px;
     }
     .SelfExclusionDescriptionText a {
       color: var(--emfe-w-color-primary, #D0046C);
@@ -207,27 +200,25 @@
     color: var(--emfe-w-color-gray-300, #58586B);
     display: flex;
     flex-direction: column;
-    padding-bottom: ttp(1);
+    padding-bottom: 16px;
     position: relative;
     width: 50%;
 
     label {
-      font-size: ttp(0.875);
+      font-size: 14px;
       font-weight: 300;
-      padding-bottom: ttp(0.3125);
+      padding-bottom: 5px;
     }
 
     input {
       width: 100%;
-      height: ttp(2.75);
+      height: 44px;
       border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
-      border-radius: ttp(0.3125);
-      padding: ttp(0.3125);
-      font-size: ttp(0.875);
+      border-radius: 5px;
       box-sizing: border-box;
-      padding: ttp(0.3125) ttp(0.9375);
-      font-size: ttp(1);
-      line-height: ttp(1.125);
+      padding: 5px 15px;
+      font-size: 16px;
+      line-height: 18px;
     }
 
     &.SelfExclusionDateWrapperMobile {
@@ -238,16 +229,16 @@
   .SelfExclusionRadioWrapper {
     display: block;
     position: relative;
-    padding: ttp(0.25) 0 0 0;
-    margin-bottom: ttp(1);
-    font-size: ttp(1);
+    padding: 4px 0 0 0;
+    margin-bottom: 16px;
+    font-size: 16px;
     user-select: none;
-    line-height: ttp(1.2);
+    line-height: 18px;
 
     label {
-      font-size: ttp(1);
+      font-size: 16px;
       cursor: pointer;
-      padding-left: ttp(2.188);
+      padding-left: 35px;
     }
 
     input {
@@ -262,8 +253,8 @@
       position: absolute;
       top: 0;
       left: 0;
-      height: ttp(1.563);
-      width: ttp(1.563);
+      height: 25px;
+      width: 25px;
       background-color: var(--emfe-w-color-gray-100, #E6E6E6);
       border-radius: 50%;
     }
@@ -276,12 +267,12 @@
       content: "";
       position: absolute;
       display: none;
-      left: ttp(0.563);
-      top: ttp(0.313);
-      width: ttp(0.313);
-      height: ttp(0.625);
+      left: 9;
+      top: 5px;
+      width: 5px;
+      height: 10px;
       border: solid white;
-      border-width: 0 ttp(0.188) ttp(0.188) 0;
+      border-width: 0 2px 2px 0;
       transform: rotate(45deg);
     }
 
@@ -291,24 +282,24 @@
 
     &.SelfExclusionRadioWrapperMobile {
       label {
-        font-size: ttp(0.75);
+        font-size: 12px;
       }
     }
   }
 
   .SelfExclusionActionButtons {
-    margin-top: ttp(2.5);
+    margin-top: 40px;
     width: 50%;
 
     .SelfExclusionSave {
       cursor: pointer;
-      border-radius: ttp(0.3125);
+      border-radius: 5px;
       width: 100%;
-      height: ttp(3.125);
+      height: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: ttp(1);
+      font-size: 16px;
       text-transform: uppercase;
       transition-duration: 0.3s;
       box-sizing: border-box;
@@ -321,8 +312,8 @@
       width: 100%;
       grid-template-columns: 1fr 1fr;
       .SelfExclusionSave {
-        height: ttp(2.5);
-        font-size: ttp(0.75);
+        height: 40px;
+        font-size: 12px;
       }
     }
   }