@whitesev/pops/src/components/panel/index.css

弹窗库

.pops[type-value="panel"] {
	--el-disabled-text-color: #a8abb2;
	--el-disabled-bg-color: #f5f7fa;
	--el-disabled-border-color: #e4e7ed;
	--pops-bg-color: #f2f2f2;
	--pops-color: #333;
	--title-bg-color: #ffffff;
	--aside-bg-color: #ffffff;
	--aside-hover-color: rgb(64, 158, 255);
	--aside-hover-bg-color: rgba(64, 158, 255, 0.1);

	--pops-panel-forms-margin-top-bottom: 10px;
	--pops-panel-forms-margin-left-right: 20px;
	--pops-panel-forms-header-icon-size: 20px;
	--pops-panel-forms-header-padding-top-bottom: 15px;
	--pops-panel-forms-header-padding-left-right: 10px;
	--pops-panel-forms-container-item-bg-color: #ffffff;
	--pops-panel-forms-container-item-title-color: #333;
	--pops-panel-forms-container-item-border-radius: 6px;
	--pops-panel-forms-container-item-margin-top-bottom: 10px;
	--pops-panel-forms-container-item-margin-left-right: var(
		--pops-panel-forms-margin-left-right
	);
	--pops-panel-forms-container-li-padding-top-bottom: 12px;
	--pops-panel-forms-container-li-padding-left-right: 16px;
}
.pops[type-value="panel"] {
	color: var(--pops-color);
	background: var(--pops-bg-color);
}
.pops[type-value] .pops-panel-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--title-bg-color);
}

.pops[type-value="panel"] .pops-panel-title {
	width: 100%;
	height: var(--container-title-height);
	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
}
.pops[type-value="panel"] .pops-panel-title p[pops] {
	width: 100%;
	overflow: hidden;
	text-indent: 15px;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
	line-height: normal;
	align-content: center;
}
.pops[type-value="panel"] .pops-panel-content {
	width: 100%;
	/*height: calc(
		100% - var(--container-title-height) - var(--container-bottom-btn-height)
	);*/
	flex: 1;
	overflow: auto;
	word-break: break-word;
}
.pops[type-value="panel"] .pops-panel-btn {
	display: flex;
	padding: 10px 10px 10px 10px;
	width: 100%;
	height: var(--container-bottom-btn-height);
	max-height: var(--container-bottom-btn-height);
	line-height: normal;
	border-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
	text-align: right;
	align-content: center;
	align-items: center;
}

