@opentiny/vue-theme/grid-toolbar/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-grid-toolbar-modal .tiny-grid-modal__box .tiny-grid-modal__body{padding:0 0 10px 0}.tiny-grid-toolbar-modal .tiny-grid-modal__content{position:relative}.tiny-grid-toolbar-modal .tiny-grid-modal__header{border:none}.tiny-grid-toolbar-modal .tiny-grid-modal__header .tiny-grid-modal__close-btn{height:18px;width:18px}.tiny-grid-toolbar-modal .tiny-grid-modal__close-btn,.tiny-grid-toolbar-modal .tiny-grid-modal__zoom-btn{top:18px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs{padding-top:28px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-head{white-space:nowrap;margin:0;overflow:hidden;width:300px;position:absolute;left:0;top:0;z-index:5000;height:40px;padding-top:2px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-head ul{height:100%;border:none}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-head ul li{float:left;margin-right:-1px;margin-left:24px;cursor:pointer;padding:0 2px;color:#161e26;height:100%;min-width:auto;line-height:unset}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-head ul li.tiny-grid-custom__tabs-selected{color:#1890ff}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-head ul li.tiny-grid-custom__tabs-base{font-weight:700}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item{height:340px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .other-setting{height:100%;border-top:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:30px 20px 20px 25px;position:relative;top:-1px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .other-setting .label{margin-right:20px;font-size:12px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane.left-pane{overflow-y:auto}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .header{padding-bottom:10px;margin-bottom:8px;color:#8d959e;border-bottom:1px solid #e8ebef;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .header p{-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .header .clear-all{color:#1890ff;cursor:pointer;margin-left:12px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .header span:not(.clear-all){display:inline-block;text-align:center;width:62px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .tiny-input .tiny-input__inner{border-width:0;padding:0;padding-left:5px;height:24px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .tiny-input .tiny-input__inner:focus{border-width:1px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .tiny-input .tiny-input__suffix{display:none;right:6px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .tiny-input .tiny-input__suffix svg{width:12px;height:12px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel{height:calc(100% - 20px);overflow-y:auto}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;display:grid;grid-template-rows:1fr;height:auto;min-height:32px;overflow:hidden;-webkit-transform-origin:center;transform-origin:center;cursor:pointer}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item.item-collapse{grid-template-rows:0fr}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item>div{width:100%;min-height:0}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item.show-dropdown .dropdown-column .set-btn{visibility:visible}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .sort-number{width:40px;text-align:center}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .sort-number .sort-number-display{height:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;background-color:transparent}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .sort-number .sort-number-display:hover{background-color:#fff}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .name{-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:32px;line-height:32px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .name.dragable{cursor:move}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .child-name{padding-left:32px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .close-icon{visibility:hidden;cursor:pointer;margin-left:18px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .drag-icon{display:grid;cursor:move;margin-right:6px;grid-template-columns:1fr 1fr;grid-column-gap:2px;grid-row-gap:4px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .drag-icon span{display:inline-block;width:2px;height:2px;background-color:#8d959e}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .dropdown-btn{display:inline-block;width:24px;height:24px;line-height:24px;background-color:#f5f6f8}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .dropdown-column{width:60px;text-align:center}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .dropdown-column .is-text{display:inline-block;width:60px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .dropdown-column .is-text .set-btn.visibility-hidden{visibility:hidden}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .dropdown-column.visibility-hidden{visibility:hidden}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .set-btn{font-size:12px;text-align:center;display:inline-block;visibility:hidden;width:60px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .column-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .column-container.with-padding{padding:0 8px 0 6px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .column-container .icon-expand{margin-left:4px;margin-right:-4px;-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out;-webkit-transform:rotateZ(0);transform:rotateZ(0)}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .column-container .icon-collapse{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .column-container:hover{background-color:#f5f6f8}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .column-container:hover .close-icon{visibility:visible}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .column-container:hover .close-icon.visibility-hidden{visibility:hidden}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .column-container:hover .close-icon svg{fill:#8d959e}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .column-container:hover .set-btn:not(.visibility-hidden){visibility:visible}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .column-container:hover .tiny-input:hover .tiny-input__inner{background-color:#fff}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .column-container:hover .tiny-input .tiny-input__inner{background-color:#f5f6f8}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-split-pane .column-list-panel .column-list-item .column-container:hover .tiny-input .tiny-input__suffix{display:block}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .left-panel{padding:16px 18px 16px 24px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .left-panel .tiny-tree{padding:0;margin-left:-8px;margin-right:-6px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .left-panel .multi-check-all-btn{margin-bottom:10px;margin-left:20px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .right-panel{padding:20px;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .right-panel .child-dropdown{margin-right:40px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .group-label{font-size:14px;font-weight:700;margin:18px 0 12px 0}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .group-label.group-label-first{margin-top:0}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .check-all-btn{margin-bottom:16px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-checkbox-group.is-vertical .tiny-checkbox:not(:last-child){margin-bottom:12px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-checkbox .tiny-checkbox__label{font-size:14px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .tiny-search{margin-bottom:18px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .select-template{margin-bottom:8px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .select-template .tiny-filter-box{max-width:100%}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .select-template .tiny-filter-box .value{max-width:initial}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-split-wrapper .select-template .tiny-filter-box .filter-icon-close{-ms-flex-negative:0;flex-shrink:0}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__footer{margin:2px 12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:right;-ms-flex-pack:right;justify-content:right;padding-right:10px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__footer>button{margin:0 5px}.tiny-grid-toolbar-modal .tiny-grid-custom .tiny-grid-custom__footer>span{margin:0 5px}.tiny-popover.grid-toolbar-template-popover .radio-box{margin-bottom:14px}.tiny-popover.grid-toolbar-template-popover .btn-box{text-align:right;margin-top:16px}