Merge pull request #1 from splash-networks/search

Update intltelinput

public/assets/build/css/demo.css

@@ -9,20 +9,6 @@ body {
   color: #555;
 }
 
-pre {
-  margin: 0 !important;
-  display: inline-block;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string,
-.token.variable {
-  background: none;
-}
-
 input,
 button {
   height: 35px;
@@ -41,21 +27,25 @@ button[disabled] {
 input,
 select {
   border: 1px solid #ccc;
-  width: 250px;
+  width: 220px;
 }
 
-::placeholder,
-:-ms-input-placeholder {
+input::placeholder {
   color: #bbb;
 }
 
 button {
   color: #fff;
   background-color: #428bca;
   border: 1px solid #357ebd;
+  margin-left: 5px;
 }
 button:hover {
   background-color: #3276b1;
   border-color: #285e8e;
   cursor: pointer;
+}
+
+.notice {
+  margin-top: 15px;
 }

public/assets/build/css/intlTelInput.css

@@ -11,9 +11,16 @@
 .iti__v-hide {
   visibility: hidden;
 }
-.iti input,
-.iti input[type=text],
-.iti input[type=tel] {
+.iti__a11y-text {
+  width: 1px;
+  height: 1px;
+  clip: rect(1px, 1px, 1px, 1px);
+  overflow: hidden;
+  position: absolute;
+}
+.iti input.iti__tel-input,
+.iti input.iti__tel-input[type=text],
+.iti input.iti__tel-input[type=tel] {
   position: relative;
   z-index: 0;
   margin-top: 0 !important;
@@ -52,26 +59,46 @@
   border-top: none;
   border-bottom: 4px solid #555;
 }
-.iti__country-list {
+.iti__dropdown-content {
+  border-radius: 3px;
+  background-color: white;
+}
+.iti--inline-dropdown .iti__dropdown-content {
   position: absolute;
   z-index: 2;
+  margin-top: 3px;
+  margin-left: -1px;
+  border: 1px solid #ccc;
+  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
+}
+.iti__dropdown-content--dropup {
+  bottom: 100%;
+  margin-bottom: 3px;
+}
+.iti__search-input {
+  width: 100%;
+  border-width: 0;
+  border-radius: 3px;
+  padding: 9px 12px;
+}
+.iti__search-input + .iti__country-list {
+  border-top: 1px solid #ccc;
+}
+.iti__country-list {
   list-style: none;
   padding: 0;
-  margin: 0 0 0 -1px;
-  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
-  background-color: white;
-  border: 1px solid #ccc;
-  white-space: nowrap;
-  max-height: 200px;
+  margin: 0;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
 }
-.iti__country-list--dropup {
-  bottom: 100%;
-  margin-bottom: -1px;
+.iti--inline-dropdown .iti__country-list {
+  max-height: 185px;
+}
+.iti--flexible-dropdown-width .iti__country-list {
+  white-space: nowrap;
 }
 @media (max-width: 500px) {
-  .iti__country-list {
+  .iti--flexible-dropdown-width .iti__country-list {
     white-space: normal;
   }
 }
@@ -87,7 +114,7 @@
 .iti__country {
   display: flex;
   align-items: center;
-  padding: 5px 10px;
+  padding: 8px 8px;
   outline: none;
 }
 .iti__dial-code {
@@ -97,35 +124,35 @@
   background-color: rgba(0, 0, 0, 0.05);
 }
 .iti__flag-box, .iti__country-name {
-  margin-right: 6px;
+  margin-right: 8px;
 }
 [dir=rtl] .iti__flag-box, [dir=rtl] .iti__country-name {
   margin-right: 0;
-  margin-left: 6px;
+  margin-left: 8px;
 }
-.iti--allow-dropdown input,
-.iti--allow-dropdown input[type=text],
-.iti--allow-dropdown input[type=tel], .iti--separate-dial-code input,
-.iti--separate-dial-code input[type=text],
-.iti--separate-dial-code input[type=tel] {
+.iti--allow-dropdown input.iti__tel-input,
+.iti--allow-dropdown input.iti__tel-input[type=text],
+.iti--allow-dropdown input.iti__tel-input[type=tel], .iti--show-selected-dial-code input.iti__tel-input,
+.iti--show-selected-dial-code input.iti__tel-input[type=text],
+.iti--show-selected-dial-code input.iti__tel-input[type=tel] {
   padding-right: 6px;
   padding-left: 52px;
   margin-left: 0;
 }
-[dir=rtl] .iti--allow-dropdown input,
-[dir=rtl] .iti--allow-dropdown input[type=text],
-[dir=rtl] .iti--allow-dropdown input[type=tel], [dir=rtl] .iti--separate-dial-code input,
-[dir=rtl] .iti--separate-dial-code input[type=text],
-[dir=rtl] .iti--separate-dial-code input[type=tel] {
+[dir=rtl] .iti--allow-dropdown input.iti__tel-input,
+[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],
+[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--show-selected-dial-code input.iti__tel-input,
+[dir=rtl] .iti--show-selected-dial-code input.iti__tel-input[type=text],
+[dir=rtl] .iti--show-selected-dial-code input.iti__tel-input[type=tel] {
   padding-right: 52px;
   padding-left: 6px;
   margin-right: 0;
 }
-.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
+.iti--allow-dropdown .iti__flag-container, .iti--show-selected-dial-code .iti__flag-container {
   right: auto;
   left: 0;
 }
-[dir=rtl] .iti--allow-dropdown .iti__flag-container, [dir=rtl] .iti--separate-dial-code .iti__flag-container {
+[dir=rtl] .iti--allow-dropdown .iti__flag-container, [dir=rtl] .iti--show-selected-dial-code .iti__flag-container {
   right: 0;
   left: auto;
 }
@@ -135,26 +162,26 @@
 .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
   background-color: rgba(0, 0, 0, 0.05);
 }
-.iti--allow-dropdown input[disabled] + .iti__flag-container:hover,
-.iti--allow-dropdown input[readonly] + .iti__flag-container:hover {
+.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover,
+.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
   cursor: default;
 }
-.iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag,
-.iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag {
+.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover .iti__selected-flag,
+.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
   background-color: transparent;
 }
-.iti--separate-dial-code .iti__selected-flag {
+.iti--show-selected-dial-code .iti__selected-flag {
   background-color: rgba(0, 0, 0, 0.05);
 }
-.iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
+.iti--show-selected-dial-code.iti--show-flags .iti__selected-dial-code {
   margin-left: 6px;
 }
-[dir=rtl] .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
+[dir=rtl] .iti--show-selected-dial-code.iti--show-flags .iti__selected-dial-code {
   margin-left: 0;
   margin-right: 6px;
 }
 .iti--container {
-  position: absolute;
+  position: fixed;
   top: -1000px;
   left: -1000px;
   z-index: 1060;
@@ -164,18 +191,28 @@
   cursor: pointer;
 }
 
-.iti-mobile .iti--container {
-  top: 30px;
-  bottom: 30px;
-  left: 30px;
-  right: 30px;
+.iti--fullscreen-popup.iti--container {
+  background-color: rgba(0, 0, 0, 0.5);
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
   position: fixed;
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.iti--fullscreen-popup.iti--container.iti--country-search {
+  justify-content: flex-start;
 }
-.iti-mobile .iti__country-list {
+.iti--fullscreen-popup .iti__dropdown-content {
+  display: flex;
+  flex-direction: column;
   max-height: 100%;
-  width: 100%;
+  position: relative;
 }
-.iti-mobile .iti__country {
+.iti--fullscreen-popup .iti__country {
   padding: 10px 10px;
   line-height: 1.5em;
 }
@@ -201,7 +238,7 @@
 .iti__flag.iti__va {
   width: 15px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 2x) {
   .iti__flag {
     background-size: 5762px 15px;
   }
@@ -1264,15 +1301,23 @@
   box-shadow: 0px 0px 1px 0px #888;
   background-image: url("../img/flags.png?1");
   background-repeat: no-repeat;
-  background-color: #dbdbdb;
   background-position: 20px 0;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 2x) {
   .iti__flag {
     background-image: url("../img/[email protected]?1");
   }
 }
 
-.iti__flag.iti__np {
-  background-color: transparent;
+.iti__globe {
+  background-image: url("../img/globe.png");
+  background-size: contain;
+  background-position: right;
+  box-shadow: none;
+  height: 19px;
+}
+@media (min-resolution: 2x) {
+  .iti__globe {
+    background-image: url("../img/[email protected]");
+  }
 }