@touchvue/ui 1.0.0-beta.13 → 1.0.0-beta.14

package/theme/skin/default.css

@@ -2128,43 +2128,42 @@ input.to-align-inherit,
   background: #3BB346;
 }
 .to-calendar {
-  --bg: #fff;
   position: relative;
-  background: var(--bg);
+  background: #fff;
   text-align: center;
   user-select: none;
 }
 .to-calendar .header {
-  height: calc(1em + 2 * var(--gap));
-  line-height: calc(1em + 2 * var(--gap));
-  background: var(--primary);
+  height: 3em;
+  line-height: 3em;
+  background: #0077fa;
   display: flex;
   width: 100%;
-  color: var(--bg);
+  color: #fff;
   vertical-align: top;
 }
 .to-calendar .header .prevYear,
 .to-calendar .header .nextYear,
 .to-calendar .header .prev,
 .to-calendar .header .next {
-  width: calc(1em + 2 * var(--gap));
+  width: 3em;
   cursor: pointer;
 }
 .to-calendar .header .prev:after {
-  font-family: 'icon';
-  content: '\e009';
+  font-family: "icon";
+  content: "\e009";
 }
 .to-calendar .header .next:after {
-  font-family: 'icon';
-  content: '\e05a';
+  font-family: "icon";
+  content: "\e05a";
 }
 .to-calendar .header .prevYear:after {
-  font-family: 'icon';
-  content: '\e035';
+  font-family: "icon";
+  content: "\e035";
 }
 .to-calendar .header .nextYear:after {
-  font-family: 'icon';
-  content: '\e046';
+  font-family: "icon";
+  content: "\e046";
 }
 .to-calendar .header .info {
   flex: 1;
@@ -2177,16 +2176,16 @@ input.to-align-inherit,
   cursor: pointer;
 }
 .to-calendar .header .info-unfold:after {
-  color: var(--primary-light-3);
+  color: #4da0fc;
   font-size: 75%;
-  font-family: 'icon';
-  content: '\e081';
+  font-family: "icon";
+  content: "\e081";
 }
 .to-calendar .week {
-  background: var(--primary);
-  height: calc(1em + 2 * var(--gap));
-  line-height: calc(1em + 2 * var(--gap));
-  color: var(--bg);
+  background: #0077fa;
+  height: 3em;
+  line-height: 3em;
+  color: #fff;
 }
 .to-calendar .week > ul {
   display: flex;
@@ -2195,40 +2194,40 @@ input.to-align-inherit,
   flex: 1;
 }
 .to-calendar .day {
-  height: calc((1em + 2 * var(--gap)) * 6 + var(--gap));
+  height: 19em;
 }
 .to-calendar .day > ul {
   overflow: hidden;
-  padding: calc(0.5 * var(--gap)) 0;
+  padding: 0.5em 0;
   display: flex;
   flex-wrap: wrap;
 }
 .to-calendar .day > ul > li {
   width: 14.2857%;
   padding: 0;
-  height: calc(1em + 2 * var(--gap));
+  height: 3em;
   text-align: center;
   position: relative;
   cursor: pointer;
 }
 .to-calendar .day > ul > li.sat {
-  color: var(--danger);
+  color: #F93920;
 }
 .to-calendar .day > ul > li.sun {
-  color: var(--danger);
+  color: #F93920;
 }
 .to-calendar .day > ul > li:not(:empty):after {
-  content: '';
-  width: calc(1em + 2 * var(--gap));
-  height: calc(1em + 2 * var(--gap));
+  content: "";
+  width: 3em;
+  height: 3em;
   display: block;
-  border-radius: 52%;
+  border-radius: 50%;
   margin: auto;
 }
 .to-calendar .day > ul > li.end:after,
 .to-calendar .day > ul > li.start:after,
 .to-calendar .day > ul > li.on:after {
-  background: var(--warning);
+  background: #FC8800;
 }
 .to-calendar .day > ul > li > span.solar {
   position: absolute;
@@ -2237,73 +2236,73 @@ input.to-align-inherit,
   bottom: 0;
   left: 0;
   right: 0;
-  line-height: calc(1em + 2 * var(--gap));
+  line-height: 3em;
 }
 .to-calendar .day > ul > li > span.lunar {
   display: none;
 }
 .to-calendar .day > ul > li.dis span {
   cursor: not-allowed;
-  color: var(--fg-light-8);
+  color: #cccccc;
 }
 .to-calendar .day > ul > li.cur {
-  color: var(--primary);
+  color: #0077fa;
 }
 .to-calendar .day > ul > li.start,
 .to-calendar .day > ul > li.end,
 .to-calendar .day > ul > li.on {
-  color: var(--bg);
+  color: #fff;
 }
 .to-calendar .day > ul > li.range {
-  background: var(--warning-op-2);
+  background: rgba(252, 136, 0, 0.2);
 }
 .to-calendar .day > ul > li.start {
-  background: linear-gradient(to right, var(--warning-op-0) 0%, var(--warning-op-0) 50%, var(--warning-op-2) 50%);
+  background: linear-gradient(to right, rgba(252, 136, 0, 0) 0%, rgba(252, 136, 0, 0) 50%, rgba(252, 136, 0, 0.2) 50%);
 }
 .to-calendar .day > ul > li.end {
-  background: linear-gradient(to right, var(--warning-op-2) 0%, var(--warning-op-2) 50%, var(--warning-op-0) 50%);
+  background: linear-gradient(to right, rgba(252, 136, 0, 0.2) 0%, rgba(252, 136, 0, 0.2) 50%, rgba(252, 136, 0, 0) 50%);
 }
 .to-calendar .day > ul > li.start.end {
   background: none;
 }
 .to-calendar .day > ul > li.on:nth-child(7n) > span,
