MoeNovaClient/uni_modules/cl-uni/static/css/list.scss

.cl-list {
	margin-bottom: 20rpx;

	&-item {
		display: flex;
		align-items: center;
		position: relative;
		overflow: hidden;
		background-color: #fff;

		&--append {
			.cl-list__content {
				margin-right: 20rpx;
			}
		}

		&--disabled {
			background-color: #eee;
			color: #999;

			&:after {
				display: block;
				content: "";
				background-color: rgba(0, 0, 0, 0.1);
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
			}
		}

		&.is-border {
			border-bottom: 1rpx solid #eee;
		}

		&__icon,
		&__label,
		&__append {
			flex-shrink: 0;
		}

		&__label,
		&__content,
		&__append {
			display: flex;
			align-items: center;
			min-height: 80rpx;
			font-size: 26rpx;
		}

		&__swiper {
			display: flex;
			align-items: center;
			transition: all 0.3s;
			width: 100%;
		}

		&__container {
			display: flex;
			align-items: center;
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
		}

		&__icon {
			margin-right: 20rpx;

			img,
			image {
				display: block;
				height: 46rpx;
				width: 46rpx;
			}

			text {
				font-size: 46rpx;
			}
		}

		&__label {
			padding: 0 20rpx 0 0;
			font-size: 28rpx;
		}

		&__content {
			padding: 10rpx 0;
			flex: 1;

			&.is-justify-center {
				justify-content: center;

				picker {
					text-align: center;
				}
			}

			&.is-justify-end {
				justify-content: flex-end;

				picker {
					text-align: end;
				}
			}

			&.is-justify-space-between {
				justify-content: space-between;
			}

			&.is-justify-space-around {
				justify-content: space-around;
			}

			&.is-color-primary {
				color: $cl-color-primary;
			}

			&.is-color-success {
				color: $cl-color-success;
			}

			&.is-color-warning {
				color: $cl-color-warning;
			}

			&.is-color-error {
				color: $cl-color-error;
			}
		}

		&__append {
			i {
				display: inline-block;
			}

			[class^="cl-icon-"] {
				font-size: 30rpx;
			}
		}

		&__menu-left {
			height: 100%;
			transform: translateX(-100%);
			position: absolute;
			transition: left 0.3s;
		}

		&__menu-right {
			height: 100%;
			transform: translateX(100%);
			position: absolute;
			right: 0;
			transition: left 0.3s;
		}
	}
}

cl-list {
	&:last-child {
		margin-bottom: 0;
	}
}