maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[SIEM] Fix Timeline events styling (#53064)

Browse source
This commit is contained in:
patrykkopycinski 2019-12-16 18:06:16 +01:00 committed by GitHub
parent 6cef462c8b
commit 53be899154
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 59 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx
View file

@ -96,7 +96,7 @@ const ProviderContainer = styled.div<{ isDragging: boolean }>`
&,
& .euiBadge,
& .euiBadge__text {
cursor: move; //Fallback for IE11
cursor: move; /* Fallback for IE11 */
cursor: grab;
}
}

6
x-pack/legacy/plugins/siem/public/components/drag_and_drop/droppable_wrapper.tsx
View file

@ -49,7 +49,7 @@ const ReactDndDropTarget = styled.div<{ isDraggingOver: boolean; height: string
> div.timeline-drop-area {
background-color: ${rgba(props.theme.eui.euiColorSuccess, 0.2)};
.provider-item-filter-container div:first-child{
// Override dragNdrop beautiful so we do not have our droppable moving around for no good reason
/* Override dragNdrop beautiful so we do not have our droppable moving around for no good reason */
transform: none !important;
}
.drop-and-provider-timeline {
@ -68,7 +68,7 @@ const ReactDndDropTarget = styled.div<{ isDraggingOver: boolean; height: string
background-color: ${props.theme.eui.euiColorLightShade};
}
+ div {
// Override dragNdrop beautiful so we do not have our droppable moving around for no good reason
/* Override dragNdrop beautiful so we do not have our droppable moving around for no good reason */
display: none !important;
}
}
@ -79,7 +79,7 @@ const ReactDndDropTarget = styled.div<{ isDraggingOver: boolean; height: string
display: none;
}
& + div {
// Override dragNdrop beautiful so we do not have our droppable moving around for no good reason
/* Override dragNdrop beautiful so we do not have our droppable moving around for no good reason */
display: none !important;
}
}

6
x-pack/legacy/plugins/siem/public/components/embeddables/embedded_map.tsx
View file

@ -52,15 +52,15 @@ const EmbeddableMap = styled.div.attrs(() => ({
${({ maintainRatio }) =>
maintainRatio &&
css`
padding-top: calc(3 / 4 * 100%); //4:3 (standard) ratio
padding-top: calc(3 / 4 * 100%); /* 4:3 (standard) ratio */
position: relative;
@media only screen and (min-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) {
padding-top: calc(9 / 32 * 100%); //32:9 (ultra widescreen) ratio
padding-top: calc(9 / 32 * 100%); /* 32:9 (ultra widescreen) ratio */
}
@media only screen and (min-width: 1441px) and (min-height: 901px) {
padding-top: calc(9 / 21 * 100%); //21:9 (ultrawide) ratio
padding-top: calc(9 / 21 * 100%); /* 21:9 (ultrawide) ratio */
}
.embPanel {

2
x-pack/legacy/plugins/siem/public/components/empty_page/index.tsx
View file

@ -9,7 +9,7 @@ import React from 'react';
import styled from 'styled-components';
const EmptyPrompt = styled(EuiEmptyPrompt)`
align-self: center; // Corrects horizontal centering in IE11
align-self: center; /* Corrects horizontal centering in IE11 */
`;
EmptyPrompt.displayName = 'EmptyPrompt';

88
x-pack/legacy/plugins/siem/public/components/fields_browser/field_name.tsx
View file

@ -30,55 +30,55 @@ import * as i18n from './translations';
* The name of a (draggable) field
*/
export const FieldNameContainer = styled.span`
padding: 5px;
{
border-radius: 4px;
padding: 0 4px 0 8px;
position: relative;
border-radius: 4px;
padding: 0 4px 0 8px;
position: relative;
&::before {
background-image: linear-gradient(
135deg,
${({ theme }) => theme.eui.euiColorMediumShade} 25%,
transparent 25%
),
linear-gradient(-135deg, ${({ theme }) => theme.eui.euiColorMediumShade} 25%, transparent 25%),
linear-gradient(135deg, transparent 75%, ${({ theme }) => theme.eui.euiColorMediumShade} 75%),
linear-gradient(-135deg, transparent 75%, ${({ theme }) => theme.eui.euiColorMediumShade} 75%);
background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
background-size: 2px 2px;
bottom: 2px;
content: '';
display: block;
left: 2px;
position: absolute;
top: 2px;
width: 4px;
}
&:hover,
&:focus {
transition: background-color 0.7s ease;
background-color: #000;
color: #fff;
&::before {
background-image: linear-gradient(
135deg,
${({ theme }) => theme.eui.euiColorMediumShade} 25%,
background-image: linear-gradient(135deg, #fff 25%, transparent 25%),
linear-gradient(
-135deg,
${({ theme }) => theme.eui.euiColorLightestShade} 25%,
transparent 25%
),
linear-gradient(-135deg, ${({ theme }) =>
theme.eui.euiColorMediumShade} 25%, transparent 25%),
linear-gradient(135deg, transparent 75%, ${({ theme }) =>
theme.eui.euiColorMediumShade} 75%),
linear-gradient(-135deg, transparent 75%, ${({ theme }) =>
theme.eui.euiColorMediumShade} 75%);
background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
background-size: 2px 2px;
bottom: 2px;
content: '';
display: block;
left: 2px;
position: absolute;
top: 2px;
width: 4px;
}
&:hover,
&:focus {
transition: background-color 0.7s ease;
background-color: #000;
color: #fff;
&::before {
background-image: linear-gradient(
135deg,
#fff 25%,
transparent 25%
),
linear-gradient(-135deg, ${({ theme }) =>
theme.eui.euiColorLightestShade} 25%, transparent 25%),
linear-gradient(135deg, transparent 75%, ${({ theme }) =>
theme.eui.euiColorLightestShade} 75%),
linear-gradient(-135deg, transparent 75%, ${({ theme }) =>
theme.eui.euiColorLightestShade} 75%);
}
linear-gradient(
135deg,
transparent 75%,
${({ theme }) => theme.eui.euiColorLightestShade} 75%
),
linear-gradient(
-135deg,
transparent 75%,
${({ theme }) => theme.eui.euiColorLightestShade} 75%
);
}
}
`;
FieldNameContainer.displayName = 'FieldNameContainer';

4
x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/index.tsx
View file

@ -24,11 +24,11 @@ import { getIconHeaderColumns } from './icon_header_columns';
const BasicTable = styled(EuiBasicTable)`
.euiTableCellContent {
animation: none; //Prevents applying max-height from animation
animation: none; /* Prevents applying max-height from animation */
}
.euiTableRow-isExpandedRow .euiTableCellContent__text {
width: 100%; //Fixes collapsing nested flex content in IE11
width: 100%; /* Fixes collapsing nested flex content in IE11 */
}
`;
BasicTable.displayName = 'BasicTable';

1
x-pack/legacy/plugins/siem/public/components/page/index.tsx
View file

@ -97,7 +97,6 @@ export const FooterContainer = styled.div`
bottom: 0;
color: #666;
left: 0;
padding: 8px;
position: fixed;
text-align: left;
user-select: none;

8
x-pack/legacy/plugins/siem/public/components/timeline/styles.tsx
View file

@ -118,7 +118,7 @@ export const EventsTh = styled.div.attrs(({ className }) => ({
.siemEventsTable__thGroupData &:hover {
background-color: ${({ theme }) => theme.eui.euiTableHoverColor};
cursor: move; //Fallback for IE11
cursor: move; /* Fallback for IE11 */
cursor: grab;
}
`;
@ -129,11 +129,11 @@ export const EventsThContent = styled.div.attrs(({ className }) => ({
}))<{ textAlign?: string }>`
font-size: ${({ theme }) => theme.eui.euiFontSizeXS};
font-weight: ${({ theme }) => theme.eui.euiFontWeightSemiBold};
line-height: $({ theme }) =>theme.eui.euiLineHeight};
line-height: ${({ theme }) => theme.eui.euiLineHeight};
min-width: 0;
padding: ${({ theme }) => theme.eui.paddingSizes.xs};
text-align: ${({ textAlign }) => textAlign};
width: 100%; //Using width: 100% instead of flex: 1 and max-width: 100% for IE11
width: 100%; /* Using width: 100% instead of flex: 1 and max-width: 100% for IE11 */
`;
EventsThContent.displayName = 'EventsThContent';
@ -217,7 +217,7 @@ export const EventsTdContent = styled.div.attrs(({ className }) => ({
min-width: 0;
padding: ${({ theme }) => theme.eui.paddingSizes.xs};
text-align: ${({ textAlign }) => textAlign};
width: 100%; //Using width: 100% instead of flex: 1 and max-width: 100% for IE11
width: 100%; /* Using width: 100% instead of flex: 1 and max-width: 100% for IE11 */
`;
EventsTdContent.displayName = 'EventsTdContent';

2
x-pack/legacy/plugins/siem/public/pages/timelines/timelines_page.tsx
View file

@ -15,7 +15,7 @@ import { SpyRoute } from '../../utils/route/spy_routes';
import * as i18n from './translations';
const TimelinesContainer = styled.div`
width: 100%:
width: 100%;
`;
TimelinesContainer.displayName = 'TimelinesContainer';