framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
1 lines • 15.9 kB
CSS
:root{--f7-table-head-font-size:12px;--f7-table-body-font-size:14px;--f7-table-footer-font-size:12px;--f7-table-input-height:24px;--f7-table-input-font-size:14px;--f7-table-collapsible-cell-padding:16px;--f7-table-link-icon-only-icon-size:20px;--f7-table-head-bg-color:transparent;--f7-table-card-header-bg-color:transparent;--f7-table-card-header-height:64px;--f7-table-cell-padding-vertical:0px;--f7-table-sortable-icon-color:#000}:root .dark,:root.dark{--f7-table-sortable-icon-color:#fff;--f7-table-input-text-color:#fff}.ios{--f7-table-head-font-weight:600;--f7-table-head-cell-height:44px;--f7-table-head-icon-size:18px;--f7-table-body-cell-height:44px;--f7-table-cell-padding-horizontal:16px;--f7-table-edge-cell-padding-horizontal:16px;--f7-table-label-cell-padding-horizontal:16px;--f7-table-checkbox-cell-width:22px;--f7-table-title-font-size:17px;--f7-table-title-font-weight:600;--f7-table-footer-height:44px;--f7-table-head-text-color:rgba(0, 0, 0, 0.45);--f7-table-cell-border-color:rgba(0, 0, 0, 0.22);--f7-table-selected-row-bg-color:rgba(0, 0, 0, 0.03);--f7-table-footer-text-color:rgba(0, 0, 0, 0.45);--f7-table-input-text-color:#000}.ios .dark,.ios.dark{--f7-table-head-text-color:rgba(255, 255, 255, 0.55);--f7-table-cell-border-color:rgba(255, 255, 255, 0.15);--f7-table-footer-text-color:rgba(255, 255, 255, 0.55);--f7-table-selected-row-bg-color:rgba(255, 255, 255, 0.08)}.md{--f7-table-head-font-weight:500;--f7-table-head-cell-height:56px;--f7-table-head-icon-size:16px;--f7-table-body-cell-height:48px;--f7-table-cell-padding-horizontal:28px;--f7-table-edge-cell-padding-horizontal:24px;--f7-table-label-cell-padding-horizontal:24px;--f7-table-checkbox-cell-width:18px;--f7-table-title-font-size:20px;--f7-table-title-font-weight:400;--f7-table-footer-height:56px;--f7-table-actions-cell-link-color:rgba(0, 0, 0, 0.54);--f7-table-actions-link-color:rgba(0, 0, 0, 0.54);--f7-table-input-text-color:#212121}.md .dark,.md.dark{--f7-table-actions-cell-link-color:rgba(255, 255, 255, 0.54);--f7-table-actions-link-color:rgba(255, 255, 255, 0.54)}.md,.md .dark,.md [class*=color-]{--f7-table-head-text-color:var(--f7-md-on-surface-variant);--f7-table-footer-text-color:var(--f7-md-on-surface-variant);--f7-table-selected-row-bg-color:var(--f7-md-secondary-container);--f7-table-cell-border-color:var(--f7-md-outline)}.data-table{overflow-x:auto}.data-table table,table.data-table{width:100%;border:none;padding:0;margin:0;border-collapse:collapse;text-align:left}.data-table thead td,.data-table thead th{font-size:var(--f7-table-head-font-size);font-weight:var(--f7-table-head-font-weight);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:16px;height:var(--f7-table-head-cell-height);background-color:var(--f7-table-head-bg-color)}.data-table thead td:not(.sortable-cell-active),.data-table thead th:not(.sortable-cell-active){color:var(--f7-table-head-text-color)}.data-table thead i.f7-icons,.data-table thead i.icon,.data-table thead i.material-icons{vertical-align:top;font-size:var(--f7-table-head-icon-size)}.data-table tbody{font-size:var(--f7-table-body-font-size)}.data-table tbody td,.data-table tbody th{height:var(--f7-table-body-cell-height)}.data-table tbody tr.data-table-row-selected,.device-desktop .data-table tbody tr:hover{background:var(--f7-table-selected-row-bg-color)}.data-table tbody td:before,.data-table tbody th:before{content:'';position:absolute;background-color:var(--f7-table-cell-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.data-table td,.data-table th{--f7-table-cell-padding-left:var(--f7-table-cell-padding-horizontal);--f7-table-cell-padding-right:var(--f7-table-cell-padding-horizontal);padding-top:var(--f7-table-cell-padding-vertical);padding-bottom:var(--f7-table-cell-padding-vertical);padding-left:var(--f7-table-cell-padding-left);padding-right:var(--f7-table-cell-padding-right);position:relative;box-sizing:border-box}.data-table td:first-child,.data-table th:first-child{--f7-table-cell-padding-left:var(--f7-table-edge-cell-padding-horizontal)}.data-table td:last-child,.data-table th:last-child{--f7-table-cell-padding-right:var(--f7-table-edge-cell-padding-horizontal)}.data-table td.label-cell,.data-table th.label-cell{--f7-table-cell-padding-left:var(--f7-table-label-cell-padding-horizontal);--f7-table-cell-padding-right:var(--f7-table-label-cell-padding-horizontal)}.data-table td.numeric-cell,.data-table th.numeric-cell{text-align:right}.data-table td.checkbox-cell,.data-table th.checkbox-cell{overflow:visible;width:var(--f7-table-checkbox-cell-width)}.data-table td.checkbox-cell label+span,.data-table th.checkbox-cell label+span{margin-left:8px}.data-table td.checkbox-cell:first-child,.data-table th.checkbox-cell:first-child{padding-right:calc(var(--f7-table-cell-padding-right)/ 2)}.data-table td.checkbox-cell:first-child+td,.data-table td.checkbox-cell:first-child+th,.data-table th.checkbox-cell:first-child+td,.data-table th.checkbox-cell:first-child+th{padding-left:calc(var(--f7-table-cell-padding-left)/ 2)}.data-table td.checkbox-cell:last-child,.data-table th.checkbox-cell:last-child{padding-left:calc(var(--f7-table-cell-padding-left)/ 2)}.data-table td.actions-cell,.data-table th.actions-cell{text-align:right;white-space:nowrap}.data-table td.actions-cell a.link,.data-table th.actions-cell a.link{color:var(--f7-table-actions-cell-link-color,var(--f7-theme-color))}.card .data-table td a.icon-only,.card .data-table th a.icon-only,.card.data-table td a.icon-only,.card.data-table th a.icon-only,.data-table td a.icon-only,.data-table th a.icon-only{display:inline-block;vertical-align:middle;text-align:center;font-size:0;min-width:0}.card .data-table td a.icon-only i,.card .data-table th a.icon-only i,.card.data-table td a.icon-only i,.card.data-table th a.icon-only i,.data-table td a.icon-only i,.data-table th a.icon-only i{font-size:var(--f7-table-link-icon-only-icon-size);vertical-align:middle}.data-table .sortable-cell:not(.input-cell){cursor:pointer;position:relative}.data-table .sortable-cell.input-cell .table-head-label{cursor:pointer;position:relative}.data-table .sortable-cell.numeric-cell.input-cell>.table-head-label:before,.data-table .sortable-cell.numeric-cell:not(.input-cell):before,.data-table .sortable-cell:not(.numeric-cell).input-cell>.table-head-label:after,.data-table .sortable-cell:not(.numeric-cell):not(.input-cell):after{content:'arrow_bottom_md';font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px;display:inline-block;vertical-align:top;width:16px;height:16px;color:var(--f7-table-sortable-icon-color);font-size:13px;line-height:16px;transition-duration:.3s;transform:rotate(0);opacity:0}.device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:after,.device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:before,.device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:after,.device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:before{opacity:.54}.data-table .sortable-cell.sortable-cell-active .table-head-label:after,.data-table .sortable-cell.sortable-cell-active .table-head-label:before,.data-table .sortable-cell.sortable-cell-active:after,.data-table .sortable-cell.sortable-cell-active:before{opacity:.87}.data-table .sortable-cell.sortable-desc:after,.data-table .sortable-cell.sortable-desc:before,.data-table .table-head-label:after,.data-table .table-head-label:before{transform:rotate(180deg)}.card .data-table .card-footer,.card .data-table .card-header,.data-table.card .card-footer,.data-table.card .card-header{padding-left:var(--f7-table-edge-cell-padding-horizontal);padding-right:var(--f7-table-edge-cell-padding-horizontal)}.card .data-table .card-header,.data-table.card .card-header{min-height:var(--f7-table-card-header-height);background-color:var(--f7-table-card-header-bg-color)}.card .data-table .card-content,.data-table.card .card-content{overflow-x:auto}.card .data-table .card-footer,.data-table.card .card-footer{min-height:var(--f7-table-footer-height)}.data-table .data-table-title{font-size:var(--f7-table-title-font-size);font-weight:var(--f7-table-title-font-weight)}.data-table .data-table-actions,.data-table .data-table-links{display:flex}.data-table .data-table-links .button{min-width:64px}.data-table .data-table-actions{margin-left:auto;align-items:center}.data-table .data-table-actions a.link{color:var(--f7-table-actions-link-color,var(--f7-theme-color));min-width:0}.data-table .data-table-actions a.link.icon-only{line-height:1;justify-content:center;padding:0}.data-table .data-table-header,.data-table .data-table-header-selected{display:flex;justify-content:space-between;align-items:center;width:100%}.data-table .card-header>.data-table-header,.data-table .card-header>.data-table-header-selected{padding-top:var(--f7-card-header-padding-vertical);padding-bottom:var(--f7-card-header-padding-vertical);height:100%;margin-top:calc(-1 * var(--f7-card-header-padding-vertical));margin-bottom:calc(-1 * var(--f7-card-header-padding-vertical));min-height:var(--f7-table-card-header-height);padding-left:var(--f7-table-edge-cell-padding-horizontal);padding-right:var(--f7-table-edge-cell-padding-horizontal);margin-left:calc(-1 * var(--f7-table-edge-cell-padding-horizontal));margin-right:calc(-1 * var(--f7-table-edge-cell-padding-horizontal))}.data-table .data-table-header-selected{background:rgba(var(--f7-theme-color-rgb),.1);display:none}.data-table.data-table-has-checked .data-table-header{display:none}.data-table.data-table-has-checked .data-table-header-selected{display:flex}.data-table .data-table-title-selected{font-size:14px;color:var(--f7-theme-color)}.data-table .data-table-footer{display:flex;align-items:center;box-sizing:border-box;position:relative;font-size:var(--f7-table-footer-font-size);overflow:hidden;min-height:var(--f7-table-footer-height);color:var(--f7-table-footer-text-color);justify-content:flex-end}.data-table .data-table-footer:before{content:'';position:absolute;background-color:var(--f7-table-cell-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.data-table .data-table-pagination,.data-table .data-table-rows-select{display:flex;align-items:center}.data-table .input-cell{padding-top:8px;padding-bottom:8px;height:auto;vertical-align:top}.data-table .input-cell .table-head-label+.input{margin-top:4px}.data-table .input-cell .input{height:var(--f7-table-input-height)}.data-table .input-cell .input input,.data-table .input-cell .input select,.data-table .input-cell .input textarea{height:var(--f7-table-input-height);color:var(--f7-table-input-text-color);font-size:var(--f7-table-input-font-size)}@media (max-width:480px) and (orientation:portrait){.data-table.data-table-collapsible thead{display:none}.data-table.data-table-collapsible tbody,.data-table.data-table-collapsible td,.data-table.data-table-collapsible tr{display:block}.data-table.data-table-collapsible tr{position:relative}.data-table.data-table-collapsible tr:before{content:'';position:absolute;background-color:var(--f7-table-cell-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.data-table.data-table-collapsible tr:hover{background-color:inherit}.data-table.data-table-collapsible td{--f7-table-cell-padding-left:var(--f7-table-collapsible-cell-padding);--f7-table-cell-padding-right:var(--f7-table-collapsible-cell-padding);height:auto;min-height:var(--f7-table-body-cell-height);display:flex;align-content:center;align-items:center;justify-content:flex-start;text-align:left}.data-table.data-table-collapsible td:before{display:none}.data-table.data-table-collapsible td:not(.checkbox-cell):before{width:40%;display:block;content:attr(data-collapsible-title);position:relative;height:auto;background:0 0;transform:none;font-size:var(--f7-table-head-font-size);font-weight:var(--f7-table-head-font-weight);color:var(--f7-table-head-text-color);margin-right:16px;flex-shrink:0}.data-table.data-table-collapsible td.checkbox-cell{position:absolute;top:0;left:0}.data-table.data-table-collapsible td.checkbox-cell+td{padding-left:16px}.data-table.data-table-collapsible td.checkbox-cell~td{margin-left:32px}}.data-table .xsmall-landscape-only,.data-table .xsmall-only{display:none}@media (min-width:480px){.data-table .xsmall-only{display:table-cell}}@media (min-width:480px) and (orientation:landscape){.data-table .xsmall-landscape-only{display:table-cell}}.data-table .small-landscape-only,.data-table .small-only{display:none}@media (min-width:568px){.data-table .small-only{display:table-cell}}@media (min-width:568px) and (orientation:landscape){.data-table .small-landscape-only{display:table-cell}}.data-table .medium-landscape-only,.data-table .medium-only{display:none}@media (min-width:768px){.data-table .medium-only{display:table-cell}}@media (min-width:768px) and (orientation:landscape){.data-table .medium-landscape-only{display:table-cell}}.data-table .large-landscape-only,.data-table .large-only{display:none}@media (min-width:1024px){.data-table .large-only{display:table-cell}}@media (min-width:1024px) and (orientation:landscape){.data-table .large-landscape-only{display:table-cell}}.data-table .xlarge-landscape-only,.data-table .xlarge-only{display:none}@media (min-width:1200px){.data-table .xlarge-only{display:table-cell}}@media (min-width:1200px) and (orientation:landscape){.data-table .xlarge-landscape-only{display:table-cell}}.ios .data-table td.actions-cell a.link+a.link,.ios .data-table th.actions-cell a.link+a.link{margin-left:16px}.ios .sortable-cell:not(.numeric-cell):after{margin-left:5px}.ios .sortable-cell.numeric-cell:before{margin-right:5px}.ios .data-table-actions .button+.button,.ios .data-table-actions a.link+a.link,.ios .data-table-links .button+.button,.ios .data-table-links a.link+a.link{margin-left:16px}.ios .data-table-actions a.link.icon-only{width:44px;height:44px}.ios .data-table-pagination a.link,.ios .data-table-rows-select a.link{width:44px;height:44px}.ios .data-table-rows-select+.data-table-pagination{margin-left:30px}.ios .data-table-rows-select .input{margin-left:20px}.ios .data-table-pagination-label{margin-right:16px}.md .data-table td.actions-cell a.link+a.link,.md .data-table th.actions-cell a.link+a.link{margin-left:24px}.md .data-table td.actions-cell a.icon-only,.md .data-table th.actions-cell a.icon-only{width:24px;height:24px;line-height:24px}.md .sortable-cell:not(.numeric-cell):after{margin-left:8px}.md .sortable-cell.numeric-cell:before{margin-right:8px}.md .data-table-actions .button+.button,.md .data-table-actions a.link+a.link,.md .data-table-links .button+.button,.md .data-table-links a.link+a.link{margin-left:24px}.md .data-table-actions a.link.icon-only{width:24px;height:24px;overflow:visible}.md .data-table-actions a.link.icon-only.active-state{background:0 0}.md .data-table-pagination a.link,.md .data-table-rows-select a.link{width:48px;height:48px}.md .data-table-rows-select+.data-table-pagination{margin-left:32px}.md .data-table-rows-select .input{margin-left:24px}.md .data-table-pagination-label{margin-right:20px}.md .input-cell .input-clear-button{transform:scale(.8)}