UNPKG

@syncfusion/ej2-grids

Version:

Feature-rich JavaScript datagrid (datatable) control with built-in support for editing, filtering, grouping, paging, sorting, and exporting to Excel.

612 lines (578 loc) 16.4 kB
/* stylelint-disable property-no-vendor-prefix */ @-webkit-keyframes e-input-ripple { 100% { opacity: 0; -webkit-transform: scale(4); transform: scale(4); } } @keyframes e-input-ripple { 100% { opacity: 0; -webkit-transform: scale(4); transform: scale(4); } } @-webkit-keyframes slideTopUp { from { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } to { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } } @keyframes slideTopUp { from { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } to { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } } .e-ddl.e-control-wrapper .e-ddl-icon::before { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: -webkit-transform 300ms ease; transition: -webkit-transform 300ms ease; transition: transform 300ms ease; transition: transform 300ms ease, -webkit-transform 300ms ease; } .e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: -webkit-transform 300ms ease; transition: -webkit-transform 300ms ease; transition: transform 300ms ease; transition: transform 300ms ease, -webkit-transform 300ms ease; } .e-dropdownbase .e-list-item.e-active.e-hover { color: rgba(var(--color-sf-on-surface)); } .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active, .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover, .e-input-group:not(.e-disabled) .e-back-icon:active, .e-input-group:not(.e-disabled) .e-back-icon:hover, .e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:active, .e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:hover { background: rgba(var(--color-sf-on-surface), 0.08); } .e-input-group .e-ddl-icon:not(:active)::after { -webkit-animation: none; animation: none; } .e-ddl.e-popup { border: 0; -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); margin-top: 2px; } .e-popup.e-ddl .e-dropdownbase { min-height: 26px; border-radius: 4px; } .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon { margin: 0 6px; min-height: 30px; min-width: 30px; } .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon, .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon { min-height: 22px; min-width: 22px; } .e-input-group.e-ddl, .e-input-group.e-ddl .e-input, .e-input-group.e-ddl .e-ddl-icon { background: transparent; } .e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left), .e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) { border-bottom-width: 0; } .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon, .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon, .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon, .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon, .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon, .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon { margin: 4px; } .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter, .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter, .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter, .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter, .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter, .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter { padding: 4px 5px 4px 12px; } .e-ddl.e-popup.e-outline .e-filter-parent { padding: 4px 8px; } /* stylelint-disable property-no-vendor-prefix */ @-webkit-keyframes material-spinner-rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes material-spinner-rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes fabric-spinner-rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes fabric-spinner-rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .e-icon-check::before { content: "\e774"; } .e-excelfilter .e-icon-filter::before, .e-excelfilter .e-excl-filter-icon::before { content: "\e7f7"; } .e-excelfilter .e-excl-filter-icon.e-filtered::before { content: "\e72c"; } .e-excelfilter .e-search-icon::before, .e-excelfilter .e-ccsearch-icon::before { content: "\e754"; } .e-excelfilter .e-chkcancel-icon::before { content: "\e7e7"; } .e-excelfilter .e-sortascending::before { content: "\e7a3"; } .e-excelfilter .e-sortdescending::before { content: "\e7b6"; } /*! Excel-Filter layout */ .sf-grid .e-excelfilter.e-dialog .e-dlg-content { padding-left: 0; padding-right: 0; } .sf-grid .e-excelfilter .e-dlg-content { overflow: visible; padding: 0; background: unset; } .sf-grid .e-excelfilter .e-searchcontainer { padding: 14px; padding-top: 4px; padding-left: 8px; padding-right: 24px; } .sf-grid .e-excelfilter.e-rtl .e-searchcontainer { padding: 14px; padding-top: 4px; padding-left: 14px; padding-right: 0; } .sf-grid .e-excelfilter.e-rtl .e-checkbox-wrapper .e-frame + .e-label { margin-left: 0; margin-right: 8px; } .sf-grid .e-excelfilter .e-contextmenu-container.e-sfcontextmenu { display: inline-block; position: relative; width: 100%; } .sf-grid .e-excelfilter .e-contextmenu-container.e-sfcontextmenu .e-ul { position: absolute; } .sf-grid .e-excelfilter .e-contextmenu-container.e-sfcontextmenu .e-ul .e-menu-item .e-menu-icon { height: 26px; line-height: 26px; } .sf-grid .e-excelfilter .e-contextmenu-container.e-sfcontextmenu .e-ul .e-menu-item:not(.e-separator) { height: 36px; line-height: 36px; } .sf-grid .e-excelfilter .e-contextmenu-container.e-sfcontextmenu .e-ul .e-separator { height: auto; } .sf-grid .e-excelfilter .e-contextmenu-container ul .e-menu-item .e-caret { margin-right: 24px; } .sf-grid .e-excelfilter .e-searchbox { padding-left: 8px; } .sf-grid-dlg.e-xlflmenu .e-xlfl-radiodiv { width: unset; } .e-xlflmenu { min-height: 318px; } .e-xlflmenu .e-xlfl-dlgfields { font-size: 14px; padding-top: 12px; } .e-xlflmenu .e-xlfl-fieldset { font-size: 11px; padding-top: 12px; } .e-responsive-dialog .e-xlflmenu table.e-xlfl-table tr.e-xlfl-fields:nth-child(2) td.e-xlfl-optr, .e-responsive-dialog .e-xlflmenu table.e-xlfl-table tr.e-xlfl-fields:nth-child(2) td.e-xlfl-value { padding-top: 16px; } .e-xlflmenu table.e-xlfl-table tr.e-xlfl-fields:nth-child(2) td.e-xlfl-optr, .e-xlflmenu table.e-xlfl-table tr.e-xlfl-fields:nth-child(2) td.e-xlfl-value { padding-top: 0; } .e-xlflmenu .e-xlfl-optr, .e-xlflmenu .e-xlfl-value { padding-top: 26px; } .e-xlflmenu .e-xlfl-radio, .e-xlflmenu .e-xlfl-mtcase { padding-top: 20px; } .e-xlflmenu .e-xlfl-optr:first-child { padding-right: 11.25px; } .e-xlflmenu .e-xlfl-table { border-spacing: 0; table-layout: fixed; width: 100%; } .e-xlflmenu .e-radio + label .e-label { margin-top: 0; padding-left: 25px; padding-right: 9px; } .e-xlflmenu .e-xlfl-matchcasediv .e-checkbox-wrapper .e-frame + .e-label { max-width: none; } .e-xlflmenu .e-checkbox-wrapper .e-frame + .e-label { margin-bottom: 1px; margin-left: 6px; } .e-xlflmenu .e-checkbox-wrapper .e-frame { margin-bottom: 1px; } .e-xlflmenu .e-dlg-content { padding-bottom: 5px; } .e-xlflmenu .e-xlfl-radiodiv { width: 120px; } .e-xlflmenu .e-xlfl-matchcasediv { margin-left: 0; margin-right: 13px; } .e-xlfl-radio-or, .e-xlfl-matchcasediv { margin-left: 2px; } .e-emptyicon { opacity: 0; } .e-xlflmenu.e-rtl .e-xlfl-optr { padding-left: 11.25px; padding-right: 0; } .e-xlflmenu.e-rtl .e-radio + label .e-label { padding-left: 0; padding-right: 25px; } .e-xlflmenu.e-rtl .e-xlfl-radio-or { margin-left: 0; margin-right: 13px; } .e-excelfilter .e-checkboxlist { height: 200px; margin-top: 5px; min-height: 160px; overflow-y: auto; } .e-excelfilter .e-checkboxfiltertext { width: 150px; word-break: normal; } .e-responsive-dialog .e-excelfilter .e-checkboxfiltertext { width: 180px; } .e-excelfilter .e-chk-hidden { -moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */ height: 1px; opacity: 0; width: 1px; } .e-excelfilter .e-contextmenu-wrapper ul li, .e-excelfilter .e-contextmenu-container ul li { height: 36px; line-height: 36px; } .e-excelfilter .e-contextmenu-wrapper ul li .e-menu-icon, .e-excelfilter .e-contextmenu-container ul li .e-menu-icon { height: 36px; line-height: 36px; margin-right: 10px; } .e-excelfilter .e-contextmenu-wrapper ul .e-menu-item .e-caret { height: 36px; line-height: 36px; } .e-excelfilter .e-contextmenu-wrapper ul, .e-excelfilter .e-contextmenu-container ul:not(.e-ul) { border: 0; border-radius: 5px 5px 0 0; -webkit-box-shadow: none; box-shadow: none; max-width: 300px; padding-bottom: 4px; position: static; } .e-excelfilter .e-dlg-content { background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface)); background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); padding-top: 0; padding-top: 12px; } .e-excelfilter .e-searchbox, .e-excelfilter .e-contextmenu-wrapper, .e-excelfilter .e-contextmenu-wrapper ul { display: block; } .e-excelfilter .e-contextmenu-wrapper ul { padding-bottom: 4px; position: static; } .e-excelfilter .e-contextmenu-wrapper ul li .e-contextmenu-container ul li { height: 36px; line-height: 36px; } .e-excelfilter .e-contextmenu-wrapper ul .e-menu-item .e-caret { height: 36px; line-height: 36px; margin-right: 17px; } .e-excelfilter .e-contextmenu-wrapper ul li .e-menu-icon, .e-excelfilter .e-contextmenu-container ul li .e-menu-icon { height: 36px; line-height: 36px; margin-right: 10px; } .e-excelfilter.e-rtl .e-contextmenu-wrapper ul li .e-menu-icon { margin-right: 0; } .e-excelfilter.e-rtl .e-contextmenu-wrapper ul .e-menu-item .e-caret { margin-left: 14px; } .e-excelfilter .e-footer-content { border-style: solid; border-width: 1px 0 0; } .e-excelfilter .e-excel-menu { z-index: 1000; } .e-excelfilter .e-xlsel { border: 0 solid; position: absolute; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .e-excelfilter.e-dialog .e-dlg-content { padding-left: 8px; padding-right: 16px; } .e-excelfilter .e-ftrchk, .e-excelfilter .e-searchbox { padding-left: 8px; } .e-excelfilter.e-rtl .e-dlg-content { padding-left: 14px; padding-right: 8px; } .e-excelfilter.e-rtl .e-ftrchk, .e-excelfilter.e-rtl .e-searchbox { padding-left: 0; padding-right: 8px; } .e-ftrchk { padding-bottom: 8px; padding-top: 8px; } .e-excel-menu.e-contextmenu.e-menu-parent { max-height: 298px; overflow-y: auto; } /*! Excel-Filter theme */ .e-excelfilter .e-footer-content { border-color: rgba(var(--color-sf-on-surface-variant), 0.12); opacity: 1; } .e-excelfilter .e-filtered::before { color: rgba(var(--color-sf-primary)); } .e-excelfilter .e-dlg-content { padding-bottom: 10px; border-radius: 0; } li.e-separator.e-menu-item.e-excel-separator { margin-bottom: 0; margin-top: 0; } .e-xlsel { background-color: rgba(var(--color-sf-primary)); border-color: rgba(var(--color-sf-primary)); } /*! Excel-Filter bigger */ .e-bigger .e-xlflmenu.e-rtl .e-radio + label .e-label { padding-left: 0; padding-right: 25px; } .e-bigger.e-responsive-dialog .e-xlflmenu .e-xlfl-dlgfields, .e-bigger.e-responsive-dialog .e-xlflmenu .e-xlfl-fieldset { font-weight: 500; padding-top: 8px; } .e-bigger.e-responsive-dialog .e-xlflmenu .e-xlfl-optr:first-child { width: 70%; } .e-bigger.e-responsive-dialog .e-xlflmenu .e-xlfl-radio, .e-bigger.e-responsive-dialog .e-xlflmenu .e-xlfl-mtcase, .e-bigger.e-responsive-dialog .e-xlflmenu .e-xlfl-optr, .e-bigger.e-responsive-dialog .e-xlflmenu .e-xlfl-value { padding-top: 24px; } .e-bigger .e-xlflmenu { min-height: 362px; } .e-bigger .e-xlflmenu .e-xlfl-table { border-spacing: 0; width: 100%; } .e-bigger .e-xlflmenu .e-dlg-content { padding-bottom: 10px; } .e-bigger .e-xlflmenu .e-radio + label .e-label { padding-left: 27px; padding-right: 6px; } .e-bigger .e-xlflmenu .e-checkbox-wrapper .e-frame + .e-label { margin-left: 8px; } .e-bigger .e-xlflmenu .e-xlfl-radiodiv { width: 141px; } .e-bigger .e-xlflmenu .e-xlfl-radio-or, .e-bigger .e-xlflmenu .e-xlfl-matchcasediv { margin-left: 18px; } .e-bigger .e-xlflmenu .e-xlfl-optr:first-child { padding-right: 10px; } .e-bigger .e-xlflmenu.e-rtl .e-xlfl-optr { padding-right: 0; } .e-bigger .e-xlflmenu .e-xlfl-dlgfields { font-size: 16px; } .e-bigger .e-xlflmenu .e-xlfl-fieldset { font-size: 12px; padding-top: 22px; } .e-bigger .e-xlflmenu .e-xlfl-optr, .e-bigger .e-xlflmenu .e-xlfl-value { padding-top: 32px; } .e-bigger .e-xlflmenu .e-xlfl-radio, .e-bigger .e-xlflmenu .e-xlfl-mtcase { padding-top: 18px; } .e-bigger .e-excelfilter .e-xlflmenu, .e-excelfilter.e-bigger .e-xlflmenu { min-height: 362px; } .e-bigger .e-excelfilter .e-ftrchk, .e-excelfilter.e-bigger .e-ftrchk { padding-bottom: 9px; padding-top: 9px; } .e-bigger .e-excelfilter .e-contextmenu-wrapper ul li, .e-bigger .e-excelfilter .e-contextmenu-container ul li, .e-excelfilter.e-bigger .e-contextmenu-wrapper ul li, .e-excelfilter.e-bigger .e-contextmenu-container ul li { height: 40px; line-height: 40px; } .e-bigger .e-excelfilter .e-contextmenu-wrapper ul li .e-menu-icon, .e-bigger .e-excelfilter .e-contextmenu-container ul li .e-menu-icon, .e-excelfilter.e-bigger .e-contextmenu-wrapper ul li .e-menu-icon, .e-excelfilter.e-bigger .e-contextmenu-container ul li .e-menu-icon { height: 40px; line-height: 40px; margin-right: 13px; } .e-bigger .e-excelfilter .e-contextmenu-wrapper ul .e-menu-item .e-caret, .e-excelfilter.e-bigger .e-contextmenu-wrapper ul .e-menu-item .e-caret { height: 40px; line-height: 40px; font-size: 20px; margin-right: 19px; } .e-bigger .e-excelfilter.e-dialog .e-dlg-content, .e-excelfilter.e-bigger.e-dialog .e-dlg-content { padding-left: 7px; } .e-bigger .e-excelfilter .e-ftrchk, .e-bigger .e-excelfilter .e-searchbox, .e-excelfilter.e-bigger .e-ftrchk, .e-excelfilter.e-bigger .e-searchbox { padding-left: 9px; } .e-bigger .e-excelfilter.e-rtl .e-contextmenu-wrapper ul li .e-menu-icon, .e-excelfilter.e-bigger.e-rtl .e-contextmenu-wrapper ul li .e-menu-icon { margin-right: 0; } .e-bigger .e-excelfilter.e-rtl .e-contextmenu-wrapper ul .e-menu-item .e-caret, .e-excelfilter.e-bigger.e-rtl .e-contextmenu-wrapper ul .e-menu-item .e-caret { margin-left: 17px; } .e-bigger .e-excelfilter.e-rtl .e-dlg-content, .e-excelfilter.e-bigger.e-rtl .e-dlg-content { padding-left: 16px; padding-right: 7px; } .e-bigger .e-excelfilter.e-rtl .e-ftrchk, .e-bigger .e-excelfilter.e-rtl .e-searchbox, .e-excelfilter.e-bigger.e-rtl .e-ftrchk, .e-excelfilter.e-bigger.e-rtl .e-searchbox { padding-left: 0; padding-right: 9px; } .e-bigger .e-excel-menu.e-contextmenu.e-menu-parent { max-height: 355px; }