github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-07 03:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1195 from prymitive/fix-input-border

Browse Source 
fix(ui): border overrides causes color flap on load
This commit is contained in:
Łukasz Mierzwa
2019-11-28 19:20:23 +00:00
committed by GitHub
parent 12ce90a35f f1c130fa7c
commit d2d2a24957
4 changed files with 13 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/Components/NavBar/FilterInput/History.js
View File

@@ -238,7 +238,7 @@ const History = observer(
<button
ref={ref}
onClick={this.collapse.toggle}
className="input-group-text border-left-0 border-right-0 border-top-0 border-light rounded-0 bg-transparent text-white cursor-pointer components-navbar-history px-2"
className="input-group-text border-0 rounded-0 bg-transparent text-white cursor-pointer components-navbar-history px-2"
type="button"
data-toggle="dropdown"
aria-haspopup="true"

8
ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
View File

@@ -2,9 +2,9 @@
exports[`<FilterInput /> matches snapshot on default render 1`] = `
"
<div class=\\"input-group w-100 mr-2\\">
<div class=\\"input-group w-100 mr-2 border-left-0 border-right-0 border-top-0 border border-light bg-transparent\\">
<div class=\\"input-group-prepend\\">
<span class=\\"input-group-text px-2 border-left-0 border-right-0 border-top-0 border-light rounded-0 bg-transparent text-white\\">
<span class=\\"input-group-text px-2 border-0 rounded-0 bg-transparent text-white\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -21,7 +21,7 @@ exports[`<FilterInput /> matches snapshot on default render 1`] = `
</svg>
</span>
</div>
<div class=\\"form-control components-filterinput border-left-0 border-right-0 border-top-0 border-light rounded-0 bg-transparent\\">
<div class=\\"form-control components-filterinput border-0 rounded-0 bg-transparent\\">
<div role=\\"combobox\\"
aria-haspopup=\\"listbox\\"
aria-owns=\\"react-autowhatever-1\\"
@@ -45,7 +45,7 @@ exports[`<FilterInput /> matches snapshot on default render 1`] = `
</div>
</div>
<div class=\\"input-group-append bg-transparent\\">
<button class=\\"input-group-text border-left-0 border-right-0 border-top-0 border-light rounded-0 bg-transparent text-white cursor-pointer components-navbar-history px-2\\"
<button class=\\"input-group-text border-0 rounded-0 bg-transparent text-white cursor-pointer components-navbar-history px-2\\"
type=\\"button\\"
data-toggle=\\"dropdown\\"
aria-haspopup=\\"true\\"

16
ui/src/Components/NavBar/FilterInput/index.js
View File

@@ -149,20 +149,18 @@ const FilterInput = observer(
onSubmit={this.onSubmit}
data-filters={alertStore.filters.values.map(f => f.raw).join(" ")}
>
<div className="input-group w-100 mr-2">
<div
className={`input-group w-100 mr-2 border-left-0 border-right-0 border-top-0 border border-light ${
this.inputStore.focused ? "bg-focused" : "bg-transparent"
}`}
>
<div className="input-group-prepend">
<span
className={`input-group-text px-2 border-left-0 border-right-0 border-top-0 border-light rounded-0 ${
this.inputStore.focused ? "bg-focused" : "bg-transparent"
} text-white`}
>
<span className="input-group-text px-2 border-0 rounded-0 bg-transparent text-white">
<FontAwesomeIcon icon={faSearch} />
</span>
</div>
<div
className={`form-control components-filterinput border-left-0 border-right-0 border-top-0 border-light rounded-0 ${
this.inputStore.focused ? "bg-focused" : "bg-transparent"
}`}
className="form-control components-filterinput border-0 rounded-0 bg-transparent"
onClick={event => {
this.onInputClick(this.inputStore.ref, event);
}}

4
ui/src/Styles/Components/FilterInput.scss
View File

@@ -27,8 +27,6 @@ input.components-filterinput-wrapper {
margin-bottom: 2px;
}
.form-control.bg-focused,
.input-group-text.bg-focused,
.input-group-append.bg-focused {
.bg-focused {
background-color: lighten($blue, 5%);
}