META-INF.resources.css.miller_columns._MillerColumns.scss Maven / Gradle / Ivy

Go to download
@import 'atlas-variables';

.miller-columns-row {
	box-shadow: 0 0 0 1px $gray-400;
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
}

.miller-columns-col {
	margin: 0;
	min-width: 286px;
	padding: 0;

	&:nth-child(-n + 2),
	&:not(:last-child) {
		border-right: 1px solid $gray-400;
	}

	&.drop-target .miller-columns-item:last-child .miller-columns-item-mask {
		box-shadow: inset 0 -2px 0 0 $primary;
	}

	@include media-breakpoint-up(md) {
		height: calc(100vh - 284px);
		min-height: 10rem;
		overflow-y: scroll;
	}
}

.miller-columns-item {
	border-bottom: 1px solid $gray-300;
	cursor: pointer;
	min-height: 4.5rem;
	padding: 1rem 0.25rem 1rem 0.1rem;
	position: relative;

	.miller-columns-item-child-indicator .lexicon-icon-caret-right {
		fill: $gray-500;
	}

	&:not(:first-child) {
		border-top: 1px solid $gray-300;
	}

	&--active {
		background-color: $primary-l3;
		box-shadow: inset 0.25rem 0 0 0 $primary-l0;

		.miller-columns-item-child-indicator .lexicon-icon-caret-right {
			fill: $gray-800;
		}
	}

	&--restricted__icon {
		z-index: 2;
	}

	&.dragging {
		opacity: 0.4;
	}

	&.drop-bottom .miller-columns-item-mask {
		box-shadow: inset 0 -2px 0 0 $primary;
	}

	&.drop-top {
		.miller-columns-item-mask {
			box-shadow: 0 -2px 0 0 $primary;
		}

		&:first-child .miller-columns-item-mask {
			box-shadow: inset 0 2px 0 0 $primary;
		}
	}

	&.drop-middle .miller-columns-item-mask {
		box-shadow: inset 0 0 0 0.125rem $primary;
	}

	.miller-columns-item-actions,
	.miller-columns-item-quick-action {
		padding: 0 0 0 0.25rem;
		z-index: 2;
	}

	.miller-columns-item-drag-handler {
		z-index: 2;

		.btn {
			color: $gray-500;
			cursor: move;
		}

		+ .autofit-col {
			padding-bottom: 6px;
		}
	}

	& .miller-columns-item-mask {
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 1;

		&:focus {
			box-shadow: inset 0 0 0 0.125rem $primary-l1;
			outline: 0;
		}
	}

	.miller-columns-item-child-indicator {
		padding: 0 0 0 0.5rem;
		top: 2px;
	}

	.icon-warning {
		margin-top: 1px;
		z-index: 2;
	}

	.list-group-title > a {
		z-index: 2;
	}

	.list-group-subtitle {
		align-items: center;
	}
}

.show-quick-actions-on-hover
	.miller-columns-item:not(.miller-columns-item--active) {
	&:hover {
		.miller-columns-item-quick-action {
			display: flex;
		}
	}

	.miller-columns-item-quick-action {
		display: none;
	}
}