/* ↓panel的CSS↓ */
aside.pops-panel-aside {
	overflow: auto;
	box-sizing: border-box;
	flex-shrink: 0;
	max-width: 200px;
	min-width: 100px;
	height: 100%;
	background: var(--aside-bg-color);
	border-right: 1px solid var(--aside-bg-color);
	font-size: 0.9em;
}
aside.pops-panel-aside {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.pops-panel-content {
	display: flex;
	flex-direction: row;
	flex: 1;
	overflow: auto;
	flex-basis: auto;
	box-sizing: border-box;
	min-width: 0;
	bottom: 0 !important;
}
section.pops-panel-container {
	width: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
section.pops-panel-container .pops-panel-container-header-ul,
section.pops-panel-container .pops-panel-deepMenu-container-header-ul {
	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
	flex: 0 auto;
}
section.pops-panel-container .pops-panel-container-header-ul li {
	text-align: left;
	display: flex;
	justify-content: flex-start !important;
	margin: 0px !important;
	padding: var(--pops-panel-forms-header-padding-top-bottom)
		calc(
			var(--pops-panel-forms-margin-left-right) +
				var(--pops-panel-forms-container-li-padding-left-right)
		);
}
section.pops-panel-container > ul:last-child {
	overflow: auto;
	flex: 1;
}
aside.pops-panel-aside ul li {
	margin: 6px 8px;
	border-radius: 4px;
	padding: 6px 10px;
	cursor: default;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
aside.pops-panel-aside .pops-is-visited,
aside.pops-panel-aside ul li:hover {
	color: var(--aside-hover-color);
	background: var(--aside-hover-bg-color);
}
section.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: var(--pops-panel-forms-margin-top-bottom)
		calc(
			var(--pops-panel-forms-margin-left-right) +
				var(--pops-panel-forms-margin-left-right)
		);
	gap: 10px;
}
section.pops-panel-container .pops-panel-forms-container-item-header-text {
	margin: 10px;
	margin-left: calc(
		var(--pops-panel-forms-margin-left-right) +
			var(--pops-panel-forms-container-li-padding-left-right)
	);
	font-size: 0.9em;
	text-align: left;
	color: var(--pops-panel-forms-container-item-title-color);
}
section.pops-panel-container li.pops-panel-forms-container-item {
	display: block;
}
section.pops-panel-container .pops-panel-forms-container-item ul {
	border-radius: var(--pops-panel-forms-container-item-border-radius);
	background: var(--pops-panel-forms-container-item-bg-color);
	margin: var(--pops-panel-forms-container-item-margin-top-bottom)
		var(--pops-panel-forms-margin-left-right);
}
section.pops-panel-container .pops-panel-forms-container-item ul li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px;
	margin: 0px var(--pops-panel-forms-container-li-padding-left-right);
	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
	text-align: left;
}
section.pops-panel-container
	.pops-panel-forms-container-item
	ul
	li.pops-panel-deepMenu-nav-item {
	padding: var(--pops-panel-forms-container-li-padding-top-bottom)
		var(--pops-panel-forms-container-li-padding-left-right);
	margin: 0px;
	border-bottom: 0;
}
section.pops-panel-container .pops-panel-forms-container-item ul li:last-child {
	border: 0;
}
/* 主文字 */
/*section.pops-panel-container
	.pops-panel-forms-container-item
	.pops-panel-item-left-text
	.pops-panel-item-left-main-text {
	line-height: 2;
}*/
/* 描述文字 */
section.pops-panel-container
	.pops-panel-forms-container-item
	.pops-panel-item-left-text
	.pops-panel-item-left-desc-text {
	line-height: normal;
	margin-top: 6px;
	font-size: 0.8em;
	color: rgb(108, 108, 108);
}

/* 折叠面板 */

section.pops-panel-container .pops-panel-forms-fold {
	border-radius: var(--pops-panel-forms-container-item-border-radius);
	background: var(--pops-panel-forms-container-item-bg-color);
	margin: var(--pops-panel-forms-margin-top-bottom)
		var(--pops-panel-forms-margin-left-right);
}
section.pops-panel-container
	.pops-panel-forms-fold
	.pops-panel-forms-fold-container {
	display: flex;
	align-items: center;
	fill: #6c6c6c;
	justify-content: space-between;
	margin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;
	padding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;
}
section.pops-panel-container
	.pops-panel-forms-fold[data-fold-enable]
	.pops-panel-forms-fold-container-icon {
	transform: rotate(90deg);
}
section.pops-panel-container
	.pops-panel-forms-fold
	.pops-panel-forms-fold-container-icon {
	width: 15px;
	height: 15px;
	display: flex;
	align-items: center;
	transform: rotate(-90deg);
	transition: transform 0.3s;
}
section.pops-panel-container
	.pops-panel-forms-fold[data-fold-enable]
	.pops-panel-forms-container-item-formlist {
	height: 0;
}
section.pops-panel-container
	.pops-panel-forms-fold
	.pops-panel-forms-container-item-formlist {
	transition: height 0.3s;
	overflow: hidden;
	border-radius: unset;
	background: unset;
	margin: 0;
	height: auto;
	height: calc-size(auto, size);
}
/* 折叠面板 */

/* 姑且认为小于600px的屏幕为移动端 */
@media (max-width: 600px) {
	/* 兼容移动端CSS */
	.pops[type-value="panel"] {
		--pops-panel-forms-margin-left-right: 10px;
	}
	.pops[type-value="panel"] {
		width: 92%;
		width: 92vw;
		width: 92dvw;
	}
	.pops[type-value="panel"] .pops-panel-content aside.pops-panel-aside {
		max-width: 20%;
		min-width: auto;
	}
	.pops[type-value="panel"]
		section.pops-panel-container
		.pops-panel-forms-container-item
		> div {
		text-align: left;
		--pops-panel-forms-margin-left-right: 0px;
	}
	.pops[type-value="panel"]
		section.pops-panel-container
		.pops-panel-forms-container-item
		ul {
		margin: 0px !important;
	}
	.pops[type-value="panel"] section.pops-panel-container > ul > li {
		margin: 10px 10px;
	}
	.pops[type-value="panel"]
		section.pops-panel-container
		> ul
		> li
		div:nth-child(2) {
		max-width: 55%;
	}
	.pops[type-value="panel"]
		section.pops-panel-container
		.pops-panel-select
		select {
		min-width: 88px !important;
		width: -webkit-fill-available;
		width: -moz-available;
	}
	.pops[type-value="panel"]
		section.pops-panel-container
		.pops-panel-container-header-ul
		li {
		font-size: 16px;
	}
	.pops[type-value="panel"] .pops-panel-title p[pops],
	.pops[type-value="panel"] section.pops-panel-container > ul li,
	.pops[type-value="panel"] aside.pops-panel-aside ul li {
		font-size: 14px;
	}
}
/* switch的CSS */
.pops-panel-switch {
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
	position: relative;
	font-size: 14px;
	line-height: normal;
	align-content: center;
	height: 32px;
	vertical-align: middle;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
}
.pops-panel-switch input.pops-panel-switch__input {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	margin: 0;
}
.pops-panel-switch:has(input.pops-panel-switch__input:disabled),
.pops-panel-switch[data-disabled],
.pops-panel-switch[data-disabled] .pops-panel-switch__core,
.pops-panel-switch
	input.pops-panel-switch__input:disabled
	+ .pops-panel-switch__core {
	cursor: not-allowed;
	opacity: 0.6;
}
.pops-panel-switch span.pops-panel-switch__core {
	display: inline-flex;
	position: relative;
	align-items: center;
	min-width: 40px;
	height: 20px;
	border: 1px solid rgb(220, 223, 230, var(--pops-bd-opacity));
	outline: 0;
	border-radius: 10px;
	box-sizing: border-box;
	background: rgb(220, 223, 230, var(--pops-bg-opacity));
	cursor: pointer;
	transition: border-color 0.3s, background-color 0.3s;
}
.pops-panel-switch .pops-panel-switch__action {
	position: absolute;
	left: 1px;
	border-radius: 100%;
	transition: all 0.3s;
	width: 16px;
	height: 16px;
	background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
	display: flex;
	justify-content: center;
	align-items: center;
	color: rgb(220, 223, 230);
}
.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {
	border-color: rgb(64, 158, 255, var(--pops-bd-opacity));
	background-color: rgb(64, 158, 255, var(--pops-bg-opacity));
}
.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {
	left: calc(100% - 17px);
	color: rgb(64, 158, 255);
}
/* switch的CSS */

/* slider旧的CSS */
section.pops-panel-container .pops-panel-slider:has(> input[type="range"]) {
	overflow: hidden;
	height: 25px;
	line-height: normal;
	align-content: center;
	display: flex;
	align-items: center;
}
section.pops-panel-container .pops-panel-slider input[type="range"] {
	height: 6px;
	background: rgb(228, 231, 237, var(--pops-bg-opacity));
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
}
section.pops-panel-container
	.pops-panel-slider
	input[type="range"]::-webkit-slider-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));
	background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;
}
section.pops-panel-container
	.pops-panel-slider
	input[type="range"]::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));
	background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
