mirror of
https://github.com/apache/superset.git
synced 2026-05-12 19:35:17 +00:00
feat: messing with the theme
This commit is contained in:
@@ -35,17 +35,22 @@ const DatasourceItemContainer = styled.div`
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: ${theme.gridUnit * 6}px;
|
||||
padding: 0 ${theme.gridUnit}px;
|
||||
height: ${theme.sizeUnit * 6}px;
|
||||
padding: 0 ${theme.sizeUnit}px;
|
||||
|
||||
// hack to make the drag preview image corners rounded
|
||||
transform: translate(0, 0);
|
||||
background-color: inherit;
|
||||
color: ${theme.colorText};
|
||||
background-color: ${theme.colorBgLayout};
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: ${theme.colorPrimaryBgHover};
|
||||
}
|
||||
|
||||
> div {
|
||||
min-width: 0;
|
||||
margin-right: ${theme.gridUnit * 2}px;
|
||||
margin-right: ${theme.sizeUnit * 2}px;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
@@ -65,7 +65,7 @@ const Button = styled.button`
|
||||
background: none;
|
||||
border: none;
|
||||
text-decoration: underline;
|
||||
color: ${({ theme }) => theme.colors.primary.dark1};
|
||||
color: ${({ theme }) => theme.colorPrimaryText};
|
||||
`;
|
||||
|
||||
const ButtonContainer = styled.div`
|
||||
@@ -77,11 +77,11 @@ const LabelWrapper = styled.div`
|
||||
${({ theme }) => css`
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: ${theme.typography.sizes.s}px;
|
||||
font-size: ${theme.fontSizeSM}px;
|
||||
background-color: ${theme.colors.grayscale.light4};
|
||||
margin: ${theme.gridUnit * 2}px 0;
|
||||
margin: ${theme.sizeUnit * 2}px 0;
|
||||
border-radius: 4px;
|
||||
padding: 0 ${theme.gridUnit}px;
|
||||
padding: 0 ${theme.sizeUnit}px;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
@@ -106,7 +106,7 @@ const LabelWrapper = styled.div`
|
||||
|
||||
.metric-option {
|
||||
& > svg {
|
||||
min-width: ${theme.gridUnit * 4}px;
|
||||
min-width: ${theme.sizeUnit * 4}px;
|
||||
}
|
||||
& > .option-label {
|
||||
overflow: hidden;
|
||||
@@ -128,7 +128,7 @@ const SectionHeaderButton = styled.button`
|
||||
|
||||
const SectionHeader = styled.span`
|
||||
${({ theme }) => `
|
||||
font-size: ${theme.typography.sizes.m}px;
|
||||
font-size: ${theme.fontSize}px;
|
||||
line-height: 1.3;
|
||||
`}
|
||||
`;
|
||||
@@ -136,9 +136,9 @@ const SectionHeader = styled.span`
|
||||
const Box = styled.div`
|
||||
${({ theme }) => `
|
||||
border: 1px ${theme.colors.grayscale.light4} solid;
|
||||
border-radius: ${theme.gridUnit}px;
|
||||
font-size: ${theme.typography.sizes.s}px;
|
||||
padding: ${theme.gridUnit}px;
|
||||
border-radius: ${theme.sizeUnit}px;
|
||||
font-size: ${theme.fontSizeSM}px;
|
||||
padding: ${theme.sizeUnit}px;
|
||||
color: ${theme.colors.grayscale.light1};
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -193,7 +193,7 @@ const DatasourcePanelItem: FC<Props> = ({ index, style, data }) => {
|
||||
<div
|
||||
style={style}
|
||||
css={css`
|
||||
padding: 0 ${theme.gridUnit * 4}px;
|
||||
padding: 0 ${theme.sizeUnit * 4}px;
|
||||
`}
|
||||
>
|
||||
{index === HEADER_LINE && (
|
||||
@@ -212,7 +212,7 @@ const DatasourcePanelItem: FC<Props> = ({ index, style, data }) => {
|
||||
<div
|
||||
css={css`
|
||||
display: flex;
|
||||
gap: ${theme.gridUnit * 2}px;
|
||||
gap: ${theme.sizeUnit * 2}px;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
`}
|
||||
|
||||
@@ -79,7 +79,6 @@ export interface Props {
|
||||
|
||||
const DatasourceContainer = styled.div`
|
||||
${({ theme }) => css`
|
||||
background-color: ${theme.colors.grayscale.light5};
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -89,23 +88,23 @@ const DatasourceContainer = styled.div`
|
||||
height: auto;
|
||||
}
|
||||
.field-selections {
|
||||
padding: 0 0 ${theme.gridUnit}px;
|
||||
padding: 0 0 ${theme.sizeUnit}px;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
.field-length {
|
||||
margin-bottom: ${theme.gridUnit * 2}px;
|
||||
font-size: ${theme.typography.sizes.s}px;
|
||||
margin-bottom: ${theme.sizeUnit * 2}px;
|
||||
font-size: ${theme.fontSizeSM}px;
|
||||
color: ${theme.colors.grayscale.light1};
|
||||
}
|
||||
.form-control.input-md {
|
||||
display: inline-flex;
|
||||
width: calc(100% - ${theme.gridUnit * 8}px);
|
||||
height: ${theme.gridUnit * 8}px;
|
||||
margin: ${theme.gridUnit * 2}px auto;
|
||||
width: calc(100% - ${theme.sizeUnit * 8}px);
|
||||
height: ${theme.sizeUnit * 8}px;
|
||||
margin: ${theme.sizeUnit * 2}px auto;
|
||||
}
|
||||
.type-label {
|
||||
font-size: ${theme.typography.sizes.s}px;
|
||||
font-size: ${theme.fontSizeSM}px;
|
||||
color: ${theme.colors.grayscale.base};
|
||||
}
|
||||
.Control {
|
||||
@@ -116,7 +115,7 @@ const DatasourceContainer = styled.div`
|
||||
|
||||
const StyledInfoboxWrapper = styled.div`
|
||||
${({ theme }) => css`
|
||||
margin: 0 ${theme.gridUnit * 2.5}px;
|
||||
margin: 0 ${theme.sizeUnit * 2.5}px;
|
||||
|
||||
span {
|
||||
text-decoration: underline;
|
||||
|
||||
Reference in New Issue
Block a user