@activecollab/components
Version:
ActiveCollab Components
85 lines • 2.94 kB
JavaScript
import styled, { css } from "styled-components";
import { IconButton } from "../IconButton";
import { ArrowDownLongIcon, ArrowUpLongIcon, SortGeneralIcon } from "../Icons";
import { List, ListItem } from "../List";
import { ValueButton } from "../ValueButton";
export const StyledSortWrapper = styled.div.withConfig({
displayName: "Styles__StyledSortWrapper",
componentId: "sc-11r5ac9-0"
})(["", ";"], {
"width": "fit-content"
});
StyledSortWrapper.displayName = "StyledSortWrapper";
export const StyledValueButton = styled(ValueButton).withConfig({
displayName: "Styles__StyledValueButton",
componentId: "sc-11r5ac9-1"
})(["", ";"], {
"display": "none",
"alignItems": "center",
"@media (min-width: 768px)": {
"display": "flex"
}
});
StyledValueButton.displayName = "StyledValueButton";
export const StyledIconButton = styled(IconButton).withConfig({
displayName: "Styles__StyledIconButton",
componentId: "sc-11r5ac9-2"
})(["", ";"], {
"display": "flex",
"alignItems": "center",
":hover": {
"color": "var(--color-primary)"
},
"@media (min-width: 768px)": {
"display": "none"
}
});
StyledIconButton.displayName = "StyledIconButton";
export const StyledSortIcon = styled(SortGeneralIcon).withConfig({
displayName: "Styles__StyledSortIcon",
componentId: "sc-11r5ac9-3"
})(["", ";"], {
"marginTop": "0px"
});
StyledSortIcon.displayName = "StyledSortIcon";
export const StyledSortIconDown = styled(ArrowDownLongIcon).withConfig({
displayName: "Styles__StyledSortIconDown",
componentId: "sc-11r5ac9-4"
})(["", ";"], {
"flexShrink": "0"
});
StyledSortIconDown.displayName = "StyledSortIconDown";
export const StyledSortIconUp = styled(ArrowUpLongIcon).withConfig({
displayName: "Styles__StyledSortIconUp",
componentId: "sc-11r5ac9-5"
})(["", ";"], {
"flexShrink": "0"
});
StyledSortIconUp.displayName = "StyledSortIconUp";
export const StyledList = styled(List).withConfig({
displayName: "Styles__StyledList",
componentId: "sc-11r5ac9-6"
})(["", ";"], {
"paddingTop": "0.5rem",
"paddingBottom": "0.5rem"
});
StyledList.displayName = "StyledList";
export const StyledListItem = styled(ListItem).withConfig({
displayName: "Styles__StyledListItem",
componentId: "sc-11r5ac9-7"
})(["", ";svg{visibility:hidden;}&:hover svg{fill:var(--color-theme-500);visibility:visible;}", ""], {
"justifyContent": "space-between"
}, props => props.$active && css(["", ";svg{fill:var(--color-primary);visibility:visible;}&:hover svg{fill:var(--color-primary);visibility:visible;}"], {
"color": "var(--color-primary)"
}));
StyledListItem.displayName = "StyledListItem";
export const StyledListItemName = styled.span.withConfig({
displayName: "Styles__StyledListItemName",
componentId: "sc-11r5ac9-8"
})(["", ";"], {
"overflow": "hidden",
"textOverflow": "ellipsis",
"whiteSpace": "nowrap"
});
StyledListItemName.displayName = "StyledListItemName";
//# sourceMappingURL=Styles.js.map