[superset] branch master updated: fix(css): transparent linear gradient not working in safari (#20086)

[st...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

stephenlyz pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new ce01ce9e2f fix(css): transparent linear gradient not working in safari (#20086)
ce01ce9e2f is described below

commit ce01ce9e2f6859b3435e6ffb5425d1c29144442c
Author: Stephen Liu <75...@qq.com>
AuthorDate: Tue May 24 13:50:01 2022 +0800

    fix(css): transparent linear gradient not working in safari (#20086)
    
    * fix(css): transparent linear gradient not working in safari
    
    * use emotion-rgba instead
---
 .../components/nativeFilters/FilterBar/ActionButtons/index.tsx      | 6 +++++-
 superset-frontend/src/explore/components/ControlPanelsContainer.tsx | 3 ++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx
index 55d4783a6e..d94885b1c9 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx
@@ -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;
 
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index 98d80275f6..ef9517e4dd 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -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}
   );