@everymatrix/general-player-register-form-step2 0.0.258 → 0.0.261

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-player-register-form-step2",
-  "version": "0.0.258",
+  "version": "0.0.261",
   "main": "dist/general-player-register-form-step2.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "29d9cee256c6fbdf17d95ed82bc3ebcc62241704"
+  "gitHead": "a93c0ae8104c039af7d54949a0889c11bca83acb"
 }

package/src/GeneralPlayerRegisterFormStep2.svelte

@@ -258,13 +258,6 @@
 <button class="RegisterStepNext" part="RegisterStepNext" disabled={!isValid} on:click={goNext}>{$_('registerFormStep2.registerNext')}</button>
 
 <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';
@@ -285,7 +278,7 @@
     svg {
       width: 20px;
       height: 20px;
-      margin-right: ttp(1.25);
+      margin-right: 24px;
       fill: var(--emfe-w-color-primary, #D0046C);
     }
   }
@@ -293,23 +286,21 @@
   .UserTitleContainer,
   .CurrencyContainer {
     label {
-      font-size: ttp(0.875);
+      font-size: 14px;
       font-weight: 300;
-      padding-bottom: ttp(0.3125);
+      padding-bottom: 5px;
 
     }
 
     select {
       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;
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
@@ -332,26 +323,24 @@
     color: var(--emfe-w-color-gray-300, #58586B);
     display: flex;
     flex-direction: column;
-    padding-bottom: ttp(1.875);
+    padding-bottom: 30px;
     position: relative;
 
     label {
-      font-size: ttp(0.875);
+      font-size: 14px;
       font-weight: 300;
-      padding-bottom: ttp(0.3125);
+      padding-bottom: 5px;
     }
 
     input, select {
       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;
     }
 
     &.InvalidField {
@@ -365,7 +354,7 @@
 
   .BirthDateOptions {
     display: flex;
-    gap: ttp(0.625);
+    gap: 10px;
 
     .BirthDaySelected {
       width: 30%;
@@ -416,15 +405,15 @@
 
   .InvalidInput {
     color: var(--emfe-w-color-error, #FD2839);
-    font-size: ttp(0.625);
+    font-size: 10px;
     position: absolute;
     bottom: -3px;
-    line-height: ttp(0.625);
+    line-height: 10px;
   }
 
   .ErrorMessage {
-    margin: 0 0 ttp(0.938) 0;
-    font-size: ttp(0.75);
+    margin: 0 0 15px 0;
+    font-size: 12px;
     color: var(--emfe-w-color-error, #FD2839);
   }
 
@@ -434,12 +423,12 @@
     border: 1px solid var(--emfe-w-color-primary, #D0046C);
     border-radius: 5px;
     width: 100%;
-    height: ttp(3.75);
+    height: 60px;
     padding: 0;
     text-transform: uppercase;
-    font-size: ttp(1.125);
+    font-size: 18px;
     cursor: pointer;
-    margin-top: ttp(1.5);
+    margin-top: 24px;
     &[disabled] {
       background: var(--emfe-w-color-gray-100, #E6E6E6);
       border: 1px solid var(--emfe-w-color-gray-150, #828282);