@touchvue/ui 1.0.0-beta.60 → 1.0.0-beta.62

package/theme/skin/default.css

@@ -720,6 +720,26 @@ html body .height-full {
 .to-grid.dir-v > * {
   white-space: normal;
 }
+.to-grid > *[align="top"],
+.to-grid > *.to-grid-item.align-top {
+  align-self: flex-start;
+}
+.to-grid > *[align="center"],
+.to-grid > *.to-grid-item.align-center {
+  align-self: center;
+}
+.to-grid > *[align="bottom"],
+.to-grid > *.to-grid-item.align-bottom {
+  align-self: flex-end;
+}
+.to-grid > *[align="stretch"],
+.to-grid > *.to-grid-item.align-stretch {
+  align-self: stretch;
+}
+.to-grid > *[align="baseline"],
+.to-grid > *.to-grid-item.align-baseline {
+  align-self: baseline;
+}
 .to-grid.va-top {
   align-items: flex-start;
 }
@@ -734,10 +754,13 @@ html body .height-full {
   align-items: stretch;
 }
 .to-grid.is-col {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(var(--col), minmax(0, 1fr));
+  column-gap: var(--gap-x);
+  row-gap: var(--gap-y);
 }
 .to-grid.is-col > * {
-  width: calc((100% - (var(--col) - 1) * var(--gap-x)) / var(--col) * var(--merge) + (var(--merge) - 1) * var(--gap-x));
+  grid-column: span var(--merge);
 }
 .to-grid.is-col > *[merge="1"] {
   --merge: 1;
@@ -769,10 +792,6 @@ html body .height-full {
 .to-grid.is-col > *[merge="10"] {
   --merge: 10;
 }
-.to-grid.is-col > .to-grid {
-  --item-col: var(--col);
-  width: calc((100% - (var(--item-col) - 1) * var(--gap-x)) / var(--item-col) * var(--merge) + (var(--merge) - 1) * var(--gap-x));
-}
 .to-grid.col-avg {
   display: flex;
 }
@@ -823,21 +842,6 @@ html body .height-full {
 .to-grid-item {
   box-sizing: border-box;
 }
-.to-grid-item.align-top {
-  align-self: flex-start;
-}
-.to-grid-item.align-center {
-  align-self: center;
-}
-.to-grid-item.align-bottom {
-  align-self: flex-end;
-}
-.to-grid-item.align-stretch {
-  align-self: stretch;
-}
-.to-grid-item.align-baseline {
-  align-self: baseline;
-}
 .to-grid.height-full:not(.dir-v) > .to-grid-item {
   height: 100%;
 }
@@ -2105,21 +2109,26 @@ html body .height-full {
 }
 .to-tag.type-corner {
   position: absolute;
-}
-.to-tag.type-corner {
   right: 0;
   top: 0;
 }
 .to-tag.type-corner .to-tag-wrapper {
   border-radius: 0 0 0 var(--radius);
 }
+.to-tag.type-corner .to-tag-wrapper::after {
+  border-radius: 0 0 0 var(--radius);
+}
 .to-tag.type-corner.position-top-left {
   left: 0;
   top: 0;
+  right: auto;
 }
 .to-tag.type-corner.position-top-left .to-tag-wrapper {
   border-radius: 0 0 var(--radius) 0;
 }
+.to-tag.type-corner.position-top-left .to-tag-wrapper::after {
+  border-radius: 0 0 var(--radius) 0;
+}
 .to-tag.type-corner.position-bottom-left {
   left: 0;
   bottom: 0;
@@ -2129,6 +2138,9 @@ html body .height-full {
 .to-tag.type-corner.position-bottom-left .to-tag-wrapper {
   border-radius: 0 var(--radius) 0 0;
 }
+.to-tag.type-corner.position-bottom-left .to-tag-wrapper::after {
+  border-radius: 0 var(--radius) 0 0;
+}
 .to-tag.type-corner.position-bottom-right {
   right: 0;
   bottom: 0;
@@ -2137,6 +2149,9 @@ html body .height-full {
 .to-tag.type-corner.position-bottom-right .to-tag-wrapper {
   border-radius: var(--radius) 0 0 0;
 }
+.to-tag.type-corner.position-bottom-right .to-tag-wrapper::after {
+  border-radius: var(--radius) 0 0 0;
+}
 .to-tag.is-link {
   cursor: pointer;
 }
@@ -2244,6 +2259,8 @@ html body .height-full {
 }
 .to-box.is-checked {
   overflow: hidden;
+}
+.to-box.is-checked:before {
   border: var(--check-border);
 }
 .to-box.is-checked .to-box-check {
@@ -4695,6 +4712,8 @@ html body .height-full {
 }
 .to-msg.dir-h .to-msg-main {
   flex: 1;
+  margin-left: var(--main-margin);
+  margin-top: 0;
 }
 .to-msg.dir-h .to-msg-fn {
   --fn-align: right;
@@ -5394,7 +5413,7 @@ html body .height-full {
   --box-active-bg: var(--box-bg);
   --box-active-color: var(--box-color);
   --box-active-border: var(--box-border);
-  --label-color: inherit;
+  --label-color: #000;
   --label-size: 100%;
   --label-weight: normal;
   --checked-bg: var(--bg);
@@ -6594,6 +6613,12 @@ html body .height-full {
   --body-size: var(--size);
   --body-even-color: var(--body-color);
   --body-even-bg: var(--body-bg);
+  --body-item-hover-border: 0 none;
+  --body-item-hover-bg: rgba(0, 0, 0, 0.1);
+  --body-item-hover-color: var(--body-color);
+  --body-item-active-border: 0 none;
+  --body-item-active-bg: rgba(0, 0, 0, 0.2);
+  --body-item-active-color: var(--body-color);
   --action-gap: 1em;
   --action-padding: 0;
   --radio-size: 1em;
@@ -6676,6 +6701,19 @@ html body .height-full {
   color: var(--body-even-color);
   background-size: var(--body-bg-size);
 }
+.to-table-body-row.is-checkable {
+  cursor: pointer;
+}
+.to-table-body-row.is-checkable:hover {
+  border: var(--body-item-hover-border);
+  background: var(--body-item-hover-bg);
+  color: var(--body-item-hover-color);
+}
+.to-table-body-row.is-checkable:active {
+  border: var(--body-item-active-border);
+  background: var(--body-item-active-bg);
+  color: var(--body-item-active-color);
+}
 .to-table-detail-row .to-table-detail-cell {
   border-bottom: var(--body-divider-x);
 }
@@ -6735,6 +6773,7 @@ html body .height-full {
   box-sizing: border-box;
   border: var(--radio-border);
   background: #fff;
+  border-radius: 50%;
 }
 .to-table-radio.is-checked:before {
   border: var(--on-radio-border);
@@ -6827,7 +6866,6 @@ html body .height-full {
 .to-table-wrapper {
   position: relative;
   overflow: auto;
-  overscroll-behavior: none;
   height: 100%;
   z-index: 0;
 }
@@ -7102,6 +7140,7 @@ html body .height-full {
   --color: var(--color-fg);
   --lh: 1.5em;
   --align: center;
+  --content-margin: 0.5em;
   --remove-margin: 0.5em;
   --close-margin: 0.5em;
 }
@@ -7276,6 +7315,14 @@ html body .height-full {
   bottom: 1em;
   pointer-events: all;
 }
+.to-fix-wrapper img,
+.to-fix-wrapper a {
+  -webkit-user-drag: none;
+  user-select: none;
+}
+.to-fix-wrapper img {
+  -webkit-touch-callout: none;
+}
 .to-fix-number {
   --inset: -0.5em -0.5em auto auto;
   position: absolute;
@@ -7673,6 +7720,7 @@ html body .height-full {
 }
 .to-segment.type-sku {
   --item-on-border: var(--sku-border);
+  --check-margin: 0;
 }
 .to-segment.type-sku .to-segment-check {
   position: absolute;