import styled from '@emotion/styled'; import Panel from 'sentry/components/panels/panel'; import PanelHeader from 'sentry/components/panels/panelHeader'; import PanelItem from 'sentry/components/panels/panelItem'; import {space} from 'sentry/styles/space'; export const StyledPanel = styled(Panel)` margin-bottom: 0px; `; export const StyledPanelHeader = styled(PanelHeader)<{align: 'left' | 'right'}>` white-space: nowrap; justify-content: ${p => (p.align === 'left' ? 'flex-start' : 'flex-end')}; `; export const TracePanelContent = styled('div')` width: 100%; display: grid; grid-template-columns: 116px auto repeat(2, min-content) 85px 112px 66px; `; export const StyledPanelItem = styled(PanelItem)<{ align?: 'left' | 'center' | 'right'; overflow?: boolean; span?: number; }>` align-items: center; padding: ${space(1)} ${space(2)}; ${p => (p.align === 'left' ? 'justify-content: flex-start;' : null)} ${p => (p.align === 'right' ? 'justify-content: flex-end;' : null)} ${p => (p.overflow ? p.theme.overflowEllipsis : null)}; ${p => p.align === 'center' ? ` justify-content: space-around;` : p.align === 'left' || p.align === 'right' ? `text-align: ${p.align};` : undefined} ${p => p.span && `grid-column: auto / span ${p.span};`} white-space: nowrap; `; export const MoreMatchingSpans = styled(StyledPanelItem)` color: ${p => p.theme.gray300}; `; export const WrappingText = styled('div')` width: 100%; ${p => p.theme.overflowEllipsis}; `; export const StyledSpanPanelItem = styled(StyledPanelItem)` &:nth-child(10n + 1), &:nth-child(10n + 2), &:nth-child(10n + 3), &:nth-child(10n + 4), &:nth-child(10n + 5) { background-color: ${p => p.theme.backgroundSecondary}; } `; export const SpanTablePanelItem = styled(StyledPanelItem)` background-color: ${p => p.theme.gray100}; `; export const BreakdownPanelItem = styled(StyledPanelItem)<{highlightedSliceName: string}>` ${p => p.highlightedSliceName ? `--highlightedSlice-${p.highlightedSliceName}-opacity: 1.0; --highlightedSlice-${p.highlightedSliceName}-saturate: saturate(1.0) contrast(1.0); --highlightedSlice-${p.highlightedSliceName}-transform: translateY(0px); ` : null} ${p => p.highlightedSliceName ? ` --defaultSlice-opacity: 1.0; --defaultSlice-saturate: saturate(0.7) contrast(0.9) brightness(1.2); --defaultSlice-transform: translateY(0px); ` : ` --defaultSlice-opacity: 1.0; --defaultSlice-saturate: saturate(1.0) contrast(1.0); --defaultSlice-transform: translateY(0px); `} `; export const EmptyStateText = styled('div')<{ size: 'fontSizeExtraLarge' | 'fontSizeMedium'; }>` color: ${p => p.theme.gray300}; font-size: ${p => p.theme[p.size]}; padding-bottom: ${space(1)}; `; export const EmptyValueContainer = styled('span')` color: ${p => p.theme.gray300}; `; export const SpanPanelContent = styled('div')` width: 100%; display: grid; grid-template-columns: 100px auto repeat(1, min-content) 160px 85px; `;