ai.touchui-vue 1.30.2 → 1.30.4

package/packages/theme/src/less/component/tab.less

@@ -1,459 +1,459 @@
-// 分页标签组件
-.to-tab {
-	z-index:0; overflow:hidden; width:100%; position:relative;
-	> .tab {
-		display:flex; position:relative; align-items:center;
-		> .title {
-			font-weight:bold; font-size:116.67%; line-height:1+2*@gap; padding:0 @gap;
-		}
-		> .list {
-			overflow:hidden; flex:1; white-space:nowrap;
-			ul { overflow:hidden; display:inline-block; vertical-align:top; margin-left:-100000px; position:relative; left:100000px;}
-			li {
-				position:relative; float:left;
-				.content {
-					overflow:hidden; padding:0 @gap; color:@fg-light-5; font-size:116.67%; cursor:pointer; line-height:1+2*@gap; transition:background 0.3s ease-out; text-overflow:ellipsis; display:flex; align-items:center;
-					> .icon { display:inline-block;}
-					> .pic {
-						margin-right:0.5*@gap; display:inline-flex;
-						.to-pic { display:inline-flex; align-items:center;}
-					}
-					> .label { flex:1; vertical-align:middle; box-sizing:border-box;}
-					> .label .text { width:100%; overflow:hidden; text-overflow:ellipsis; display:block; white-space:nowrap;}
-					> .icon + .label { margin-left:0.5*@gap;}
-					> .number { display:inline; margin-left:0.5*@gap;}
-				}
-				.delete { display:none;}
-			}
-			li.deletable {
-				.content { padding-right:1+2*@gap;}
-				.delete { border-radius:50%; width:1+@gap; border-radius:1+@gap; height:1+@gap; line-height:1+@gap; text-align:center; cursor:default; position:absolute; right:((1+2*@gap)*1.1667-1-@gap)/2; top:((1+2*@gap)*1.1667-1-@gap)/2; background:@bg-dark-0-5;}
-			}
-			li.on .content { cursor:default; font-weight:bold; color:@fg;}
-		}
-		> .fn {
-			padding:((1+2*@gap)*1.1667-(1+2*@gap))/2;
-			ul { float:left; margin-left:0; left:0;}
-			li {
-				float:left; font-size:1em; color:@fg-light-1; padding:0 @gap; cursor:pointer; text-indent:0; white-space:nowrap;
-				> button { float:left; background:none; border:0 none; color:@fg; margin:0 -@gap; line-height:(1+2*@gap); height:(1+2*@gap);}
-				> .to-select { float:left; margin:0 -@gap; line-height:(1+2*@gap); height:(1+2*@gap); border:0 none; background:none;}
-				> .to-select:after { margin-top:-(1+2*@gap)/0.75; line-height:(1+2*@gap)/0.75; height:(1+2*@gap)/0.75;}
-				[class*="to-icon"] { margin-right:0.5*@gap;}
-				.to-icon-fold,
-				.to-icon-unfold { color:@fg-light-7;}
-				span + .to-icon-fold,
-				span + .to-icon-unfold { margin:0 0 0 1/0.75*@gap; font-size:75%;}
-				> label {
-					float:left; padding:0 @gap; margin:0 -@gap;
-					input[type="checkbox"] { vertical-align:top; margin-top:((1+2*@gap)/0.8571-1)/2; margin-right:0.5*@gap;}
-				}
-			}
-			input,
-			.to-select,
-			.to-group,
-			.to-mix,
-			.to-space,
-			> button { float:left;}
-			> button { margin-left:-1px;}
-			label {
-				float:left; line-height:1+2*@gap; color:@bg; padding:0 @gap;
-				input[type="checkbox"] { margin-top:@gap; margin-right:0.5*@gap;}
-			}
-		}
-	}
-	> .to-tabPage {
-		overflow:hidden; position:relative; z-index:0;
-		> .content { position:relative;}
-	}
-}
-.s_phone .to-tab > .tab > .list { overflow:auto;}
-
-
-
-// 超过限制显示方式
-.to-tab-over-wrap {
-	.tab > .list ul { margin:0; left:0;}
-}
-.to-tab-over-avg {
-	> .tab {
-		width:auto;
-		> .list {
-			ul { display:flex; margin:0; left:0; width:auto;}
-			li {
-				flex:1;
-				.content {
-					padding-right:1em;
-					.label { width:1px;}
-				}
-			}
-			li.deletable {
-				.content {
-					padding-right:1em;
-				}
-			}
-		}
-		> .fn { display:none;}
-	}
-}
-
-
-
-// 全屏高度
-.to-tab[style*="height"],
-.to-tab-height-full {
-	display:flex; flex-flow:column;
-	> .to-tabPage { flex:1; height:1px;}
-	> .to-tabPage > .content { height:100%; overflow:auto;}
-}
-.to-tab-height-full {
-	position:absolute; top:0; left:0; right:0; bottom:0;
-}
-.to-tab-height-full.to-tab[style*="height"] {
-	position:relative; top:auto; left:auto; right:auto; bottom:auto;
-}
-.to-tab[style*="height"].to-tab-dot,
-.to-tab-height-full.to-tab-dot {
-	> .to-tabPage { top:0;}
-}
-.to-tab[style*="height"].to-tab-dot-out,
-.to-tab-height-full.to-tab-dot-out {
-	padding-bottom:0;
-	> .to-tabPage { bottom:0.5+@gap;}
-}
-
-
-
-// 位置
-.to-tab-position-bottom {
-	display:flex; flex-wrap:wrap;
-	> .tab { width:100%; order:2;}
-	> .to-tabPage {
-		width:100%; order:1;
-	}
-}
-.to-tab-position-left {
-	display:flex; width:100%;
-	> .tab {
-		position:relative;
-		display:flex !important;
-		flex-flow: column;
-		align-items: flex-start;
-		.list {
-			//height:100%;
-			flex: 1;
-			margin:0;
-			overflow: hidden !important;
-			ul { margin:0; left:0;overflow: auto;height: 100%;}
-			li { float:none; position:relative;}
-			li.on:before { display:block;}
-		}
-		.fn {
-			text-align: center;
-			width: 100%;
-			button{
-				margin: 0 auto;
-				display: block;
-				float: none;
-			}
-			//display:none;
-		}
-	}
-	> .to-tabPage { flex:1;}
-}
-.to-tab-height-full.to-tab-position-left,
-.to-tab-position-left[style*="height"] {
-	display:flex; flex-flow:row;
-	> .tab { display:block; width:auto; height:100%; overflow:auto;}
-	> .tab > .list { overflow:visible;}
-	> .to-tabPage { flex:1; display:block; height:100%; position:relative; top:auto; bottom:auto; left:auto; right:auto;}
-}
-
-
-
-// 标题插件
-.to-tab-title {
-	> .tab {
-		> .list {
-			text-align:right;
-			ul { float:right; margin:0; left:0;}
-		}
-	}
-}
-// .to-tab-title.to-tab-sub {
-// 	> .tab {
-// 		.title { color:@fg;}
-// 		li { margin-right:0; margin-left:1px;}
-// 	}
-// }
-
-
-
-// 内容悬浮
-.to-tabPage-float {
-	position:absolute; left:0; width:100%; z-index:2;
-}
-
-
-
-// 滑动
-.to-tab-slide {
-	padding-bottom:4.13em;
-	> .tab {
-		background:@bg; padding:0.5em; position:absolute; z-index:200; left:0; top:100%; margin-top:-4.13em; width:100%;
-		> .fn {
-			button { background:none; color:@fg-light-8;}
-		}
-		li {
-			padding:0; font-size:100%; height:3.13em; margin-right:0.5em; line-height:normal;
-			img { width:3.13em; height:3.13em;}
-		}
-		li.on { background:none !important; position:relative;}
-		li.on:before { content:""; position:absolute; left:0; top:0; bottom:0; right:0; border:0.1em solid @danger;}
-	}
-}
-[class*="to-tab-slide-"] {
-	> .to-tabPage > .content { float:left; width:30%;}
-}
-.to-tab-slide-20 {
-	> .to-tabPage { width:2020%;}
-	> .to-tabPage > .content { width:5%;}
-}
-.to-tab-slide-19 {
-	> .to-tabPage { width:1920%;}
-	> .to-tabPage > .content { width:5.26%;}
-}
-.to-tab-slide-18 {
-	> .to-tabPage { width:1820%;}
-	> .to-tabPage > .content { width:5.55%;}
-}
-.to-tab-slide-17 {
-	> .to-tabPage { width:1720%;}
-	> .to-tabPage > .content { width:5.88%;}
-}
-.to-tab-slide-16 {
-	> .to-tabPage { width:1620%;}
-	> .to-tabPage > .content { width:6.25%;}
-}
-.to-tab-slide-15 {
-	> .to-tabPage { width:1520%;}
-	> .to-tabPage > .content { width:6.66%;}
-}
-.to-tab-slide-14 {
-	> .to-tabPage { width:1420%;}
-	> .to-tabPage > .content { width:7.14%;}
-}
-.to-tab-slide-13 {
-	> .to-tabPage { width:1320%;}
-	> .to-tabPage > .content { width:7.69%;}
-}
-.to-tab-slide-12 {
-	> .to-tabPage { width:1220%;}
-	> .to-tabPage > .content { width:8.33%;}
-}
-.to-tab-slide-11 {
-	> .to-tabPage { width:1120%;}
-	> .to-tabPage > .content { width:9.09%;}
-}
-.to-tab-slide-10 {
-	> .to-tabPage { width:1020%;}
-	> .to-tabPage > .content { width:10%;}
-}
-.to-tab-slide-9 {
-	> .to-tabPage { width:902%;}
-	> .to-tabPage > .content { width:11.11%;}
-}
-.to-tab-slide-8 {
-	> .to-tabPage { width:802%;}
-	> .to-tabPage > .content { width:12.5%;}
-}
-.to-tab-slide-7 {
-	> .to-tabPage { width:702%;}
-	> .to-tabPage > .content { width:14.28%;}
-}
-.to-tab-slide-6 {
-	> .to-tabPage { width:602%;}
-	> .to-tabPage > .content { width:16.66%;}
-}
-.to-tab-slide-5 {
-	> .to-tabPage { width:502%;}
-	> .to-tabPage > .content { width:20%;}
-}
-.to-tab-slide-4 {
-	> .to-tabPage { width:402%;}
-	> .to-tabPage > .content { width:25%;}
-}
-.to-tab-slide-3 {
-	> .to-tabPage { width:302%;}
-	> .to-tabPage > .content { width:33.33%;}
-}
-.to-tab-slide-2 {
-	> .to-tabPage { width:202%;}
-	> .to-tabPage > .content { width:50%;}
-}
-
-
-
-// 二级模式
-.to-tab-type-pill {
-	> .tab {
-		.list {
-			ul { padding:0.5*@gap;}
-			li .content { height:1+@gap; line-height:1+@gap; color:@fg-light-1; font-size:1em; border-radius:0.25em;}
-			li.deletable {
-				.content { padding-right:1+@gap;}
-				.delete { top:0; right:0;}
-			}
-			li.on .content { background:@primary; color:@bg;}
-		}
-	}
-}
-.to-tab-type-pill.to-tab-border { border-top:1px solid @fg-light-8;}
-
-
-
-// 选项卡模式
-.to-tab-type-card {
-	>.tab {
-		border-bottom:1px solid @primary;
-		> .list {
-			background:none; height:1+2*@gap; .x_bs; align-self:flex-end;
-			li .content { background:@bg-dark-0-6; color:@fg-light-1; font-size:1em; padding:0 @gap; margin-right:1px;}
-			li.on .content { color:@bg; background:@primary;}
-			li.deletable {
-				.delete { right:((1+2*@gap)-1-@gap)/2; top:((1+2*@gap)-1-@gap)/2;}
-			}
-		}
-		> .fn {
-			padding:0 0 0 0.5*@gap; font-size:85.71%;
-			ul { font-size:116.67%; margin-top:-1px;}
-			label { color:@fg;}
-		}
-	}
-}
-.to-tab-type-card.to-tab-height-full {
-	> .to-tabPage { top:1+2*@gap;}
-}
-
-
-
-// 次级模式
-.to-tab-type-sub {
-	> .tab {
-		> .list {
-			background:@bg;
-			li .content { color:@fg-light-7; position:relative;}
-			li.on .content { background:@bg; color:@primary;}
-			li.on .content:before { content:""; position:absolute; bottom:0; width:100%; height:2px; background:@primary; left:0;}
-		}
-	}
-}
-
-
-
-// 区块模式
-.to-tab-type-sup {
-	> .tab {
-		> .list {
-			background:@bg;
-			li .content { color:@fg-light-7; position:relative;}
-			li.on .content { background:@bg; color:@primary; font-weight:bold;}
-			li.on .content:before { content:""; position:absolute; top:0; width:100%; height:2px; background:@primary; left:0;}
-		}
-	}
-}
-
-
-
-// 导航模式
-.to-tab-type-nav {
-	>.tab {
-		background:@bg;
-		.list {
-			li .content {
-				line-height:normal; padding-bottom:((1+2*@gap)-1-(1+0.5)*0.6667)/2; color:@fg-light-5; line-height:1; position:relative; cursor:pointer; text-align:center; box-sizing:border-box; flex-direction:column;
-				.icon {
-					margin-top:((1+2*@gap)-1-(1+0.5)*0.6667)/2; display:block;
-					.to-icon { display:inline-block; vertical-align:top; color:@bg; height:1.5em; width:1.5em; line-height:1.5em; text-align:center; background:@fg-light-5; .x_round; font-size:66.67%;}
-				}
-				.pic { margin-right:0;}
-				.label { white-space:nowrap; width:auto !important; font-size:66.67%; margin-top:0.5em;}
-				> .icon + .label { margin-left:0;}
-				.num { position:absolute; left:50%; font-size:66.67%; top:0; background:@danger; color:@bg; margin-left:1em; width:1.5em; height:1.5em; line-height:1.5em; .x_round; text-align:center;}
-				.icon-single { font-size:150%; margin-top:((1+2*@gap)/1.5-1)/2; vertical-align:top;}
-			}
-			li.deletable {
-				.content { padding-right:0;}
-			}
-			li.on .content,
-			li.on .content:hover {
-				background:@bg; color:@primary;
-				.icon {
-					[class*="to-icon"] { font-family:"icon-type-fill";}
-					.to-icon { background:@primary;}
-				}
-			}
-		}
-	}
-}
-
-
-
-// 均分
-.to-tab-tab-width-avg {
-	> .tab {
-		width:auto;
-		> .list {
-			ul { display:flex; margin:0; left:0; width:auto;}
-			li {
-				flex:1;
-				.content {
-					padding-right:1em;
-					.label { width:1px; text-align:center;}
-				}
-			}
-			li.deletable {
-				.content {
-					padding-right:1em;
-				}
-			}
-		}
-		> .fn { display:none;}
-	}
-}
-.to-tab-tab-width-avg.to-tab-height-full,
-.to-tab-tab-width-avg[style*="height"] {
-	> .tab { width:100%;}
-}
-
-
-
-// 交互效果
-.s_pc {
-	.to-tab {
-		> .tab {
-			> .list {
-				li:not(.on) .content:hover { background:@bg-dark-0-5;}
-				li.deletable {
-					.delete { display:none;}
-					.delete:hover { background:@danger; color:@bg;}
-					&:hover {
-						.delete { display:block;}
-					}
-				}
-			}
-		}
-	}
-}
-.s_pc, .s_phone, .s_pad {
-	.to-tab {
-		> .tab {
-			> .list {
-				li:not(.on) .content:active { background:@bg-dark-2; transition:none;}
-				li.deletable {
-					.delete:active { background:@danger-dark-2;}
-				}
-			}
-		}
-	}
-}
+// 分页标签组件
+.to-tab {
+	z-index:0; overflow:hidden; width:100%; position:relative;
+	> .tab {
+		display:flex; position:relative; align-items:center;
+		> .title {
+			font-weight:bold; font-size:116.67%; line-height:1+2*@gap; padding:0 @gap;
+		}
+		> .list {
+			overflow:hidden; flex:1; white-space:nowrap;
+			ul { overflow:hidden; display:inline-block; vertical-align:top; margin-left:-100000px; position:relative; left:100000px;}
+			li {
+				position:relative; float:left;
+				.content {
+					overflow:hidden; padding:0 @gap; color:@fg-light-5; font-size:116.67%; cursor:pointer; line-height:1+2*@gap; transition:background 0.3s ease-out; text-overflow:ellipsis; display:flex; align-items:center;
+					> .icon { display:inline-block;}
+					> .pic {
+						margin-right:0.5*@gap; display:inline-flex;
+						.to-pic { display:inline-flex; align-items:center;}
+					}
+					> .label { flex:1; vertical-align:middle; box-sizing:border-box;}
+					> .label .text { width:100%; overflow:hidden; text-overflow:ellipsis; display:block; white-space:nowrap;}
+					> .icon + .label { margin-left:0.5*@gap;}
+					> .number { display:inline; margin-left:0.5*@gap;}
+				}
+				.delete { display:none;}
+			}
+			li.deletable {
+				.content { padding-right:1+2*@gap;}
+				.delete { border-radius:50%; width:1+@gap; border-radius:1+@gap; height:1+@gap; line-height:1+@gap; text-align:center; cursor:default; position:absolute; right:((1+2*@gap)*1.1667-1-@gap)/2; top:((1+2*@gap)*1.1667-1-@gap)/2; background:@bg-dark-0-5;}
+			}
+			li.on .content { cursor:default; font-weight:bold; color:@fg;}
+		}
+		> .fn {
+			padding:((1+2*@gap)*1.1667-(1+2*@gap))/2;
+			ul { float:left; margin-left:0; left:0;}
+			li {
+				float:left; font-size:1em; color:@fg-light-1; padding:0 @gap; cursor:pointer; text-indent:0; white-space:nowrap;
+				> button { float:left; background:none; border:0 none; color:@fg; margin:0 -@gap; line-height:(1+2*@gap); height:(1+2*@gap);}
+				> .to-select { float:left; margin:0 -@gap; line-height:(1+2*@gap); height:(1+2*@gap); border:0 none; background:none;}
+				> .to-select:after { margin-top:-(1+2*@gap)/0.75; line-height:(1+2*@gap)/0.75; height:(1+2*@gap)/0.75;}
+				[class*="to-icon"] { margin-right:0.5*@gap;}
+				.to-icon-fold,
+				.to-icon-unfold { color:@fg-light-7;}
+				span + .to-icon-fold,
+				span + .to-icon-unfold { margin:0 0 0 1/0.75*@gap; font-size:75%;}
+				> label {
+					float:left; padding:0 @gap; margin:0 -@gap;
+					input[type="checkbox"] { vertical-align:top; margin-top:((1+2*@gap)/0.8571-1)/2; margin-right:0.5*@gap;}
+				}
+			}
+			input,
+			.to-select,
+			.to-group,
+			.to-mix,
+			.to-space,
+			> button { float:left;}
+			> button { margin-left:-1px;}
+			label {
+				float:left; line-height:1+2*@gap; color:@bg; padding:0 @gap;
+				input[type="checkbox"] { margin-top:@gap; margin-right:0.5*@gap;}
+			}
+		}
+	}
+	> .to-tabPage {
+		overflow:hidden; position:relative; z-index:0;
+		> .content { position:relative;}
+	}
+}
+.s_phone .to-tab > .tab > .list { overflow:auto;}
+
+
+
+// 超过限制显示方式
+.to-tab-over-wrap {
+	.tab > .list ul { margin:0; left:0;}
+}
+.to-tab-over-avg {
+	> .tab {
+		width:auto;
+		> .list {
+			ul { display:flex; margin:0; left:0; width:auto;}
+			li {
+				flex:1;
+				.content {
+					padding-right:1em;
+					.label { width:1px;}
+				}
+			}
+			li.deletable {
+				.content {
+					padding-right:1em;
+				}
+			}
+		}
+		> .fn { display:none;}
+	}
+}
+
+
+
+// 全屏高度
+.to-tab[style*="height"],
+.to-tab-height-full {
+	display:flex; flex-flow:column;
+	> .to-tabPage { flex:1; height:1px;}
+	> .to-tabPage > .content { height:100%; overflow:auto;}
+}
+.to-tab-height-full {
+	position:absolute; top:0; left:0; right:0; bottom:0;
+}
+.to-tab-height-full.to-tab[style*="height"] {
+	position:relative; top:auto; left:auto; right:auto; bottom:auto;
+}
+.to-tab[style*="height"].to-tab-dot,
+.to-tab-height-full.to-tab-dot {
+	> .to-tabPage { top:0;}
+}
+.to-tab[style*="height"].to-tab-dot-out,
+.to-tab-height-full.to-tab-dot-out {
+	padding-bottom:0;
+	> .to-tabPage { bottom:0.5+@gap;}
+}
+
+
+
+// 位置
+.to-tab-position-bottom {
+	display:flex; flex-wrap:wrap;
+	> .tab { width:100%; order:2;}
+	> .to-tabPage {
+		width:100%; order:1;
+	}
+}
+.to-tab-position-left {
+	display:flex; width:100%;
+	> .tab {
+		position:relative;
+		display:flex !important;
+		flex-flow: column;
+		align-items: flex-start;
+		.list {
+			//height:100%;
+			flex: 1;
+			margin:0;
+			overflow: hidden !important;
+			ul { margin:0; left:0;overflow: auto;height: 100%;}
+			li { float:none; position:relative;}
+			li.on:before { display:block;}
+		}
+		.fn {
+			text-align: center;
+			width: 100%;
+			button{
+				margin: 0 auto;
+				display: block;
+				float: none;
+			}
+			//display:none;
+		}
+	}
+	> .to-tabPage { flex:1;}
+}
+.to-tab-height-full.to-tab-position-left,
+.to-tab-position-left[style*="height"] {
+	display:flex; flex-flow:row;
+	> .tab { display:block; width:auto; height:100%; overflow:auto;}
+	> .tab > .list { overflow:visible;}
+	> .to-tabPage { flex:1; display:block; height:100%; position:relative; top:auto; bottom:auto; left:auto; right:auto;}
+}
+
+
+
+// 标题插件
+.to-tab-title {
+	> .tab {
+		> .list {
+			text-align:right;
+			ul { float:right; margin:0; left:0;}
+		}
+	}
+}
+// .to-tab-title.to-tab-sub {
+// 	> .tab {
+// 		.title { color:@fg;}
+// 		li { margin-right:0; margin-left:1px;}
+// 	}
+// }
+
+
+
+// 内容悬浮
+.to-tabPage-float {
+	position:absolute; left:0; width:100%; z-index:2;
+}
+
+
+
+// 滑动
+.to-tab-slide {
+	padding-bottom:4.13em;
+	> .tab {
+		background:@bg; padding:0.5em; position:absolute; z-index:200; left:0; top:100%; margin-top:-4.13em; width:100%;
+		> .fn {
+			button { background:none; color:@fg-light-8;}
+		}
+		li {
+			padding:0; font-size:100%; height:3.13em; margin-right:0.5em; line-height:normal;
+			img { width:3.13em; height:3.13em;}
+		}
+		li.on { background:none !important; position:relative;}
+		li.on:before { content:""; position:absolute; left:0; top:0; bottom:0; right:0; border:0.1em solid @danger;}
+	}
+}
+[class*="to-tab-slide-"] {
+	> .to-tabPage > .content { float:left; width:30%;}
+}
+.to-tab-slide-20 {
+	> .to-tabPage { width:2020%;}
+	> .to-tabPage > .content { width:5%;}
+}
+.to-tab-slide-19 {
+	> .to-tabPage { width:1920%;}
+	> .to-tabPage > .content { width:5.26%;}
+}
+.to-tab-slide-18 {
+	> .to-tabPage { width:1820%;}
+	> .to-tabPage > .content { width:5.55%;}
+}
+.to-tab-slide-17 {
+	> .to-tabPage { width:1720%;}
+	> .to-tabPage > .content { width:5.88%;}
+}
+.to-tab-slide-16 {
+	> .to-tabPage { width:1620%;}
+	> .to-tabPage > .content { width:6.25%;}
+}
+.to-tab-slide-15 {
+	> .to-tabPage { width:1520%;}
+	> .to-tabPage > .content { width:6.66%;}
+}
+.to-tab-slide-14 {
+	> .to-tabPage { width:1420%;}
+	> .to-tabPage > .content { width:7.14%;}
+}
+.to-tab-slide-13 {
+	> .to-tabPage { width:1320%;}
+	> .to-tabPage > .content { width:7.69%;}
+}
+.to-tab-slide-12 {
+	> .to-tabPage { width:1220%;}
+	> .to-tabPage > .content { width:8.33%;}
+}
+.to-tab-slide-11 {
+	> .to-tabPage { width:1120%;}
+	> .to-tabPage > .content { width:9.09%;}
+}
+.to-tab-slide-10 {
+	> .to-tabPage { width:1020%;}
+	> .to-tabPage > .content { width:10%;}
+}
+.to-tab-slide-9 {
+	> .to-tabPage { width:902%;}
+	> .to-tabPage > .content { width:11.11%;}
+}
+.to-tab-slide-8 {
+	> .to-tabPage { width:802%;}
+	> .to-tabPage > .content { width:12.5%;}
+}
+.to-tab-slide-7 {
+	> .to-tabPage { width:702%;}
+	> .to-tabPage > .content { width:14.28%;}
+}
+.to-tab-slide-6 {
+	> .to-tabPage { width:602%;}
+	> .to-tabPage > .content { width:16.66%;}
+}
+.to-tab-slide-5 {
+	> .to-tabPage { width:502%;}
+	> .to-tabPage > .content { width:20%;}
+}
+.to-tab-slide-4 {
+	> .to-tabPage { width:402%;}
+	> .to-tabPage > .content { width:25%;}
+}
+.to-tab-slide-3 {
+	> .to-tabPage { width:302%;}
+	> .to-tabPage > .content { width:33.33%;}
+}
+.to-tab-slide-2 {
+	> .to-tabPage { width:202%;}
+	> .to-tabPage > .content { width:50%;}
+}
+
+
+
+// 二级模式
+.to-tab-type-pill {
+	> .tab {
+		.list {
+			ul { padding:0.5*@gap;}
+			li .content { height:1+@gap; line-height:1+@gap; color:@fg-light-1; font-size:1em; border-radius:0.25em;}
+			li.deletable {
+				.content { padding-right:1+@gap;}
+				.delete { top:0; right:0;}
+			}
+			li.on .content { background:@primary; color:@bg;}
+		}
+	}
+}
+.to-tab-type-pill.to-tab-border { border-top:1px solid @fg-light-8;}
+
+
+
+// 选项卡模式
+.to-tab-type-card {
+	>.tab {
+		border-bottom:1px solid @primary;
+		> .list {
+			background:none; height:1+2*@gap; .x_bs; align-self:flex-end;
+			li .content { background:@bg-dark-0-6; color:@fg-light-1; font-size:1em; padding:0 @gap; margin-right:1px;}
+			li.on .content { color:@bg; background:@primary;}
+			li.deletable {
+				.delete { right:((1+2*@gap)-1-@gap)/2; top:((1+2*@gap)-1-@gap)/2;}
+			}
+		}
+		> .fn {
+			padding:0 0 0 0.5*@gap; font-size:85.71%;
+			ul { font-size:116.67%; margin-top:-1px;}
+			label { color:@fg;}
+		}
+	}
+}
+.to-tab-type-card.to-tab-height-full {
+	> .to-tabPage { top:1+2*@gap;}
+}
+
+
+
+// 次级模式
+.to-tab-type-sub {
+	> .tab {
+		> .list {
+			background:@bg;
+			li .content { color:@fg-light-7; position:relative;}
+			li.on .content { background:@bg; color:@primary;}
+			li.on .content:before { content:""; position:absolute; bottom:0; width:100%; height:2px; background:@primary; left:0;}
+		}
+	}
+}
+
+
+
+// 区块模式
+.to-tab-type-sup {
+	> .tab {
+		> .list {
+			background:@bg;
+			li .content { color:@fg-light-7; position:relative;}
+			li.on .content { background:@bg; color:@primary; font-weight:bold;}
+			li.on .content:before { content:""; position:absolute; top:0; width:100%; height:2px; background:@primary; left:0;}
+		}
+	}
+}
+
+
+
+// 导航模式
+.to-tab-type-nav {
+	>.tab {
+		background:@bg;
+		.list {
+			li .content {
+				line-height:normal; padding-bottom:((1+2*@gap)-1-(1+0.5)*0.6667)/2; color:@fg-light-5; line-height:1; position:relative; cursor:pointer; text-align:center; box-sizing:border-box; flex-direction:column;
+				.icon {
+					margin-top:((1+2*@gap)-1-(1+0.5)*0.6667)/2; display:block;
+					.to-icon { display:inline-block; vertical-align:top; color:@bg; height:1.5em; width:1.5em; line-height:1.5em; text-align:center; background:@fg-light-5; .x_round; font-size:66.67%;}
+				}
+				.pic { margin-right:0;}
+				.label { white-space:nowrap; width:auto !important; font-size:66.67%; margin-top:0.5em;}
+				> .icon + .label { margin-left:0;}
+				.num { position:absolute; left:50%; font-size:66.67%; top:0; background:@danger; color:@bg; margin-left:1em; width:1.5em; height:1.5em; line-height:1.5em; .x_round; text-align:center;}
+				.icon-single { font-size:150%; margin-top:((1+2*@gap)/1.5-1)/2; vertical-align:top;}
+			}
+			li.deletable {
+				.content { padding-right:0;}
+			}
+			li.on .content,
+			li.on .content:hover {
+				background:@bg; color:@primary;
+				.icon {
+					[class*="to-icon"] { font-family:"icon-type-fill";}
+					.to-icon { background:@primary;}
+				}
+			}
+		}
+	}
+}
+
+
+
+// 均分
+.to-tab-tab-width-avg {
+	> .tab {
+		width:auto;
+		> .list {
+			ul { display:flex; margin:0; left:0; width:auto;}
+			li {
+				flex:1;
+				.content {
+					padding-right:1em;
+					.label { width:1px; text-align:center;}
+				}
+			}
+			li.deletable {
+				.content {
+					padding-right:1em;
+				}
+			}
+		}
+		> .fn { display:none;}
+	}
+}
+.to-tab-tab-width-avg.to-tab-height-full,
+.to-tab-tab-width-avg[style*="height"] {
+	> .tab { width:100%;}
+}
+
+
+
+// 交互效果
+.s_pc {
+	.to-tab {
+		> .tab {
+			> .list {
+				li:not(.on) .content:hover { background:@bg-dark-0-5;}
+				li.deletable {
+					.delete { display:none;}
+					.delete:hover { background:@danger; color:@bg;}
+					&:hover {
+						.delete { display:block;}
+					}
+				}
+			}
+		}
+	}
+}
+.s_pc, .s_phone, .s_pad {
+	.to-tab {
+		> .tab {
+			> .list {
+				li:not(.on) .content:active { background:@bg-dark-2; transition:none;}
+				li.deletable {
+					.delete:active { background:@danger-dark-2;}
+				}
+			}
+		}
+	}
+}