Skip to content

Commit

Permalink
fix: remove variables from styled component (#17228)
Browse files Browse the repository at this point in the history
* remove variables

* fix hovermenu styles
  • Loading branch information
pkdotson authored and AAfghahi committed Jan 10, 2022
1 parent 4309f7d commit 31f02a1
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 13 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,8 @@ const StyledDiv = styled.div`
/* A row within a column has inset hover menu */
.dragdroppable-column .dragdroppable-row .hover-menu--left {
left: -12px;
background: @lightest;
border: 1px solid @gray-light;
background: ${({ theme }) => theme.colors.grayscale.light5};
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
}
.dashboard-component-tabs {
Expand All @@ -86,8 +86,8 @@ const StyledDiv = styled.div`
.dragdroppable-column .dragdroppable-column .hover-menu--top,
.dashboard-component-tabs .dragdroppable-column .hover-menu--top {
top: -12px;
background: @lightest;
border: 1px solid @gray-light;
background: ${({ theme }) => theme.colors.grayscale.light5};
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
}
/* move Tabs hover menu to top near actual Tabs */
Expand Down
18 changes: 9 additions & 9 deletions superset-frontend/src/dashboard/components/menu/HoverMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,32 +30,32 @@ const HoverStyleOverrides = styled.div`
.hover-menu {
opacity: 0;
position: absolute;
z-index: @z-index-above-dashboard-charts;
font-size: @font-size-m;
z-index: 10;
font-size: ${({ theme }) => theme.typography.sizes.m};
}
.hover-menu--left {
width: 24px;
width: ${({ theme }) => theme.gridUnit * 6}px;
top: 50%;
transform: translate(0, -50%);
left: -28px;
padding: 8px 0;
left: ${({ theme }) => theme.gridUnit * -7}px;
padding: ${({ theme }) => theme.gridUnit * 2}px 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hover-menu--left > :nth-child(n):not(:only-child):not(:last-child) {
margin-bottom: 12px;
margin-bottom: ${({ theme }) => theme.gridUnit * 3}px;
}
.hover-menu--top {
height: 24px;
top: -24px;
height: ${({ theme }) => theme.gridUnit * 6}px;
top: ${({ theme }) => theme.gridUnit * -6}px;
left: 50%;
transform: translate(-50%);
padding: 0 8px;
padding: 0 ${({ theme }) => theme.gridUnit * 2}px;
display: flex;
flex-direction: row;
justify-content: center;
Expand Down

0 comments on commit 31f02a1

Please sign in to comment.