Merge pull request #2765 from jryans/dropdown-redesign
Tweak country dropdown for redesign
This commit is contained in:
commit
b0863768e4
3 changed files with 11 additions and 8 deletions
|
@ -80,6 +80,10 @@ limitations under the License.
|
||||||
background-color: $authpage-primary-color;
|
background-color: $authpage-primary-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mx_Dropdown {
|
||||||
|
color: $authpage-primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
.mx_Dropdown_arrow {
|
.mx_Dropdown_arrow {
|
||||||
background: $authpage-primary-color;
|
background: $authpage-primary-color;
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,6 +16,7 @@ limitations under the License.
|
||||||
|
|
||||||
.mx_Dropdown {
|
.mx_Dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
color: $primary-fg-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_Dropdown_disabled {
|
.mx_Dropdown_disabled {
|
||||||
|
@ -33,7 +34,7 @@ limitations under the License.
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_Dropdown_input:focus {
|
.mx_Dropdown_input:focus {
|
||||||
border-color: $accent-color;
|
border-color: $input-focused-border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Disable dropdown highlight on focus */
|
/* Disable dropdown highlight on focus */
|
||||||
|
@ -76,7 +77,9 @@ limitations under the License.
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
input.mx_Dropdown_option, input.mx_Dropdown_option:focus {
|
input.mx_Dropdown_option,
|
||||||
|
input.mx_Dropdown_option:focus {
|
||||||
|
font-weight: normal;
|
||||||
border: 0;
|
border: 0;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
|
@ -95,7 +98,7 @@ input.mx_Dropdown_option, input.mx_Dropdown_option:focus {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: 1px solid $accent-color;
|
border: 1px solid $input-focused-border-color;
|
||||||
background-color: $primary-bg-color;
|
background-color: $primary-bg-color;
|
||||||
max-height: 200px;
|
max-height: 200px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
@ -110,10 +113,6 @@ input.mx_Dropdown_option, input.mx_Dropdown_option:focus {
|
||||||
background-color: $focus-bg-color;
|
background-color: $focus-bg-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_Dropdown_menu {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_Dropdown_searchPrompt {
|
.mx_Dropdown_searchPrompt {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
|
|
|
@ -113,7 +113,7 @@ export default class CountryDropdown extends React.Component {
|
||||||
const options = displayedCountries.map((country) => {
|
const options = displayedCountries.map((country) => {
|
||||||
return <div className="mx_CountryDropdown_option" key={country.iso2}>
|
return <div className="mx_CountryDropdown_option" key={country.iso2}>
|
||||||
{ this._flagImgForIso2(country.iso2) }
|
{ this._flagImgForIso2(country.iso2) }
|
||||||
{ country.name } <span>(+{ country.prefix })</span>
|
{ country.name } (+{ country.prefix })
|
||||||
</div>;
|
</div>;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue