app/javascript/components/SweetPhoneInput/SweetPhoneInput.scss
.SweetPhoneInput__root {
margin: 0.5rem -1rem;
padding: 0.5rem 1rem;
/* debug
background-color: rgba(255, 255, 0, 0.3);
border-radius: 5px;
border: 1px solid rgba(250, 250, 0, 0.3);
*/
.SweetPhoneInput__title {
margin: 0.5em 1em;
color: #555;
}
.SweetPhoneInput {
display: flex;
align-items: stretch;
background: white;
border: 2px solid #ccc;
border-radius: 2px;
.SweetPhoneInput__phone-number,
.SweetPhoneInput__country-list {
flex-grow: 1;
}
.SweetPhoneInput__phone-number {
.SweetPhoneInput__phone-number-input {
// FIXME: remove !important;
// remove the #call-tool-component
// styling in sou-assets to fix this
border: none !important;
}
}
.SweetPhoneInput__flag-container {
cursor: pointer;
padding: 0.5em 0.5em 0.5em 1em;
display: flex;
align-items: center;
&:hover {
background-color: #eee;
}
}
}
}
.SweetPhoneInput__selected-code {
min-width: 40px;
color: #bbb;
-webkit-appearance: none;
border-radius: 0;
}
.SweetPhoneInput__select-country {
display: none;
-webkit-appearance: none;
border-radius: 0;
}
.has-error .SweetPhoneInput {
border: 2px solid #f8492e;
}
.selecting-country {
.SweetPhoneInput {
border: 2px solid #00c0cf;
-webkit-appearance: none;
border-radius: 0;
.SweetPhoneInput__phone-number {
display: none;
}
.SweetPhoneInput__select-country {
display: block;
margin-bottom: -1px;
margin-right: -2px;
-webkit-appearance: none;
border-radius: 0;
// Country select dropdown overrides
// FIXME (remove stricter CSS rules)
.Select.is-focused .Select-control,
.Select .Select-control {
background: transparent !important;
border: none !important;
-webkit-appearance: none;
border-radius: 0;
}
}
.SweetPhoneInput__country-list {
display: block;
position: absolute;
background: white;
min-height: 100px;
max-height: 400px;
overflow: scroll;
width: 90%;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
}
}
}