gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): change the button style in searchbar (#51328)

Browse Source 
Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Co-authored-by: Muhammed Mustafa <MuhammedElruby@gmail.com>
This commit is contained in:
Manabu Matsumoto
2023-10-04 02:27:28 +09:00
committed by GitHub
parent bf487f06ec
commit 53000a1420
2 changed files with 29 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/search/searchBar/searchbar-base.css
-5
View File
@@ -620,8 +620,6 @@ a[class^='ais-'] {
-moz-appearance: none;
appearance: none;
z-index: 100;
width: 20px;
height: 20px;
}
.ais-SearchBox-reset {
margin-inline-start: 10px;
@@ -642,9 +640,6 @@ a[class^='ais-'] {
width: 16px;
height: 16px;
}
.ais-SearchBox-submitIcon > path {
fill: var(--gray-15);
}
.ais-Hits {
position: absolute;
left: 0;
client/src/components/search/searchBar/searchbar.css
+29 -28
View File
@@ -19,33 +19,60 @@
color: var(--gray-00);
}
.fcc_search_wrapper {
position: relative;
}
.ais-SearchBox-loadingIndicator {
display: none;
}
.fcc_searchBar .ais-SearchBox-form {
align-content: center;
background-color: var(--gray-75);
display: grid;
gap: 0.25em;
grid-template-areas: 'submit input reset';
grid-template-columns: 26px auto 36px;
margin-bottom: 0;
}
.ais-SearchBox-input {
grid-area: input;
padding-block: 0;
padding-inline-start: 5px;
font-size: 18px;
display: inline-block;
height: 26px;
height: var(--header-element-size);
}
.ais-SearchBox-submit,
.ais-SearchBox-reset {
height: 26px;
height: var(--header-element-size);
width: 26px;
background-color: var(--gray-75);
}
.ais-SearchBox-submit {
grid-area: submit;
padding-inline: 3px;
}
.ais-SearchBox-reset {
grid-area: reset;
padding-block: 0 2px;
}
.ais-SearchBox-form button:hover {
background-color: rgba(255, 255, 255, 0.2);
}
:is(.ais-SearchBox-form button:hover)
:is(.ais-SearchBox-submitIcon, .ais-SearchBox-resetIcon)
path {
fill: var(--gray-00);
}
.fcc_searchBar .ais-SearchBox-input,
.fcc_searchBar .ais-Hits {
z-index: 100;
@@ -130,32 +157,6 @@ and arrow keys */
font-weight: 300;
}
.fcc_searchBar .ais-SearchBox-form {
align-content: center;
background-color: var(--gray-75);
display: grid;
gap: 0.25em;
grid-template-areas: 'submit input reset';
grid-template-columns: 26px auto 36px;
margin-bottom: 0;
}
.fcc_search_wrapper {
position: relative;
}
.ais-SearchBox-input {
grid-area: input;
}
.ais-SearchBox-submit {
grid-area: submit;
}
.ais-SearchBox-reset {
grid-area: reset;
}
@media (min-width: 980px) {
.ais-SearchBox-input {
width: 100%;