@zhangqingcq/plug-r-qw/src/style/components/sideMenu.less

A JS lib base on Vue and View-design, you can achieve some complex functions with simple code after install this lib.

@import '../common/color';
@import '../common/size';

.menuBoxRP {
	position: relative;
	border-top: 1px solid lighten(@sideMenuColor, 5%);
	background-color: @sideMenuColor;
	font-size: 14px;

	* {
		/*修改滚动条样式*/

		&::-webkit-scrollbar {
			width: 3px;
		}

		&::-webkit-scrollbar-track {
			background-color: lighten(@sideMenuColor, 30%);
			border-radius: 3px;
		}

		&::-webkit-scrollbar-thumb {
			background-color: lighten(@sideMenuColor, 55%);
			border-radius: 5px;
		}

		&::-webkit-scrollbar-thumb:hover {
			background-color: lighten(@sideMenuColor, 60%);
			cursor: pointer;
		}
	}

	.menuListR {
		width: @sideMenuW;
		color: #fff;
		height: 100%;
		flex: 0 0 @sideMenuW;
		order: -1;
		padding: 0;
		overflow: hidden;
		overflow-y: auto;

		.groupBoxRP {
			> li {
				cursor: pointer;

				&.dropItemRP > .menuTxtR {
					font-weight: bold;
				}

				> .menuTxtR {
					position: relative;
					padding-top: 9px;
					padding-bottom: 9px;
					&:before,
					&:after {
						content: '';
						height: 100%;
						position: absolute;
						left: 0;
						bottom: 0;
					}

					&.active {
						font-weight: bold;
					}

					&.active,
					&:hover {
						&:before {
							background-color: #fff;
							display: block;
							width: 100%;
						}
					}

					&.active:before {
						opacity: 0.06;
					}
					&.active:after {
						border: 3px solid transparent;
						border-left-color: #eee;
					}

					&:hover:before {
						opacity: 0.04;
					}
				}

				&.dropItemRP {
					position: relative;

					&:before {
						position: absolute;
						top: 0.65rem;
						right: 1rem;
						display: block;
						width: 0.875rem;
						height: 0.875rem;
						padding: 0;
						font-size: 1.875rem;
						line-height: 0.85625rem;
						text-align: center;
						content: '\2039';
						transition: 0.3s;
					}

					> .groupBoxRP {
						display: none;
					}

					&.open {
						&:before {
							transform: rotate(-90deg);
						}

						> .groupBoxRP {
							display: block;
						}
					}
				}

				.menuIcoL {
					margin-right: 8px;
				}
			}
		}
	}

	.menuShowHideIco {
		position: absolute;
		z-index: 1000;
		top: 50%;
		right: -5px;
		opacity: 0.3;
		cursor: pointer;

		&.showIco {
			right: -18px;
		}

		&:hover {
			opacity: 1;
		}
	}
}

.menuBoxRP.light {
	border-top: 1px solid #fff;
	background-color: #fff;
	box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.08);

	* {
		/*修改滚动条样式*/

		&::-webkit-scrollbar-track {
			background-color: lighten(#777, 45%);
		}

		&::-webkit-scrollbar-thumb {
			background-color: lighten(#777, 35%);
		}

		&::-webkit-scrollbar-thumb:hover {
			background-color: lighten(#777, 30%);
		}
	}

	.menuListR {
		color: inherit;

		.groupBoxRP .menuTxtR {
			&.active,
			&:hover {
				&:before {
					background-color: @sideMenuColor;
				}
			}

			&.active:before {
				opacity: 0.1;
			}
			&.active:after {
				border-left-color: @sideMenuColor;
			}

			&:hover:before {
				opacity: 0.08;
			}
		}
	}
}