section.pops-panel-container
	.pops-panel-slider
	input[type="range"]::-moz-range-progress {
	height: 6px;
	border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;
}
/* slider旧的CSS */

/* slider的CSS */
.pops-slider {
	--pops-slider-color-white: #ffffff;
	--pops-slider-color-primary: #409eff;
	--pops-slider-color-info: #909399;
	--pops-slider-text-color-placeholder: #a8abb2;
	--pops-slider-border-color-light: #e4e7ed;
	--pops-slider-border-radius-circle: 100%;
	--pops-slider-transition-duration-fast: 0.2s;

	--pops-slider-main-bg-color: var(--pops-slider-color-primary);
	--pops-slider-runway-bg-color: var(--pops-slider-border-color-light);
	--pops-slider-stop-bg-color: var(--pops-slider-color-white);
	--pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);
	--pops-slider-border-radius: 3px;
	--pops-slider-height: 6px;
	--pops-slider-button-size: 20px;
	--pops-slider-button-wrapper-size: 36px;
	--pops-slider-button-wrapper-offset: -15px;
}

.pops-slider {
	width: 100%;
	height: 32px;
	display: flex;
	align-items: center;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
}

.pops-slider-width {
	flex: 0 0 52%;
	margin-left: 10px;
}

.pops-slider__runway {
	flex: 1;
	height: var(--pops-slider-height);
	background-color: var(--pops-slider-runway-bg-color);
	border-radius: var(--pops-slider-border-radius);
	position: relative;
	cursor: pointer;
}

