Skip to content

Commit

Permalink
fix(css): transparent linear gradient not working in safari (#20086)
Browse files Browse the repository at this point in the history
* fix(css): transparent linear gradient not working in safari

* use emotion-rgba instead
  • Loading branch information
stephenLYZ authored May 24, 2022
1 parent f8ea778 commit ce01ce9
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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}
);
Expand Down

0 comments on commit ce01ce9

Please sign in to comment.