[SIEM] Fix Timeline events styling (#53064)
This commit is contained in:
parent
6cef462c8b
commit
53be899154
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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';
|
||||
|
||||
|
|
|
@ -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';
|
||||
|
||||
|
|
Loading…
Reference in a new issue