@whitesev/pops 3.2.1 → 3.3.0

package/src/components/folder/index.css

@@ -1,303 +1,303 @@
-.pops-folder-list {
-  --folder-arrow-fill-color: #d4d7de;
-  --folder-arrow-active-fill-color: #06a7ff;
-  --header-breadcrumb-text-color: #06a7ff;
-  --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);
-  --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);
-  --header-breadcrumb-all-files-last-text-color: #999999;
-  --table-header-row-text-color: #818999;
-  --table-body-td-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));
-  --table-body-th-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));
-  --table-body-row-text-color: #05082c;
-  --table-body-row-file-name-text-color: #05082c;
-  --table-body-row-hover-bd-color: rgb(245, 246, 247, var(--pops-bg-opacity));
-  --table-body-row-hover-bg-color: rgb(245, 246, 247, var(--pops-bg-opacity));
-  --table-body-row-file-name-hover-text-color: #06a7ff;
-  --table-body-row-content-text-color: #818999;
-}
-.pops-folder-list .cursor-p {
-  cursor: pointer;
-}
-.pops-folder-list a {
-  background: 0 0;
-  text-decoration: none;
-  -webkit-tap-highlight-color: transparent;
-  color: var(--header-breadcrumb-text-color);
-}
-table.pops-folder-list-table__body,
-table.pops-folder-list-table__header {
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: collapse;
-  border-spacing: 0;
-  padding: 0 20px;
-}
-table.pops-folder-list-table__body,
-table.pops-folder-list-table__header {
-  height: 100%;
-  background: 0 0;
-  overflow: hidden;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  -ms-flex-direction: column;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-}
-table.pops-folder-list-table__body {
-  height: 100%;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.pops-folder-list table tr {
-  line-height: normal;
-  align-content: center;
-}
-.pops-folder-list-table__header-row {
-  height: 50px;
-  line-height: normal;
-  align-content: center;
-  color: var(--table-header-row-text-color);
-  text-align: left;
-  font-size: 12px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.pops-folder-list-table__body-row {
-  height: 50px;
-  line-height: normal;
-  align-content: center;
-  color: var(--table-body-row-text-color);
-  font-size: 12px;
-}
-.pops-folder-list-table__body-row:hover {
-  background-color: var(--table-body-row-hover-bg-color);
-  border-color: var(--table-body-row-hover-bd-color);
-  border: 0;
-  outline: none;
-}
-.pops-folder-list table th {
-  border: 0;
-  border-bottom: 1px solid var(--table-body-th-text-color);
-}
-.pops-folder-list table td {
-  border: 0;
-  border-bottom: 1px solid var(--table-body-td-text-color);
-  position: relative;
-}
-.pops-folder-list .list-name-text {
-  display: inline-block;
-  padding-left: 12px;
-  line-height: normal;
-  align-content: center;
-  max-width: 176px;
-}
-.pops-folder-list-file-name > div {
-  display: flex;
-  align-items: center;
-}
-
-.pops-mobile-folder-list-file-name {
-  display: flex;
-  align-items: center;
-}
-.pops-mobile-folder-list-file-name > div {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-  padding: 6px 0px;
-  flex-direction: column;
-}
-.pops-mobile-folder-list-file-name img.pops-folder-list-file-icon {
-  width: 45px;
-  height: 45px;
-}
-.pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {
-  padding-left: unset;
-  max-width: 250px;
-  overflow-x: hidden;
-  font-weight: 400;
-  line-height: unset;
-  margin-bottom: 4px;
-  white-space: normal;
-  text-overflow: unset;
-}
-
-/* 修改滚动 */
-.pops-folder-content {
-  overflow: hidden !important;
-}
-.pops-folder-content .pops-folder-list {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-.pops-folder-content .pops-folder-list-table__body-div {
-  height: 100%;
-  flex: 1 auto;
-  overflow: auto;
-  padding-bottom: 0;
-}
-.pops-mobile-folder-content .pops-folder-list-table__body-div {
-  height: 100%;
-  flex: 1 auto;
-  overflow: auto;
-  padding-bottom: 0;
-}
-.pops-folder-content table.pops-folder-list-table__body {
-  overflow: auto;
-}
-.pops-folder-content .pops-folder-list-table__header-div {
-  flex: 0;
-}
-.pops-mobile-folder-content .pops-folder-list-table__header-div {
-  display: none;
-}
-
-.pops-folder-list .pops-folder-list-file-name-title-text {
-  color: var(--table-body-row-file-name-text-color);
-}
-.pops-folder-list .pops-folder-list-file-name-title-text:hover {
-  text-decoration: none;
-  color: var(--table-body-row-file-name-hover-text-color);
-}
-.pops-folder-list .text-ellip {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.pops-folder-list .content {
-  color: var(--table-body-row-content-text-color);
-  position: relative;
-  width: 100%;
-  text-align: left;
-}
-.pops-folder-list .inline-block-v-middle {
-  display: inline-block;
-  vertical-align: middle;
-}
-.pops-folder-list .flex-a-i-center {
-  display: flex;
-  align-items: center;
-}
-.pops-folder-list .u-file-icon {
-  display: inline-block;
-  vertical-align: middle;
-}
-.pops-folder-list .u-file-icon--list {
-  width: 32px;
-  height: 32px;
-}
-.pops-folder-list .pops-folder-list-file-icon {
-  line-height: normal;
-  align-content: center;
-  position: relative;
-  vertical-align: middle;
-}
-.pops-folder-list .pops-folder-file-list-breadcrumb-primary {
-  flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  min-height: 17px;
-  flex-wrap: wrap;
-}
-.pops-folder-list .pops-folder-list-table__sort {
-  display: inline-flex;
-  margin-left: 4px;
-  flex-direction: column;
-}
-
-.pops-folder-list .pops-folder-icon-arrow {
-  width: 10px;
-  height: 10px;
-  fill: var(--folder-arrow-fill-color);
-}
-.pops-folder-list .pops-folder-icon-active {
-  fill: var(--folder-arrow-active-fill-color);
-}
-.pops-folder-list .pops-folder-file-list-breadcrumb {
-  padding: 4px 20px;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  min-height: 35px;
-}
-.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles {
-  font-size: 12px;
-  color: var(--header-breadcrumb-all-files-text-color);
-  line-height: normal;
-  align-content: center;
-  font-weight: 700;
-  display: inline-block;
-  max-width: 140px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-wrap: normal;
-}
-.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a {
-  color: var(--header-breadcrumb-all-files-last-text-color);
-}
-.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a {
-  font-size: 14px;
-  color: var(--header-breadcrumb-all-files-first-text-color);
-}
-.pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow {
-  width: 16px;
-  height: 16px;
-}
-.pops-folder-list .iconArrow {
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=)
-    55% 50%/6px 9px no-repeat;
-}
-
-@media (prefers-color-scheme: dark) {
-  .pops[type-value="folder"] {
-    --pops-title-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));
-    --pops-bottom-btn-controls-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));
-  }
-  .pops-folder-list {
-    --header-breadcrumb-text-color: #06a7ff;
-    --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);
-    --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);
-    --header-breadcrumb-all-files-last-text-color: #818999;
-    --table-body-row-text-color: #f7f8fa;
-    --table-body-td-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));
-    --table-body-th-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));
-    --table-body-td-text-color: #495366;
-    --table-body-row-hover-bd-color: #1f2022;
-    --table-body-row-hover-bg-color: #1f2022;
-    --table-body-row-file-name-text-color: #f7f8fa;
-  }
-}
+.pops-folder-list {
+  --folder-arrow-fill-color: #d4d7de;
+  --folder-arrow-active-fill-color: #06a7ff;
+  --header-breadcrumb-text-color: #06a7ff;
+  --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);
+  --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);
+  --header-breadcrumb-all-files-last-text-color: #999999;
+  --table-header-row-text-color: #818999;
+  --table-body-td-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));
+  --table-body-th-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));
+  --table-body-row-text-color: #05082c;
+  --table-body-row-file-name-text-color: #05082c;
+  --table-body-row-hover-bd-color: rgb(245, 246, 247, var(--pops-bg-opacity));
+  --table-body-row-hover-bg-color: rgb(245, 246, 247, var(--pops-bg-opacity));
+  --table-body-row-file-name-hover-text-color: #06a7ff;
+  --table-body-row-content-text-color: #818999;
+}
+.pops-folder-list .cursor-p {
+  cursor: pointer;
+}
+.pops-folder-list a {
+  background: 0 0;
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
+  color: var(--header-breadcrumb-text-color);
+}
+table.pops-folder-list-table__body,
+table.pops-folder-list-table__header {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  border-spacing: 0;
+  padding: 0 20px;
+}
+table.pops-folder-list-table__body,
+table.pops-folder-list-table__header {
+  height: 100%;
+  background: 0 0;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  -ms-flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+}
+table.pops-folder-list-table__body {
+  height: 100%;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.pops-folder-list table tr {
+  line-height: normal;
+  align-content: center;
+}
+.pops-folder-list-table__header-row {
+  height: 50px;
+  line-height: normal;
+  align-content: center;
+  color: var(--table-header-row-text-color);
+  text-align: left;
+  font-size: 12px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.pops-folder-list-table__body-row {
+  height: 50px;
+  line-height: normal;
+  align-content: center;
+  color: var(--table-body-row-text-color);
+  font-size: 12px;
+}
+.pops-folder-list-table__body-row:hover {
+  background-color: var(--table-body-row-hover-bg-color);
+  border-color: var(--table-body-row-hover-bd-color);
+  border: 0;
+  outline: none;
+}
+.pops-folder-list table th {
+  border: 0;
+  border-bottom: 1px solid var(--table-body-th-text-color);
+}
+.pops-folder-list table td {
+  border: 0;
+  border-bottom: 1px solid var(--table-body-td-text-color);
+  position: relative;
+}
+.pops-folder-list .list-name-text {
+  display: inline-block;
+  padding-left: 12px;
+  line-height: normal;
+  align-content: center;
+  max-width: 176px;
+}
+.pops-folder-list-file-name > div {
+  display: flex;
+  align-items: center;
+}
+
+.pops-mobile-folder-list-file-name {
+  display: flex;
+  align-items: center;
+}
+.pops-mobile-folder-list-file-name > div {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding: 6px 0px;
+  flex-direction: column;
+}
+.pops-mobile-folder-list-file-name img.pops-folder-list-file-icon {
+  width: 45px;
+  height: 45px;
+}
+.pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {
+  padding-left: unset;
+  max-width: 250px;
+  overflow-x: hidden;
+  font-weight: 400;
+  line-height: unset;
+  margin-bottom: 4px;
+  white-space: normal;
+  text-overflow: unset;
+}
+
+/* 修改滚动 */
+.pops-folder-content {
+  overflow: hidden !important;
+}
+.pops-folder-content .pops-folder-list {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.pops-folder-content .pops-folder-list-table__body-div {
+  height: 100%;
+  flex: 1 auto;
+  overflow: auto;
+  padding-bottom: 0;
+}
+.pops-mobile-folder-content .pops-folder-list-table__body-div {
+  height: 100%;
+  flex: 1 auto;
+  overflow: auto;
+  padding-bottom: 0;
+}
+.pops-folder-content table.pops-folder-list-table__body {
+  overflow: auto;
+}
+.pops-folder-content .pops-folder-list-table__header-div {
+  flex: 0;
+}
+.pops-mobile-folder-content .pops-folder-list-table__header-div {
+  display: none;
+}
+
+.pops-folder-list .pops-folder-list-file-name-title-text {
+  color: var(--table-body-row-file-name-text-color);
+}
+.pops-folder-list .pops-folder-list-file-name-title-text:hover {
+  text-decoration: none;
+  color: var(--table-body-row-file-name-hover-text-color);
+}
+.pops-folder-list .text-ellip {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.pops-folder-list .content {
+  color: var(--table-body-row-content-text-color);
+  position: relative;
+  width: 100%;
+  text-align: left;
+}
+.pops-folder-list .inline-block-v-middle {
+  display: inline-block;
+  vertical-align: middle;
+}
+.pops-folder-list .flex-a-i-center {
+  display: flex;
+  align-items: center;
+}
+.pops-folder-list .u-file-icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.pops-folder-list .u-file-icon--list {
+  width: 32px;
+  height: 32px;
+}
+.pops-folder-list .pops-folder-list-file-icon {
+  line-height: normal;
+  align-content: center;
+  position: relative;
+  vertical-align: middle;
+}
+.pops-folder-list .pops-folder-file-list-breadcrumb-primary {
+  flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  min-height: 17px;
+  flex-wrap: wrap;
+}
+.pops-folder-list .pops-folder-list-table__sort {
+  display: inline-flex;
+  margin-left: 4px;
+  flex-direction: column;
+}
+
+.pops-folder-list .pops-folder-icon-arrow {
+  width: 10px;
+  height: 10px;
+  fill: var(--folder-arrow-fill-color);
+}
+.pops-folder-list .pops-folder-icon-active {
+  fill: var(--folder-arrow-active-fill-color);
+}
+.pops-folder-list .pops-folder-file-list-breadcrumb {
+  padding: 4px 20px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  min-height: 35px;
+}
+.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles {
+  font-size: 12px;
+  color: var(--header-breadcrumb-all-files-text-color);
+  line-height: normal;
+  align-content: center;
+  font-weight: 700;
+  display: inline-block;
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+}
+.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a {
+  color: var(--header-breadcrumb-all-files-last-text-color);
+}
+.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a {
+  font-size: 14px;
+  color: var(--header-breadcrumb-all-files-first-text-color);
+}
+.pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow {
+  width: 16px;
+  height: 16px;
+}
+.pops-folder-list .iconArrow {
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=)
+    55% 50%/6px 9px no-repeat;
+}
+
+@media (prefers-color-scheme: dark) {
+  .pops[type-value="folder"] {
+    --pops-title-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));
+    --pops-bottom-btn-controls-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));
+  }
+  .pops-folder-list {
+    --header-breadcrumb-text-color: #06a7ff;
+    --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);
+    --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);
+    --header-breadcrumb-all-files-last-text-color: #818999;
+    --table-body-row-text-color: #f7f8fa;
+    --table-body-td-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));
+    --table-body-th-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));
+    --table-body-td-text-color: #495366;
+    --table-body-row-hover-bd-color: #1f2022;
+    --table-body-row-hover-bg-color: #1f2022;
+    --table-body-row-file-name-text-color: #f7f8fa;
+  }
+}