mobile-number-form-element.css in Mobile Number 2.0.x
.mobile-number-field div.form-item {
display: inline-block;
margin: 0;
padding: 0;
}
div.mobile-number-field div.form-item {
vertical-align: bottom;
}
.mobile-number-field .form-type-textfield input {
width: 150px;
}
.mobile-number-field .local-number {
border-width: 0;
border-bottom: 1px solid #ccc;
height: 30px;
box-sizing: border-box;
position: relative;
z-index: 1;
margin: 0;
}
.mobile-number-field .mobile-number-flag {
box-sizing: border-box;
padding: 9px 0 0;
padding-left: 16px;
height: 11px;
background-image: url("../images/flags.png");
background-repeat: no-repeat;
background-color: transparent;
background-position: 16px -11px;
display: inline-block;
margin: 10px auto;
vertical-align: bottom;
}
.mobile-number-field .country-select {
height: 30px;
position: relative;
display: inline-block;
vertical-align: bottom;
border-bottom: 1px solid #ccc;
}
.mobile-number-field .country-select .prefix {
font-size: 12px;
display: inline-block;
vertical-align: bottom;
line-height: 30px;
box-sizing: border-box;
min-width: 43px;
font-family: Arial, sans-serif;
}
.mobile-number-field .country-select select {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
min-width: 100%;
}
.mobile-number-field .country-select .arrow {
top: 50%;
right: 1px;
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 4px solid #555;
display: inline-block;
margin: 13px 5px;
vertical-align: bottom;
}
.mobile-number-field .verification,
.mobile-number-field .send-button,
.mobile-number-field .verify-button,
.mobile-number-field .form-text {
vertical-align: bottom;
margin: 0;
position: relative;
z-index: 1;
}
.mobile-number-field .description {
margin: 5px 0;
}
.mobile-number-field .verification,
.mobile-number-field .send-button {
display: none;
}
.mobile-number-field .send-button.show {
display: inline;
}
.mobile-number-field .verification.show {
display: block;
}
.mobile-number-field div.verified {
display: none;
color: transparent;
overflow: hidden;
line-height: 30px;
background: transparent url('') no-repeat center center;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1MzmNZGAwAAABV0RVh0Q3JlYXRpb24gVGltZQAyLzE3LzA4IJyqWAAABBF0RVh0WE1MOmNvbS5hZG9iZS54bXAAPD94cGFja2V0IGJlZ2luPSIgICAiIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNC4xLWMwMzQgNDYuMjcyOTc2LCBTYXQgSmFuIDI3IDIwMDcgMjI6MTE6NDEgICAgICAgICI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnhhcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+CiAgICAgICAgIDx4YXA6Q3JlYXRvclRvb2w+QWRvYmUgRmlyZXdvcmtzIENTMzwveGFwOkNyZWF0b3JUb29sPgogICAgICAgICA8eGFwOkNyZWF0ZURhdGU+MjAwOC0wMi0xN1QwMjozNjo0NVo8L3hhcDpDcmVhdGVEYXRlPgogICAgICAgICA8eGFwOk1vZGlmeURhdGU+MjAwOS0wNS0yNVQwNTozMTo0Mlo8L3hhcDpNb2RpZnlEYXRlPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIj4KICAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9wbmc8L2RjOmZvcm1hdD4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgBAPLwwAAACRQTFRFAAAA////GLMBGNEAL9YAR9sAX+EAduYAjusApvAAvfUA1foAt17EgQAAAAJ0Uk5TAAB2k804AAAATElEQVQI12MQhAIGOAMC4AxFKINpE5ShtUoRyBNgYJo5CSiiocCg0QFUw1ReBEQgXWppamkKIAZTaGgQxBwVFwUIg8kIZrICmIFhOwBhvQxdcQFfoAAAAABJRU5ErkJggg==");
}
.form-item-fields-field-mobile-number-settings-edit-form-settings-countries select {
min-height: 150px;
}
.mobile-number-field .verified.show {
display: inline-block;
}
.mobile-number-field .verified span {
display: inline;
color: transparent;
overflow: hidden;
}
.mobile-number-field .verified.hide {
display: none;
}
File
css/mobile-number-form-element.css
View source
- .mobile-number-field div.form-item {
- display: inline-block;
- margin: 0;
- padding: 0;
- }
- div.mobile-number-field div.form-item {
- vertical-align: bottom;
- }
-
- .mobile-number-field .form-type-textfield input {
- width: 150px;
- }
-
- .mobile-number-field .local-number {
- border-width: 0;
- border-bottom: 1px solid #ccc;
- height: 30px;
- box-sizing: border-box;
- position: relative;
- z-index: 1;
- margin: 0;
- }
-
-
- .mobile-number-field .mobile-number-flag {
- box-sizing: border-box;
- padding: 9px 0 0;
- padding-left: 16px;
- height: 11px;
- background-image: url("../images/flags.png");
- background-repeat: no-repeat;
- background-color: transparent;
- background-position: 16px -11px;
- display: inline-block;
- margin: 10px auto;
- vertical-align: bottom;
- }
-
- .mobile-number-field .country-select {
- height: 30px;
- position: relative;
- display: inline-block;
- vertical-align: bottom;
- border-bottom: 1px solid #ccc;
- }
- .mobile-number-field .country-select .prefix {
- font-size: 12px;
- display: inline-block;
- vertical-align: bottom;
- line-height: 30px;
- box-sizing: border-box;
- min-width: 43px;
- font-family: Arial, sans-serif;
- }
-
- .mobile-number-field .country-select select {
- opacity: 0;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- min-width: 100%;
- }
-
- .mobile-number-field .country-select .arrow {
- top: 50%;
- right: 1px;
- width: 0;
- height: 0;
- border-left: 3px solid transparent;
- border-right: 3px solid transparent;
- border-top: 4px solid #555;
- display: inline-block;
- margin: 13px 5px;
- vertical-align: bottom;
- }
-
- .mobile-number-field .verification,
- .mobile-number-field .send-button,
- .mobile-number-field .verify-button,
- .mobile-number-field .form-text {
- vertical-align: bottom;
- margin: 0;
- position: relative;
- z-index: 1;
- }
- .mobile-number-field .description {
- margin: 5px 0;
- }
- .mobile-number-field .verification,
- .mobile-number-field .send-button {
- display: none;
- }
-
- .mobile-number-field .send-button.show {
- display: inline;
- }
- .mobile-number-field .verification.show {
- display: block;
- }
-
- .mobile-number-field div.verified {
- display: none;
- color: transparent;
- overflow: hidden;
- line-height: 30px;
- background: transparent url('') no-repeat center center;
- background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1MzmNZGAwAAABV0RVh0Q3JlYXRpb24gVGltZQAyLzE3LzA4IJyqWAAABBF0RVh0WE1MOmNvbS5hZG9iZS54bXAAPD94cGFja2V0IGJlZ2luPSIgICAiIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNC4xLWMwMzQgNDYuMjcyOTc2LCBTYXQgSmFuIDI3IDIwMDcgMjI6MTE6NDEgICAgICAgICI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnhhcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+CiAgICAgICAgIDx4YXA6Q3JlYXRvclRvb2w+QWRvYmUgRmlyZXdvcmtzIENTMzwveGFwOkNyZWF0b3JUb29sPgogICAgICAgICA8eGFwOkNyZWF0ZURhdGU+MjAwOC0wMi0xN1QwMjozNjo0NVo8L3hhcDpDcmVhdGVEYXRlPgogICAgICAgICA8eGFwOk1vZGlmeURhdGU+MjAwOS0wNS0yNVQwNTozMTo0Mlo8L3hhcDpNb2RpZnlEYXRlPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIj4KICAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9wbmc8L2RjOmZvcm1hdD4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgBAPLwwAAACRQTFRFAAAA////GLMBGNEAL9YAR9sAX+EAduYAjusApvAAvfUA1foAt17EgQAAAAJ0Uk5TAAB2k804AAAATElEQVQI12MQhAIGOAMC4AxFKINpE5ShtUoRyBNgYJo5CSiiocCg0QFUw1ReBEQgXWppamkKIAZTaGgQxBwVFwUIg8kIZrICmIFhOwBhvQxdcQFfoAAAAABJRU5ErkJggg==");
- }
-
- .form-item-fields-field-mobile-number-settings-edit-form-settings-countries select {
- min-height: 150px;
- }
-
- .mobile-number-field .verified.show {
- display: inline-block;
- }
-
- .mobile-number-field .verified span {
- display: inline;
- color: transparent;
- overflow: hidden;
- }
-
- .mobile-number-field .verified.hide {
- display: none;
- }