fix: remove variables from styled component (#17228)

* remove variables

* fix hovermenu styles
This commit is contained in:
Phillip Kelley-Dotson
2021-11-02 16:25:48 -07:00
committed by GitHub
parent 7c6d6f47bf
commit 9a4ab1026e
2 changed files with 13 additions and 13 deletions

View File

@@ -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 {
@@ -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 */

View File

@@ -30,16 +30,16 @@ 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;
@@ -47,15 +47,15 @@ const HoverStyleOverrides = styled.div`
}
.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;