src/scss/base/forms/select.scss - master - Slav468/test

src/scss/base/forms/select.scss
152 строки2 KB
Slav468
feat: init commit
15 июл 2024, 14:31
15 июл 2024, 14:310fdfc9b
// <SELECT>
// Сніппет (HTML): sel
.select {
	min-width: 0;
	position: relative;
	// .select__body
	&__body {
		position: relative;
	}
	// .select__title
	&__title {
		color: inherit;
		text-align: left;
		border: 1px solid #d9d9d9;
		background-color: #fff;
		cursor: pointer;
		width: 100%;
		border-radius: 4px;
	}
	// .select__value
	&__value {
		display: flex;
		min-width: 0;
		align-items: center;
		height: toRem(30);
		padding: 0 toRem(15);
		gap: toRem(10);
		> * {
			flex: 1 1 auto;
		}
		&:after {
			content: "";
			align-self: stretch;
			flex: 0 0 10px;
			transition: all 0.3s ease 0s;
			display: flex;
			justify-content: center;
			align-items: center;
			._select-open & {
				transform: rotate(-180deg);
			}
		}
		&._select-pseudo-label {
			&::before {
				content: attr(data-pseudo-label);
				opacity: 0.5;
			}
		}
	}
	// .select__content
	&__content {
		flex: 1 1 auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	// .select__text
	&__text {
		flex: 1 1 auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	&__input {
		width: 100%;
		background-color: transparent;
		height: 100%;
	}
	// .select__options
	&__options {
		color: #000;
		position: absolute;
		top: calc(100% - toRem(1));
		border-radius: 0 0 4px 4px;
		min-width: 100%;
		left: 0;
		background-color: #fff;
		border-top: 0;
		border: 1px solid #d9d9d9;
		border-top: 0;
		padding: 10px 0px 5px 0px;
	}
	// .select__scroll
	&__scroll {
		overflow-y: auto;
		overflow-x: hidden;
		// Максимальна висота
		max-height: toRem(200);
		// Стилі скроллбару
		.simplebar-scrollbar {
			&::before {
				//opacity: 1;
			}
		}
	}
	// .select__option
	&__option {
		width: 100%;
		text-align: left;
		cursor: pointer;
		padding: 5px 15px;
		color: inherit;
		&._select-selected {
			background-color: #eee;
		}
		@media (any-hover: hover) {
			&:hover {
				background: #d9d9d9;
			}
		}
	}

	// Конструкція додаткових даних
	&__row {
		display: inline-flex;
		align-items: center;
	}
	&__asset {
	}
	&__text {
	}

	&--show-top {
		.select__options {
			top: auto;
			bottom: calc(100% - toRem(1));
			border: 1px solid #d9d9d9;
			border-bottom: 0;
			border-radius: 4px 4px 0 0;
			padding: 5px 0px 10px 0px;
		}
	}

	// Стан селекту
	&._select-open {
	}
	&._select-disabled {
	}
	&._select-active {
	}
	&._select-focus {
	}
	&._select-multiple {
	}
	&._select-checkbox {
	}
}

// Тег
._select-tag {
	cursor: pointer;
}