@everymatrix/general-input 0.0.1 → 1.0.69

package/dist/collection/components/tel-input/tel-input.css

@@ -13,19 +13,33 @@
 .tel__wrapper {
   position: relative;
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.tel__wrapper--autofilled {
+  pointer-events: none;
+}
+.tel__wrapper--autofilled .tel__label {
+  color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
+}
+.tel__wrapper--autofilled .tel__input::part(input-field) {
+  color: var(--emfe-w-color-black, #000000);
 }
 .tel__wrapper--flex {
   width: inherit;
   display: flex;
-  align-items: stretch;
+  align-items: center;
   border-radius: 4px;
-  border: 2px solid #DEE1EE;
+  border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
+  background-color: var(--emfe-w-color-white, #FFFFFF);
+  overflow: hidden;
 }
 .tel__wrapper--flex:focus-within {
-  border: 2px solid #3E3E3E;
+  border-color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
 }
 .tel__wrapper--flex--invalid {
-  border: 2px solid #cc0000b3;
+  border: 1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
 }
 .tel__wrapper--flex-label {
   display: flex;
@@ -40,43 +54,55 @@
   font-weight: 500;
   font-size: 16px;
   line-height: 20px;
-  color: #1F1F1F;
+  color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
 }
 .tel__label--required::after {
   content: "*";
   font-family: inherit;
-  color: #1F1F1F;
+  color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
   margin-left: 2px;
 }
 .tel__prefix {
-  width: 120px;
+  --vaadin-field-default-width: 90px;
 }
 .tel__prefix[focus] {
   outline: none;
 }
 .tel__prefix::part(input-field) {
-  border-radius: 0 4px 4px 0;
-  background-color: #DEE1EE;
-  color: #1F1F1F;
+  border-radius: 0 5px 5px 0;
+  background-color: var(--emfe-w-color-white, #FFFFFF);
+  color: var(--emfe-w-color-black, #000000);
   font-family: inherit;
   font-style: normal;
   font-weight: 300;
   font-size: 16px;
-  line-height: 19px;
+  line-height: 1.5;
+  border: none;
+  border-right: 2px solid #DDE0EE;
+  border-image-source: linear-gradient(to bottom, rgba(221, 224, 238, 0) 25%, rgb(221, 224, 238) 25%, rgb(221, 224, 238) 75%, rgba(221, 224, 238, 0) 75%);
+  border-image-slice: 1;
+  border-image-repeat: round;
+}
+.tel__prefix::part(input-field):hover {
+  background-color: var(--emfe-w-color-white, #FFFFFF);
+}
+.tel__prefix::part(toggle-button) {
+  color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
 }
 .tel__input {
-  border-radius: 4px;
-  background-color: transparent;
   font-family: inherit;
-  font-style: normal;
-  font-weight: 300;
-  font-size: 16px;
-  line-height: 19px;
-  color: #2A2E3F;
+  border-radius: 5px;
+  width: 100%;
+  color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
+  background-color: var(--emfe-w-color-white, #FFFFFF);
   border: none;
-  padding: 8px 20px;
   width: inherit;
   position: relative;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 1.5;
+  padding: 5px 15px;
+  height: 42px;
   /* Firefox */
   -moz-appearance: textfield;
   /* Chrome, Safari, Edge, Opera */
@@ -88,11 +114,14 @@
   -webkit-appearance: none;
   margin: 0;
 }
+.tel__input::placeholder {
+  color: var(--emfe-w-color-gray-150, #979797);
+}
 .tel__error-message {
   position: absolute;
   top: calc(100% + 5px);
   left: 0;
-  color: #cc0000b3;
+  color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
 }
 .tel__tooltip-icon {
   width: 16px;
@@ -102,9 +131,9 @@
   position: absolute;
   top: 0;
   left: 20px;
-  background-color: #FFFFFF;
-  border: 1px solid #B0B0B0;
-  color: #2B2D3F;
+  background-color: var(--emfe-w-color-white, #FFFFFF);
+  border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
+  color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
   padding: 10px;
   border-radius: 5px;
   opacity: 0;