react-gldn-kit 0.1.9 → 0.1.11

package/dist/main.css

@@ -1954,7 +1954,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  padding: var(--indent-base-double);
+  padding: var(--indent-xxl);
   position: fixed;
   left: 0;
   top: 0;
@@ -1972,6 +1972,125 @@
       font-weight: 700;
     }
 
+.KIT__SignIn-module__content___fTb1F {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+}
+
+.KIT__SignIn-module__wrapperTitle___lYD6o {
+  padding: var(--indent-base);
+  margin-bottom: var(--indent-base);
+}
+
+.KIT__SignIn-module__content___fTb1F .KIT__SignIn-module__wrapperTabs___DX4sX {
+  width: calc(var(--full) - var(--indent-base-double));
+  margin-bottom: var(--indent-base);
+  border-bottom: 2px solid transparent;
+}
+
+.KIT__SignIn-module__marginInput___DhXR2 {
+  margin-bottom: var(--indent-base);
+  flex-shrink: 0;
+}
+
+.KIT__SignIn-module__wrapperForms___XD4t9 {
+  width: 100%;
+  display: flex;
+}
+
+.KIT__SignIn-module__content___fTb1F .KIT__SignIn-module__passwordField___JDN8l,
+.KIT__SignIn-module__wrapperForm___QHw6_ > div,
+.KIT__SignIn-module__lostPsw___UZZrP {
+  width: calc(var(--full) - var(--indent-base-double));
+}
+
+.KIT__SignIn-module__wrapperForm___QHw6_ {
+  flex-shrink: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transition: 0.5s;
+}
+
+.KIT__SignIn-module__formOne___AFk7Y {
+  transform: translateX(0%);
+  transition: 0.5s;
+}
+.KIT__SignIn-module__formTwo___mCHk4 {
+  transition: 0.5s;
+  transform: translateX(-100%);
+}
+.KIT__SignIn-module__formThree___NlshF {
+  transition: 0.5s;
+  transform: translateX(-200%);
+}
+
+.KIT__SignIn-module__lostPsw___UZZrP {
+  text-align: right;
+  color: var(--sign-in-modal-lost-password-color);
+  font-weight: 400;
+  font-size: 12px;
+}
+
+.KIT__SignIn-module__dash___C4wzA {
+  width: calc(var(--full) - var(--indent-base-double));
+  margin-bottom: var(--indent-base);
+  border-bottom: 2px solid var(--border-color-gray);
+}
+
+.KIT__SignIn-module__content___fTb1F .KIT__SignIn-module__btn___zszwq {
+  width: calc(var(--full) - var(--indent-base-double));
+  max-width: calc(var(--full) - var(--indent-base-double));
+  min-width: calc(var(--full) - var(--indent-base-double));
+  margin-bottom: var(--indent-base);
+}
+
+.KIT__SignIn-module__btn___zszwq:last-child {
+  margin-bottom: 0;
+}
+
+.KIT__SignIn-module__reg___y_Vwi {
+  opacity: 0.7;
+}
+
+@media (min-width: 768px) {
+  .KIT__SignIn-module__wrapperSignInModal___It11Z {
+    width: 500px;
+  }
+}
+
+.KIT__Credentials-module__wrapperCredentials___AH3RX {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  width: var(--full);
+}
+
+.KIT__Credentials-module__infoRow___DY4RE {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: var(--full);
+  margin-bottom: var(--indent-base-double);
+}
+
+.KIT__Credentials-module__username___g5UjF {
+  color: var(--credentials-info-username-color);
+  font-size: var(--font-size-xs);
+}
+
+.KIT__Credentials-module__result___MU6EV {
+  color: var(--credentials-info-result-color);
+  font-size: var(--font-size-m);
+  width: calc(var(--large) - (var(--small) + var(--indent-l)));
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .KIT__Alert-module__wrapperModal___lOle6 {
   width: 100%;
   height: 100%;
@@ -1981,7 +2100,7 @@
   left: 0;
   z-index: calc(var(--layout-lvl-3) + 1);
 
-  transition: 0.2s;
+  transition: 0.1s;
 
   transform: translateY(100%);
   left: auto;
@@ -2005,13 +2124,26 @@
 
 .KIT__Alert-module__wrapperModal___lOle6.KIT__Alert-module__animationFadeIn___pQUbq {
     transform: translateY(0%);
-    animation: KIT__Alert-module__FadeIn___Alo55 1s forwards;
+    animation: KIT__Alert-module__FadeIn___Alo55 0.2s forwards;
   }
 
+@media screen and (max-width:768px) {
+
+      .KIT__Alert-module__wrapperModal___lOle6.KIT__Alert-module__animationFadeIn___pQUbq > div {
+        animation: KIT__Alert-module__MoveToUp___vOjgR 0.5s forwards;
+      }
+    }
+
 .KIT__Alert-module__wrapperModal___lOle6.KIT__Alert-module__animationFadeOutModal___dXCQD {
-    animation: KIT__Alert-module__FadeOutModal___JYGCw 1s forwards;
+    animation: KIT__Alert-module__FadeOutModal___JYGCw 0.5s forwards;
   }
 
+@media screen and (max-width:768px) {
+      .KIT__Alert-module__wrapperModal___lOle6.KIT__Alert-module__animationFadeOutModal___dXCQD > div {
+        animation: KIT__Alert-module__MoveToBottom___fgYYC 0.2s forwards;
+      }
+    }
+
 .KIT__Alert-module__black___jMfxy {
   top: 0;
   position: fixed;
@@ -2051,11 +2183,11 @@
 
 @keyframes KIT__Alert-module__MoveToBottom___fgYYC {
   0% {
-    bottom: 0;
+    transform: translateY(0%);
   }
 
   100% {
-    bottom: -100%;
+    transform: translateY(100%);
   }
 }
 
@@ -2080,34 +2212,6 @@
     opacity: 0;
   }
 }
-.KIT__Credentials-module__wrapperCredentials___AH3RX {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  width: var(--full);
-}
-
-.KIT__Credentials-module__infoRow___DY4RE {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: var(--full);
-  margin-bottom: var(--indent-base-double);
-}
-
-.KIT__Credentials-module__username___g5UjF {
-  color: var(--credentials-info-username-color);
-  font-size: var(--font-size-xs);
-}
-
-.KIT__Credentials-module__result___MU6EV {
-  color: var(--credentials-info-result-color);
-  font-size: var(--font-size-m);
-  width: calc(var(--large) - (var(--small) + var(--indent-l)));
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
 .KIT__BannerTemplate-module__wrapperBanner___vPzec {
   height: 150px;
   background-size: cover;
@@ -2142,6 +2246,28 @@
   -webkit-box-orient: vertical;
 }
 
+.KIT__BannerTemplate-module__top___nC_iH {
+  display: flex;
+  flex-direction: column;
+  gap: var(--indent-m);
+}
+
+.KIT__BannerTemplate-module__path____EgX8 {
+  display: flex;
+  align-items: center;
+  gap: var(--indent-m);
+  font-size: var(--font-size-s);
+  color: rgb(var(--gray));
+}
+
+.KIT__BannerTemplate-module__path____EgX8 .KIT__BannerTemplate-module__arrowSvg___LqErK {
+    transform: rotate(90deg);
+  }
+
+.KIT__BannerTemplate-module__path____EgX8 .KIT__BannerTemplate-module__name___tdZJy {
+    color: rgb(var(--white));
+  }
+
 @media screen and (min-width: 429px) {
   .KIT__BannerTemplate-module__wrapperBanner___vPzec {
     height: 200px;
@@ -2151,7 +2277,7 @@
 @media screen and (min-width: 1170px) {
   .KIT__BannerTemplate-module__wrapperBanner___vPzec {
     height: 300px;
-    padding: var(--indent-base-double)
+    padding: var(--indent-base-double);
   }
 
   .KIT__BannerTemplate-module__title___Mriw5 {
@@ -2163,6 +2289,7 @@
     width: 60%;
   }
 }
+
 .KIT__Banners-module__noMargin___sWCuQ {
   margin: 0;
   margin: initial;
@@ -2681,6 +2808,13 @@
     bottom: 0%;
   }
 }
+.KIT__HOCRequestLoader-module__loader___xFYfs {
+  width: inherit;
+  height: inherit;
+  background-color: var(--hoc-request-loader-background-color);
+  color: var(--hoc-request-loader-color);
+}
+
 .KIT__MainLoader-module__wrapperMainLoader___m3z7o {
   width: 100%;
   height: 100%;
@@ -2942,7 +3076,7 @@
 
 .KIT__Wheel-module__content___Wljkb {
   width: var(--full);
-  padding: var(--indent-base-double);
+  padding: var(--indent-xxl);
   position: relative;
 }
 
@@ -3798,7 +3932,6 @@
   }
 .KIT__BattlesCard-module__wrapperBattlesCard___Lj8jQ .KIT__BattlesCard-module__wrapperContent___hUZyt .KIT__BattlesCard-module__date___SNEuT {
       font-size: 12px;
-      color: rgba(255, 255, 255, 1);
       padding-left: 12px;
     }
 .KIT__BattlesCard-module__wrapperBattlesCard___Lj8jQ .KIT__BattlesCard-module__wrapperContent___hUZyt .KIT__BattlesCard-module__prizeWrapper___Tx_6u {
@@ -4019,9 +4152,9 @@
   }
 
 .KIT__BattleBanner-module__time___oaNuD .KIT__BattleBanner-module__countDownText___Bcsrt {
-    color: rgb(var(--white));
+    color: var(--banner-count-down-color);
     font-size: var(--font-size-m);
-    font-size: 600;
+    font-weight: 600;
   }
 
 .KIT__BattleBanner-module__time___oaNuD .KIT__BattleBanner-module__countDown___pr8hY {
@@ -4332,31 +4465,34 @@
     }
       }
 
-html {
-  --primary-shadow: 0 0px 9px var(--green-100),
-    inset 0 8px 1px rgba(, 0.1);
-  --primary-gradient: linear-gradient(1turn,
-      rgba(, 0.5) 0.8%,
-      var(--green-100));
-  --primary-secondary: linear-gradient(1turn,
-      rgba(var(--soft-gray), 0.625) 0.8%,
-      rgb(var(--soft-gray)));
-  /* Buttons */
-  --button-color-primary: var(--primary-gradient);
-  --button-box-shadow-primary: var(--primary-shadow);
-
-  --button-color-green: var(--secondary);
-  --button-box-shadow-green: 0 3px 16px var(--secondary),
-    inset 0 4px 3px var(--secondary-05);
-
-  --button-color-blue: linear-gradient(1turn, #0c5eff 0.8%, #1398f9);
-  --button-box-shadow-blue: 0 3px 28px var(--green-100) 66,
-    inset 0 3px 3px rgba(255,255,255,0.30196);
-
-  --button-color-secondary: var(--primary-secondary);
-  --button-color-secondary-text: #fff;
-
-  --pop-up-header: rgb(var(--dark));
+:root {
+  /* Size */
+  --input-xs: 30px;
+  --input-s: 45px;
+  --input-m: 60px;
+  --input-l: 75px;
+  --input-xl: 90px;
+  --input-xxl: 150px;
+  --input-full: 100%;
+  --input-height: 40px;
+  --input-icon-width: 25px;
+  /* Colors */
+  --input-border-focus-bg: var(--green-100, red);
+  --input-border-bg: var(--border-color, red);
+  --input-border-radius: var(--indent-s);
+  --input-border: 2px solid var(--base-700, transparent);
+  --input-height: 40px;
+  --input-padding: var(--indent-xs) var(--indent-m);
+  --input-background: var(--base-900, red);
+  --input-label-text-color: color-mix(in oklab, var(--base-0, red) 50%, transparent 50%);
+  --input-text-color: var(--base-0, white);
+  --input-border-colorful: var(--green-100, red);
+  --input-border-red: var(--red-1000, red);
+  --input-error: var(--input-border-red);
+  --input-inline-start: var(--indent-m);
+  --input-base-autofill-background-color: var(--input-background);
+}
+:root {
   /* Button SIZES */
   --button-xs: 30px;
   --button-s: 45px;
@@ -4373,7 +4509,106 @@ html {
   --button-height-xl: calc(var(--small-button-height) + var(--button-height-step) * 4);
   --button-height-xxl: calc(var(--small-button-height) + var(--button-height-step) * 5);
 
-  /* indents */
+
+
+
+
+
+
+  --primary-shadow: 0 0px 9px var(--green-100),
+    inset 0 8px 1px rgba(, 0.1);
+  --primary-gradient: linear-gradient(1turn,
+      rgba(, 0.5) 0.8%,
+      var(--green-100));
+  --primary-secondary: linear-gradient(1turn,
+      rgba(var(--soft-gray), 0.625) 0.8%,
+      rgb(var(--soft-gray)));
+
+  /* Buttons */
+  --button-color-primary: var(--green-300);
+  --button-primary-border: 2px solid var(--green-100);
+  --button-color-primary-text: var(--base-0, white);
+  --button-color-black: var(--base-700, transparent);
+  --button-color-black-text: var(--base-0, white);
+}
+:root {
+  --check-box-height: 32px;
+  --check-box-slider-padding: 4px;
+  --check-box-slider-size: calc(var(--check-box-height) - var(--check-box-slider-padding) * 2);
+  --check-box-width: 52px;
+  --check-box-selected-color: rgba(52, 199, 89, 1);
+  --check-box-unselected-color: rgba(31, 34, 47, 1);
+  --check-box-slider-border-color: rgba(39, 43, 58, 1);
+  --check-box-slider-before-background-color: rgba(39, 43, 58, 1);
+}
+:root {
+  --border-app-switcher-color: inherit;
+  --background-active-app-switcher-color: var(--border-app-switcher-color);
+  --active-app-border-color: ;
+  --app-switcher-svg-path-fill: var(--green-100);
+  --pop-up-header-close-svg-path-fill: rgb(var(--gray));
+
+  --drawer-button-border-background: linear-gradient(90deg,
+      var(--green-100) 0.8%,
+      transparent);
+  --drawer-button-shadow-background: linear-gradient(90deg,
+      #212433 0%,
+      var(--drawer-modal-content-color) 100%);
+}
+:root {
+  --promo-code-promo-title-color: rgba(var(--white), 0.5);
+}
+:root {
+  /* Tabs */
+  --tabs-background: initial;
+  --tab-text-color: var(--base-0, red);
+  --tab-indicator-bg: var(--yellow-200, red);
+  --tab-border-bottom-color: var(--green-100, red);
+  --tab-button-active-shadow: initial;
+
+}
+:root {
+  --sign-up-promo-code-color: color-mix(in oklab, var(--base-0, red) 50%, transparent 50%);
+  /*Notice: it equals 255,255,255,0.5*/
+  --sign-up-modal-checkbox-color: var(--base-0, white);
+}
+:root {
+  --selector-border: var(--input-border);
+  --selector-border-radius: var(--input-border-radius);
+  --selector-item-background: var(--input-background);
+  --selector-main-bg-opened: var(--base-800, initial);
+  --selector-drop-down-bg: var(--selector-item-background);
+  --selector-border-radius: var(--input-border-radius);
+  --selector-color: var(--input-text-color);
+  --selector-arrow-gb-opened: var(--base-0, red);
+}
+:root {
+  --base-1000: rgba(0, 0, 0, 1);
+  --base-900: rgba(23, 25, 36, 1);
+  --base-800: rgba(31, 34, 47, 1);
+  --base-700: rgba(44, 49, 66, 1);
+  --base-600: rgba(81, 88, 113, 1);
+  --base-500: rgba(118, 128, 163, 1);
+  --base-400: rgba(161, 166, 178, 1);
+  --base-0: rgba(255, 255, 255, 1);
+
+  --green-500: rgba(54, 165, 92, 1);
+  --green-300: rgba(39, 195, 92, 1);
+  --green-100: rgba(37, 245, 108, 1);
+
+  --yellow-300: rgba(230, 166, 0, 1);
+  --yellow-200: rgba(245, 187, 37, 1);
+
+  --red-1000: rgba(255, 80, 80, 1);
+
+  --blue-500: rgba(77, 33, 255, 1);
+  --blue-300: rgba(69, 118, 244, 1);
+  /* BASE COLORS  */
+
+
+  /* --pop-up-header: rgb(var(--dark)); */
+
+  /* indents - ----- OLD need to remove*/
   --indent-base-double: calc(var(--indent-l) * 2);
   --indent-base-half: calc(var(--indent-l) / 2);
   /* borders */
@@ -4385,18 +4620,6 @@ html {
   --border-xxl: 18px;
   --border-round: 50%;
 
-  /* Inputs */
-  --input-xs: 30px;
-  --input-s: 45px;
-  --input-m: 60px;
-  --input-l: 75px;
-  --input-xl: 90px;
-  --input-xxl: 150px;
-  --input-full: 100%;
-  --input-height: 40px;
-  --input-icon-width: 25px;
-  --input-border-focus-bg: var(--green-100);
-  --input-border-bg: var(--border-color);
   /* font-size */
   --font-size-xxs: 0.5rem;
   --font-size-xs: 0.7rem;
@@ -4414,35 +4637,6 @@ html {
   --layout-lvl-3: 21;
   --layout-lvl-4: 31;
   --layout-lvl-5: 41;
-
-  /* Components */
-  /* App Switcher */
-  --border-app-switcher-color: inherit;
-  --background-active-app-switcher-color: var(--border-app-switcher-color);
-  --active-app-border-color: ;
-  --app-switcher-svg-path-fill: var(--green-100);
-  --pop-up-header-close-svg-path-fill: rgb(var(--gray));
-
-  --drawer-button-border-background: linear-gradient(90deg,
-      var(--green-100) 0.8%,
-      transparent);
-  --drawer-button-shadow-background: linear-gradient(90deg,
-      #212433 0%,
-      var(--drawer-modal-content-color) 100%);
-
-  /* Checkbox */
-
-  --check-box-height: 32px;
-  --check-box-slider-padding: 4px;
-  --check-box-slider-size: calc(var(--check-box-height) - var(--check-box-slider-padding) * 2);
-  --check-box-width: 52px;
-  --check-box-selected-color: rgba(52, 199, 89, 1);
-  --check-box-unselected-color: rgba(31, 34, 47, 1);
-  --check-box-slider-border-color: rgba(39, 43, 58, 1);
-  --check-box-slider-before-background-color: rgba(39, 43, 58, 1);
-
-  /* PromoCode */
-  --promo-code-promo-title-color: rgba(var(--white), 0.5);
 }
 /* CSS variables. */
 :root {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-gldn-kit",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "",
   "main": "./dist/index.js",
   "keywords": [],
@@ -12,12 +12,13 @@
     "build": "rm -rf dist && npm run build:types &&  webpack --mode=production --node-env=production",
     "publish": "npm i && npm run build && npm publish",
     "clear": "sudo rm -rf node_modules && npm i",
-    "add:react": " npm link ../web-spa/node_modules/react ../web-spa/node_modules/@types/react ../web-spa/node_modules/classnames ../web-spa/node_modules/react-dom ../web-spa/node_modules/@types/react-dom  ../web-spa/node_modules/react-responsive-carousel ../web-spa/node_modules/react-easy-swipe ../web-spa/node_modules/react-memory-optimization",
+    "add:react": " npm link ../elon-fs-jb-gb/casino-apps/front-end/web-spa/node_modules/react ../elon-fs-jb-gb/casino-apps/front-end/web-spa/node_modules/@types/react ../elon-fs-jb-gb/casino-apps/front-end/web-spa/node_modules/classnames ../elon-fs-jb-gb/casino-apps/front-end/web-spa/node_modules/react-dom ../elon-fs-jb-gb/casino-apps/front-end/web-spa/node_modules/@types/react-dom  ../elon-fs-jb-gb/casino-apps/front-end/web-spa/node_modules/react-responsive-carousel ../elon-fs-jb-gb/casino-apps/front-end/web-spa/node_modules/react-easy-swipe ../elon-fs-jb-gb/casino-apps/front-end/web-spa/node_modules/react-memory-optimization",
+    "add:react:win": " npm link ../../EL/elonbet/front-end/web-spa/node_modules/react ../../EL/elonbet/front-end/web-spa/node_modules/@types/react ../../EL/elonbet/front-end/web-spa/node_modules/classnames ../../EL/elonbet/front-end/web-spa/node_modules/react-dom ../../EL/elonbet/front-end/web-spa/node_modules/@types/react-dom  ../../EL/elonbet/front-end/web-spa/node_modules/react-responsive-carousel ../../EL/elonbet/front-end/web-spa/node_modules/react-easy-swipe ../../EL/elonbet/front-end/web-spa/node_modules/react-memory-optimization",
     "add:react-l-b": " npm link ../../../../landing-builder/node_modules/react ../../../../landing-builder/node_modules/@types/react ../../../../landing-builder/node_modules/classnames ../../../../landing-builder/node_modules/react-dom ../../../../landing-builder/node_modules/@types/react-dom ../../../../landing-builder/node_modules/react-memory-optimization",
     "dev:kit": "sudo npm run add:react && npm run dev",
     "dev:kit-lb": "sudo npm run add:react-l-b && npm run dev",
-    "dev:kit-win": "npm run add:react && rimraf ./dist/lib && tsc --build tsconfig.json && webpack --watch",
-    "add:react-l-b:win": "npm link ../../../../LandingBuilder/landing-builder/node_modules/react ../../../../LandingBuilder/landing-builder/node_modules/@types/react ../../../../LandingBuilder/landing-builder/node_modules/classnames ../../../../LandingBuilder/landing-builder/node_modules/react-dom ../../../../LandingBuilder/landing-builder/node_modules/@types/react-dom ../../../../LandingBuilder/landing-builder/node_modules/react-memory-optimization",
+    "dev:kit-win": "npm run add:react:win && rimraf ./dist/lib && tsc --build tsconfig.json && webpack --watch",
+    "add:react-l-b:win": "npm link ../../../../LandingBuilder/landing-builder/web/node_modules/react ../../../../LandingBuilder/landing-builder/web/node_modules/@types/react ../../../../LandingBuilder/landing-builder/web/node_modules/classnames ../../../../LandingBuilder/landing-builder/web/node_modules/react-dom ../../../../LandingBuilder/landing-builder/web/node_modules/@types/react-dom ../../../../LandingBuilder/landing-builder/web/node_modules/react-memory-optimization",
     "dev:kit-lb:win": "npm run add:react-l-b:win && rimraf ./dist/lib && tsc --build tsconfig.json && webpack --watch"
   },
   "devDependencies": {