ai.touchui-vue 1.30.2 → 1.30.3

package/packages/theme/src/less/element/segment-dark.less

@@ -1,120 +1,120 @@
-.theme-dark {
-
-	// 分段器元素
-	.to-segment {
-		.to-segmentContent {
-			>.to-segmentWrapper {
-				>span {
-					color: @dark-fg-dark-6;
-					background: @dark-bg-light-0-2;
-				}
-
-				>span:before {
-					border: 1px solid @dark-fg-dark-8;
-				}
-
-				>span.to-segmentOn {
-					color: @primary;
-					background: @dark-bg;
-				}
-
-				>span.to-segmentOn:before {
-					border: 1px @primary solid;
-				}
-
-			}
-		}
-	}
-
-	// 模式
-	.to-segment-mode-none {
-		.to-segmentContent {
-			> .to-segmentWrapper {
-				> span,
-				> span.to-segmentOn { background:none;}
-			}
-		}
-	}
-
-	// 颜色
-	.to-segment-color-fg > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@dark-fg;}
-	.to-segment-color-fg > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px solid @dark-fg;}
-	.to-segment-color-info > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@dark-fg-dark-6;}
-	.to-segment-color-info > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px solid @dark-fg-dark-6;}
-	.to-segment-color-secondary > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@secondary;}
-	.to-segment-color-secondary > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px solid @secondary;}
-	.to-segment-color-success > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@success;}
-	.to-segment-color-success > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px solid @success;}
-	.to-segment-color-warning > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@warning;}
-	.to-segment-color-warning > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px solid @warning;}
-	.to-segment-color-danger > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@danger;}
-	.to-segment-color-danger > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px solid @danger;}
-	.to-segment-color-bg {
-		.to-segmentContent > .to-segmentWrapper {
-			> span { background:@dark-bg-op-2; color:@dark-bg-op-6;}
-			> span:first-child,
-			> span:before { border-color:@dark-bg-op-4;}
-			> span.to-segmentOn { color:@dark-bg; background:none;}
-			> span.to-segmentOn:before { border-color:@dark-bg;}
-		}
-	}
-
-	// 只读
-	.to-segment-readonly {
-		.to-segmentContent>.to-segmentWrapper>span.to-segmentOn {
-			background: @dark-bg-light-0-5;
-		}
-	}
-
-	&.s_pc {
-		.to-segment {
-			.to-segmentContent>.to-segmentWrapper {
-				>span:not(.to-segmentOn):hover {
-					background: @dark-bg-light-0-7;
-				}
-
-				>span.to-segmentOn:hover {
-					background: @dark-bg-light-0-5;
-				}
-			}
-		}
-		.to-segment-color-bg {
-			.to-segmentContent>.to-segmentWrapper {
-				>span:not(.to-segmentOn):hover {
-					background: @dark-fg-dark-0-7;
-				}
-
-				>span.to-segmentOn:hover {
-					background: @dark-fg-dark-0-5;
-				}
-			}
-		}
-	}
-
-	&.s_pc,
-	&.s_pad,
-	&.s_phone {
-		.to-segment {
-			.to-segmentContent>.to-segmentWrapper {
-				>span:not(.to-segmentOn):active {
-					background: @dark-bg-light-2;
-				}
-
-				>span.to-segmentOn:active {
-					background: @dark-bg-light-2;
-				}
-			}
-		}
-		.to-segment-color-bg {
-			.to-segmentContent>.to-segmentWrapper {
-				>span:not(.to-segmentOn):active {
-					background: @dark-fg-dark-3;
-				}
-
-				>span.to-segmentOn:active {
-					background: @dark-fg-dark-3;
-				}
-			}
-		}
-	}
+.theme-dark {
+
+	// 分段器元素
+	.to-segment {
+		.to-segmentContent {
+			>.to-segmentWrapper {
+				>span {
+					color: @dark-fg-dark-6;
+					background: @dark-bg-light-0-2;
+				}
+
+				>span:before {
+					border: 1px solid @dark-fg-dark-8;
+				}
+
+				>span.to-segmentOn {
+					color: @primary;
+					background: @dark-bg;
+				}
+
+				>span.to-segmentOn:before {
+					border: 1px @primary solid;
+				}
+
+			}
+		}
+	}
+
+	// 模式
+	.to-segment-mode-none {
+		.to-segmentContent {
+			> .to-segmentWrapper {
+				> span,
+				> span.to-segmentOn { background:none;}
+			}
+		}
+	}
+
+	// 颜色
+	.to-segment-color-fg > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@dark-fg;}
+	.to-segment-color-fg > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px solid @dark-fg;}
+	.to-segment-color-info > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@dark-fg-dark-6;}
+	.to-segment-color-info > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px solid @dark-fg-dark-6;}
+	.to-segment-color-secondary > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@secondary;}
+	.to-segment-color-secondary > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px solid @secondary;}
+	.to-segment-color-success > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@success;}
+	.to-segment-color-success > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px solid @success;}
+	.to-segment-color-warning > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@warning;}
+	.to-segment-color-warning > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px solid @warning;}
+	.to-segment-color-danger > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@danger;}
+	.to-segment-color-danger > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px solid @danger;}
+	.to-segment-color-bg {
+		.to-segmentContent > .to-segmentWrapper {
+			> span { background:@dark-bg-op-2; color:@dark-bg-op-6;}
+			> span:first-child,
+			> span:before { border-color:@dark-bg-op-4;}
+			> span.to-segmentOn { color:@dark-bg; background:none;}
+			> span.to-segmentOn:before { border-color:@dark-bg;}
+		}
+	}
+
+	// 只读
+	.to-segment-readonly {
+		.to-segmentContent>.to-segmentWrapper>span.to-segmentOn {
+			background: @dark-bg-light-0-5;
+		}
+	}
+
+	&.s_pc {
+		.to-segment {
+			.to-segmentContent>.to-segmentWrapper {
+				>span:not(.to-segmentOn):hover {
+					background: @dark-bg-light-0-7;
+				}
+
+				>span.to-segmentOn:hover {
+					background: @dark-bg-light-0-5;
+				}
+			}
+		}
+		.to-segment-color-bg {
+			.to-segmentContent>.to-segmentWrapper {
+				>span:not(.to-segmentOn):hover {
+					background: @dark-fg-dark-0-7;
+				}
+
+				>span.to-segmentOn:hover {
+					background: @dark-fg-dark-0-5;
+				}
+			}
+		}
+	}
+
+	&.s_pc,
+	&.s_pad,
+	&.s_phone {
+		.to-segment {
+			.to-segmentContent>.to-segmentWrapper {
+				>span:not(.to-segmentOn):active {
+					background: @dark-bg-light-2;
+				}
+
+				>span.to-segmentOn:active {
+					background: @dark-bg-light-2;
+				}
+			}
+		}
+		.to-segment-color-bg {
+			.to-segmentContent>.to-segmentWrapper {
+				>span:not(.to-segmentOn):active {
+					background: @dark-fg-dark-3;
+				}
+
+				>span.to-segmentOn:active {
+					background: @dark-fg-dark-3;
+				}
+			}
+		}
+	}
 }

