gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(client): make language dropdown as wide as the nav (#43991)

Browse Source 
Co-authored-by: arun elanthamil <arun.elanthamil@superops.ai>
This commit is contained in:
Arun Et-008
2021-10-27 16:23:16 +05:30
committed by GitHub
parent 21b7a9ee4f
commit 1ca335794c
2 changed files with 21 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/Header/components/nav-links.tsx
View File

@ -189,7 +189,7 @@ export class NavLinks extends Component<NavLinksProps, {}> {
{t('footer.language')} {t('footer.language')}
</div> </div>
<div className='nav-link' key='language-dropdown'> <div className='nav-link dropdown-nav-link' key='language-dropdown'>
<select <select
className='nav-link-lang-dropdown' className='nav-link-lang-dropdown'
onChange={this.handleLanguageChange} onChange={this.handleLanguageChange}

20
client/src/components/Header/components/universal-nav.css
View File

@ -109,6 +109,16 @@
border: none; border: none;
} }
.dropdown-nav-link {
padding-left: 0;
padding-right: 0;
}
.dropdown-nav-link:hover .nav-link-lang-dropdown,
.dropdown-nav-link:active .nav-link-lang-dropdown {
background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
.nav-link:hover, .nav-link:hover,
.nav-link:active { .nav-link:active {
color: var(--theme-color); color: var(--theme-color);
@ -143,11 +153,21 @@
} }
.nav-link-lang-dropdown { .nav-link-lang-dropdown {
padding: 0 15px;
color: var(--gray-00); color: var(--gray-00);
background-color: var(--gray-90); background-color: var(--gray-90);
width: 100%; width: 100%;
border: none; border: none;
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');
background-size: 10px;
background-position: calc(100% - 15px) center;
background-repeat: no-repeat;
} }
.nav-link-lang-dropdown:focus { .nav-link-lang-dropdown:focus {
outline: none; outline: none;
} }