vkko/front/scss/controls.scss

@import "variables";

textarea {
	margin-bottom: 20px;
	border: 1px solid $color-primary-0;
	background: $color-white;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 1rem;
	border-radius: $border-radius;
	width: 100%;
	display: block;
}
input[type="text"],
input[type="password"],
.button,
button {
	width: 100%;
	height: 30px;
	margin-bottom: 20px;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 1rem;
	border-radius: $border-radius;
	background: $color-white;
	color: $color-primary-2;
	border: 1px solid $color-primary-0;

	&:disabled {
		opacity: 0.5;
	}
}
input[type="text"],
input[type="password"],
textarea {
	padding-inline-start: 10px;

	&:focus,
	&:hover {
		&:not(:disabled) {
			border-color: $color-primary-2;
		}
	}
	&:focus {
		box-shadow: 0 0 1px 1px $color-primary-3;
	}
}
.button,
button {
	&:hover {
		border-color: $color-primary-2;
		box-shadow: 0 0 1px 1px $color-primary-3;
		cursor: pointer;
	}
}
.button {
	text-align: center;
	line-height: 28px;
}

.button-group {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));

	> .button,
	> button {
		margin: 0;
	}
}
input:placeholder-shown {
	text-overflow: ellipsis;
}
input[type="search"] {
	border: none;
	background: none;
	outline: none;
	box-shadow: none;
}
.search-block {
	margin-bottom: 20px;
	background-color: $color-white;
	border-radius: $border-radius;
	position: relative;
	align-self: flex-end;

	.search {
		position: relative;
		min-height: 50px;
		margin-left: 10px;
		margin-right: 10px;
		display: flex;
		flex-direction: column-reverse;

		> input {
			height: 2.5rem;
			font-size: 1.25rem;
			color: $color-grey;
			padding-inline-start: 20px;
			transition: color 100ms linear;

			+ .placeholder {
				position: absolute;
				top: 50%;
				left: 40px;
				transform: translateY(-50%);
				color: $color-grey;
				font-size: 1.25rem;
				font-weight: 700;
				user-select: none;
				pointer-events: none;

				transition: all 100ms linear;

				+ .line {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 100%;
					height: 2px;
					background-color: $color-grey;
					transition: right 100ms linear;
				}
			}

			~ .fa-search {
				position: absolute;
				font-size: 2rem;
				top: 50%;
				color: $color-grey;
				transform: translateY(-50%);
				transition: font-size 100ms linear, top 100ms linear;
			}

			&:valid,
			&:focus {
				color: $color-black;

				+ .placeholder {
					font-size: 0.9rem;
					top: 0;
					left: 0;
					transform: translateY(0);
					color: $color-black;

					+ .line {
						right: 0;
					}
				}
				~ .fa-search {
					font-size: 1rem;
					top: 65%;
				}
			}
		}

		+ .search-list {
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			background-color: $color-secondary-b-4;
			padding: 20px;
			z-index: 90;

			h3 {
				color: $color-green-700;
				padding-bottom: 5px;
				border-bottom: 1px solid;
				margin-bottom: 15px;
				margin-top: 20px;
			}

			ul {
				> li {
					list-style: none;

					> a {
						color: $color-black;
						display: block;
						padding: 5px 0;
					}
				}
			}
		}
	}
}

label.checkbox {
	display: flex;
	align-items: center;
	margin-bottom: 20px;

	> input[type="checkbox"] {
		display: none;

		+ .checked {
			position: relative;
			width: 20px;
			height: 20px;
			border: 1px solid $color-primary-2;
			border-radius: 3px;

			&::before {
				content: "";
				position: absolute;
				left: 1px;
				top: 1px;
				right: 1px;
				bottom: 1px;
				border-radius: 3px;
				background-color: $color-white;
			}
		}

		&:hover {
			+ .checked {
				box-shadow: 0 0 1px 1px $color-primary-3;

				&::before {
					background-color: $color-primary-3;
				}
			}

			&:checked {
				+ .checked {
					&::before {
						background-color: $color-primary-1;
						// filter: brightness(1.2);
					}
				}
			}
		}

		&:checked {
			+ .checked {
				&::before {
					background-color: $color-primary-2;
				}
			}
		}
	}

	> .text {
		margin-left: 10px;
		user-select: none;
	}

	&:hover {
		cursor: pointer;
	}
}

// TREE

.tree {
	border: 1px solid $color-primary-2;
	padding-left: 20px;
	margin-bottom: 20px;
	font-size: 0.9rem;
	max-height: 250px;
	overflow: auto;
	outline: none;

	.branch {
		margin-left: 40px;
		position: relative;

		> .head {
			position: relative;

			&:hover {
				color: $color-primary-2;

				cursor: pointer;
			}

			&::before {
				content: "";
				position: absolute;
				left: -17px;
				width: 0.75rem;
				height: 0.75rem;
				border: 1px solid;
				border-color: $color-primary-0;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				top: 0.6rem;
				transform: translateY(-50%);
			}
		}

		> .body {
			height: auto;
		}

		&.selected {
			> .head {
				&::before {
					background-color: $color-primary-3;
				}
			}
		}

		&::before {
			content: "";
			position: absolute;
			border-top: 1px dashed;
			border-color: $color-primary-2;
			top: 0.6rem;
			left: -40px;
			width: 20px;
		}
		&::after {
			content: "";
			position: absolute;
			border-left: 1px dashed;
			border-color: $color-primary-2;
			top: 0;
			bottom: 0;
			left: -40px;
		}
	}
}