.pops-slider__runway.show-input {
	margin-right: 30px;
	width: auto;
}

.pops-slider__runway.pops-slider-is-disabled {
	cursor: default;
}

.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {
	background-color: var(--pops-slider-disabled-color);
}

.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {
	border-color: var(--pops-slider-disabled-color);
}

.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,
.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,
.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {
	cursor: not-allowed;
}

.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,
.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,
.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {
	transform: scale(1);
}

.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,
.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,
.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {
	cursor: not-allowed;
}

.pops-slider__input {
	flex-shrink: 0;
	width: 130px;
}

.pops-slider__bar {
	height: var(--pops-slider-height);
	background-color: var(--pops-slider-main-bg-color);
	border-top-left-radius: var(--pops-slider-border-radius);
	border-bottom-left-radius: var(--pops-slider-border-radius);
	position: absolute;
}

.pops-slider__button-wrapper {
	height: var(--pops-slider-button-wrapper-size);
	width: var(--pops-slider-button-wrapper-size);
	position: absolute;
	z-index: 1;
	top: var(--pops-slider-button-wrapper-offset);
	transform: translate(-50%);
	background-color: transparent;
	text-align: center;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	line-height: normal;
	outline: none;
}

.pops-slider__button-wrapper:after {
	display: inline-block;
	content: "";
	height: 100%;
	vertical-align: middle;
}

.pops-slider__button:hover,
.pops-slider__button.hover {
	cursor: grab;
}

