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

fix: adjust nav focus (#37318)

Browse Source 
* fix: adjust nav focus

* fix: clean up
This commit is contained in:
Ahmad Abdolsaheb
2019-10-16 01:26:19 +03:00
committed by mrugesh
parent ef68676576
commit 8e07bbb7a0
2 changed files with 23 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/components/Header/components/universalNav.css
View File

@ -83,6 +83,7 @@
color: var(--gray-00); color: var(--gray-00);
opacity: 1; opacity: 1;
white-space: nowrap; white-space: nowrap;
height: 38px;
} }
.nav-list li:hover { .nav-list li:hover {
@ -92,7 +93,12 @@
.nav-list li a:hover { .nav-list li a:hover {
color: var(--theme-color); color: var(--theme-color);
text-decoration: none; text-decoration: none;
background: var(--gray-00); background: white;
}
.nav-list li a:focus {
background: var(--theme-color);
color: white;
} }
.universal-nav-right { .universal-nav-right {
@ -116,6 +122,12 @@
height: auto; height: auto;
} }
.toggle-button-nav:hover {
background-color: var(--theme-color);
color: var(--gray-00);
border: 1px solid var(--gray-00);
}
@media (max-width: 265px) { @media (max-width: 265px) {
.nav-list li a { .nav-list li a {
width: 50vw; width: 50vw;
@ -158,19 +170,28 @@
.expand-nav { .expand-nav {
min-height: calc(3 * var(--header-height)); min-height: calc(3 * var(--header-height));
} }
.reverse-toggle-color { .reverse-toggle-color {
background-color: var(--gray-00); background-color: var(--gray-00);
color: var(--theme-color); color: var(--theme-color);
} }
.reverse-toggle-color:hover {
background-color: var(--gray-00);
color: var(--theme-color);
}
.universal-nav-left form { .universal-nav-left form {
display: none; display: none;
} }
.fcc_searchBar .ais-SearchBox-form { .fcc_searchBar .ais-SearchBox-form {
display: flex; display: flex;
position: absolute; position: absolute;
top: var(--header-height); top: var(--header-height);
left: 15px; left: 15px;
} }
#universal-nav-logo { #universal-nav-logo {
display: flex; display: flex;
position: absolute; position: absolute;

3
client/src/components/search/searchBar/searchbar.css
View File

@ -18,8 +18,8 @@
padding: 1px 10px 1px 30px; padding: 1px 10px 1px 30px;
font-size: 18px; font-size: 18px;
display: inline-block; display: inline-block;
width: calc(100vw - 10px);
margin-top: 6px; margin-top: 6px;
height: 26px;
} }
.fcc_searchBar .ais-SearchBox-input, .fcc_searchBar .ais-SearchBox-input,
@ -125,7 +125,6 @@ and arrow keys */
@media (min-width: 800px) { @media (min-width: 800px) {
.ais-SearchBox-input { .ais-SearchBox-input {
width: 100%; width: 100%;
margin-top: 6px;
max-width: 500px; max-width: 500px;
} }
.fcc_searchBar { .fcc_searchBar {