phone number editing controls are functional

This commit is contained in:
or-else
2023-01-22 18:57:19 -08:00
parent b766e827c9
commit b0bf93a4d9
13 changed files with 724 additions and 636 deletions
+46 -2
View File
@@ -185,6 +185,7 @@ input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea {
height: 2.5rem;
border-bottom: 1px solid #ccc;
@@ -195,6 +196,7 @@ textarea {
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea {
width: 100%;
}
@@ -203,7 +205,8 @@ textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus {
input[type="search"]:focus,
input[type="tel"]:focus {
border-bottom: 1px solid #2196f3;
box-shadow: 0 1px 0 rgba(33, 150, 243, 0.25);
}
@@ -212,7 +215,8 @@ textarea.invalid,
input[type="text"].invalid,
input[type="email"].invalid,
input[type="password"].invalid,
input[type="search"].invalid {
input[type="search"].invalid,
input[type="tel"].invalid {
border-bottom: 1px solid #e57373;
box-shadow: 0 1px 0 rgba(229, 115, 115, 0.25);
}
@@ -221,6 +225,7 @@ input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
color: #bbb;
font-weight: lighter;
@@ -3019,6 +3024,45 @@ ul.tabbar li.active > a {
outline: 0.5rem solid rgba(255,255,255,.95);
}
.country-flag {
display: inline-block;
font-size: larger;
vertical-align: middle;
}
.dial-code {
white-space: nowrap;
display: inline-block;
cursor: pointer;
margin-top: 0.1rem;
}
ul.phone-country-selector {
list-style: none;
overflow-x: hidden;
}
ul.phone-country-selector > li {
position: relative;
font-weight: lighter;
padding: 0.25rem 0.5rem 0.15rem 0.5rem;
cursor: pointer;
}
ul.phone-country-selector > li:hover {
background-color: #eceff1; /* blue-gray 50 highlight */
}
ul.phone-country-selector > li.selected {
background-color: #cfd8dc; /* blue-gray 100 highlight */
}
ul.phone-country-selector .dial-code {
position: absolute;
right: 0.5rem;
color: #1e88e5;
font-weight: normal;
}
/*
Very wide monitor.
*/