.pops-slider__button {
	display: inline-block;
	width: var(--pops-slider-button-size);
	height: var(--pops-slider-button-size);
	vertical-align: middle;
	border: solid 2px var(--pops-slider-main-bg-color);
	background-color: var(--pops-slider-color-white);
	border-radius: 50%;
	box-sizing: border-box;
	transition: var(--pops-slider-transition-duration-fast);
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.pops-slider__button:hover,
.pops-slider__button.hover,
.pops-slider__button.dragging {
	transform: scale(1.2);
}

.pops-slider__button:hover,
.pops-slider__button.hover {
	cursor: grab;
}

.pops-slider__button.dragging {
	cursor: grabbing;
}

.pops-slider__stop {
	position: absolute;
	height: var(--pops-slider-height);
	width: var(--pops-slider-height);
	border-radius: var(--pops-slider-border-radius-circle);
	background-color: var(--pops-slider-stop-bg-color);
	transform: translate(-50%);
}

.pops-slider__marks {
	top: 0;
	left: 12px;
	width: 18px;
	height: 100%;
}

.pops-slider__marks-text {
	position: absolute;
	transform: translate(-50%);
	font-size: 14px;
	color: var(--pops-slider-color-info);
	margin-top: 15px;
	white-space: pre;
}

.pops-slider.is-vertical {
	position: relative;
	display: inline-flex;
	width: auto;
	height: 100%;
	flex: 0;
}

.pops-slider.is-vertical .pops-slider__runway {
	width: var(--pops-slider-height);
	height: 100%;
	margin: 0 16px;
}

.pops-slider.is-vertical .pops-slider__bar {
	width: var(--pops-slider-height);
	height: auto;
	border-radius: 0 0 3px 3px;
}

.pops-slider.is-vertical .pops-slider__button-wrapper {
	top: auto;
	left: var(--pops-slider-button-wrapper-offset);
	transform: translateY(50%);
}

.pops-slider.is-vertical .pops-slider__stop {
	transform: translateY(50%);
}

.pops-slider.is-vertical .pops-slider__marks-text {
	margin-top: 0;
	left: 15px;
	transform: translateY(50%);
}

.pops-slider--large {
	height: 40px;
}

.pops-slider--small {
	height: 24px;
}
/* slider的CSS */

/* input的CSS */
.pops-panel-input {
	display: flex;
	align-items: center;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	background-color: #ffffff;
	position: relative;
}
.pops-panel-input:hover {
	box-shadow: 0 0 0 1px #c0c4cc inset;
}
.pops-panel-input:has(input:focus) {
	outline: 0;
	border: 1px solid #409eff;
	border-radius: 4px;
	box-shadow: none;
}
.pops-panel-input input {
	display: inline-flex;
	justify-content: center;
	text-align: start;
	align-items: center;
	align-content: center;
	white-space: nowrap;
	cursor: text;
	box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	vertical-align: middle;
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	outline: 0;
	transition: 0.1s;
	border: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	height: 32px;
	width: 100%;
	flex: 1;
	margin-right: calc(1em + 8px);
	padding: 8px 8px;
}
.pops-panel-input span.pops-panel-input__suffix {
	display: inline-flex;
	white-space: nowrap;
	flex-shrink: 0;
	flex-wrap: nowrap;
	height: 100%;
	text-align: center;
	color: #a8abb2;
	transition: all 0.3s;
	pointer-events: none;
	margin: 0 8px;
	position: absolute;
	right: 0px;
}
.pops-panel-input span.pops-panel-input__suffix-inner {
	pointer-events: all;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.pops-panel-input .pops-panel-icon {
	cursor: pointer;
}
.pops-panel-input .pops-panel-icon {
	height: inherit;
	line-height: normal;
	align-content: center;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s;
}
.pops-panel-input .pops-panel-icon svg {
	height: 1em;
	width: 1em;
}

.pops-input-disabled {
	background-color: var(--el-disabled-bg-color);
	box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;
}
.pops-panel-input.pops-input-disabled {
	border: none;
}
.pops-panel-input.pops-input-disabled:hover {
	box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;
}
.pops-panel-input input:disabled,
.pops-panel-input input:disabled + .pops-panel-input__suffix {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	color: var(--el-disabled-text-color);
	-webkit-text-fill-color: var(--el-disabled-text-color);
	cursor: not-allowed;
}
.pops-panel-input input:disabled + .pops-panel-input__suffix {
	display: none;
}
/* input的CSS */

/* textarea的CSS */
.pops-panel-textarea textarea {
	width: 100%;
	/*vertical-align: bottom;*/
	position: relative;
	display: block;
	resize: none;
	padding: 5px 11px;
	/*line-height: 1;*/
	box-sizing: border-box;
	font-size: inherit;
	font-family: inherit;
	background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
	background-image: none;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: 0 0 0 1px #dcdfe6 inset;
	border-radius: 0;
	transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	border: none;
}
.pops-panel-textarea textarea:hover {
	box-shadow: 0 0 0 1px #c0c4cc inset;
}
.pops-panel-textarea-disable .pops-panel-textarea textarea:hover {
	box-shadow: none;
}
.pops-panel-textarea textarea:focus {
	outline: 0;
	box-shadow: 0 0 0 1px #409eff inset;
}
/* textarea的CSS */

/* select的CSS */
.pops-panel-select select {
	height: 32px;
	line-height: normal;
	align-content: center;
	min-width: 200px;
	border: 1px solid rgb(184, 184, 184, var(--pops-bd-opacity));
	border-radius: 5px;
	text-align: center;
	outline: 0;
	background: rgb(255, 255, 255, var(--pops-bg-opacity));
	box-shadow: none;
}
.pops-panel-select select:hover {
	box-shadow: 0 0 0 1px #c0c4cc inset;
}
.pops-panel-select-disable .pops-panel-select select:hover {
	box-shadow: none;
}
.pops-panel-select select:focus {
	border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));
	box-shadow: none;
}
/* select的CSS */