-.to-calendar .day > ul > li.on:nth-child(7n + 1) > span {
-  color: var(--bg);
+.to-calendar .day > ul > li.on:nth-child(7n+1) > span {
+  color: #fff;
 }
 .to-calendar .month > ul > li.end:after,
 .to-calendar .month > ul > li.start:after,
 .to-calendar .month > ul > li.start,
 .to-calendar .month > ul > li.end,
 .to-calendar .month > ul > li.on {
-  color: var(--bg);
+  color: #fff;
 }
 .to-calendar .month > ul > li.range {
-  background: var(--warning-op-2);
+  background: rgba(252, 136, 0, 0.2);
 }
 .to-calendar .month > ul > li.start {
-  background: linear-gradient(to right, var(--warning-op-0) 0%, var(--warning-op-0) 50%, var(--warning-op-2) 50%);
+  background: linear-gradient(to right, rgba(252, 136, 0, 0) 0%, rgba(252, 136, 0, 0) 50%, rgba(252, 136, 0, 0.2) 50%);
 }
 .to-calendar .month > ul > li.end {
-  background: linear-gradient(to right, var(--warning-op-2) 0%, var(--warning-op-2) 50%, var(--warning-op-0) 50%);
+  background: linear-gradient(to right, rgba(252, 136, 0, 0.2) 0%, rgba(252, 136, 0, 0.2) 50%, rgba(252, 136, 0, 0) 50%);
 }
 .to-calendar .month > ul > li.end:after,
 .to-calendar .month > ul > li.start:after,
 .to-calendar .month > ul > li.on:after {
-  background: var(--warning);
+  background: #FC8800;
 }
 .to-calendar .month > ul > li.start.end {
   background: none;
 }
 .to-calendar .shortcut {
-  background: var(--bg);
+  background: #fff;
   position: absolute;
-  bottom: calc(1em + 2 * var(--gap));
+  bottom: 3em;
   left: 0;
   width: 100%;
-  line-height: calc(1em + 2 * var(--gap));
-  color: var(--fg-light-1);
-  border-top: 1px var(--fg-light-9-3) solid;
-  box-shadow: 0 -3px 10px var(--fg-light-9-3);
+  line-height: 3em;
+  color: #191919;
+  border-top: 1px #ededed solid;
+  box-shadow: 0 -3px 10px #ededed;
   z-index: 2;
 }
 .to-calendar .shortcut li {
@@ -2320,9 +2319,9 @@ input.to-align-inherit,
   position: absolute;
   width: 100%;
   bottom: 0;
-  top: calc(1em + 2 * var(--gap));
-  background: var(--bg);
-  color: var(--bg);
+  top: 3em;
+  background: #fff;
+  color: #fff;
   z-index: 12;
 }
 .to-calendar .select ul {
@@ -2332,17 +2331,17 @@ input.to-align-inherit,
   width: 20%;
   float: left;
   text-align: center;
-  height: calc(1em + 2 * var(--gap));
+  height: 3em;
   z-index: 14;
   position: relative;
-  line-height: calc(1em + 2 * var(--gap));
+  line-height: 3em;
   cursor: pointer;
 }
 .to-calendar .select ul li:after {
-  content: '';
-  width: calc(1em + 2 * var(--gap));
-  height: calc(1em + 2 * var(--gap));
-  border-radius: 52%;
+  content: "";
+  width: 3em;
+  height: 3em;
+  border-radius: 50%;
   z-index: -1;
   position: absolute;
   margin: 0 auto;
@@ -2352,26 +2351,26 @@ input.to-align-inherit,
   bottom: 0;
 }
 .to-calendar .select ul li.on:after {
-  background: var(--warning);
+  background: #FC8800;
 }
 .to-calendar .select ul li.on {
-  color: var(--bg);
+  color: #fff;
 }
 .to-calendar .select ul li.dis {
   cursor: not-allowed;
-  color: var(--fg-light-7);
+  color: #b3b3b3;
 }
 .to-calendar .select ul li.cur {
-  color: var(--fg-light-1);
+  color: #191919;
 }
 .to-calendar .select ul li.cur:after {
-  background: var(--primary-light-9);
+  background: #e6f1ff;
 }
 .to-calendar .select ul li.on.cur {
-  color: var(--bg);
+  color: #fff;
 }
 .to-calendar .select ul li.on.cur:after {
-  background: var(--warning);
+  background: #FC8800;
 }
 .to-calendar .select .year {
   width: 100%;
@@ -2379,7 +2378,7 @@ input.to-align-inherit,
   overflow: hidden;
   display: table;
   table-layout: fixed;
-  background: var(--primary);
+  background: #0077fa;
 }
 .to-calendar .select .year > ul {
   display: table-cell;
@@ -2390,20 +2389,20 @@ input.to-align-inherit,
 .to-calendar .select .year .next {
   display: table-cell;
   vertical-align: middle;
-  width: calc(1em + 2 * var(--gap));
+  width: 3em;
   cursor: pointer;
-  color: var(--primary-light-3);
+  color: #4da0fc;
 }
 .to-calendar .select .year .prev:after {
-  font-family: 'icon';
-  content: '\e009';
+  font-family: "icon";
+  content: "\e009";
 }
 .to-calendar .select .year .next:after {
-  font-family: 'icon';
-  content: '\e05a';
+  font-family: "icon";
+  content: "\e05a";
 }
 .to-calendar .select .month {
-  color: var(--fg-light-1);
+  color: #191919;
   margin-top: 0.5em;
 }
 .to-calendar .select .month > ul > li {
@@ -2415,28 +2414,23 @@ input.to-align-inherit,
   float: none;
 }
 .to-calendar .time {
-  background: var(--bg-dark-0-5);
+  background: #f2f2f2;
   display: flex;
 }
 .to-calendar .time .input {
   flex: 1;
   width: 1px;
 }
-.to-calendar .time .to-calendar-time-input .to-input {
-  padding-left: 0;
-  padding-right: 0;
-  width: 100%;
-}
 .to-calendar .time > .text {
-  color: var(--fg-light-6);
-  padding: 0 calc(0.5 * var(--gap));
-  line-height: calc(1em + 2 * var(--gap));
+  color: #999999;
+  padding: 0 0.5em;
+  line-height: 3em;
 }
 .to-calendar .time .option {
-  background: var(--bg);
+  background: #fff;
   position: absolute;
   top: 0;
-  bottom: calc(1em + 2 * var(--gap));
+  bottom: 3em;
   left: 0;
   width: 100%;
   box-shadow: 0 -0.25em 0.25em rgba(0, 0, 0, 0.1);
@@ -2447,14 +2441,14 @@ input.to-align-inherit,
 .to-calendar .time .option .content {
   display: flex;
   position: absolute;
-  top: calc((1em + 2 * var(--gap)) * 1.167);
+  top: 3.501em;
   bottom: 0;
   width: 100%;
   left: 0;
 }
 .to-calendar .time .option .content .to-scroll {
   flex: 1;
-  border-right: 1px solid var(--fg-light-9-5);
+  border-right: 1px solid #f2f2f2;
 }
 .to-calendar .time .option .content .to-scroll:last-child {
   border: 0 none;
@@ -2462,11 +2456,11 @@ input.to-align-inherit,
 .to-calendar .time .option .content > ul > li {
   float: left;
   width: 16.6%;
-  height: calc(1em + 2 * var(--gap));
+  height: 3em;
   position: relative;
   z-index: 13;
   overflow: hidden;
-  line-height: calc(1em + 2 * var(--gap));
+  line-height: 3em;
   cursor: pointer;
 }
 .to-calendar .time .option .content > ul > li:nth-child(6n) {
@@ -2474,10 +2468,10 @@ input.to-align-inherit,
   width: auto;
 }
 .to-calendar .time .option .content > ul > li:after {
-  content: '';
-  width: calc(1em + 2 * var(--gap));
-  height: calc(1em + 2 * var(--gap));
-  border-radius: 52%;
+  content: "";
+  width: 3em;
+  height: 3em;
+  border-radius: 50%;
   z-index: -1;
   position: absolute;
   margin: 0 auto;
@@ -2487,20 +2481,20 @@ input.to-align-inherit,
   bottom: 0;
 }
 .to-calendar .time .option .content > ul > li.on:after {
-  background: var(--warning) !important;
+  background: #FC8800 !important;
 }
 .to-calendar .time .option .content > ul > li.on {
-  color: var(--bg);
+  color: #fff;
 }
 .to-calendar .time .option .content > ul > li.dis {
   cursor: not-allowed;
-  color: var(--fg-light-7);
+  color: #b3b3b3;
 }
 .to-calendar .time > .on {
-  background: var(--bg);
+  background: #fff;
 }
 .to-calendar .time > .on .text {
-  color: var(--fg-light-1);
+  color: #191919;
 }
 .to-calendar .time > .on .option {
   display: block;
@@ -2523,15 +2517,15 @@ input.to-align-inherit,
 .to-calendar-type-month .select {
   position: relative;
   top: auto;
-  padding-bottom: calc(6 * var(--gap));
+  padding-bottom: 6em;
 }
 .to-calendar-size-large {
-  border: 1px solid var(--fg-light-8-5);
+  border: 1px solid #d9d9d9;
 }
 .to-calendar-size-large .day {
   overflow: hidden;
   height: auto;
-  background: var(--bg-dark-0-2);
+  background: #fafafa;
 }
 .to-calendar-size-large .day > ul {
   margin-left: -1px;
@@ -2539,11 +2533,11 @@ input.to-align-inherit,
   padding: 0;
 }
 .to-calendar-size-large .day > ul > li {
-  height: calc(5.3em + var(--gap));
+  height: 6.3em;
   box-sizing: border-box;
-  padding: calc(0.5 * var(--gap));
-  border-left: 1px solid var(--fg-light-8-5);
-  border-bottom: 1px solid var(--fg-light-8-5);
+  padding: 0.5em;
+  border-left: 1px solid #d9d9d9;
+  border-bottom: 1px solid #d9d9d9;
 }
 .to-calendar-size-large .day > ul > li:not(:empty):after {
   z-index: -1;
@@ -2560,15 +2554,15 @@ input.to-align-inherit,
 .to-calendar-size-large .day > ul > li > span.solar {
   z-index: 1;
   line-height: 1em;
-  left: calc(0.5 * var(--gap));
-  top: calc(0.5 * var(--gap));
+  left: 0.5em;
+  top: 0.5em;
   text-align: left;
 }
 .to-calendar-size-large .day > ul > li:not(:empty) {
-  background: var(--bg);
+  background: #fff;
 }
 .to-calendar-size-large .day > ul > li:not(:empty):hover {
-  background: var(--bg-dark-0-7);
+  background: #ededed;
 }
 .to-calendar-size-large .day > ul > li:empty {
   border-left: 0;
@@ -2577,26 +2571,26 @@ input.to-align-inherit,
   border-right: 0 none;
 }
 .to-calendar-size-large .day > ul > li.on:nth-child(7n) > span,
-.to-calendar-size-large .day > ul > li.on:nth-child(7n + 1) > span {
-  color: var(--danger);
+.to-calendar-size-large .day > ul > li.on:nth-child(7n+1) > span {
+  color: #F93920;
 }
 .to-calendar-size-large .day > ul > li.on {
-  color: var(--fg);
+  color: #000;
   z-index: 2;
 }
 .to-calendar-size-large .day > ul > li.on:not(:empty):after {
-  background: var(--primary-op-1);
-  border: 1px solid var(--primary-light-5);
+  background: rgba(0, 119, 250, 0.1);
+  border: 1px solid #80bbfd;
 }
 .to-calendar-size-large .day > ul > li:last-child:after {
-  border-right: 1px solid var(--fg-light-8-5);
+  border-right: 1px solid #d9d9d9;
 }
 .to-calendar-size-large .to-calendar-points {
   transform: scale(0.8);
   z-index: 1;
   left: 0;
   top: auto;
-  bottom: calc(0.2 * var(--gap));
+  bottom: 0.2em;
   right: auto;
   text-align: left;
   transform-origin: bottom left;
@@ -2605,99 +2599,99 @@ input.to-align-inherit,
   margin-top: 0;
 }
 .to-calendar-size-large .to-calendar-legend {
-  border-top: 1px solid var(--fg-light-8-5);
-  padding: calc(0.25 * var(--gap));
+  border-top: 1px solid #d9d9d9;
+  padding: 0.25em;
 }
 .to-calendar-lunar .day > ul > li > span.solar {
   line-height: 1.2;
   font-size: 85.71%;
-  top: calc(((1em + 2 * var(--gap))-(1.2 * 0.875)-(1.2 * 0.75))/0.875/2);
+  top: 1.05em/0.875/2;
 }
 .to-calendar-lunar .day > ul > li > span.lunar {
   line-height: 1.2;
   position: absolute;
   margin: 0;
   font-size: 75%;
-  bottom: calc(((1em + 2 * var(--gap))-(1.2 * 0.875)-(1.2 * 0.75))/0.75/2);
+  bottom: 1.05em/0.75/2;
   left: 0;
   right: 0;
   text-align: center;
   width: 100%;
   overflow: hidden;
-  color: var(--fg-light-6);
+  color: #999999;
   display: inline-block;
   margin: auto;
   white-space: nowrap;
 }
 .to-calendar-lunar .day > ul > li > span.lunar-month {
-  color: var(--primary);
+  color: #0077fa;
 }
 .to-calendar-lunar .day > ul > li.on > span.lunar {
-  color: var(--bg);
+  color: #fff;
 }
 .to-calendar-lunar.to-calendar-s .day > ul > li > span.solar {
-  line-height: calc(1em + 2 * var(--gap));
+  line-height: 3em;
 }
 .to-calendar-lunar.to-calendar-s .day > ul > li > span.lunar {
   display: none;
 }
 .to-calendar-hasTime {
-  height: calc(10 * (1em + 2 * var(--gap)) + var(--gap));
+  height: 31em;
 }
 .s_pc .to-calendar .header .prevYear:hover,
 .s_pc .to-calendar .header .nextYear:hover,
 .s_pc .to-calendar .header .info-unfold:hover,
 .s_pc .to-calendar .header .prev:hover,
 .s_pc .to-calendar .header .next:hover {
-  background: var(--primary-light-3);
+  background: #4da0fc;
 }
 .s_pc .to-calendar .day > ul > li:not(:empty):hover:after {
-  background: var(--bg-dark-0-7);
+  background: #ededed;
 }
 .s_pc .to-calendar .day > ul > li.end:hover:after,
 .s_pc .to-calendar .day > ul > li.start:hover:after,
 .s_pc .to-calendar .day > ul > li.on:hover:after {
-  background: var(--warning);
+  background: #FC8800;
 }
 .s_pc .to-calendar .day > ul > li.dis:hover:after {
   background: none;
 }
 .s_pc .to-calendar .select ul li:hover:after {
-  background: var(--bg-dark-0-7);
+  background: #ededed;
 }
 .s_pc .to-calendar .select ul li:hover {
-  color: var(--fg-light-1);
+  color: #191919;
 }
 .s_pc .to-calendar .select ul li.on:hover:after {
-  background: var(--warning);
+  background: #FC8800;
 }
 .s_pc .to-calendar .select ul li.on:hover {
-  color: var(--bg);
+  color: #fff;
 }
 .s_pc .to-calendar .select ul li.dis:hover:after {
   background: none;
 }
 .s_pc .to-calendar .select .year .next:hover,
 .s_pc .to-calendar .select .year .prev:hover {
-  background: var(--primary-dark-1);
+  background: #006be1;
 }
 .s_pc .to-calendar .shortcut li:hover {
-  background: var(--bg-dark-0-7);
+  background: #ededed;
 }
 .s_pc .to-calendar .time .option > ul > li:hover:after {
-  background: var(--bg-dark-0-7);
-  color: var(--fg-light-1);
+  background: #ededed;
+  color: #191919;
 }
 .s_pc .to-calendar .time .option > ul > li.dis:hover:after {
   background: none;
 }
 .s_pc .to-calendar-size-large .day > ul > li:not(:empty):hover:after {
-  background: var(--bg-dark-0-5);
-  border: 1px solid var(--fg-light-8-5);
+  background: #f2f2f2;
+  border: 1px solid #d9d9d9;
 }
 .s_pc .to-calendar-size-large .day > ul > li.on:hover:after {
-  background: var(--primary-light-9);
-  border: 1px solid var(--primary-light-5);
+  background: #e6f1ff;
+  border: 1px solid #80bbfd;
 }
 .s_pc .to-calendar .header .info.active,
 .s_phone .to-calendar .header .info.active,
@@ -2708,17 +2702,17 @@ input.to-align-inherit,
 .s_pc .to-calendar .header .next.active,
 .s_phone .to-calendar .header .next.active,
 .s_pad .to-calendar .header .next.active {
-  background: var(--primary-dark-1);
+  background: #006be1;
 }
 .s_pc .to-calendar .day > ul > li:not(:empty).active:after,
 .s_phone .to-calendar .day > ul > li:not(:empty).active:after,
 .s_pad .to-calendar .day > ul > li:not(:empty).active:after {
-  background: var(--bg-dark-0-7);
+  background: #ededed;
 }
 .s_pc .to-calendar .day > ul > li.on.active:after,
 .s_phone .to-calendar .day > ul > li.on.active:after,
 .s_pad .to-calendar .day > ul > li.on.active:after {
-  background: var(--warning);
+  background: #FC8800;
 }
 .s_pc .to-calendar .day > ul > li.dis.active:after,
 .s_phone .to-calendar .day > ul > li.dis.active:after,
@@ -2728,8 +2722,8 @@ input.to-align-inherit,
 .s_pc .to-calendar .time .option > ul > li.active:after,
 .s_phone .to-calendar .time .option > ul > li.active:after,
 .s_pad .to-calendar .time .option > ul > li.active:after {
-  background: var(--bg-dark-0-7);
-  color: var(--fg-light-1);
+  background: #ededed;
+  color: #191919;
 }
 .s_pc .to-calendar .time .option > ul > li.dis.active:after,
 .s_phone .to-calendar .time .option > ul > li.dis.active:after,
@@ -2739,22 +2733,22 @@ input.to-align-inherit,
 .s_pc .to-calendar .select ul li.active:after,
 .s_phone .to-calendar .select ul li.active:after,
 .s_pad .to-calendar .select ul li.active:after {
-  background: var(--bg-dark-0-7);
+  background: #ededed;
 }
 .s_pc .to-calendar .select ul li.active,
 .s_phone .to-calendar .select ul li.active,
 .s_pad .to-calendar .select ul li.active {
-  color: var(--fg-light-1);
+  color: #191919;
 }
 .s_pc .to-calendar .select ul li.on.active:after,
 .s_phone .to-calendar .select ul li.on.active:after,
 .s_pad .to-calendar .select ul li.on.active:after {
-  background: var(--warning);
+  background: #FC8800;
 }
 .s_pc .to-calendar .select ul li.on.active,
 .s_phone .to-calendar .select ul li.on.active,
 .s_pad .to-calendar .select ul li.on.active {
-  color: var(--bg);
+  color: #fff;
 }
 .s_pc .to-calendar .select ul li.dis.active:after,
 .s_phone .to-calendar .select ul li.dis.active:after,
@@ -2767,23 +2761,17 @@ input.to-align-inherit,
 .s_pc .to-calendar .select .year .prev.active,
 .s_phone .to-calendar .select .year .prev.active,
 .s_pad .to-calendar .select .year .prev.active {
-  background: var(--primary-dark-1);
+  background: #006be1;
 }
 .s_pc .to-calendar-size-large .day > ul > li:not(:empty):active:after,
 .s_phone .to-calendar-size-large .day > ul > li:not(:empty):active:after,
 .s_pad .to-calendar-size-large .day > ul > li:not(:empty):active:after {
-  background: var(--bg-dark-1);
+  background: #e6e6e6;
 }
 .s_pc .to-calendar-size-large .day > ul > li.on:active:after,
 .s_phone .to-calendar-size-large .day > ul > li.on:active:after,
 .s_pad .to-calendar-size-large .day > ul > li.on:active:after {
-  background: var(--primary-op-2);
-}
-.to-calendar-time-input {
-  background-color: var(--bg-dark-0-2);
-}
-.to-calendar-time-input .to-input {
-  background-color: var(--bg-dark-0-2);
+  background: rgba(0, 119, 250, 0.2);
 }
 .to-select {
   --height: var(--height-fe);
@@ -3167,7 +3155,7 @@ input.to-align-inherit,
 }
 .to-form-value {
   flex: 1;
-  overflow: hidden;
+  min-width: 0;
 }
 .to-form-value .to-switch {
   margin-top: calc((var(--item-height) - 1.43em) / 2);
@@ -5369,6 +5357,15 @@ input.to-align-inherit,
   border-collapse: collapse;
   width: 100%;
 }
+.to-table-col {
+  min-width: 5em;
+}
+.to-table-col.type-index,
+.to-table-col.type-radio,
+.to-table-col.type-check {
+  width: 3em;
+  min-width: auto;
+}
 .to-table-th {
   background: var(--th-bg);
   height: var(--th-height);
@@ -6061,6 +6058,7 @@ input.to-align-inherit,
   --item-bg: var(--color-bg);
   --item-radius: var(--radius-fe);
   --item-shadow: none;
+  --item-gap: 0.5em;
   --check-size: 1em;
   --check-bg: #fff;
   --check-color: #fff;
@@ -6082,10 +6080,34 @@ input.to-align-inherit,
   --hover-item-color: var(--item-color);
   --hover-item-bg: rgba(0, 0, 0, 0.1);
   --hover-item-shadow: var(--item-shadow);
+  --hover-check-bg: var(--check-bg);
+  --hover-check-color: var(--check-color);
+  --hover-check-border: var(--check-border);
+  --hover-radio-border: var(--radio-border);
   --active-item-border: var(--item-border);
   --active-item-color: var(--item-color);
   --active-item-bg: rgba(0, 0, 0, 0.2);
   --active-item-shadow: var(--item-shadow);
+  --active-check-bg: var(--check-bg);
+  --active-check-color: var(--check-color);
+  --active-check-border: var(--check-border);
+  --active-radio-border: var(--radio-border);
+  --on-hover-item-border: var(--on-item-border);
+  --on-hover-item-color: var(--on-item-color);
+  --on-hover-item-bg: rgba(0, 0, 0, 0.1);
+  --on-hover-item-shadow: var(--on-item-shadow);
+  --on-hover-check-bg: var(--on-check-bg);
+  --on-hover-check-color: var(--on-check-color);
+  --on-hover-check-border: var(--on-check-border);
+  --on-hover-radio-border: var(--on-radio-border);
+  --on-active-item-border: var(--on-item-border);
+  --on-active-item-color: var(--on-item-color);
+  --on-active-item-bg: rgba(0, 0, 0, 0.2);
+  --on-active-item-shadow: var(--on-item-shadow);
+  --on-active-check-bg: var(--on-check-bg);
+  --on-active-check-color: var(--on-check-color);
+  --on-active-check-border: var(--on-check-border);
+  --on-active-radio-border: var(--on-radio-border);
 }
 .to-segment {
   position: relative;
@@ -6106,7 +6128,7 @@ input.to-align-inherit,
   box-sizing: border-box;
   border-radius: var(--item-radius);
   border: var(--item-border);
-  height: var(--height);
+  min-height: var(--height);
   padding: var(--item-padding);
   gap: 0.5em;
   display: flex;
@@ -6138,18 +6160,37 @@ input.to-align-inherit,
   background: var(--on-item-bg);
   z-index: 1;
 }
+.to-segment-item.is-on:hover {
+  background: var(--on-hover-item-bg);
+  border: var(--on-hover-item-border);
+  color: var(--on-hover-item-color);
+  box-shadow: var(--on-hover-item-shadow);
+}
+.to-segment-item.is-on:active {
+  background: var(--on-active-item-bg);
+  border: var(--on-active-item-border);
+  color: var(--on-active-item-color);
+  box-shadow: var(--on-active-item-shadow);
+}
 .to-segment-check {
   display: none;
 }
-.to-segment-text {
+.to-segment-content {
+  display: flex;
+  align-items: center;
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  gap: var(--item-gap);
+}
+.to-segment-icon {
+  --width: 1em;
+  --height: 1em;
+  --size: 1em;
 }
 .to-segment.type-check .to-segment-check {
   display: flex;
-  content: '';
   width: var(--check-size);
   height: var(--check-size);
   box-sizing: border-box;
@@ -6160,18 +6201,39 @@ input.to-align-inherit,
   border-radius: var(--check-radius);
   align-items: center;
   justify-content: center;
+  box-shadow: var(--check-shadow);
 }
 .to-segment.type-check .to-segment-check:after {
-  content: "\e05c";
+  content: "\e6cd";
   font-family: "icon";
   font-size: var(--check-font-size);
   vertical-align: top;
 }
+.to-segment.type-check .to-segment-item:hover .to-segment-check {
+  background: var(--hover-check-bg);
+  color: var(--hover-check-color);
+  border: var(--hover-check-border);
+}
+.to-segment.type-check .to-segment-item:active .to-segment-check {
+  background: var(--active-check-bg);
+  color: var(--active-check-color);
+  border: var(--active-check-border);
+}
 .to-segment.type-check .to-segment-item.is-on .to-segment-check {
   color: var(--on-check-color);
   border: var(--on-check-border);
   background: var(--on-check-bg);
 }
+.to-segment.type-check .to-segment-item.is-on:hover .to-segment-check {
+  background: var(--on-hover-check-bg);
+  color: var(--on-hover-check-color);
+  border: var(--on-hover-check-border);
+}
+.to-segment.type-check .to-segment-item.is-on:active .to-segment-check {
+  background: var(--on-active-check-bg);
+  color: var(--on-active-check-color);
+  border: var(--on-active-check-border);
+}
 .to-segment.type-radio .to-segment-check {
   content: '';
   width: var(--radio-size);
@@ -6182,9 +6244,21 @@ input.to-align-inherit,
   background: #fff;
   display: block;
 }
+.to-segment.type-radio .to-segment-item:hover .to-segment-check {
+  border: var(--hover-radio-border);
+}
+.to-segment.type-radio .to-segment-item:active .to-segment-check {
+  border: var(--active-radio-border);
+}
 .to-segment.type-radio .to-segment-item.is-on .to-segment-check {
   border: var(--on-radio-border);
 }
+.to-segment.type-radio .to-segment-item.is-on:hover .to-segment-check {
+  border: var(--on-hover-radio-border);
+}
+.to-segment.type-radio .to-segment-item.is-on:active .to-segment-check {
+  border: var(--on-active-radio-border);
+}
 .to-segment.type-sku {
   --check-color: var(--color-primary);
   --check-size: 0.8;
@@ -6215,7 +6289,7 @@ input.to-align-inherit,
   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;