Current File : /home/inlingua/public_html/crm/ninexb/wp-content/plugins/tablesome/src/table/style/_options.scss

div#tablesome__container.tablesome__container {
	.tablesome-header__wrapper div.tablesome__options.filter_options,
	.tablesome-header__wrapper div.tablesome__options.tablesome-sort__options,
	div.tablesome__options {
		font-size: 12px;
		color: #444;
		cursor: default;
		text-align: start;
		font-weight: normal;
		border-radius: 3px;
		background: $white;
		position: absolute;
		width: 200px;

		box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px,
			rgba(15, 15, 15, 0.2) 0px 9px 24px;
		padding: 6px 0px;
		z-index: 20;

		&--visible {
			display: block;
			z-index: 2;
		}

		&--hidden {
			display: none;
		}

		& .tablesome__options {
			top: 0px;
			left: 200px;
			width: fit-content;
			max-height: 340px;
			overflow: hidden;
			overflow-y: auto;
		}

		.tablesome__option {
			margin: 0px;
			padding: 0.4em 0.8em;
			cursor: pointer;

			& span {
				color: #444;
				margin-right: 0.2em;
				vertical-align: middle;
			}

			&:not(.tablesome__option--no-hover) {
				&:hover,
				&.tablesome__option--active {
					background-color: #ddd;
					.tablesome__options {
						display: block;
					}
				}
			}

			&--format-type {
				display: flex;
				.tablesome__text {
					flex: 7;
				}
				.arrow-right {
					flex: 1;
				}
			}
		}
	}

	.tablesome__header {
		padding: 0.4em 1em;
		text-align: start;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: rgba(55, 53, 47, 0.6);
		font-size: 11px;
		font-weight: 500;
		line-height: 120%;
		user-select: none;
		text-transform: uppercase;

		&--advanced {
			margin-top: 10px;
			border-top: 1px solid #f1f1f1;
		}
	}

	.tablesome__dividing-line {
		margin: 0.3em 0;
		border-top: 1px solid #f1f1f1;
	}
}

div#tablesome__container.tablesome__container
	.tablesome-header__wrapper
	div.tablesome__options.filter_options,
div#tablesome__container.tablesome__container
	.tablesome-header__wrapper
	div.tablesome__options.tablesome-sort__options {
	width: 435px;
	width: fit-content;
	margin-top: 30px; // testing only

	input[type="number"] {
		height: 3em;
		width: fit-content;
	}

	// Align all fields correctly in a row
	// select,
	// input[type="date"],
	// input[type="datetime-local"],
	// input[type="datetime"],
	// input[type="email"],
	// input[type="month"],
	// input[type="number"],
	// input[type="password"],
	// input[type="search"],
	// input[type="tel"],
	input[type="text"].tablesome__input {
		// input[type="time"],
		// input[type="url"] {
		// input[type="week"] {
		max-width: 130px;
		height: 40px;
		font-size: 1em;
		padding-left: 10px;
		margin: 0px; // Flatsome fix
		border: 1px solid #ddd;
		vertical-align: middle;
	}

	div.row.tablesome__option {
		margin: 0px;
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
		gap: 5px;
		padding: 0.4em 0.8em;
		box-sizing: border-box;

		&:hover {
			background-color: white;
		}

		span {
			line-height: 1em; // Flatsome fix
		}

		.button {
			padding: 0 10px;
			background-color: #eee;
			color: #777;
			font-size: 1em;
			border-radius: 2px;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 2.15384615;
			text-decoration: none;
			text-transform: uppercase;
			height: 40px;
			width: auto !important; // Flatsome fix
			margin: 0px;
			border: 1px solid #ddd;
			&::before {
				border-style: none; // Impreza theme fix
			}
			&:active {
				background-color: #777;
				color: #eee;
				span {
					color: #eee;
				}
			}
		}

		// Divi Builder page Fix Start
		.selectContainer {
			--padding: 0 16px;
			border: var(--border, 1px solid #d8dbdf);
			border-radius: var(--borderRadius, 3px);
			padding: var(--padding);

			&.focused {
				border-color: var(--borderFocusColor, #006fe8);
			}
			input {
				padding: var(--inputPadding, var(--padding));
				&:focus {
					box-shadow: none; // Impreza theme fix
				}
			}
			.item {
				padding: var(--itemPadding, 0 20px);
				&.active {
					background: var(--itemIsActiveBG, #007aff);
					color: var(--itemIsActiveColor, #fff);
				}
			}

			.listContainer {
				box-shadow: var(--listShadow, 0 2px 3px 0 rgba(44, 62, 80, 0.24));
				background: var(--listBackground, #fff);
			}
		}
		// Divi Builder page Fix END

		.selectContainer.column,
		.selectContainer.operator {
			height: 40px;
			width: 150px;
			input,
			.item.hover {
				cursor: pointer;
			}
		}

		.selectContainer.operator {
			margin: 0 0.5rem;
		}

		.close-icon {
			color: #777;
			background-color: #eee;
			display: flex;
			align-self: center;
			border: 1px solid #ddd;
			height: 40px;
			width: 40px;
			justify-content: center;
			align-items: center;
			margin: 0 0 0 5px;
			&:active {
				background-color: #777;
				color: #eee;
			}
		}
	}

	@media only screen and (max-width: 600px) {
		width: 100%;
		margin-top: 0;

		div.row.tablesome__option {
			display: flex;
			flex-direction: column;
			position: relative;
			.selectContainer.operator {
				margin: 0;
			}
			.selectContainer.column,
			.selectContainer.operator {
				max-width: 100%;
				width: auto;
				margin-bottom: 5px;
			}
			input[type="text"] {
				max-width: 100%;
				width: 100%;
				margin-bottom: 5px;
			}
			.close-icon {
				display: flex;
				align-self: baseline;
				width: 100%;
				height: 30px;
				align-items: center;
				justify-content: center;
				background-color: #eee;
				border: 1px solid #ddd;
				margin: 0;
			}
		}
	}
}