mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-09-28 23:40:47 +00:00
1a6d427339
Summary: The sort and filter UI now has a more unified UI, with similar capabilities that are accessible from different parts of Grist. It's now also possible to pin individual filters to the filter bar, which replaces the old toggle for showing all filters in the filter bar. Test Plan: Various tests (browser, migration, project). Reviewers: jarek, dsagal Reviewed By: jarek, dsagal Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D3669
86 lines
1.8 KiB
TypeScript
86 lines
1.8 KiB
TypeScript
import {theme, vars} from 'app/client/ui2018/cssVars';
|
|
import {icon} from 'app/client/ui2018/icons';
|
|
import {styled} from 'grainjs';
|
|
|
|
export const cssIcon = styled(icon, `
|
|
flex: 0 0 auto;
|
|
--icon-color: ${theme.lightText};
|
|
`);
|
|
|
|
export const cssLabel = styled('div', `
|
|
color: ${theme.text};
|
|
text-transform: uppercase;
|
|
margin: 16px 16px 12px 16px;
|
|
font-size: ${vars.xsmallFontSize};
|
|
`);
|
|
|
|
export const cssHelp = styled('div', `
|
|
margin: -8px 16px 12px 16px;
|
|
font-style: italic;
|
|
font-size: ${vars.xsmallFontSize};
|
|
`);
|
|
|
|
export const cssRow = styled('div', `
|
|
display: flex;
|
|
margin: 8px 16px;
|
|
align-items: center;
|
|
color: ${theme.text};
|
|
&-top-space {
|
|
margin-top: 24px;
|
|
}
|
|
&-disabled {
|
|
color: ${theme.disabledText};
|
|
}
|
|
`);
|
|
|
|
export const cssSortFilterColumn = styled('div', `
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-grow: 1;
|
|
align-items: center;
|
|
color: ${theme.text};
|
|
background-color: ${theme.hover};
|
|
overflow: hidden;
|
|
border-radius: 4px;
|
|
padding: 4px 8px;
|
|
`);
|
|
|
|
export const cssBlockedCursor = styled('span', `
|
|
&, & * {
|
|
cursor: not-allowed !important;
|
|
}
|
|
`);
|
|
|
|
export const cssButtonRow = styled(cssRow, `
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
& > button {
|
|
margin-left: 16px;
|
|
}
|
|
`);
|
|
|
|
export const cssSeparator = styled('div', `
|
|
border-bottom: 1px solid ${theme.pagePanelsBorder};
|
|
margin-top: 16px;
|
|
`);
|
|
|
|
export const cssSaveButtonsRow = styled('div', `
|
|
margin: 16px 16px 12px 16px;
|
|
`);
|
|
|
|
export const cssPinButton = styled('div', `
|
|
cursor: pointer;
|
|
--icon-color: ${theme.controlSecondaryFg};
|
|
border-radius: ${vars.controlBorderRadius};
|
|
padding: 3px;
|
|
|
|
&-pinned {
|
|
background-color: ${theme.controlPrimaryBg};
|
|
--icon-color: ${theme.controlPrimaryFg};
|
|
}
|
|
|
|
&:not(&-pinned):hover {
|
|
background-color: ${theme.hover};
|
|
}
|
|
`);
|