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:
Stephen Liu 2022-05-24 13:50:01 +08:00 committed by GitHub
parent f8ea7788a9
commit ce01ce9e2f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 2 deletions

View File

@ -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;

View File

@ -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}
);