package/packages/theme/src/less/element/segment.less

@@ -1,197 +1,197 @@
-// 分段器元素
-.to-segment {
-	display:inline-block; vertical-align:middle; position:relative; overflow:hidden; line-height:1+2*@gap; .x_bs;
-	.to-segmentContent {
-		padding-left:1px; display:inline-block; vertical-align:top; position:relative; z-index:1;
-		> .to-segmentWrapper {
-			display:inline-block; vertical-align:top;
-			> span {
-				transition:background 0.3s ease-out; float:left; padding:0 @gap; z-index:2; position:relative; color:@fg-light-6; background:@bg-dark-0-2; cursor:default; overflow:hidden;
-				> [class*="to-icon"] { margin-right:0.5*@gap;}
-				.to-checkbox { pointer-events:none;}
-			}
-			> span:before { content:""; z-index:2; pointer-events:none; border:1px solid @fg-light-8-5; position:absolute; top:0; right:0; bottom:0; left:0;}
-			> span.to-segmentOn { color:@primary; background:@bg; z-index:3;}
-			> span.to-segmentOn:before { border:1px @primary solid;}
-			> span.to-dis { z-index:1;}
-			.to-segment-color-box {
-				width: 1em;
-				height: 1em;
-				border-radius: 0.2em;
-				margin: 0.5em 0;
-			}
-		}
-		> .to-segmentWrapper:first-child ~ .to-segmentWrapper { margin-left:-1px;}
-	}
-}
-.to-segment-tip-show {
-	overflow:visible;
-	&:before {
-		content:""; position:absolute; left:0; top:0; bottom:0; right:0; border:1px solid @danger; z-index:3; pointer-events:none;
-	}
-}
-.s_pc {
-	.to-segment {
-		.to-segmentContent > .to-segmentWrapper {
-			> span:not(.to-segmentOn):hover { background:@bg-dark-0-7;}
-			> span.to-segmentOn:hover { background:@bg-dark-0-5;}
-		}
-	}
-}
-
-.s_pc, .s_pad, .s_phone {
-	.to-segment {
-		.to-segmentContent > .to-segmentWrapper {
-			> span:active { transition:none;}
-			> span:not(.to-segmentOn):active { background:@bg-dark-2;}
-			> span.to-segmentOn:active { background:@bg-dark-2;}
-		}
-	}
-}
-
-
-
-// 圆角
-.to-segment-fillet-normal {
-	border-radius:0.25em;
-	.to-segmentContent {
-		> .to-segmentWrapper:first-child > span:before,
-		> .to-segmentWrapper:first-child > span { border-top-left-radius:0.25em; border-bottom-left-radius:0.25em;}
-		> .to-segmentWrapper:last-child > span:before,
-		> .to-segmentWrapper:last-child > span { border-top-right-radius:0.25em; border-bottom-right-radius:0.25em;}
-	}
-}
-.to-segment-fillet-normal,
-.to-segment-fillet-normal:before {border-radius:0.25em;}
-.to-segment-fillet-pill,
-.to-segment-fillet-pill:before { border-radius:0.5+@gap;}
-.to-segment-fillet-position-left,
-.to-segment-fillet-position-left:before { border-top-right-radius:0; border-bottom-right-radius:0;}
-.to-segment-fillet-position-right,
-.to-segment-fillet-position-right:before { border-top-left-radius:0; border-bottom-left-radius:0;}
-.to-segment-fillet-pill {
-	border-radius:0.5+@gap;
-	.to-segmentContent {
-		> .to-segmentWrapper:first-child > span:before { border-top-left-radius:0.5+@gap; border-bottom-left-radius:0.5+@gap;}
-		> .to-segmentWrapper:first-child > span { border-top-left-radius:0.5+@gap; border-bottom-left-radius:0.5+@gap; padding-left:1.25*@gap;}
-		> .to-segmentWrapper:last-child > span:before { border-top-right-radius:0.5+@gap; border-bottom-right-radius:0.5+@gap;}
-		> .to-segmentWrapper:last-child > span { border-top-right-radius:0.5+@gap; border-bottom-right-radius:0.5+@gap; padding-right:1.25*@gap;}
-	}
-}
-
-
-
-// 分列
-.to-segment[style*="width"],
-[class*="to-segment-col-"] {
-	.to-segmentContent {
-		display:flex; flex-wrap:wrap; padding-top:1px; padding-left:1px;
-		> .to-segmentWrapper {
-			margin-left:-1px; box-sizing:border-box; margin-top:-1px;
-			> span { display:block; float:none; margin:0; .x_to;}
-		}
-	}
-}
-.to-segment[style*="width"] {
-	.to-segmentContent {
-		> .to-segmentWrapper {
-			margin-left:-1px; box-sizing:border-box; margin-top:-1px; flex:1; float:none; text-align:center;
-		}
-	}
-}
-[class*="to-segment-col-"] {
-	display:block;
-}
-.to-segment-col-1 .to-segmentContent > .to-segmentWrapper { width:100%;}
-.to-segment-col-2 .to-segmentContent > .to-segmentWrapper { width:50%;}
-.to-segment-col-3 .to-segmentContent > .to-segmentWrapper { width:33.33%;}
-.to-segment-col-4 .to-segmentContent > .to-segmentWrapper { width:25%;}
-.to-segment-col-5 .to-segmentContent > .to-segmentWrapper { width:20%;}
-.to-segment-col-6 .to-segmentContent > .to-segmentWrapper { width:16.66%;}
-.to-segment-col-7 .to-segmentContent > .to-segmentWrapper { width:14.28%;}
-.to-segment-col-8 .to-segmentContent > .to-segmentWrapper { width:12.5%;}
-.to-segment-col-9 .to-segmentContent > .to-segmentWrapper { width:11.11%;}
-.to-segment-col-10 .to-segmentContent > .to-segmentWrapper { width:10%;}
-.to-segment-space.to-segment-fillet-normal {
-	.to-segmentContent > .to-segmentWrapper > span,
-	.to-segmentContent > .to-segmentWrapper > span:before { border-radius:0.25em;}
-}
-.to-segment-space.to-segment-fillet-pill {
-	.to-segmentContent > .to-segmentWrapper > span,
-	.to-segmentContent > .to-segmentWrapper > span:before { border-radius:0.5+@gap;}
-}
-.to-segment:not([class*=".to-segment-col"]) {
-	.to-cardItem-main {
-		width:auto;
-		> .title .main { width:auto;}
-		> .content .main { width:auto;}
-	}
-}
-.to-segment-col-auto {
-	display:inline-block;
-}
-
-// 类型
-.to-segment-type-sku {
-	.to-segmentOn:after {
-		content:''; width:1em; height:1em; position:absolute; right:0; bottom:0; font-family:"icon"; content:"\e020"; font-size:243%; line-height:1; color:@primary; pointer-events:none;
-	}
-}
-.to-segment-type-check {
-	.to-segmentContent {
-		> .to-segmentWrapper {
-			span {
-				> .to-checkbox { margin-top:@gap; margin-right:0.5*@gap;}
-			}
-		}
-	}
-}
-
-
-// 模式
-.to-segment-mode-none {
-	.to-segmentContent {
-		padding-left:0;
-		> .to-segmentWrapper {
-			> span,
-			> span.to-segmentOn { background:none;}
-			> span:before { display:none;}
-		}
-	}
-}
-
-
-
-// 颜色
-.to-segment-color-fg > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@fg;}
-.to-segment-color-fg > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px @fg solid;}
-.to-segment-color-info > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@fg-light-6;}
-.to-segment-color-info > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px @fg-light-6 solid;}
-.to-segment-color-secondary > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@secondary;}
-.to-segment-color-secondary > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px @secondary solid;}
-.to-segment-color-success > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@success;}
-.to-segment-color-success > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px @success solid;}
-.to-segment-color-warning > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@warning;}
-.to-segment-color-warning > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px @warning solid;}
-.to-segment-color-danger > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@danger;}
-.to-segment-color-danger > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px @danger solid;}
-.to-segment-color-bg {
-	.to-segmentContent > .to-segmentWrapper {
-		> span { background:@bg-op-2; color:@bg-op-6;}
-		> span:first-child,
-		> span:before { border-color:@bg-op-4;}
-		> span.to-segmentOn { color:@bg; background:none;}
-		> span.to-segmentOn:before { border-color:@bg;}
-	}
-}
-
-
-
-// 只读
-.to-segment-readonly {
-	.to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@primary; background:@bg-dark-0-5;}
-}
-
-
-// slot
-.to-segment-slot { line-height:1em;}
+// 分段器元素
+.to-segment {
+	display:inline-block; vertical-align:middle; position:relative; overflow:hidden; line-height:1+2*@gap; .x_bs;
+	.to-segmentContent {
+		padding-left:1px; display:inline-block; vertical-align:top; position:relative; z-index:1;
+		> .to-segmentWrapper {
+			display:inline-block; vertical-align:top;
+			> span {
+				transition:background 0.3s ease-out; float:left; padding:0 @gap; z-index:2; position:relative; color:@fg-light-6; background:@bg-dark-0-2; cursor:default; overflow:hidden;
+				> [class*="to-icon"] { margin-right:0.5*@gap;}
+				.to-checkbox { pointer-events:none;}
+			}
+			> span:before { content:""; z-index:2; pointer-events:none; border:1px solid @fg-light-8-5; position:absolute; top:0; right:0; bottom:0; left:0;}
+			> span.to-segmentOn { color:@primary; background:@bg; z-index:3;}
+			> span.to-segmentOn:before { border:1px @primary solid;}
+			> span.to-dis { z-index:1;}
+			.to-segment-color-box {
+				width: 1em;
+				height: 1em;
+				border-radius: 0.2em;
+				margin: 0.5em 0;
+			}
+		}
+		> .to-segmentWrapper:first-child ~ .to-segmentWrapper { margin-left:-1px;}
+	}
+}
+.to-segment-tip-show {
+	overflow:visible;
+	&:before {
+		content:""; position:absolute; left:0; top:0; bottom:0; right:0; border:1px solid @danger; z-index:3; pointer-events:none;
+	}
+}
+.s_pc {
+	.to-segment {
+		.to-segmentContent > .to-segmentWrapper {
+			> span:not(.to-segmentOn):hover { background:@bg-dark-0-7;}
+			> span.to-segmentOn:hover { background:@bg-dark-0-5;}
+		}
+	}
+}
+
+.s_pc, .s_pad, .s_phone {
+	.to-segment {
+		.to-segmentContent > .to-segmentWrapper {
+			> span:active { transition:none;}
+			> span:not(.to-segmentOn):active { background:@bg-dark-2;}
+			> span.to-segmentOn:active { background:@bg-dark-2;}
+		}
+	}
+}
+
+
+
+// 圆角
+.to-segment-fillet-normal {
+	border-radius:0.25em;
+	.to-segmentContent {
+		> .to-segmentWrapper:first-child > span:before,
+		> .to-segmentWrapper:first-child > span { border-top-left-radius:0.25em; border-bottom-left-radius:0.25em;}
+		> .to-segmentWrapper:last-child > span:before,
+		> .to-segmentWrapper:last-child > span { border-top-right-radius:0.25em; border-bottom-right-radius:0.25em;}
+	}
+}
+.to-segment-fillet-normal,
+.to-segment-fillet-normal:before {border-radius:0.25em;}
+.to-segment-fillet-pill,
+.to-segment-fillet-pill:before { border-radius:0.5+@gap;}
+.to-segment-fillet-position-left,
+.to-segment-fillet-position-left:before { border-top-right-radius:0; border-bottom-right-radius:0;}
+.to-segment-fillet-position-right,
+.to-segment-fillet-position-right:before { border-top-left-radius:0; border-bottom-left-radius:0;}
+.to-segment-fillet-pill {
+	border-radius:0.5+@gap;
+	.to-segmentContent {
+		> .to-segmentWrapper:first-child > span:before { border-top-left-radius:0.5+@gap; border-bottom-left-radius:0.5+@gap;}
+		> .to-segmentWrapper:first-child > span { border-top-left-radius:0.5+@gap; border-bottom-left-radius:0.5+@gap; padding-left:1.25*@gap;}
+		> .to-segmentWrapper:last-child > span:before { border-top-right-radius:0.5+@gap; border-bottom-right-radius:0.5+@gap;}
+		> .to-segmentWrapper:last-child > span { border-top-right-radius:0.5+@gap; border-bottom-right-radius:0.5+@gap; padding-right:1.25*@gap;}
+	}
+}
+
+
+
+// 分列
+.to-segment[style*="width"],
+[class*="to-segment-col-"] {
+	.to-segmentContent {
+		display:flex; flex-wrap:wrap; padding-top:1px; padding-left:1px;
+		> .to-segmentWrapper {
+			margin-left:-1px; box-sizing:border-box; margin-top:-1px;
+			> span { display:block; float:none; margin:0; .x_to;}
+		}
+	}
+}
+.to-segment[style*="width"] {
+	.to-segmentContent {
+		> .to-segmentWrapper {
+			margin-left:-1px; box-sizing:border-box; margin-top:-1px; flex:1; float:none; text-align:center;
+		}
+	}
+}
+[class*="to-segment-col-"] {
+	display:block;
+}
+.to-segment-col-1 .to-segmentContent > .to-segmentWrapper { width:100%;}
+.to-segment-col-2 .to-segmentContent > .to-segmentWrapper { width:50%;}
+.to-segment-col-3 .to-segmentContent > .to-segmentWrapper { width:33.33%;}
+.to-segment-col-4 .to-segmentContent > .to-segmentWrapper { width:25%;}
+.to-segment-col-5 .to-segmentContent > .to-segmentWrapper { width:20%;}
+.to-segment-col-6 .to-segmentContent > .to-segmentWrapper { width:16.66%;}
+.to-segment-col-7 .to-segmentContent > .to-segmentWrapper { width:14.28%;}
+.to-segment-col-8 .to-segmentContent > .to-segmentWrapper { width:12.5%;}
+.to-segment-col-9 .to-segmentContent > .to-segmentWrapper { width:11.11%;}
+.to-segment-col-10 .to-segmentContent > .to-segmentWrapper { width:10%;}
+.to-segment-space.to-segment-fillet-normal {
+	.to-segmentContent > .to-segmentWrapper > span,
+	.to-segmentContent > .to-segmentWrapper > span:before { border-radius:0.25em;}
+}
+.to-segment-space.to-segment-fillet-pill {
+	.to-segmentContent > .to-segmentWrapper > span,
+	.to-segmentContent > .to-segmentWrapper > span:before { border-radius:0.5+@gap;}
+}
+.to-segment:not([class*=".to-segment-col"]) {
+	.to-cardItem-main {
+		width:auto;
+		> .title .main { width:auto;}
+		> .content .main { width:auto;}
+	}
+}
+.to-segment-col-auto {
+	display:inline-block;
+}
+
+// 类型
+.to-segment-type-sku {
+	.to-segmentOn:after {
+		content:''; width:1em; height:1em; position:absolute; right:0; bottom:0; font-family:"icon"; content:"\e020"; font-size:243%; line-height:1; color:@primary; pointer-events:none;
+	}
+}
+.to-segment-type-check {
+	.to-segmentContent {
+		> .to-segmentWrapper {
+			span {
+				> .to-checkbox { margin-top:@gap; margin-right:0.5*@gap;}
+			}
+		}
+	}
+}
+
+
+// 模式
+.to-segment-mode-none {
+	.to-segmentContent {
+		padding-left:0;
+		> .to-segmentWrapper {
+			> span,
+			> span.to-segmentOn { background:none;}
+			> span:before { display:none;}
+		}
+	}
+}
+
+
+
+// 颜色
+.to-segment-color-fg > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@fg;}
+.to-segment-color-fg > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px @fg solid;}
+.to-segment-color-info > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@fg-light-6;}
+.to-segment-color-info > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px @fg-light-6 solid;}
+.to-segment-color-secondary > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@secondary;}
+.to-segment-color-secondary > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px @secondary solid;}
+.to-segment-color-success > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@success;}
+.to-segment-color-success > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px @success solid;}
+.to-segment-color-warning > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@warning;}
+.to-segment-color-warning > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px @warning solid;}
+.to-segment-color-danger > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@danger;}
+.to-segment-color-danger > .to-segmentContent > .to-segmentWrapper > span.to-segmentOn:before { border:1px @danger solid;}
+.to-segment-color-bg {
+	.to-segmentContent > .to-segmentWrapper {
+		> span { background:@bg-op-2; color:@bg-op-6;}
+		> span:first-child,
+		> span:before { border-color:@bg-op-4;}
+		> span.to-segmentOn { color:@bg; background:none;}
+		> span.to-segmentOn:before { border-color:@bg;}
+	}
+}
+
+
+
+// 只读
+.to-segment-readonly {
+	.to-segmentContent > .to-segmentWrapper > span.to-segmentOn { color:@primary; background:@bg-dark-0-5;}
+}
+
+
+// slot
+.to-segment-slot { line-height:1em;}