atui/src/styles/switch.less

components built with Vue.js

// Switch
// --------------------------------------------------
@prefix-cls-switch: e("@{prefix-cls}-switch");

@switch-default-bg			: #bfbfbf;
@switch-checked-bg 			: @primary-color;
@switch-circle-bg			  : #fff;
@switch-disabled-circle-bg 	: #ccc;
@switch-disabled-bg 		: #f2f2f2;
@switch-text-color			: #fff;

.@{prefix-cls-switch} {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 22px;
	line-height: 20px;
	box-sizing: border-box;
	vertical-align: middle;
	background-color: @switch-default-bg;
	border: 1px solid @switch-default-bg;
	border-radius: 100px;
	cursor: pointer;
	-webkit-transition: all .15s linear;
	transition: all .15s linear;
	user-select: none;

	.@{prefix-cls-switch}-content {
		position: absolute;
		left: 24px;
		color: @switch-text-color;
		font-size: 12px;
	}

	&:after {
		position: absolute;
		left: 1px;
		top: 1px;
		width: 18px;
		height: 18px;
		background-color: @switch-circle-bg;
		border-radius: 100%;
		content: " ";
		cursor: pointer;
		// -webkit-transition: left 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
		// transition: left 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
		-webkit-transition: left .15s linear;
		transition: left .15s linear;
	}

	&.@{prefix-cls-switch}-checked {
		background-color: @switch-checked-bg;
		border: 1px solid @switch-checked-bg;

		.@{prefix-cls-switch}-content {
			left: 6px;
		}

		&:after {
			left: 23px;
		}
	}

	&.@{prefix-cls-switch}-disabled {
		background-color: @switch-disabled-bg;
		border: 1px solid @switch-disabled-bg;
		cursor: no-drop;
		&:after {
			background-color: @switch-disabled-circle-bg;
			cursor: no-drop;
		}
	}

	// 小型的switch开关
	// ------------------------ start ---------------------
	&.@{prefix-cls-switch}-small {
		width: 26px;
		height: 14px;
		line-height: 12px;
		border-radius: 20px 20px;

		&:after {
			position: absolute;
			left: 0;
			top: 0;
			width: 12px;
			height: 12px;
			background-color: @switch-circle-bg;
			border-radius: 100%;
			content: " ";
			cursor: pointer;
		}

		&.@{prefix-cls-switch}-checked {
			background-color: @switch-checked-bg;
			border: 1px solid @switch-checked-bg;

			.@{prefix-cls-switch}-content {
				left: 6px;
			}

			&:after {
				left: 12px;
			}
		}

		&.@{prefix-cls-switch}-disabled {
			background-color: @switch-disabled-bg;
			border: 1px solid @switch-disabled-bg;
			cursor: no-drop;
			&:after {
				left: 1px;
				background-color: @switch-disabled-circle-bg;
				cursor: no-drop;
			}
		}
	}
}