fix(css): transparent linear gradient not working in safari (#20086)
* fix(css): transparent linear gradient not working in safari * use emotion-rgba instead
This commit is contained in:
parent
f8ea7788a9
commit
ce01ce9e2f
|
|
@ -27,6 +27,7 @@ import {
|
|||
import Button from 'src/components/Button';
|
||||
import { isNullish } from 'src/utils/common';
|
||||
import { OPEN_FILTER_BAR_WIDTH } from 'src/dashboard/constants';
|
||||
import { rgba } from 'emotion-rgba';
|
||||
import { getFilterBarTestId } from '../index';
|
||||
|
||||
interface ActionButtonsProps {
|
||||
|
|
@ -53,7 +54,10 @@ const ActionButtonsContainer = styled.div`
|
|||
padding: ${theme.gridUnit * 4}px;
|
||||
padding-top: ${theme.gridUnit * 6}px;
|
||||
|
||||
background: linear-gradient(transparent, white 25%);
|
||||
background: linear-gradient(
|
||||
${rgba(theme.colors.grayscale.light5, 0)},
|
||||
${theme.colors.grayscale.light5} ${theme.opacity.mediumLight}
|
||||
);
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ import { ExplorePageState } from 'src/explore/reducers/getInitialState';
|
|||
import { ChartState } from 'src/explore/types';
|
||||
import { Tooltip } from 'src/components/Tooltip';
|
||||
|
||||
import { rgba } from 'emotion-rgba';
|
||||
import ControlRow from './ControlRow';
|
||||
import Control from './Control';
|
||||
import { ExploreAlert } from './ExploreAlert';
|
||||
|
|
@ -94,7 +95,7 @@ const actionButtonsContainerStyles = (theme: SupersetTheme) => css`
|
|||
padding: ${theme.gridUnit * 4}px;
|
||||
z-index: 999;
|
||||
background: linear-gradient(
|
||||
transparent,
|
||||
${rgba(theme.colors.grayscale.light5, 0)},
|
||||
${theme.colors.grayscale.light5} ${theme.opacity.mediumLight}
|
||||
);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue