[KQL] Fixed styles of KQL textarea for the K8 theme (#96190)
* Fixed style of KQL textarea for K8 theme and some general heights and borders * Fix popover paddings
This commit is contained in:
parent
b670ef29ae
commit
76acef0c2c
|
@ -85,7 +85,7 @@ class FilterEditorUI extends Component<Props, State> {
|
||||||
public render() {
|
public render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<EuiPopoverTitle>
|
<EuiPopoverTitle paddingSize="m">
|
||||||
<EuiFlexGroup alignItems="baseline" responsive={false}>
|
<EuiFlexGroup alignItems="baseline" responsive={false}>
|
||||||
<EuiFlexItem>
|
<EuiFlexItem>
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
|
|
|
@ -161,7 +161,7 @@ class FilterOptionsUI extends Component<Props, State> {
|
||||||
panelPaddingSize="none"
|
panelPaddingSize="none"
|
||||||
repositionOnScroll
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
<EuiPopoverTitle>
|
<EuiPopoverTitle paddingSize="m">
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
id="data.filter.searchBar.changeAllFiltersTitle"
|
id="data.filter.searchBar.changeAllFiltersTitle"
|
||||||
defaultMessage="Change all filters"
|
defaultMessage="Change all filters"
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
// Uses the append style, but no bordering
|
// Uses the append style, but no bordering
|
||||||
.kqlQueryBar__languageSwitcherButton {
|
.kqlQueryBar__languageSwitcherButton {
|
||||||
border-right: none !important;
|
border-right: none !important;
|
||||||
|
border-left: $euiFormInputGroupBorder;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kbnQueryBar__textareaWrap {
|
.kbnQueryBar__textareaWrap {
|
||||||
|
@ -13,19 +14,31 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1 1 100%;
|
flex: 1 1 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
@include kbnThemeStyle('v8') {
|
||||||
|
background-color: $euiFormBackgroundColor;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.kbnQueryBar__textarea {
|
.kbnQueryBar__textarea {
|
||||||
z-index: $euiZContentMenu;
|
z-index: $euiZContentMenu;
|
||||||
resize: none !important; // When in the group, it will autosize
|
resize: none !important; // When in the group, it will autosize
|
||||||
height: $euiFormControlHeight;
|
height: $euiFormControlHeight - 2px;
|
||||||
// Unlike most inputs within layout control groups, the text area still needs a border
|
// Unlike most inputs within layout control groups, the text area still needs a border
|
||||||
// for multi-line content. These adjusts help it sit above the control groups
|
// for multi-line content. These adjusts help it sit above the control groups
|
||||||
// shadow to line up correctly.
|
// shadow to line up correctly.
|
||||||
padding: $euiSizeS;
|
padding: $euiSizeS;
|
||||||
padding-top: $euiSizeS + 3px;
|
|
||||||
box-shadow: 0 0 0 1px $euiFormBorderColor;
|
box-shadow: 0 0 0 1px $euiFormBorderColor;
|
||||||
|
|
||||||
|
@include kbnThemeStyle('v7') {
|
||||||
|
padding-top: $euiSizeS + 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include kbnThemeStyle('v8') {
|
||||||
|
border-radius: 0;
|
||||||
|
padding-bottom: $euiSizeS + 1px;
|
||||||
|
}
|
||||||
|
|
||||||
&:not(.kbnQueryBar__textarea--autoHeight):not(:invalid) {
|
&:not(.kbnQueryBar__textarea--autoHeight):not(:invalid) {
|
||||||
@include euiYScrollWithShadows;
|
@include euiYScrollWithShadows;
|
||||||
}
|
}
|
||||||
|
|
|
@ -96,7 +96,7 @@ export function QueryLanguageSwitcher({
|
||||||
/>
|
/>
|
||||||
</EuiPopoverTitle>
|
</EuiPopoverTitle>
|
||||||
<div style={{ width: '350px' }}>
|
<div style={{ width: '350px' }}>
|
||||||
<EuiText>
|
<EuiText size="s">
|
||||||
<p>
|
<p>
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
id="data.query.queryBar.syntaxOptionsDescription"
|
id="data.query.queryBar.syntaxOptionsDescription"
|
||||||
|
|
|
@ -202,7 +202,7 @@ export function SavedQueryManagementComponent({
|
||||||
className="kbnSavedQueryManagement__popover"
|
className="kbnSavedQueryManagement__popover"
|
||||||
data-test-subj="saved-query-management-popover"
|
data-test-subj="saved-query-management-popover"
|
||||||
>
|
>
|
||||||
<EuiPopoverTitle id={'savedQueryManagementPopoverTitle'}>
|
<EuiPopoverTitle paddingSize="m" id={'savedQueryManagementPopoverTitle'}>
|
||||||
{savedQueryPopoverTitleText}
|
{savedQueryPopoverTitleText}
|
||||||
</EuiPopoverTitle>
|
</EuiPopoverTitle>
|
||||||
{savedQueries.length > 0 ? (
|
{savedQueries.length > 0 ? (
|
||||||
|
@ -234,7 +234,7 @@ export function SavedQueryManagementComponent({
|
||||||
<EuiSpacer size="s" />
|
<EuiSpacer size="s" />
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)}
|
)}
|
||||||
<EuiPopoverFooter>
|
<EuiPopoverFooter paddingSize="m">
|
||||||
<EuiFlexGroup
|
<EuiFlexGroup
|
||||||
direction="rowReverse"
|
direction="rowReverse"
|
||||||
gutterSize="s"
|
gutterSize="s"
|
||||||
|
|
Loading…
Reference in a new issue