UNPKG

@unicef-polymer/etools-unicef

Version:

eTools UNICEF library of reusable components

github.com/unicef-polymer/etools-unicef

unicef-polymer/etools-unicef

3 lines (2 loc) • 3.89 kB
1
2
3
export declare const dataTableStylesContent = "\n a {\n color: var(--list-primary-color, #0099ff);\n }\n\n #list {\n display: block;\n opacity: 1;\n transition: opacity 0.4s;\n background-color: var(--list-secondary-color, #ffffff);\n padding: 0;\n }\n\n #list.hidden {\n transition: none;\n opacity: 0;\n }\n\n *[slot=\"row-data\"] {\n margin: 4px 0px 4px 0 !important;\n }\n\n *[slot=\"row-data\"],\n *[slot=\"row-data-details\"] { \n display: flex;\n flex-direction: row;\n width: 100%;\n max-width: calc(100% - 28px);\n min-width: 100px; <!-- for truncated cells -->\n }\n\n etools-data-table-row[no-collapse] *[slot=\"row-data\"],\n etools-data-table-row[no-collapse] *[slot=\"row-data-details\"] {\n max-width: 100%;\n }\n\n *[slot=\"row-data\"] > *,\n *[slot=\"row-data-details\"] > * { \n padding-right: 8px !important;\n padding-left: 8px !important;\n }\n\n *[slot=\"row-data\"] .col-data {\n display: inline-flex;\n line-height: 24px;\n align-items: center;\n justify-content: flex-start;\n }\n\n *[slot=\"row-data\"] .truncate {\n display: inline-block;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-top: auto;\n margin-bottom: auto;\n }\n\n etools-data-table-column,\n *[slot=\"row-data\"] .col-data {\n box-sizing: border-box;\n }\n etools-data-table-column:last-child,\n *[slot=\"row-data\"] .col-data:last-child {\n <!-- padding-inline-end: 0; -->\n }\n .row-details-content {\n font-size: var(--etools-font-size-12, 12px);\n }\n .row-details-content .rdc-title {\n display: inline-block;\n width: 100%;\n color: var(--list-secondary-text-color, #757575);\n font-weight: bold;\n margin-bottom: 10px;\n }\n\n .row-details-content .rdc-title.inline {\n width: auto;\n margin: 0;\n margin-inline-end: 8px;\n }\n\n /* Mobile view CSS */\n etools-data-table-row[medium-resolution-layout] *[slot=\"row-data\"],\n etools-data-table-row[medium-resolution-layout] *[slot=\"row-data-details\"] {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap; \n box-sizing: border-box;\n }\n\n etools-data-table-row[medium-resolution-layout] *[slot=\"row-data\"] .col-data {\n display: flex;\n justify-content: flex-start;\n flex: 1 0 calc(50% - 16px);\n max-width: calc(50% - 16px);\n padding: 8px;\n box-sizing: border-box;\n }\n\n etools-data-table-row[medium-resolution-layout] *[slot=\"row-data\"] .truncate {\n display: flex;\n white-space: unset;\n overflow: unset;\n text-overflow: unset;\n }\n etools-data-table-row[low-resolution-layout] *[slot=\"row-data\"].row {\n margin-left: 6px !important;\n margin-right: 6px !important;\n }\n\n etools-data-table-row[low-resolution-layout] *[slot=\"row-data\"],\n etools-data-table-row[low-resolution-layout] *[slot=\"row-data-details\"] {\n display: block;\n max-width: 100%;\n box-sizing: border-box;\n }\n\n etools-data-table-row[low-resolution-layout] *[slot=\"row-data\"] .col-data,\n etools-data-table-row[low-resolution-layout] *[slot=\"row-data-details\"] > * {\n display: inline-block;\n width: 100%;\n max-width: 100%;\n padding: 8px 0;\n box-sizing: border-box;\n }\n\n etools-data-table-row[medium-resolution-layout] *[slot=\"row-data\"] .col-data:before,\n etools-data-table-row[low-resolution-layout] *[slot=\"row-data\"] .col-data:before {\n content: attr(data-col-header-label)\": \";\n color: var(--list-secondary-text-color, #757575);\n font-weight: bold;\n margin-inline-end: 8px;\n vertical-align: top;\n min-height: 24px;\n }\n @media (max-width: 576px) {\n *[slot=\"row-data\"] .truncate {\n white-space: normal;\n }\n }\n"; export declare const dataTableStylesLit: import("lit-html").TemplateResult<1>;