@activecollab/components/dist/esm/components/Tables/Styles.js

ActiveCollab Components

import styled, { css } from "styled-components";
import { BoxSizingStyle } from "../BoxSizingStyle";
import { FontStyle } from "../FontStyle";
export const StyledTableHead = styled.thead.withConfig({
  displayName: "Styles__StyledTableHead",
  componentId: "sc-e16t6w-0"
})(["", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, {
  "textAlign": "left",
  "textTransform": "uppercase"
}, {
  "fontSize": "0.6875rem",
  "fontWeight": "600",
  "color": "var(--color-theme-700)"
}, props => props.$headerVariant && props.$headerVariant === "primary" && css(["th{", "}tr{td:first-child,th:first-child{", "}}"], {
  "whiteSpace": "nowrap",
  "paddingBottom": "2rem",
  "paddingLeft": "1rem",
  "paddingRight": "1rem",
  "paddingTop": "0.5rem"
}, {
  "paddingLeft": "1.5rem"
}), props => props.$headerVariant && props.$headerVariant === "secondary" && css(["th{", "}tr{th{padding-bottom:8px;padding-left:16px;}}tr{th:last-child{padding-right:16px;}}"], {
  "whiteSpace": "nowrap"
}));
StyledTableHead.displayName = "StyledTableHead";
export const StyledTableBody = styled.tbody.withConfig({
  displayName: "Styles__StyledTableBody",
  componentId: "sc-e16t6w-1"
})(["", " ", " ", " td{", "}&:not(.c-table__grouped__head){td{", "}}a{", " &:hover{", "}}"], FontStyle, BoxSizingStyle, {
  "overflow": "hidden",
  "textOverflow": "ellipsis",
  "whiteSpace": "nowrap"
}, {
  "overflow": "hidden",
  "textOverflow": "ellipsis",
  "whiteSpace": "nowrap"
}, {
  "color": "var(--color-theme-700)"
}, {
  "color": "var(--color-primary)",
  "textDecorationLine": "none"
}, {
  "textDecorationLine": "underline"
});
StyledTableBody.displayName = "StyledTableBody";
export const StyledTableWrapper = styled.div.withConfig({
  displayName: "Styles__StyledTableWrapper",
  componentId: "sc-e16t6w-2"
})(["", " ", " ", " &:before{", " content:\"\";top:39px;z-index:-1;}"], FontStyle, BoxSizingStyle, {
  "marginLeft": "1rem",
  "marginRight": "1rem",
  "marginTop": "2rem",
  "overflowX": "auto",
  "overflowY": "hidden"
}, {
  "position": "absolute",
  "bottom": "0px",
  "left": "0px",
  "right": "0px",
  "borderRadius": "0.5rem",
  "backgroundColor": "var(--page-paper-main)",
  "--tw-shadow": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
  "--tw-shadow-colored": "0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color)",
  "boxShadow": "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)"
});
StyledTableWrapper.displayName = "StyledTableWrapper";
export const StyledTable = styled.table.withConfig({
  displayName: "Styles__StyledTable",
  componentId: "sc-e16t6w-3"
})(["", " border-spacing:0;", " tr th,", " tr td{&:last-child{", "}}td{", "}", ""], {
  "width": "100%",
  "padding": "0px",
  "paddingBottom": "1rem",
  "fontSize": "0.75rem",
  "lineHeight": "1rem"
}, StyledTableHead, StyledTableBody, {
  "textAlign": "right"
}, {
  "paddingLeft": "1rem",
  "paddingRight": "1rem",
  "paddingTop": "0.75rem",
  "paddingBottom": "0.75rem"
}, props => props.$striped && css(["", ":not(.c-table__grouped__head){tr:nth-child(odd){", "}}"], StyledTableBody, {
  "backgroundColor": "var(--color-theme-200)"
}));
StyledTable.displayName = "StyledTable";
export const StyledDataTable = styled.div.withConfig({
  displayName: "Styles__StyledDataTable",
  componentId: "sc-e16t6w-4"
})(["", " ", " &.c-table__collapsible{.c-table__head{tr{th{position:sticky;top:0;z-index:1;}}}}&.c-table__grouped{.c-table__head th{", " &:last-child{", "}}}&.c-data-table{position:relative;.c-table__head th{&:last-child{", "}}}.c-table__cell{", " &:hover{.c-table__icon{", "}}}.c-table__overlay{", " top:0px;border-top-left-radius:8px;border-top-right-radius:8px;background:rgba(0,0,0,0.02);.neon &{background:rgba(0,0,0,0.1);}z-index:5;}.c-table__icon-wrapper{", "}.c-table__label{", "}.c-table__icon{transform:translateY(1px);", " fill:var(--color-theme-900);&:hover{", "}}.c-table__icon--inactive{", "}.c-table__icon--active{", "}.c-table__icon--desc{transform:rotate(-180deg) scale(-1,1);}.c-table__grouped__head{", " > :first-child{", "}a:first-child{", "}}.c-table__head--hidden{", "}.c-table__collapse_icon--expanded{transition-duration:0.3s;", "}.c-table__collapse_icon--collapsed{transform:rotate(180deg);transition-duration:0.3s;", "}.c-table__head__icon-wrapper__icon{", " transform:translate(-24px,-5px);}&.c-table__collapsible{.c-table__group{.c-table__row:last-child .c-table__cell{border-bottom:1px solid var(--border-primary);}&:last-child{.c-table__row:last-child .c-table__cell{border-bottom:0;}}}.c-table__grouped__head{tr td{border-bottom:1px solid var(--border-primary);}.c-table__body__collapse td{border-bottom:0;}&.last{tr td{border-bottom:0 !important;}}}.c-table__grouped__head--expanded{tr:last-child td{border-bottom:0;}}}.c-table__collapse_body{tr{background-color:transparent !important;}td:last-child{", "}", "}.c-table__row{td:first-child{position:sticky;left:0;z-index:1;}&:nth-child(odd){td{", "}}&:nth-child(even){td{", "}}}.c-table__row{th:first-child{position:sticky;left:0;z-index:2 !important;}}&.c-table__collapsible .c-table__body{tr{td:first-child,th:first-child{", "}}}.c-table__body__icon{", " padding-left:0 !important;transform:translateY(8px);}&.padding-b-0{", "}.cursor-pointer{", "}.text-center{", "}.opacity-75{", "}.hidden{", "}"], FontStyle, BoxSizingStyle, {
  "paddingBottom": "1rem"
}, {
  "paddingRight": "0px"
}, {
  "paddingRight": "0px"
}, {
  "position": "relative"
}, {
  "opacity": "0.5"
}, {
  "pointerEvents": "none",
  "position": "absolute",
  "left": "0px",
  "width": "100%"
}, {
  "display": "inline-block",
  "userSelect": "none"
}, {
  "borderWidth": "0px",
  "borderStyle": "solid",
  "borderColor": "transparent"
}, {
  "marginLeft": "0.25rem"
}, {
  "opacity": "1"
}, {
  "opacity": "0"
}, {
  "opacity": "1"
}, {
  "fontWeight": "700"
}, {
  "color": "var(--color-theme-900)"
}, {
  "color": "var(--color-primary)"
}, {
  "pointerEvents": "none",
  "opacity": "0"
}, {
  "cursor": "pointer"
}, {
  "cursor": "pointer"
}, {
  "position": "absolute",
  "cursor": "pointer"
}, {
  "borderWidth": "0px"
}, {
  "position": "absolute"
}, {
  "backgroundColor": "var(--color-theme-200)"
}, {
  "backgroundColor": "var(--page-paper-main)"
}, {
  "paddingLeft": "1.5rem"
}, {
  "padding": "0px"
}, {
  "paddingBottom": "0px"
}, {
  "cursor": "pointer"
}, {
  "textAlign": "center"
}, {
  "opacity": "0.75"
}, {
  "display": "none"
});
StyledDataTable.displayName = "StyledDataTable";
//# sourceMappingURL=Styles.js.map