diff --git a/dist/demo.css b/dist/demo.css
index 198116e..f7691e4 100644
--- a/dist/demo.css
+++ b/dist/demo.css
@@ -1,4 +1,3 @@
-@import url(../node_modules/@tinper/next-ui/dist/tinper-next.css);
.ac-btns .ac-btns-item {
margin-right: 8px;
cursor: pointer; }
diff --git a/dist/demo.css.map b/dist/demo.css.map
index 207419e..3b36fcf 100644
--- a/dist/demo.css.map
+++ b/dist/demo.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../src/FileList.scss","../node_modules/ac-btns/src/Btns.scss","FileListDemo.scss"],"names":[],"mappings":"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","file":"demo.css","sourcesContent":["@import '../node_modules/ac-btns/src/Btns.scss';\r\n@import \"../node_modules/@tinper/next-ui/dist/tinper-next.css\";\r\n$prefix: wui;\r\n$font-size: 12px;\r\n@keyframes beLong {\r\n from {\r\n width: 20%;\r\n }\r\n\r\n to {\r\n width: 90%;\r\n }\r\n}\r\n\r\n@keyframes rotates {\r\n from {\r\n transform: rotate(0deg)\r\n }\r\n\r\n to {\r\n transform: rotate(360deg)\r\n }\r\n}\r\n\r\n\r\n.ac-upload-list {\r\n &-header {\r\n height: 50px;\r\n background: #fff;\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n line-height: 50px;\r\n\r\n &>div {\r\n display: inline-block;\r\n }\r\n\r\n &.close {\r\n margin-left: 8px;\r\n margin-right: 8px;\r\n border: 1px solid #D0D0D0;\r\n box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2);\r\n border-radius: 3px;\r\n\r\n .ac-upload-list-btns {\r\n display: none;\r\n }\r\n }\r\n }\r\n\r\n &-text {\r\n cursor: pointer;\r\n span {\r\n font-weight: bold;\r\n font-size: $font-size;\r\n }\r\n }\r\n\r\n &-btns {\r\n float: right;\r\n }\r\n\r\n &-file-area.hide {\r\n display: none;\r\n }\r\n\r\n &-file-area {\r\n .#{$prefix}-checkbox .#{$prefix}-checkbox-label:before {\r\n position: relative;\r\n left: -16px;\r\n }\r\n .table-menu {\r\n height: 16px;\r\n line-height: 1;\r\n }\r\n\r\n .#{$prefix}-table-filter-column-pop-cont-item {\r\n &>span {\r\n margin: 0 !important;\r\n }\r\n }\r\n .#{$prefix}-table {\r\n width: 100%;\r\n .#{$prefix}-table-placeholder .table-nodata{\r\n position:relative;\r\n }\r\n .#{$prefix}-table-fixed-left tr td:first-child,\r\n .#{$prefix}-table-fixed-left tr th:first-child,\r\n .#{$prefix}-table-scroll tr td:first-child,\r\n .#{$prefix}-table-scroll tr th:first-child {\r\n padding: 0;\r\n padding-left: 12px;\r\n }\r\n\r\n .#{$prefix}-table-header {\r\n margin-bottom: 0px;\r\n padding-bottom: 0px;\r\n tr {\r\n &.filterable th {\r\n padding: 0 2px;\r\n }\r\n\r\n th {\r\n overflow: visible;\r\n background-clip: padding-box;\r\n word-break: keep-all;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n text-align: left;\r\n background: #eceff5;\r\n padding: 0;\r\n height: 35px;\r\n padding-left: 12px;\r\n font-size: $font-size;\r\n\r\n .#{$prefix}-table-thead-th-drag-gap .online {\r\n height: 12px;\r\n width: 1px;\r\n background: transparent;\r\n margin: 11px auto;\r\n line-height: 100%;\r\n background: #D0D0D0;\r\n margin-right: 100px;\r\n }\r\n }\r\n }\r\n\r\n }\r\n\r\n .#{$prefix}-table-tbody {\r\n tr {\r\n transition: none;\r\n\r\n &:nth-child(2n) {\r\n background: #ffffff;\r\n }\r\n\r\n &:nth-child(2n + 1) {\r\n background: #ffffff;\r\n }\r\n\r\n &:hover,\r\n &.#{$prefix}-table-row-hover {\r\n background: #F3F3F3;\r\n\r\n }\r\n\r\n &.#{$prefix}-table-row {\r\n\r\n &.selected,\r\n &.ref-multiple-table-row-selected {\r\n background: #E4E4E4;\r\n }\r\n }\r\n\r\n &.sumrow {\r\n background: #FEFBF3;\r\n }\r\n\r\n td {\r\n padding: 0;\r\n padding-left: 12px;\r\n height: 30px;\r\n font-size: $font-size;\r\n border-color: #d0d0d0;\r\n\r\n .ac-grid-cell {\r\n display: block;\r\n width: 100%;\r\n height: 30px;\r\n line-height: 30px;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n }\r\n }\r\n }\r\n\r\n }\r\n\r\n .#{$prefix}-table-content .#{$prefix}-table-fixed-right {\r\n .#{$prefix}-table-thead-th {\r\n padding-left: 20px;\r\n }\r\n\r\n .#{$prefix}-table-body-outer {\r\n .#{$prefix}-table-tbody {\r\n tr td {\r\n padding-left: 0;\r\n\r\n .ac-grid-cell {\r\n .ac-btns span.ac-btns-item {\r\n margin: 0 6px;\r\n }\r\n\r\n .ac-btns span.ac-btns-item:first-child {\r\n margin-left: 20px\r\n }\r\n\r\n .ac-btns span.ac-btns-item:last-child {\r\n margin-right: 0;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n .#{$prefix}-table-thead th {\r\n background: #f1f2f5;\r\n color: #212121;\r\n }\r\n\r\n .name-space {\r\n img {\r\n height: 20px;\r\n margin-right: 10px;\r\n }\r\n }\r\n\r\n .#{$prefix}-table-tbody {\r\n tr td {\r\n .#{$prefix}-bar {\r\n margin-bottom: 0;\r\n margin-right: 20px;\r\n\r\n .#{$prefix}-bar-bar {\r\n background: #2196F3;\r\n }\r\n }\r\n\r\n .#{$prefix}-bar.uploading {\r\n .#{$prefix}-bar-bar {\r\n animation: beLong 5s;\r\n animation-fill-mode: forwards;\r\n }\r\n }\r\n\r\n .upload-status.uploading {\r\n color: #2196F3;\r\n\r\n .uf-loadingstate {\r\n animation: rotates 2s linear infinite;\r\n display: inline-block;\r\n }\r\n }\r\n\r\n .upload-status.error {\r\n color: #e14c46;\r\n }\r\n }\r\n\r\n .opt-btns {\r\n min-height: 20px;\r\n .ac-btns {\r\n\r\n button.ac-btns-item.#{$prefix}-button.ac-btns-write,\r\n button.ac-btns-item.#{$prefix}-button.ac-btns-write:hover {\r\n color: #fff !important;\r\n background: #505F79 !important;\r\n border-color: #505F79 !important;\r\n height: 26px;\r\n font-size: 14px;\r\n line-height: 26px;\r\n padding: 0;\r\n margin-right: 8px;\r\n margin-bottom: 2px;\r\n }\r\n }\r\n .file-list-linetoolbar-container {\r\n display: block;\r\n &>div {\r\n justify-content: flex-start;\r\n }\r\n }\r\n }\r\n }\r\n\r\n\r\n }\r\n }\r\n\r\n .#{$prefix}-upload-list {\r\n display: none;\r\n }\r\n\r\n}\r\n\r\n.pop_dialog.#{$prefix}-modal {\r\n\r\n .pop_body,\r\n .pop_footer {\r\n padding-left: 25px;\r\n padding-right: 25px;\r\n }\r\n\r\n .pop_footer {\r\n text-align: right;\r\n padding: 7px 20px;\r\n border-top: 1px solid rgb(208, 208, 208);\r\n\r\n button {\r\n width: 66px;\r\n }\r\n\r\n }\r\n\r\n .#{$prefix}-modal-header {\r\n background-color: rgb(243, 243, 243);\r\n font-size: 14px;\r\n color: rgb(17, 17, 17);\r\n font-weight: 700;\r\n padding: 9px 20px;\r\n\r\n h4 {\r\n font-size: 16px;\r\n color: rgba(23, 43, 77, 1);\r\n font-weight: normal;\r\n }\r\n }\r\n\r\n .btn {\r\n margin-left: 10px;\r\n }\r\n\r\n .pop_body {\r\n .keyword {\r\n font-size: 18px;\r\n display: block;\r\n color: rgb(17, 17, 17);\r\n\r\n i {\r\n font-size: 25px;\r\n color: rgb(255, 191, 0);\r\n margin: 0px 10px;\r\n }\r\n }\r\n\r\n .pop_dialog-ctn {\r\n font-size: $font-size;\r\n display: block;\r\n color: rgb(85, 85, 85);\r\n padding: 5px 55px;\r\n }\r\n }\r\n\r\n .#{$prefix}-modal-dialog {\r\n .#{$prefix}-modal-content {\r\n .#{$prefix}-modal-footer {\r\n text-align: right;\r\n }\r\n }\r\n }\r\n}\r\n","$primaryColor : linear-gradient(90deg, #fa482e, #f32f27);\n$secondary : #eceff1;\n$grey: #505766;\n//hover\n$primary-button-bg-color-hover: linear-gradient(90deg, #f32f27, #fa482e);\n$font-size: 12px;\n\n.ac-btns{\n .ac-btns-item{\n margin-right: 8px;\n cursor: pointer;\n }\n span.ac-btns-item{\n color: #0073e1;\n font-size: $font-size;\n &[disabled]{\n color: #dfe1e6;\n }\n }\n button.ac-btns-item.u-button{\n box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);\n font-size: $font-size;\n min-width: 60px;\n min-height: 30px;\n padding: 0 10px;\n min-height: 28px;\n line-height: 28px;\n transition: all .3s cubic-bezier(.645,.045,.355,1);\n &.u-button-sm{\n min-width: 44px;\n min-height: 22px;\n line-height: 22px;\n }\n &:last-child{\n margin-right: 0;\n }\n &.ac-btns-write{\n box-shadow: none;\n border-color: #d9d9d9;\n color: #535a69;\n background-color: #fff;\n font-weight: 500;\n &:hover{\n color: #505766;\n border-color: #505766;\n background-color: unset;\n z-index: 2;\n }\n }\n &.u-button-primary{\n background: $primaryColor;\n color: #fff;\n border: none;\n box-shadow: none;\n height: 30px;\n line-height: 30px;\n &:hover{\n background: $primary-button-bg-color-hover;\n color: #fff;\n }\n }\n &.u-button-secondary{\n background-color: $secondary;\n color: #212121;\n border: 1px solid $secondary;\n box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);\n &:hover{\n border: 1px solid #dfe1e6;\n background-color: #dfe1e6;\n color: #212121;\n }\n }\n &.ac-btns-write.u-button-dark{\n background-color: $grey;\n color: #fff;\n border: 1px solid $grey;\n box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);\n &:hover{\n border: 1px solid #616875;\n background-color: #616875;\n color: #fff;\n }\n }\n &.ac-btns-search,&.ac-btns-clear, &.ac-btns-empty,\n &.ac-btns-first,&.ac-btns-previous,&.ac-btns-next,&.ac-btns-last,\n &.ac-btns-max,&.ac-btns-min{\n min-width: 30px;\n padding: 0;\n line-height: 28px;\n color: #111;\n background-color: #fff;\n height: 30px;\n }\n &.ac-btns-add{\n .uf{\n font-size: $font-size;\n padding: 0;\n margin-right: 3px;\n }\n }\n &.ac-btns-search{\n background: $primaryColor;\n color:#fff;\n min-width: 52px;\n position: relative;\n top: 1px;\n }\n &.ac-btns-empty,&.ac-btns-clear,&.ac-btns-search{\n .uf{\n font-size: 18px;\n position: relative;\n top: 2px;\n }\n }\n &.ac-btns-max{\n padding: 3px;\n min-width: auto;\n .uf {\n position: relative;\n bottom: 2px;\n }\n }\n &.ac-btns-min{\n padding: 3px;\n min-width: auto;\n .uf {\n position: relative;\n bottom: 2px;\n }\n }\n &.u-button[disabled],&.u-button[disabled]:hover{\n border: 1px solid #d9d9d9;\n color: rgba(0,0,0,.25);\n background: #f7f7f7;\n box-shadow: none;\n }\n \n }\n //type='icon'\n .icon{\n &.ac-btns-add,\n &.ac-btns-update,\n &.ac-btns-delete{\n color: $primaryColor;\n .uf{\n padding: 0;\n }\n }\n }\n \n}\n\n.u-button-group{\n .ac-btns{\n .u-button{\n float: left;\n min-width: 25px;\n margin-right: 0;\n }\n .u-button:first-child{\n margin-left: 0;\n }\n .u-button:first-child:not(:last-child):not(.dropdown-toggle){\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n }\n .u-button:not(:first-child):not(:last-child):not(.dropdown-toggle){\n border-radius: 0;\n }\n .u-button:last-child:not(:first-child){\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n }\n .u-button-border+.u-button-border, \n .u-button-border+.u-button-group, \n .u-button-group+.u-button-border, \n .u-button-group+.v-group{\n margin-left: 1px;\n }\n\n .u-button+.u-button, \n .u-button+.u-button-group, \n .u-button-group+.u-button, \n .u-button-group+.v-group{\n margin-left: -1px;\n }\n }\n}\n\n.ac-btns-dropdown{\n .u-dropdown-menu>.u-dropdown-menu-item-selected{\n color: #000;\n background-color: #fff;\n }\n .u-dropdown-menu>.u-dropdown-menu-item-selected:hover{\n background-color: #ebecf0;\n }\n //type='icon'\n .icon{\n &.ac-btns-add,\n &.ac-btns-update,\n &.ac-btns-delete{\n color: $primaryColor;\n }\n }\n}","@import \"../src/FileList.scss\";\r\n\r\n.ac-grids{\r\n width: 100%;\r\n}"],"sourceRoot":"/source/"}
\ No newline at end of file
+{"version":3,"sources":["../node_modules/ac-btns/src/Btns.scss","../src/FileList.scss","FileListDemo.scss"],"names":[],"mappings":"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","file":"demo.css","sourcesContent":["$primaryColor : linear-gradient(90deg, #fa482e, #f32f27);\n$secondary : #eceff1;\n$grey: #505766;\n//hover\n$primary-button-bg-color-hover: linear-gradient(90deg, #f32f27, #fa482e);\n$font-size: 12px;\n\n.ac-btns{\n .ac-btns-item{\n margin-right: 8px;\n cursor: pointer;\n }\n span.ac-btns-item{\n color: #0073e1;\n font-size: $font-size;\n &[disabled]{\n color: #dfe1e6;\n }\n }\n button.ac-btns-item.u-button{\n box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);\n font-size: $font-size;\n min-width: 60px;\n min-height: 30px;\n padding: 0 10px;\n min-height: 28px;\n line-height: 28px;\n transition: all .3s cubic-bezier(.645,.045,.355,1);\n &.u-button-sm{\n min-width: 44px;\n min-height: 22px;\n line-height: 22px;\n }\n &:last-child{\n margin-right: 0;\n }\n &.ac-btns-write{\n box-shadow: none;\n border-color: #d9d9d9;\n color: #535a69;\n background-color: #fff;\n font-weight: 500;\n &:hover{\n color: #505766;\n border-color: #505766;\n background-color: unset;\n z-index: 2;\n }\n }\n &.u-button-primary{\n background: $primaryColor;\n color: #fff;\n border: none;\n box-shadow: none;\n height: 30px;\n line-height: 30px;\n &:hover{\n background: $primary-button-bg-color-hover;\n color: #fff;\n }\n }\n &.u-button-secondary{\n background-color: $secondary;\n color: #212121;\n border: 1px solid $secondary;\n box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);\n &:hover{\n border: 1px solid #dfe1e6;\n background-color: #dfe1e6;\n color: #212121;\n }\n }\n &.ac-btns-write.u-button-dark{\n background-color: $grey;\n color: #fff;\n border: 1px solid $grey;\n box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);\n &:hover{\n border: 1px solid #616875;\n background-color: #616875;\n color: #fff;\n }\n }\n &.ac-btns-search,&.ac-btns-clear, &.ac-btns-empty,\n &.ac-btns-first,&.ac-btns-previous,&.ac-btns-next,&.ac-btns-last,\n &.ac-btns-max,&.ac-btns-min{\n min-width: 30px;\n padding: 0;\n line-height: 28px;\n color: #111;\n background-color: #fff;\n height: 30px;\n }\n &.ac-btns-add{\n .uf{\n font-size: $font-size;\n padding: 0;\n margin-right: 3px;\n }\n }\n &.ac-btns-search{\n background: $primaryColor;\n color:#fff;\n min-width: 52px;\n position: relative;\n top: 1px;\n }\n &.ac-btns-empty,&.ac-btns-clear,&.ac-btns-search{\n .uf{\n font-size: 18px;\n position: relative;\n top: 2px;\n }\n }\n &.ac-btns-max{\n padding: 3px;\n min-width: auto;\n .uf {\n position: relative;\n bottom: 2px;\n }\n }\n &.ac-btns-min{\n padding: 3px;\n min-width: auto;\n .uf {\n position: relative;\n bottom: 2px;\n }\n }\n &.u-button[disabled],&.u-button[disabled]:hover{\n border: 1px solid #d9d9d9;\n color: rgba(0,0,0,.25);\n background: #f7f7f7;\n box-shadow: none;\n }\n \n }\n //type='icon'\n .icon{\n &.ac-btns-add,\n &.ac-btns-update,\n &.ac-btns-delete{\n color: $primaryColor;\n .uf{\n padding: 0;\n }\n }\n }\n \n}\n\n.u-button-group{\n .ac-btns{\n .u-button{\n float: left;\n min-width: 25px;\n margin-right: 0;\n }\n .u-button:first-child{\n margin-left: 0;\n }\n .u-button:first-child:not(:last-child):not(.dropdown-toggle){\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n }\n .u-button:not(:first-child):not(:last-child):not(.dropdown-toggle){\n border-radius: 0;\n }\n .u-button:last-child:not(:first-child){\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n }\n .u-button-border+.u-button-border, \n .u-button-border+.u-button-group, \n .u-button-group+.u-button-border, \n .u-button-group+.v-group{\n margin-left: 1px;\n }\n\n .u-button+.u-button, \n .u-button+.u-button-group, \n .u-button-group+.u-button, \n .u-button-group+.v-group{\n margin-left: -1px;\n }\n }\n}\n\n.ac-btns-dropdown{\n .u-dropdown-menu>.u-dropdown-menu-item-selected{\n color: #000;\n background-color: #fff;\n }\n .u-dropdown-menu>.u-dropdown-menu-item-selected:hover{\n background-color: #ebecf0;\n }\n //type='icon'\n .icon{\n &.ac-btns-add,\n &.ac-btns-update,\n &.ac-btns-delete{\n color: $primaryColor;\n }\n }\n}","@import '../node_modules/ac-btns/src/Btns.scss';\r\n$prefix: wui;\r\n$font-size: 12px;\r\n@keyframes beLong {\r\n from {\r\n width: 20%;\r\n }\r\n\r\n to {\r\n width: 90%;\r\n }\r\n}\r\n\r\n@keyframes rotates {\r\n from {\r\n transform: rotate(0deg)\r\n }\r\n\r\n to {\r\n transform: rotate(360deg)\r\n }\r\n}\r\n\r\n\r\n.ac-upload-list {\r\n &-header {\r\n height: 50px;\r\n background: #fff;\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n line-height: 50px;\r\n\r\n &>div {\r\n display: inline-block;\r\n }\r\n\r\n &.close {\r\n margin-left: 8px;\r\n margin-right: 8px;\r\n border: 1px solid #D0D0D0;\r\n box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2);\r\n border-radius: 3px;\r\n\r\n .ac-upload-list-btns {\r\n display: none;\r\n }\r\n }\r\n }\r\n\r\n &-text {\r\n cursor: pointer;\r\n span {\r\n font-weight: bold;\r\n font-size: $font-size;\r\n }\r\n }\r\n\r\n &-btns {\r\n float: right;\r\n }\r\n\r\n &-file-area.hide {\r\n display: none;\r\n }\r\n\r\n &-file-area {\r\n .#{$prefix}-checkbox .#{$prefix}-checkbox-label:before {\r\n position: relative;\r\n left: -16px;\r\n }\r\n .table-menu {\r\n height: 16px;\r\n line-height: 1;\r\n }\r\n\r\n .#{$prefix}-table-filter-column-pop-cont-item {\r\n &>span {\r\n margin: 0 !important;\r\n }\r\n }\r\n .#{$prefix}-table {\r\n width: 100%;\r\n .#{$prefix}-table-placeholder .table-nodata{\r\n position:relative;\r\n }\r\n .#{$prefix}-table-fixed-left tr td:first-child,\r\n .#{$prefix}-table-fixed-left tr th:first-child,\r\n .#{$prefix}-table-scroll tr td:first-child,\r\n .#{$prefix}-table-scroll tr th:first-child {\r\n padding: 0;\r\n padding-left: 12px;\r\n }\r\n\r\n .#{$prefix}-table-header {\r\n margin-bottom: 0px;\r\n padding-bottom: 0px;\r\n tr {\r\n &.filterable th {\r\n padding: 0 2px;\r\n }\r\n\r\n th {\r\n overflow: visible;\r\n background-clip: padding-box;\r\n word-break: keep-all;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n text-align: left;\r\n background: #eceff5;\r\n padding: 0;\r\n height: 35px;\r\n padding-left: 12px;\r\n font-size: $font-size;\r\n\r\n .#{$prefix}-table-thead-th-drag-gap .online {\r\n height: 12px;\r\n width: 1px;\r\n background: transparent;\r\n margin: 11px auto;\r\n line-height: 100%;\r\n background: #D0D0D0;\r\n margin-right: 100px;\r\n }\r\n }\r\n }\r\n\r\n }\r\n\r\n .#{$prefix}-table-tbody {\r\n tr {\r\n transition: none;\r\n\r\n &:nth-child(2n) {\r\n background: #ffffff;\r\n }\r\n\r\n &:nth-child(2n + 1) {\r\n background: #ffffff;\r\n }\r\n\r\n &:hover,\r\n &.#{$prefix}-table-row-hover {\r\n background: #F3F3F3;\r\n\r\n }\r\n\r\n &.#{$prefix}-table-row {\r\n\r\n &.selected,\r\n &.ref-multiple-table-row-selected {\r\n background: #E4E4E4;\r\n }\r\n }\r\n\r\n &.sumrow {\r\n background: #FEFBF3;\r\n }\r\n\r\n td {\r\n padding: 0;\r\n padding-left: 12px;\r\n height: 30px;\r\n font-size: $font-size;\r\n border-color: #d0d0d0;\r\n\r\n .ac-grid-cell {\r\n display: block;\r\n width: 100%;\r\n height: 30px;\r\n line-height: 30px;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n }\r\n }\r\n }\r\n\r\n }\r\n\r\n .#{$prefix}-table-content .#{$prefix}-table-fixed-right {\r\n .#{$prefix}-table-thead-th {\r\n padding-left: 20px;\r\n }\r\n\r\n .#{$prefix}-table-body-outer {\r\n .#{$prefix}-table-tbody {\r\n tr td {\r\n padding-left: 0;\r\n\r\n .ac-grid-cell {\r\n .ac-btns span.ac-btns-item {\r\n margin: 0 6px;\r\n }\r\n\r\n .ac-btns span.ac-btns-item:first-child {\r\n margin-left: 20px\r\n }\r\n\r\n .ac-btns span.ac-btns-item:last-child {\r\n margin-right: 0;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n .#{$prefix}-table-thead th {\r\n background: #f1f2f5;\r\n color: #212121;\r\n }\r\n\r\n .name-space {\r\n img {\r\n height: 20px;\r\n margin-right: 10px;\r\n }\r\n }\r\n\r\n .#{$prefix}-table-tbody {\r\n tr td {\r\n .#{$prefix}-bar {\r\n margin-bottom: 0;\r\n margin-right: 20px;\r\n\r\n .#{$prefix}-bar-bar {\r\n background: #2196F3;\r\n }\r\n }\r\n\r\n .#{$prefix}-bar.uploading {\r\n .#{$prefix}-bar-bar {\r\n animation: beLong 5s;\r\n animation-fill-mode: forwards;\r\n }\r\n }\r\n\r\n .upload-status.uploading {\r\n color: #2196F3;\r\n\r\n .uf-loadingstate {\r\n animation: rotates 2s linear infinite;\r\n display: inline-block;\r\n }\r\n }\r\n\r\n .upload-status.error {\r\n color: #e14c46;\r\n }\r\n }\r\n\r\n .opt-btns {\r\n min-height: 20px;\r\n .ac-btns {\r\n\r\n button.ac-btns-item.#{$prefix}-button.ac-btns-write,\r\n button.ac-btns-item.#{$prefix}-button.ac-btns-write:hover {\r\n color: #fff !important;\r\n background: #505F79 !important;\r\n border-color: #505F79 !important;\r\n height: 26px;\r\n font-size: 14px;\r\n line-height: 26px;\r\n padding: 0;\r\n margin-right: 8px;\r\n margin-bottom: 2px;\r\n }\r\n }\r\n .file-list-linetoolbar-container {\r\n display: block;\r\n &>div {\r\n justify-content: flex-start;\r\n }\r\n }\r\n }\r\n }\r\n\r\n\r\n }\r\n }\r\n\r\n .#{$prefix}-upload-list {\r\n display: none;\r\n }\r\n\r\n}\r\n\r\n.pop_dialog.#{$prefix}-modal {\r\n\r\n .pop_body,\r\n .pop_footer {\r\n padding-left: 25px;\r\n padding-right: 25px;\r\n }\r\n\r\n .pop_footer {\r\n text-align: right;\r\n padding: 7px 20px;\r\n border-top: 1px solid rgb(208, 208, 208);\r\n\r\n button {\r\n width: 66px;\r\n }\r\n\r\n }\r\n\r\n .#{$prefix}-modal-header {\r\n background-color: rgb(243, 243, 243);\r\n font-size: 14px;\r\n color: rgb(17, 17, 17);\r\n font-weight: 700;\r\n padding: 9px 20px;\r\n\r\n h4 {\r\n font-size: 16px;\r\n color: rgba(23, 43, 77, 1);\r\n font-weight: normal;\r\n }\r\n }\r\n\r\n .btn {\r\n margin-left: 10px;\r\n }\r\n\r\n .pop_body {\r\n .keyword {\r\n font-size: 18px;\r\n display: block;\r\n color: rgb(17, 17, 17);\r\n\r\n i {\r\n font-size: 25px;\r\n color: rgb(255, 191, 0);\r\n margin: 0px 10px;\r\n }\r\n }\r\n\r\n .pop_dialog-ctn {\r\n font-size: $font-size;\r\n display: block;\r\n color: rgb(85, 85, 85);\r\n padding: 5px 55px;\r\n }\r\n }\r\n\r\n .#{$prefix}-modal-dialog {\r\n .#{$prefix}-modal-content {\r\n .#{$prefix}-modal-footer {\r\n text-align: right;\r\n }\r\n }\r\n }\r\n}\r\n","@import \"../src/FileList.scss\";\r\n\r\n.ac-grids{\r\n width: 100%;\r\n}"],"sourceRoot":"/source/"}
\ No newline at end of file
diff --git a/index.html b/index.html
index f6eb859..b8c6a78 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
tinper-bee demo
+
diff --git a/package.json b/package.json
index b271e8f..939b010 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "ac-file-list",
- "version": "2.0.1",
+ "version": "2.0.2",
"description": "FileList ui component for react",
"keywords": [
"react",
diff --git a/src/FileList.scss b/src/FileList.scss
index b425770..72346ee 100644
--- a/src/FileList.scss
+++ b/src/FileList.scss
@@ -1,5 +1,4 @@
@import '../node_modules/ac-btns/src/Btns.scss';
-@import "../node_modules/@tinper/next-ui/dist/tinper-next.css";
$prefix: wui;
$font-size: 12px;
@keyframes beLong {