axui-datagrid/style.css

DataGrid, DataSheet for React

@-webkit-keyframes datagrid-spinner{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes datagrid-spinner{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.axui-datagrid{position:relative;background:#fff;overflow:hidden}.axui-datagrid:focus{outline:#eee solid 1px}.axui-datagrid:hover .axui-datagrid-scroll-bar,.axui-datagrid:focus .axui-datagrid-scroll-bar{background:#b9b9b9}.axui-datagrid:hover .axui-datagrid-scroller [data-scroll-track='vertical'],.axui-datagrid:focus .axui-datagrid-scroller [data-scroll-track='vertical']{background:rgba(220,220,220,0.7)}.axui-datagrid:hover .axui-datagrid-scroller [data-scroll-track='horizontal'],.axui-datagrid:focus .axui-datagrid-scroller [data-scroll-track='horizontal']{background:rgba(220,220,220,0.7)}.axui-datagrid:hover .axui-datagrid-scroller [data-scroll-arrow] [data-arrow],.axui-datagrid:focus .axui-datagrid-scroller [data-scroll-arrow] [data-arrow]{border-color:#b9b9b9}.axui-datagrid table{table-layout:fixed;border-collapse:separate;border-spacing:0;border:0 none;width:100%}.axui-datagrid table tr{border-bottom:0 none}.axui-datagrid table tr.hover{background:#e1eef8}.axui-datagrid table tr[data-grouping-tr='true']{background:#ffffe7}.axui-datagrid table tr[data-selected='true']{background:#e3f1ff}.axui-datagrid table tr[data-selected='true'] td[data-column-attr='rowSelector'],.axui-datagrid table tr[data-selected='true'] td[data-column-attr='lineNumber']{box-shadow:none}.axui-datagrid table tr[data-selected='true'] td[data-column-attr='rowSelector'] .axui-datagrid-check-box:after{opacity:1}.axui-datagrid table tr[data-disable-selection='true'] td[data-column-attr='rowSelector'] .axui-datagrid-check-box{cursor:not-allowed}.axui-datagrid table tr[data-disable-selection='true'] td[data-column-attr='rowSelector'] .axui-datagrid-check-box:after{opacity:0}.axui-datagrid table tr td.merged{background:#fff}.axui-datagrid table tr td{box-sizing:border-box;position:relative;padding:0;border:0 none;border-right:1px solid #ccc;border-bottom:1px solid #ccc}.axui-datagrid table tr td:last-child{border-right:none}.axui-datagrid table tr td.axui-datagrid-header-column{cursor:default}.axui-datagrid table tr td.axui-datagrid-header-column [data-filter]{position:absolute;right:4px;top:50%;width:14px;height:14px;margin-top:-7px;cursor:pointer;display:inline-block;border:1px solid #ccc;border-radius:3px;background:url("data:image/svg+xml;utf8, %3Csvg version=%221.1%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 12 12%22%3E%3Cpath d=%22M7%2C7l4-4V1H1v2l4%2C4v4l2-2V7z%22/%3E%3C/svg%3E") no-repeat center center #fff;background-size:8px;opacity:0}.axui-datagrid table tr td.axui-datagrid-header-column [data-filter='true']{opacity:0.7}.axui-datagrid table tr td.axui-datagrid-header-column:hover{background:#e1eef8}.axui-datagrid table tr td.axui-datagrid-header-column:hover [data-filter]{opacity:0.7}.axui-datagrid table tr td.axui-datagrid-header-column.selected{background-color:#f0f0f0;background-image:linear-gradient(to bottom, #f0f0f0, #e1e1e1)}.axui-datagrid table tr td.axui-datagrid-header-column.focused{box-shadow:none}.axui-datagrid table tr td.axui-datagrid-header-column.focused:before{content:'';display:block;position:absolute;top:0;left:50%;width:0;height:0;border-top:4px solid #0581f2;border-right:4px solid transparent;border-bottom:0 none;border-left:4px solid transparent;margin-left:-4px}.axui-datagrid table tr td.axui-datagrid-header-corner [data-span]{cursor:se-resize}.axui-datagrid table tr td.axui-datagrid-header-corner [data-span]:before{position:absolute;right:3px;bottom:3px;content:' ';display:block;width:0;height:0;border-bottom:solid 3px #222;border-right:solid 3px #222;border-left:solid 3px transparent;border-top:solid 3px transparent}.axui-datagrid table tr td.axui-datagrid-line-number [data-span]{cursor:e-resize}.axui-datagrid table tr td.axui-datagrid-line-number:hover{background:#e1eef8}.axui-datagrid table tr td.axui-datagrid-line-number.selected{background-color:#f2f2f2;background-image:linear-gradient(to right, #f2f2f2, #e1e1e1);box-shadow:none}.axui-datagrid table tr td.axui-datagrid-line-number.focused:before{content:'';display:block;position:absolute;top:50%;left:0;width:0;height:0;border-top:4px solid transparent;border-right:0 none;border-bottom:4px solid transparent;border-left:4px solid #0581f2;margin-top:-4px}.axui-datagrid table tr td.axui-datagrid-row-selector.focused{background:#f2f2f2}.axui-datagrid table tr td.selected{background:#e3f1ff}.axui-datagrid table tr td.focused{box-shadow:inset 0px 0px 1px 1px #0581f2;background:#fdfeff}.axui-datagrid table tr td.updated{background:#dff0ff;color:#444}.axui-datagrid table tr td.updated:before{content:' ';display:block;border-top:3px solid #444;border-right:3px solid #444;border-bottom:3px solid transparent;border-left:3px solid transparent;position:absolute;right:2px;top:2px}.axui-datagrid table tr td [data-span]{user-select:none;box-sizing:border-box;display:block;padding:3px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}.axui-datagrid table tr td [data-span][data-multiLine]{white-space:normal}.axui-datagrid table tr td [data-span][data-align='left']{text-align:left}.axui-datagrid table tr td [data-span][data-align='center']{text-align:center}.axui-datagrid table tr td [data-span][data-align='right']{text-align:right}.axui-datagrid table tr td [data-span] [data-resizer]{position:absolute;right:0;top:0;width:4px;height:100%;cursor:col-resize}.axui-datagrid table tr td [data-span] [data-resizer]:hover{background:#f30;opacity:0.5}.axui-datagrid table tr td [data-span] [data-sorter]{position:relative;font-size:10px;margin-right:14px;display:inline-block;background:#ccc;border-radius:2px;line-height:10px;padding:2px 2px}.axui-datagrid table tr td [data-span] [data-sorter][data-sorter-order='asc']:before{top:2px;right:-9px;position:absolute;content:' ';width:0;height:0;display:inline-block;border-left:3.6px solid transparent;border-right:3.6px solid transparent;border-bottom:4.5px solid #000;background:transparent;opacity:.8}.axui-datagrid table tr td [data-span] [data-sorter][data-sorter-order='asc']:after{display:none}.axui-datagrid table tr td [data-span] [data-sorter][data-sorter-order='desc']:before{display:none}.axui-datagrid table tr td [data-span] [data-sorter][data-sorter-order='desc']:after{bottom:2px;right:-9px;position:absolute;content:' ';width:0;height:0;display:inline-block;border-left:3.6px solid transparent;border-right:3.6px solid transparent;border-top:4.5px solid #000;background:transparent;opacity:.8}.axui-datagrid table tr td [data-span='rowSelector']{padding:0;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap;cursor:pointer}.axui-datagrid table tr td [data-inline-edit]{background-color:transparent;box-sizing:border-box;width:100%;height:100%;border:1px solid #0581f2;display:block;outline:none;padding:3px 5px;font-size:inherit}.axui-datagrid table tr td [data-span='checkbox-editor']{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;cursor:pointer}.axui-datagrid table tr td [data-span='checkbox-editor'] .axui-datagrid-check-box{flex:none}.axui-datagrid table tr td [data-span='checkbox-editor'] label{display:inline-block;padding-left:5px}.axui-datagrid table tr td [data-span='checkbox-editor'].disabled{opacity:0.5;filter:grayscale(100%)}.axui-datagrid table tr td .axui-datagrid-check-box{cursor:pointer;box-sizing:border-box;display:inline-block;position:relative;border:1px solid #ccc;border-radius:3px;background-color:#fff;background-image:linear-gradient(to bottom, #fff, #f0f0f0);height:100%;width:100%}.axui-datagrid table tr td .axui-datagrid-check-box:after{content:'';width:60%;height:40%;position:absolute;top:20%;right:20%;border:0.2em solid #3372ff;border-top:none;border-right:none;background:transparent;opacity:0;transform:rotate(-50deg)}.axui-datagrid table tr td .axui-datagrid-check-box[data-checked='true']:after{opacity:1}.axui-datagrid [data-panel]{position:absolute;box-sizing:border-box}.axui-datagrid [data-scroll-container]{position:absolute;box-sizing:border-box;overflow:hidden}.axui-datagrid-header{user-select:none;box-sizing:border-box;position:relative;overflow:hidden;background-color:#fff;background-image:linear-gradient(to bottom, #fff, #f0f0f0);border:0 none;border-bottom:1px solid #ccc;color:#222;z-index:10}.axui-datagrid-header table tr td{box-shadow:inset 1px 1px 0 0 #fff}.axui-datagrid-header [data-panel][data-panel='aside-header']{overflow:hidden;border-right:1px solid #ccc}.axui-datagrid-header [data-panel][data-panel='aside-header'] td{text-align:center}.axui-datagrid-header [data-panel][data-panel='left-header']:after{content:' ';display:block;position:absolute;border-right:1px solid #b3b3b3;top:0;right:0;height:100%}.axui-datagrid-header [data-panel][data-panel='header-scroll']{position:absolute;left:0;top:0}.axui-datagrid-header [data-column-resizer]{position:absolute;top:0;cursor:ew-resize}.axui-datagrid-header [data-column-resizer-track]{position:absolute;top:0;left:0;width:100%;height:100%}.axui-datagrid-header [data-column-resizing]{position:absolute;top:0;left:0;width:3px;height:100%;cursor:default;background:rgba(255,0,0,0.3);z-index:9}.axui-datagrid-body{box-sizing:border-box;position:relative;overflow:hidden}[data-panel='body-scroll'] tr,[data-panel='left-body-scroll'] tr,[data-panel='top-left-body-scroll'] tr,[data-panel='top-body-scroll'] tr{background-color:#fff}[data-panel='body-scroll'] tr.odded-line,[data-panel='left-body-scroll'] tr.odded-line,[data-panel='top-left-body-scroll'] tr.odded-line,[data-panel='top-body-scroll'] tr.odded-line{background-color:#f3f3f3}[data-panel='body-scroll'] tr.added-line,[data-panel='left-body-scroll'] tr.added-line,[data-panel='top-left-body-scroll'] tr.added-line,[data-panel='top-body-scroll'] tr.added-line{background-color:#fde894;color:#222}[data-panel='body-scroll'] tr.added-line td.focused,[data-panel='left-body-scroll'] tr.added-line td.focused,[data-panel='top-left-body-scroll'] tr.added-line td.focused,[data-panel='top-body-scroll'] tr.added-line td.focused{color:#222}[data-panel='body-scroll'] tr.deleted-line,[data-panel='left-body-scroll'] tr.deleted-line,[data-panel='top-left-body-scroll'] tr.deleted-line,[data-panel='top-body-scroll'] tr.deleted-line{background-color:#e6e6e6;color:#888}[data-panel='body-scroll'] tr.deleted-line td.focused,[data-panel='left-body-scroll'] tr.deleted-line td.focused,[data-panel='top-left-body-scroll'] tr.deleted-line td.focused,[data-panel='top-body-scroll'] tr.deleted-line td.focused{background-color:#e6e6e6;color:#888}[data-panel='body-scroll'] tr.error-line,[data-panel='left-body-scroll'] tr.error-line,[data-panel='top-left-body-scroll'] tr.error-line,[data-panel='top-body-scroll'] tr.error-line{background-color:#d8b6b6;color:#222}[data-panel='body-scroll'] tr.error-line td.focused,[data-panel='left-body-scroll'] tr.error-line td.focused,[data-panel='top-left-body-scroll'] tr.error-line td.focused,[data-panel='top-body-scroll'] tr.error-line td.focused{background-color:#e6e6e6;color:#222}[data-panel='top-aside-body-scroll'],[data-panel='aside-body-scroll'],[data-panel='bottom-aside-body-scroll']{background-color:#f2f2f2}[data-panel='top-aside-body-scroll'] table tr td,[data-panel='aside-body-scroll'] table tr td,[data-panel='bottom-aside-body-scroll'] table tr td{box-shadow:inset 1px 1px 0 0 #fff}[data-panel='top-aside-body-scroll'] table tr.added-line td,[data-panel='top-aside-body-scroll'] table tr.added-line td.axui-datagrid-line-number.selected,[data-panel='aside-body-scroll'] table tr.added-line td,[data-panel='aside-body-scroll'] table tr.added-line td.axui-datagrid-line-number.selected,[data-panel='bottom-aside-body-scroll'] table tr.added-line td,[data-panel='bottom-aside-body-scroll'] table tr.added-line td.axui-datagrid-line-number.selected{background-color:#fde894;box-shadow:none}[data-panel='top-aside-body-scroll'] table tr.updated-line td,[data-panel='top-aside-body-scroll'] table tr.updated-line td.axui-datagrid-line-number.selected,[data-panel='aside-body-scroll'] table tr.updated-line td,[data-panel='aside-body-scroll'] table tr.updated-line td.axui-datagrid-line-number.selected,[data-panel='bottom-aside-body-scroll'] table tr.updated-line td,[data-panel='bottom-aside-body-scroll'] table tr.updated-line td.axui-datagrid-line-number.selected{background-color:#dff0ff;box-shadow:none}[data-panel='top-aside-body-scroll'] table tr.deleted-line td,[data-panel='top-aside-body-scroll'] table tr.deleted-line td.axui-datagrid-line-number.selected,[data-panel='aside-body-scroll'] table tr.deleted-line td,[data-panel='aside-body-scroll'] table tr.deleted-line td.axui-datagrid-line-number.selected,[data-panel='bottom-aside-body-scroll'] table tr.deleted-line td,[data-panel='bottom-aside-body-scroll'] table tr.deleted-line td.axui-datagrid-line-number.selected{background-color:#e6e6e6;box-shadow:none}[data-panel='top-aside-body-scroll'] table tr.error-line td,[data-panel='top-aside-body-scroll'] table tr.error-line td.axui-datagrid-line-number.selected,[data-panel='aside-body-scroll'] table tr.error-line td,[data-panel='aside-body-scroll'] table tr.error-line td.axui-datagrid-line-number.selected,[data-panel='bottom-aside-body-scroll'] table tr.error-line td,[data-panel='bottom-aside-body-scroll'] table tr.error-line td.axui-datagrid-line-number.selected{background-color:#d8b6b6;background-image:linear-gradient(to right, #d8b6b6, #c69595);box-shadow:none}[data-panel='top-left-body-scroll']:after,[data-panel='left-body-scroll']:after{content:' ';display:block;position:absolute;border-right:1px solid #b3b3b3;top:0;right:0;height:100%}[data-scroll-container]{-webkit-transition:top 0.3s ease;transition:top 0.3s ease;z-index:2}[data-scroll-container='top-aside-body-scroll-container']:after,[data-scroll-container='top-left-body-scroll-container']:after,[data-scroll-container='top-body-scroll-container']:after{content:' ';display:block;position:absolute;border-bottom:1px solid #b3b3b3;bottom:0;left:0;width:100%}[data-scroll-container='bottom-aside-body-scroll-container'],[data-scroll-container='bottom-left-body-scroll-container'],[data-scroll-container='bottom-body-scroll-container']{background-color:#edf5ff}[data-scroll-container='bottom-aside-body-scroll-container']:after,[data-scroll-container='bottom-left-body-scroll-container']:after,[data-scroll-container='bottom-body-scroll-container']:after{content:' ';display:block;position:absolute;border-top:1px solid #b3b3b3;top:0;left:0;width:100%}[data-scroll-container='bottom-aside-body-scroll-container'] table tr td,[data-scroll-container='bottom-left-body-scroll-container'] table tr td,[data-scroll-container='bottom-body-scroll-container'] table tr td{border-bottom:0 none;border-top:1px solid #ccc}.axui-datagrid-page{position:absolute;bottom:0;left:0;width:100%;z-index:3;user-select:none;box-sizing:border-box;overflow:hidden;background-color:#ececec;background-image:linear-gradient(to bottom, #ececec, #ddd);border:0 none;border-top:1px solid #ccc;display:flex;justify-content:stretch;align-items:center}.axui-datagrid-page-status{padding:0 5px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:0.8em}.axui-datagrid-scroller{position:absolute;right:0;bottom:0;z-index:3}.axui-datagrid-scroller [data-scroll-track]{transition:background-color 300ms linear;box-sizing:border-box;position:absolute;right:0;bottom:0}.axui-datagrid-scroller [data-scroll-arrow]{position:absolute;box-sizing:border-box}.axui-datagrid-scroller [data-scroll]{box-sizing:border-box;position:relative}.axui-datagrid-scroller [data-scroll-arrow='up']{left:0;top:0}.axui-datagrid-scroller [data-scroll-arrow='up'] [data-arrow]{content:' ';display:block;position:absolute;left:0;top:0;width:0;height:0;border-style:solid;border-color:rgba(0,0,0,0);cursor:pointer}.axui-datagrid-scroller [data-scroll-arrow='up'] [data-arrow]:hover{border-color:#888}.axui-datagrid-scroller [data-scroll-arrow='down']{left:0;bottom:0}.axui-datagrid-scroller [data-scroll-arrow='down'] [data-arrow]{content:' ';display:block;position:absolute;left:0;top:0;width:0;height:0;border-style:solid;border-color:rgba(0,0,0,0);cursor:pointer}.axui-datagrid-scroller [data-scroll-arrow='down'] [data-arrow]:hover{border-color:#888}.axui-datagrid-scroller [data-scroll='vertical']{width:100%;height:100%;padding:0}.axui-datagrid-scroller [data-scroll-track='vertical']{background:rgba(220,220,220,0)}.axui-datagrid-scroller [data-scroll-track='horizontal']{border-radius:10px;background:rgba(220,220,220,0);box-shadow:none}.axui-datagrid-scroller [data-scroll-arrow='left']{left:0;top:0}.axui-datagrid-scroller [data-scroll-arrow='left'] [data-arrow]{content:' ';display:block;position:absolute;left:0;top:0;width:0;height:0;border-style:solid;border-color:rgba(0,0,0,0);cursor:pointer}.axui-datagrid-scroller [data-scroll-arrow='left'] [data-arrow]:hover{border-color:#888}.axui-datagrid-scroller [data-scroll-arrow='right']{right:0;top:0}.axui-datagrid-scroller [data-scroll-arrow='right'] [data-arrow]{content:' ';display:block;position:absolute;left:0;top:0;width:0;height:0;border-style:solid;border-color:rgba(0,0,0,0);cursor:pointer}.axui-datagrid-scroller [data-scroll-arrow='right'] [data-arrow]:hover{border-color:#888}.axui-datagrid-scroller [data-scroll='horizontal']{width:100%;height:100%;padding:0}.axui-datagrid-scroll-bar{transition:background-color 300ms linear;position:relative;top:0;left:0;box-sizing:border-box;border:0px solid #fff;border-radius:10px;width:100%;height:100%;background:rgba(0,0,0,0)}.axui-datagrid-scroll-bar:hover{border:0px solid #ccc;background:#888 !important}[data-scroll-track='horizontal'] .axui-datagrid-scroll-bar:before{content:'';display:block;height:200%;width:100%;transform:translateY(-25%)}[data-scroll-track='vertical'] .axui-datagrid-scroll-bar:before{content:'';display:block;height:100%;width:200%;transform:translateX(-25%)}.axui-datagrid-clip-board{position:absolute;z-index:-1;left:-100%;top:-100%;height:0;width:0}.axui-datagrid-loader,.axui-datagrid-body-loader{position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(255,255,255,0.85);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;user-select:none;-webkit-user-select:none}.axui-datagrid-loader [data-loader-spinner],.axui-datagrid-body-loader [data-loader-spinner]{position:relative;width:3em;height:3em;margin:0.3em}.axui-datagrid-loader [data-loader-spinner]:before,.axui-datagrid-body-loader [data-loader-spinner]:before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;border-radius:50%;border:0.3em solid rgba(0,0,0,0.1)}.axui-datagrid-loader [data-loader-spinner]:after,.axui-datagrid-body-loader [data-loader-spinner]:after{position:absolute;content:'';top:0;left:0;width:100%;height:100%;border-radius:50%;border-color:#767676 transparent transparent;border-style:solid;border-width:0.3em;-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent;-webkit-animation:datagrid-spinner 0.6s linear infinite;animation:datagrid-spinner 0.6s linear infinite}.axui-datagrid-loader [data-loader-text],.axui-datagrid-body-loader [data-loader-text]{margin:0.3em}.axui-datagrid-body-loader{top:auto;bottom:0;height:100px;z-index:1}.axui-datagrid-autofit-helper{position:absolute;left:0;top:0;opacity:0}.axui-datagrid-autofit-helper table{table-layout:auto;width:auto}.axui-datagrid-autofit-helper table tr td{white-space:nowrap;padding:3px}.axui-datagrid-select-dropdown{font-size:12px}.axui-datagrid .focused .ant-input,.axui-datagrid .focused .ant-input-number{box-shadow:inset 0px 0px 1px 1px inset 0px 0px 1px 1px #0581f2}.axui-datagrid .ant-input{height:23px;border:0 none;border-radius:0;font-size:12px;padding:2px 5px;background:transparent}.axui-datagrid .ant-calendar-picker-clear,.axui-datagrid .ant-calendar-picker-icon{right:5px}.axui-datagrid .ant-select{height:23px;font-size:12px}.axui-datagrid .ant-select-selection{background:transparent;border:0 none;border-radius:0}.axui-datagrid .ant-select-selection--single{height:23px}.axui-datagrid .ant-select-selection__rendered{line-height:23px;margin-left:5px;margin-right:5px}.axui-datagrid .ant-select-arrow{right:5px}.axui-datagrid .ant-input-number{height:23px;font-size:12px;line-height:1;border:0 none;border-radius:0}.axui-datagrid .ant-input-number-input{height:23px}.axui-datagrid .ant-input-number-handler-wrap{opacity:0.5;border-radius:0}.axui-datagrid .ant-checkbox-wrapper{padding:1px 5px 0 5px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;line-height:1;font-size:12px}.axui-datagrid .ant-checkbox-wrapper .ant-checkbox{top:auto}.axui-datagrid .ant-checkbox-wrapper .ant-checkbox+span{padding-left:3px;padding-right:3px}