@touchvue/ui 1.0.0-beta.55 → 1.0.0-beta.56

package/theme/skin/default.css

@@ -130,9 +130,6 @@ img {
   vertical-align: top;
   max-width: 100%;
 }
-label {
-  cursor: default !important;
-}
 #scrollerTest {
   position: absolute;
   width: 100px;
@@ -603,6 +600,13 @@ html body .height-full {
   --padding: 0;
   --color: inherit;
 }
+.to-scroll.is-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.to-scroll.is-hide::-webkit-scrollbar {
+  display: none;
+}
 .to-scroll {
   color: var(--color);
   position: relative;
@@ -1772,6 +1776,8 @@ html body .height-full {
   --viewer-fn-padding: 0;
   --viewer-fn-bottom: 2em;
   --viewer-fn-border: 0 none;
+  --count-top: 0;
+  --count-right: 0;
 }
 .to-pic {
   flex-shrink: 0;
@@ -1783,7 +1789,6 @@ html body .height-full {
   justify-content: center;
   align-items: center;
   text-align: center;
-  overflow: hidden;
   color: var(--color);
   width: var(--width);
   height: var(--height);
@@ -1800,6 +1805,11 @@ html body .height-full {
   height: var(--content-height);
   border-radius: var(--content-radius);
 }
+.to-pic-count {
+  position: absolute;
+  top: var(--count-top);
+  right: var(--count-right);
+}
 .to-pic.is-link:hover {
   border: var(--hover-border);
   background: var(--hover-bg);
@@ -1978,6 +1988,8 @@ html body .height-full {
 }
 .to-tag-text {
   font-size: var(--size);
+  display: inline-flex;
+  align-items: center;
 }
 .to-tag-remove {
   cursor: default;
@@ -2216,7 +2228,7 @@ html body .height-full {
   line-height: 1em;
   vertical-align: top;
   font-family: icon;
-  content: '\e05c';
+  content: '\e6cd';
   font-size: calc(0.7em * var(--check-size));
   right: 0.1em;
   bottom: 0.2em;
@@ -2330,10 +2342,10 @@ html body .height-full {
   --color: var(--color-fg);
   --bg: #fff;
   --bg-size: 100% 100%;
-  --hover-bg: rgba(0, 0, 0, 0.1);
+  --hover-bg: rgba(0, 0, 0, 0.05);
   --hover-color: var(--color);
   --hover-border: var(--border);
-  --active-bg: rgba(0, 0, 0, 0.2);
+  --active-bg: rgba(0, 0, 0, 0.1);
   --active-color: var(--color);
   --active-border: var(--border);
   --text-gap: 0.5em;
@@ -3232,9 +3244,6 @@ html body .height-full {
   --arrow-size: 1em;
   --arrow-font-size: 0.75em;
   --arrow-color: var(--color-fg-fade);
-  --clear-size: 1em;
-  --clear-color: var(--color-fg-fade);
-  --clear-hover-color: var(--color-danger);
   --arrow-hover-color: var(--arrow-color);
   --arrow-active-color: var(--arrow-color);
   --hover-bg: rgba(0, 0, 0, 0.1);
@@ -3369,16 +3378,12 @@ html body .height-full {
 }
 .to-select-clear {
   flex-shrink: 0;
-  --color: var(--clear-color);
-  --width: var(--clear-size);
-  --height: var(--clear-size);
-  --size: var(--clear-size);
   cursor: pointer;
   opacity: 0;
   transition: opacity 0.15s ease;
 }
 .to-select-clear:hover {
-  --color: var(--clear-hover-color);
+  --color: var(--arrow-active-color);
 }
 .to-select:hover .to-select-clear,
 .to-select:focus-within .to-select-clear {
@@ -4085,10 +4090,10 @@ html body .height-full {
   --focus-color: var(--color);
   --focus-shadow: var(--shadow);
   --hover-border: var(--border);
-  --hover-bg: rgba(0, 0, 0, 0.1);
+  --hover-bg: rgba(0, 0, 0, 0.05);
   --hover-color: var(--color);
   --active-border: var(--border);
-  --active-bg: rgba(0, 0, 0, 0.3);
+  --active-bg: rgba(0, 0, 0, 0.1);
   --active-color: var(--color);
 }
 .to-input {
@@ -4267,20 +4272,16 @@ html body .height-full {
   z-index: 2;
   pointer-events: none;
 }
-.to-input.is-disabled {
+.to-input.is-disabled:not(.is-link) {
   background: var(--disabled-bg);
   color: var(--disabled-color);
-  cursor: not-allowed;
 }
-.to-input.is-disabled::after {
+.to-input.is-disabled:not(.is-link)::after {
   border: var(--disabled-border);
 }
-.to-input.is-disabled input.to-input-content::placeholder {
+.to-input.is-disabled:not(.is-link) input.to-input-content::placeholder {
   color: var(--disabled-placeholder-color);
 }
-.is-disabled .to-input-content {
-  cursor: not-allowed;
-}
 .to-input.is-step input {
   text-align: center;
 }
@@ -4325,6 +4326,9 @@ html body .height-full {
 .to-input.is-link {
   cursor: pointer;
 }
+.to-input.is-link .to-input-content {
+  cursor: pointer;
+}
 .to-input.is-link .to-input-textarea,
 .to-input.is-link .to-input-box {
   pointer-events: none;
@@ -5021,15 +5025,15 @@ html body .height-full {
   --divider-on-bg: var(--color-primary);
   --title-on-color: var(--color-primary);
   --desc-on-color: var(--desc-color);
-  --item-completed-border: var(--item-border);
-  --item-completed-bg: var(--item-bg);
-  --icon-completed-bg: var(--color-primary);
-  --icon-completed-border: 0 none;
-  --icon-completed-color: var(--color-bg);
-  --icon-completed-bg-size: 100% 100%;
-  --divider-completed-bg: var(--color-primary);
-  --title-completed-color: var(--color-primary);
-  --desc-completed-color: var(--desc-color);
+  --item-completed-border: var(--item-on-border);
+  --item-completed-bg: var(--item-on-bg);
+  --icon-completed-bg: var(--icon-on-bg);
+  --icon-completed-border: var(--icon-on-border);
+  --icon-completed-color: var(--icon-on-color);
+  --icon-completed-bg-size: var(--icon-on-bg-size);
+  --divider-completed-bg: var(--divider-on-bg);
+  --title-completed-color: var(--title-on-color);
+  --desc-completed-color: var(--desc-on-color);
   --detail-color: inherit;
   --detail-margin: 0.5em;
   --detail-size: 1em;
@@ -5226,7 +5230,7 @@ html body .height-full {
   display: none;
 }
 .to-step.item-dir-v .to-step-item.is-completed:not(:last-child):before {
-  background: var(--on-divider-bg);
+  background: var(--divider-on-bg);
   background-size: var(--divider-bg-size);
 }
 .to-checkbox {
@@ -5467,6 +5471,7 @@ html body .height-full {
   --placeholder-color: var(--color-placeholder);
   --input-padding: 0 1em;
   --input-color: var(--color-fg);
+  --input-size: 100%;
   --separator-color: var(--color-fg);
   --separator-padding: 0 0.5em;
   --clear-margin: 0 0.5em 0 0;
@@ -5504,11 +5509,13 @@ html body .height-full {
   pointer-events: none;
 }
 .to-date-range-input {
+  font-size: var(--input-size);
   flex: 1;
   padding: var(--input-padding);
   color: var(--input-color);
   border: 0 none;
   background: none;
+  min-width: 0;
 }
 .to-date-range-input::placeholder {
   color: var(--placeholder-color);
@@ -8734,114 +8741,222 @@ html body .height-full {
 }
 .to-upload {
   position: relative;
+  --tip-margin: 1em;
+  --tip-color: #999;
+  --tip-weight: normal;
+  --tip-size: 100%;
+  --upload-button-margin: 0.5em;
+  --list-border: 0 none;
+  --list-bg: none;
+  --list-bg-size: 100% 100%;
+  --list-padding: 0;
+  --list-radius: 0;
+  --list-shadow: none;
+  --list-gap: 0;
+  --item-border: 0 none;
+  --item-bg: none;
+  --item-bg-size: 100% 100%;
+  --item-padding: 0;
+  --item-radius: 0;
+  --item-shadow: none;
+  --item-color: var(--color-fg);
+  --item-size: 1em;
+  --item-weight: normal;
+  --item-state-margin: 0;
+  --item-state-color: var(--color-fg);
+  --item-state-size: 1em;
+  --item-state-weight: normal;
+  --item-icon-width: 1.5em;
+  --item-icon-height: 1.5em;
+  --item-icon-size: 1.5em;
+  --item-icon-margin: 0.5em;
+  --item-remove-margin: 0em;
+  --progress-thick: 0.2em;
+  --danger-bg: rgba(249, 57, 32, 0.1);
+  --danger-border: 1px solid rgba(249, 57, 32, 0.5);
 }
-.to-upload .to-upload-list-item {
-  padding: 0.3em;
+.to-upload-content {
   display: flex;
-  position: relative;
+  align-items: center;
 }
-.to-upload .to-upload-list-item .file-name {
-  flex: 1;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.to-upload-input {
+  --width: 20em;
 }
-.to-upload .to-upload-list-item .upload-progress {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 0.2em;
+.to-upload-tip {
+  display: flex;
+  margin-left: var(--tip-margin);
+  color: var(--tip-color);
 }
-.to-upload .to-upload-list-item .upload-progress .upload-progress-bar {
-  background-color: #0077fa;
-  height: 0.2em;
-  border-radius: 0.1em;
+.to-upload-tip-text {
+  font-size: var(--tip-size);
+  font-weight: var(--tip-weight);
 }
-.to-upload .to-upload-list-item .mode-color {
-  --color-info: #0077fa;
+.to-upload-upload-button {
+  margin-left: var(--upload-button-margin);
 }
-.to-upload .to-upload-img {
+.to-upload-list {
   display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: var(--list-padding);
+  border: var(--list-border);
+  border-radius: var(--list-radius);
+  background: var(--list-bg);
+  background-size: var(--list-bg-size);
+  box-shadow: var(--list-shadow);
+  gap: var(--list-gap);
 }
-.to-upload .to-upload-img .to-upload-img-list {
+.to-upload-item {
+  padding: var(--item-padding);
   display: flex;
-}
-.to-upload .to-upload-img .to-upload-img-list .to-upload-img-list-item {
-  width: 10em;
-  height: 10em;
-  border: solid 1px #ddd;
-  border-radius: 0.5em;
-  cursor: pointer;
+  align-items: center;
   position: relative;
+  border: var(--item-border);
+  border-radius: var(--item-radius);
+  background: var(--item-bg);
+  background-size: var(--item-bg-size);
+  box-shadow: var(--item-shadow);
+  color: var(--item-color);
+  font-weight: var(--item-weight);
 }
-.to-upload .to-upload-img .to-upload-img-list .to-upload-img-list-item .to-upload-pic {
-  width: 100%;
-  height: 100%;
+.to-upload-item-name {
+  font-size: var(--item-size);
 }
-.to-upload .to-upload-img .to-upload-img-list .to-upload-img-list-item .mode-icon-remove {
-  position: absolute;
-  top: 0.5em;
-  right: 0.5em;
-  color: #fff;
+.to-upload-item-state {
+  margin-left: var(--item-state-margin);
+  color: var(--item-state-color);
+  font-size: var(--item-state-size);
+  font-weight: var(--item-state-weight);
 }
-.to-upload .to-upload-img .to-upload-img-list .to-upload-img-list-item .upload-progress {
+.to-upload-item-state-text {
+  color: var(--item-state-color);
+  font-size: var(--item-state-size);
+  font-weight: var(--item-state-weight);
+}
+.to-upload-item-progress {
   position: absolute;
-  bottom: 0.5em;
-  left: 5%;
-  width: 90%;
-  height: 0.2em;
-  background-color: #ccc;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  --thick: var(--progress-thick);
 }
-.to-upload .to-upload-img .to-upload-img-list .to-upload-img-list-item .upload-progress .upload-progress-bar {
-  background-color: #0077fa;
-  height: 0.2em;
-  border-radius: 0.1em;
+.to-upload-item-icon {
+  --width: var(--item-icon-width);
+  --height: var(--item-icon-height);
+  --size: var(--item-icon-size);
+  margin-right: var(--item-icon-margin);
 }
-.to-upload .to-upload-img .to-upload-add {
+.to-upload-item-remove {
+  margin-left: var(--item-remove-margin);
+}
+.to-upload-item-name {
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.to-upload.type-img {
+  --item-width: 10em;
+  --item-height: 10em;
+  --item-border: 1px solid #ddd;
+  --item-bg-size: cover;
+  --item-padding: 0;
+  --item-radius: 0.5em;
+  --item-shadow: none;
+  --list-gap: 1em;
+  --add-width: var(--item-width);
+  --add-height: var(--item-height);
+  --add-border: var(--item-border);
+  --add-radius: var(--item-radius);
+  --add-shadow: var(--item-shadow);
+  --add-bg: none;
+  --add-bg-size: 100% 100%;
+  --add-padding: 0;
+  --add-color: #aaa;
+  --add-size: 4em;
+  --add-hover-border: var(--add-border);
+  --add-hover-bg: rgba(0, 0, 0, 0.05);
+  --add-hover-color: var(--add-color);
+  --add-active-border: var(--add-border);
+  --add-active-bg: rgba(0, 0, 0, 0.1);
+  --add-active-color: var(--add-color);
+  --remove-top: 0.5em;
+  --remove-right: 0.5em;
+  --remove-bg: rgba(0, 0, 0, 0.3);
+  --remove-color: #fff;
+  --remove-radius: 50%;
+  --remove-width: 1.5em;
+  --remove-height: 1.5em;
+}
+.to-upload.type-img .to-upload-list {
+  display: flex;
+  flex-direction: row;
+}
+.to-upload.type-img .to-upload-item {
+  width: var(--item-width);
+  height: var(--item-height);
+  background-size: var(--item-bg-size);
+}
+.to-upload.type-img .to-upload-item-remove {
+  position: absolute;
+  right: var(--remove-right);
+  top: var(--remove-top);
+  --bg: var(--remove-bg);
+  --color: var(--remove-color);
+  --radius: var(--remove-radius);
+  --width: var(--remove-width);
+  --height: var(--remove-height);
+}
+.to-upload.type-img .to-upload-add {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 10em;
-  height: 10em;
-  border: solid 1px #ddd;
-  border-radius: 0.5em;
+  width: var(--add-width);
+  height: var(--add-height);
+  border: var(--add-border);
+  border-radius: var(--add-radius);
+  background: var(--add-bg);
+  background-size: var(--add-bg-size);
+  padding: var(--add-padding);
+  box-shadow: var(--add-shadow);
   cursor: pointer;
 }
-.to-upload .to-upload-img .to-upload-add .mode-upload-add {
-  --font-size: 2em;
+.to-upload.type-img .to-upload-add:hover {
+  border: var(--add-hover-border);
+  background: var(--add-hover-bg);
+  color: var(--add-hover-color);
 }
-.to-upload .to-upload-img.pic-size-s .to-upload-img-list .to-upload-img-list-item {
-  width: 3em;
-  height: 3em;
-  border-radius: 0.5em;
+.to-upload.type-img .to-upload-add:hover .to-upload-add-icon {
+  --color: var(--add-hover-color);
 }
-.to-upload .to-upload-img.pic-size-s .to-upload-img-list .to-upload-img-list-item .mode-icon-remove {
-  top: 0.2em;
-  right: 0.2em;
-  --size: 1em;
-  --font-size: 0.5em;
+.to-upload.type-img .to-upload-add:active {
+  border: var(--add-active-border);
+  background: var(--add-active-bg);
+  color: var(--add-active-color);
 }
-.to-upload .to-upload-img.pic-size-s .to-upload-img-list .to-upload-img-list-item .upload-progress {
-  bottom: 0.2em;
+.to-upload.type-img .to-upload-add:active .to-upload-add-icon {
+  --color: var(--add-active-color);
 }
-.to-upload .to-upload-img.pic-size-s .to-upload-add {
-  width: 3em;
-  height: 3em;
-  border-radius: 0.5em;
+.to-upload.type-img .to-upload-add-icon {
+  --color: var(--add-color);
+  --size: var(--add-size);
+}
+.to-upload.type-img .to-upload-tip {
+  margin: var(--tip-margin) 0 0 0;
 }
-.to-upload .to-upload-img.pic-size-s .to-upload-add .mode-upload-add {
-  --font-size: 1em;
+.to-upload-button {
+  display: inline-flex;
+  align-items: center;
 }
 .to-upload-mode-line {
   background: none;
 }
 .to-upload-color-danger {
-  background: rgba(249, 57, 32, 0.1);
+  background: var(--danger-bg);
 }
 .to-upload-color-danger:before {
-  border: 1px solid rgba(249, 57, 32, 0.5);
+  border: var(--danger-border);
 }
 .to-upload-tip-show {
   overflow: visible;