react-gldn-kit 0.1.8 → 0.1.10

package/dist/main.css

@@ -952,6 +952,10 @@
   flex-shrink: 0;
 }
 
+.KIT__Selector-module__wrapperSelector___gMgBa:has(.KIT__Selector-module__opacity___JnYUt) .KIT__Selector-module__item___H9Toq {
+      color: var(--selector-color);
+    }
+
 /* MOVE to GLOBAL Css -full -small etc */
 .KIT__Selector-module__dropDownContentSize-full___Hm4pX {
   width: var(--full);
@@ -977,7 +981,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 2px 10px;
-  color: var(--selector-color);
+  color: var(--input-label-text-color);
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
@@ -1155,10 +1159,15 @@
 
 .KIT__CheckBox-module__checkboxWrapperBig___lQiT2 input:checked + .KIT__CheckBox-module__slider___SGVW0:before {
     /* 4 + 4 left and right */
-    transform: translateX(calc(var(--check-box-width) - (var(--check-box-slider-size) + var(--check-box-slider-padding) * 2)));
+    transform: translateX(
+      calc(
+        var(--check-box-width) -
+          (var(--check-box-slider-size) + var(--check-box-slider-padding) * 2)
+      )
+    );
     height: var(--check-box-slider-size);
     width: var(--check-box-slider-size);
-    background-color: rgb(var(--white));
+    background-color: var(--base-0);
   }
 
 .KIT__CheckBox-module__checkboxWrapper___mOh36 {
@@ -1171,6 +1180,7 @@
   width: 70%;
   margin-left: var(--indent-l);
 }
+
 .KIT__Docs-module__checkbox___DCvmb {
   margin-bottom: var(--indent-l);
   color: var(--sign-up-modal-checkbox-color);
@@ -1212,6 +1222,7 @@
     padding-bottom: var(--indent-l);
     white-space: nowrap;
     text-overflow: ellipsis;
+    width: 100%;
   }
 .KIT__Tabs-module__wrapperTabs___rFoBY .KIT__Tabs-module__tab___NBVtA.KIT__Tabs-module__buttonTab___Tpphz {
       padding: var(--indent-s);
@@ -1361,7 +1372,7 @@
 }
 .KIT__PhoneInput-module__input___hyTKa {
   border-radius: var(--border-s);
-  border: 2px solid var(--border-color-gray);
+  border: var(--input-border);
   height: 40px;
   display: flex;
   justify-content: space-between;
@@ -1943,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;
@@ -1961,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%;
@@ -1970,7 +2100,7 @@
   left: 0;
   z-index: calc(var(--layout-lvl-3) + 1);
 
-  transition: 0.2s;
+  transition: 0.1s;
 
   transform: translateY(100%);
   left: auto;
@@ -1994,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;
@@ -2040,11 +2183,11 @@
 
 @keyframes KIT__Alert-module__MoveToBottom___fgYYC {
   0% {
-    bottom: 0;
+    transform: translateY(0%);
   }
 
   100% {
-    bottom: -100%;
+    transform: translateY(100%);
   }
 }
 
@@ -2069,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;
@@ -2931,7 +3046,7 @@
 
 .KIT__Wheel-module__content___Wljkb {
   width: var(--full);
-  padding: var(--indent-base-double);
+  padding: var(--indent-xxl);
   position: relative;
 }
 
@@ -4321,31 +4436,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;
@@ -4362,7 +4480,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 */
@@ -4374,18 +4591,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;
@@ -4403,35 +4608,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.8",
+  "version": "0.1.10",
   "description": "",
   "main": "./dist/index.js",
   "keywords": [],
@@ -12,11 +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-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"
+    "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/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": {
     "@babel/core": "^7.15.0",