22

✏️ Editing: custom-dropdown.css

/* TYPE Custom Dropdown */
.usof-custom-dropdown {
	position: relative;
	height: 4.5em;
	}
	.usof-custom-dropdown-list {
		position: absolute;
		top: 0;
		width: 100%;
		max-height: 4.5em;
		padding: .5em 0;
		background: #fff;
		overflow-x: hidden;
		border-radius: 3px;
		box-shadow: var(--usof-box-shadow);
		transition: max-height 0.2s;
		}
	.usof-custom-dropdown-list:hover {
		max-height: 50vh;
		z-index: 111;
		}
		.usof-custom-dropdown-item {
			display: grid;
			grid-template-columns: repeat( auto-fit, minmax(20px, 1fr) );
			grid-gap: 5px;
			overflow: hidden;
			text-align: center;
			height: 0em;
			padding: 0 1em;
			cursor: pointer;
			transition: height 0.2s;
			}
		.usof-custom-dropdown-item.current,
		.usof-custom-dropdown-list:hover .usof-custom-dropdown-item {
			height: 3.5em;
			}
			.usof-custom-dropdown-item > * {
				font-style: normal;
				line-height: 2.5;
				margin: .5em 0;
				background: var(--usof-color-gray-30);
				color: #fff;
				}
			.usof-custom-dropdown-item:hover > * {
				background: var(--usof-color-gray-70);
				}
			.usof-custom-dropdown-item.current > * {
				background: var(--usof-color-blue-50);
				}
		.usof-custom-dropdown-item[data-value="2-3"] {
			grid-template-columns: 2fr 3fr;
			}
		.usof-custom-dropdown-item[data-value="3-2"] {
			grid-template-columns: 3fr 2fr;
			}
		.usof-custom-dropdown-item[data-value="1-2"] {
			grid-template-columns: 1fr 2fr;
			}
		.usof-custom-dropdown-item[data-value="2-1"] {
			grid-template-columns: 2fr 1fr;
			}
		.usof-custom-dropdown-item[data-value="1-3"] {
			grid-template-columns: 1fr 3fr;
			}
		.usof-custom-dropdown-item[data-value="3-1"] {
			grid-template-columns: 3fr 1fr;
			}
		.usof-custom-dropdown-item[data-value="1-4"] {
			grid-template-columns: 1fr 4fr;
			}
		.usof-custom-dropdown-item[data-value="4-1"] {
			grid-template-columns: 4fr 1fr;
			}
		.usof-custom-dropdown-item[data-value="1-5"] {
			grid-template-columns: 1fr 5fr;
			}
		.usof-custom-dropdown-item[data-value="5-1"] {
			grid-template-columns: 5fr 1fr;
			}
		.usof-custom-dropdown-item[data-value="1-2-1"] {
			grid-template-columns: 1fr 2fr 1fr;
			}
		.usof-custom-dropdown-item[data-value="1-3-1"] {
			grid-template-columns: 1fr 3fr 1fr;
			}
		.usof-custom-dropdown-item[data-value="1-4-1"] {
			grid-template-columns: 1fr 4fr 1fr;
			}

MR SKB