/* select-multiple的CSS*/
.pops-panel-select-multiple {
	--el-border-radius-base: 4px;
	--el-fill-color-blank: #ffffff;
	--el-transition-duration: 0.3s;
	--el-border-color: #dcdfe6;
	--el-text-color-placeholder: #a8abb2;
	--color: inherit;
	--el-select-input-color: #a8abb2;
	--el-select-input-font-size: 14px;
	--el-text-color-regular: #606266;
	--el-color-info: #909399;
	--el-color-info-light-9: #f4f4f5;
	--el-color-info-light-8: #e9e9eb;
	--el-color-primary-light-9: #ecf5ff;
	--el-color-primary-light-8: #d9ecff;
	--el-color-primary: #409eff;
	--el-color-white: #ffffff;
	width: 200px;
	/* 左侧内容*/
	/* 左侧内容*/
	/* 右侧箭头图标*/
	/* 右侧箭头图标*/
	/* tag*/
}
.pops-panel-select-multiple .el-select__wrapper {
	display: flex;
	align-items: center;
	position: relative;
	box-sizing: border-box;
	cursor: pointer;
	text-align: left;
	font-size: 14px;
	padding: 4px 12px;
	gap: 6px;
	min-height: 32px;
	line-height: normal;
	align-content: center;
	border-radius: var(--el-border-radius-base);
	background-color: var(--el-fill-color-blank);
	transition: var(--el-transition-duration);
	transform: translateZ(0);
	box-shadow: 0 0 0 1px var(--el-border-color) inset;
}
.pops-panel-select-multiple .el-select__wrapper.is-focused {
	box-shadow: 0 0 0 1px var(--el-color-primary) inset;
}
.pops-panel-select-multiple .el-select__selection {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex: 1;
	min-width: 0;
	gap: 6px;
}
.pops-panel-select-multiple .el-select__selected-item {
	display: flex;
	flex-wrap: wrap;
	-webkit-user-select: none;
	user-select: none;
}
.pops-panel-select-multiple
	.el-select__selected-item.el-select__choose_tag
	.el-tag {
	max-width: 200px;
}
.pops-panel-select-multiple .el-select__input-wrapper {
	max-width: 100%;
}
.pops-panel-select-multiple .el-select__selection.is-near {
	margin-left: -8px;
}
.pops-panel-select-multiple .el-select__placeholder {
	position: absolute;
	display: block;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--el-input-text-color, var(--el-text-color-regular));
}
.pops-panel-select-multiple .el-select__placeholder.is-transparent {
	-webkit-user-select: none;
	user-select: none;
	color: var(--el-text-color-placeholder);
}
.pops-panel-select-multiple .el-select__prefix,
.pops-panel-select-multiple .el-select__suffix {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 6px;
	color: var(--el-input-icon-color, var(--el-text-color-placeholder));
}
.pops-panel-select-multiple .el-icon {
	--color: inherit;
	height: 1em;
	width: 1em;
	line-height: normal;
	align-content: center;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: relative;
	fill: currentColor;
	color: var(--color);
	font-size: inherit;
}
.pops-panel-select-multiple .el-icon svg {
	height: 1em;
	width: 1em;
}
.pops-panel-select-multiple .el-select__caret {
	color: var(--el-select-input-color);
	font-size: var(--el-select-input-font-size);
	transition: var(--el-transition-duration);
	transform: rotate(0);
	cursor: pointer;
}
.pops-panel-select-multiple .el-tag {
	--el-tag-font-size: 12px;
	--el-tag-border-radius: 4px;
	--el-tag-border-radius-rounded: 9999px;
}
.pops-panel-select-multiple .el-tag {
	background-color: var(--el-tag-bg-color);
	border-color: var(--el-tag-border-color);
	color: var(--el-tag-text-color);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	vertical-align: middle;
	height: 24px;
	padding: 0 9px;
	font-size: var(--el-tag-font-size);
	line-height: normal;
	align-content: center;
	border-width: 1px;
	border-style: solid;
	border-radius: var(--el-tag-border-radius);
	box-sizing: border-box;
	white-space: nowrap;
	--el-icon-size: 14px;
	--el-tag-bg-color: var(--el-color-primary-light-9);
	--el-tag-border-color: var(--el-color-primary-light-8);
	--el-tag-hover-color: var(--el-color-primary);
}
.pops-panel-select-multiple .el-select__selection .el-tag {
	cursor: pointer;
	border-color: transparent;
}
.pops-panel-select-multiple .el-tag.el-tag--info {
	--el-tag-bg-color: var(--el-color-info-light-9);
	--el-tag-border-color: var(--el-color-info-light-8);
	--el-tag-hover-color: var(--el-color-info);
}
.pops-panel-select-multiple .el-tag.el-tag--info {
	--el-tag-text-color: var(--el-color-info);
}
.pops-panel-select-multiple .el-tag.is-closable {
	padding-right: 5px;
}
.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {
	min-width: 0;
}
.pops-panel-select-multiple .el-tag .el-tag__close {
	flex-shrink: 0;
	color: var(--el-tag-text-color);
}
.pops-panel-select-multiple .el-tag .el-tag__close:hover {
	color: var(--el-color-white);
	background-color: var(--el-tag-hover-color);
}
.pops-panel-select-multiple .el-tag .el-icon {
	border-radius: 50%;
	cursor: pointer;
	font-size: calc(var(--el-icon-size) - 2px);
	height: var(--el-icon-size);
	width: var(--el-icon-size);
}
.pops-panel-select-multiple .el-tag .el-tag__close {
	margin-left: 6px;
}
.pops-panel-select-multiple .el-select__tags-text {
	display: block;
	line-height: normal;
	align-content: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* select-multiple的CSS*/

/* deepMenu的css */
.pops-panel-deepMenu-nav-item {
	cursor: pointer;
}
.pops-panel-deepMenu-nav-item:active {
	background: #e9e9e9;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {
	display: flex;
	align-items: center;
	color: #6c6c6c;
	fill: #6c6c6c;
}
.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {
	width: 15px;
	height: 15px;
	display: flex;
	align-items: center;
}
.pops-panel-deepMenu-container .pops-panel-deepMenu-container-header {
	display: flex;
	align-items: center;
	width: -webkit-fill-available;
	width: -moz-available;
	padding: var(--pops-panel-forms-header-padding-top-bottom)
		calc(
			var(--pops-panel-forms-margin-left-right) +
				var(--pops-panel-forms-container-li-padding-left-right) -
				var(--pops-panel-forms-header-icon-size)
		);
}
.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {
	width: var(--pops-panel-forms-header-icon-size);
	height: var(--pops-panel-forms-header-icon-size);
	display: flex;
	align-items: center;
	cursor: pointer;
}
/* 修复safari上图标大小未正常显示 */
.pops-panel-deepMenu-container
	.pops-panel-deepMenu-container-left-arrow-icon
	> svg {
	width: inherit;
	height: inherit;
}
/* deepMenu的css */